var FrontPage = function(){
	return {
		index: 0,
		on: true,
		frame: 0,
		margin: 4,
		height: 154,
		slide: null,
		width: 630,
		debug: true,
		repeat: true,
		directions: ['b','r','t','l'],
		slideDuration: 3000,
		transitionDuration: 2800,
		imageDir: 'om/images/',
		init: function(){
			this.mainbody = $('mainbody');
			this.slides = $$('#slideshow img');
			this.slides.each( function(img){
				img.setStyles({
					'position'		:'absolute',
					'left'			:-10000,
					'top'			:-10000,
					'margin'		:0
				});
				img.injectInside(document.body);
			});
			this.mainbody.empty();
			this.mainbody.setStyle('position', 'relative');
			this.drawCanvas();
			this.logo = new Element('img',{
				src: this.imageDir + 'titre_vapofisc.gif',
				title: 'Vapofisc',
				styles: {
					'margin'		:'0px',
					'height'		:'33px',
					'opacity'		:0
				}
			});
			this.bags = [
				{img:'titre1', href:'javascript:void(0)'},
				{img:'titre2', href:'javascript:void(0)'},	
				{img:'titre3', href:'javascript:void(0)'},	
				{img:'titre4', href:'javascript:void(0)'},	
				{img:'titre5', href:'javascript:void(0)'}
			];
			this.bags.each( function(bag,k){
				this.bags[k].el = new Element('img',{
					src: this.imageDir + bag.img + '.jpg'
				});
			}, this );
		},
		start: function(){
			var go = function(){
				this.fadeIn().addEvent('onComplete', this.firstSlide.bind(this));				
			};
			if( window.console ){
					console.log( this.holder );
			}
			//this.holder.removeClass.delay(1100,this.holder,['loading']);
			go.delay(1200,this);
		},
		drawCanvas: function(){
			this.holder = new Element('div', {
				styles: {
					'position'		:'relative',
					'height'		:'154px'
				}
			}).injectInside(this.mainbody).addClass('loading');
			this.canvas = new Element('div', {
				styles: {
//					'background'	:'#e8e6d1',
					'background'	:'url(om/bg.jpg)',
					'position'		:'absolute',
					'top'			:'0px',
					'opacity'		:'0',
					'overflow'		:'hidden',
					'left'			:'0px',
					'width'			:'0px',
					'height'		:'0px',
					'border'		:'0px solid #ffffff',
					'z-index'		:'0'
				}
			}).injectInside(this.mainbody);
			
			if( window.ie6 ){
				this.canvas.setStyle('margin-left', '-28px');
			}
			
			this.mover = new Element('div', {
				styles: {
					'position'		:'absolute',
					'top'			:'0px',
					'left'			:'0px'
				}
			}).injectInside( this.canvas );
		},
		fadeIn: function(){
			this.canvas.setStyle('opacity',1);
			return this.canvas.effects({duration:1000, transition:Fx.Transitions.Expo.easeOut})
				.start({
					'height'		:[0,this.height],
					'width'			:[0,this.width],
					'top'			:[this.height/2, 0],
					'left'			:[this.width/2, 2],
					'opacity'		:[0,1]
				});
		},
		firstSlide: function(){
			if( this.slides < 2 ){
				return;
			}
			var size = this.slides[this.index].getSize().size;
			var styles = {opacity: [0,1]};
			this.slide = this.slides[this.index];
			this.slide.setStyles({
				left: -( ( size.x - this.width ) / 2 ),
				top: -( ( size.y - this.height ) / 2 )
			});
			this.slide.setStyle('opacity',0);
			this.slide.injectInside( this.mover );
			this.slide.effects({ duration: this.transitionDuration, transition:Fx.Transitions.Expo.easeOut})
				.start(styles).addEvent('onComplete', function(){
					this.canvas.setStyle('background','#ffffff');
					this.transition.delay(this.slideDuration,this);
				}.bind(this));
			this.writeText();
			this.increment();
		},
		
		finish: function(){
			this.whiteCanvas = new Element('div',{
				styles: {
					'position'			:'absolute',
					'background'		:'#DEE1E3',
					'z-index'			:'3',
					'top'				:0,
					'left'				:0,
					'text-align'		:'center',
					'width'				:this.width,
					'height'			:this.height,
					'opacity'			:0
				}
			}).injectInside(this.canvas);
			this.whiteCanvas.effects({duration:1500,transition:Fx.Transitions.Expo.easeOut})
				.start({opacity:[0,1]}).addEvent('onComplete', function(){
					this.logo.injectInside( this.whiteCanvas );
					this.logo.effects({duration: 800,transition:Fx.Transitions.Expo.easeIn})
						.start({opacity:[0,1]}).addEvent('onComplete', function(){
							var count = 1;
							this.bags.each( function(bag){
								var div = new Element('div', {
									styles: {
										'text-align'	:'center',
										'width'			:'125px',
										'height'		:'187px',
										'margin-left'	:'1px',
										'float'			:'left',
										'opacity'		:0,
										'position'		:'relative'
									}
								}).injectInside( this.whiteCanvas );
								var a = new Element('a',{
									href: bag.href,
									style: {
										'top'			:0,
										'position'		:'relative',
										'display'		:'block'
									
									}
								}).injectInside( div );
								bag.el.injectInside( a );
								var fx = div.effects({duration:500,transition:Fx.Transitions.Expo.easeIn});
								fx.start.delay(500*count,fx,[{opacity:[0,1]}]);
								count++;
							}, this );
							var tag = new Element("div", {
								styles: {
									'opacity'			:0,
									'text-align'		:'center',
									'font-size'			:'16px',
									'font-family'		:'Trebuchet MS, Tahoma, Verdana, sans',
									'color'				:'#003300',
									'clear'				:'both'
								}
							})
							.setHTML('You do not have to be an environmentalist to care about our environment.')
							.injectInside( this.whiteCanvas );
							var fx = tag.effects({duration:500,transition:Fx.Transitions.Expo.easeIn});
							fx.start.delay(500*count,fx,[{opacity:[0,1]}]);
						}.bind(this));
				}.bind(this) );
		},
		
		increment: function(){
			this.frame++;
			this.last = this.index;
			this.index++;
			if( this.index == this.slides.length ){
				this.index = 0;
			}
		},
		
		transition: function(){
			var lastSlide = this.slides[this.last];
			this.slide = this.slides[this.index];
			
			var direction = this._getAttr('tran');
			if( !direction || !this.directions.contains( direction ) ){
				direction = this.directions[$random(0,this.directions.length-1)];
			}
			this.slide.setStyle('display','block');
			var pos = this.mover.getPosition();
			var lastSize = lastSlide.getSize().size;
			var size = this.slide.getSize().size;
			
			var v = (direction == 't' || direction == 'b');
			var neg = (direction =='t' || direction == 'l');
			
			var newPos = {};
			
			newPos[v?'top':'left'] =  lastSlide.getStyle(v?'top':'left').toInt() + ((neg?-1:1)*( lastSize[v?'y':'x'] + this.margin));
			newPos[v?'left':'top'] = lastSlide.getStyle(v?'left':'top').toInt() + (( size[v?'x':'y'] - lastSize[v?'x':'y'] ) / 2);
			
			this.slide.setStyles({
				top: newPos.top,
				left: newPos.left
			});
			lastSlide.setStyle.delay( 5000, lastSlide, ['display','none'] );
			this.slide.injectInside( this.mover );
			var newTop = newPos.top + (( size.y - this.height ) / 2);
			var newLeft = newPos.left + (( size.x - this.width ) / 2);
			
			this.writeText();
			
			if( !this.scroller ){
				this.scroller = this.mover.effects({duration: this.transitionDuration, transition: Fx.Transitions.Expo.easeOut});
			}
			this.scroller.start({left: 0 - newLeft,top: 0 - newTop});
			this.increment();
			if( this.index != 0){
				this.transition.delay( this.slideDuration+this.transitionDuration, this );
			}else{
				this.finish.delay( this.slideDuration+this.transitionDuration, this );
			}
		},
		
		writeText: function(){
			
			var txt = this.slide.title;
			if(!txt || txt == ''){
				return;
			}
			var color = new Color('#' + (this._getAttr('color') || 'ffffff') );
			var pos = this._getAttr('text');
			
			var textSize = (this._getAttr('size') || '19') + 'px';
			
			var dropShadow = this._getAttr('shadow');
			
			if(!['tl','tr','bl','br','tc','bc'].contains( pos ) ){
				pos = 'tr';
			}
			
			var p ={};
			p.y = pos.test(/t/) ? 'top' : 'bottom';
			p.x = pos.test(/l/) ? 'left' : (pos.test(/c/) ? 'center' : 'right');
			
			var text = new Element('h2',{
				styles:{
					'margin'		:'0px',
					'font-size'		:textSize,
					'font-weight'	:'bold',
					'font-family'	:'Trebuchet MS, Tahoma, Verdana, sans',
					'position'		:'absolute',
					'color'			:color,
					'width'			:'100%',
					'opacity'		:0
					
				}
			}).injectInside(this.canvas).setStyle(p.y,0).setStyle('text-align',p.x);
			if(dropShadow ){
				var ds = new Element('span', {
					styles:{
						'padding'	:'10px',
						'display'	:'block'
					}
				}).setHTML(txt).injectInside( new Element('div',{
					styles:{
						'display'		:'block',
						'width'			:'100%',
						'font-size'		:textSize,
						'font-weight'	:'bold',
						'font-family'	:'Trebuchet MS, Tahoma, Verdana, sans',
						'position'		:'absolute',
						'top'			:'2px',
						'left'			:'2px',
						'color'			: color.invert(),
						'opacity'		:.7,
						'z-index'		:1
					}
				}).injectInside( text ) );
			}
			var actualText = new Element('span',{
				styles: {
					'position'		:'relative',
					'display'		:'block',
					'padding'		:'10px',
					'z-index'		:'2'
				}
			}).setHTML(txt).injectInside(text);
			
			var s = function(){
				var change = {};
				change[p.y] = [- (text.getSize().size.y) ,0];
				text.effects({duration:1000,transition:Fx.Transitions.Expo.easeOut})
					.start(change);
				text.setStyle.delay(20,text,['opacity',1]);
			};
			
			var h = function(){
				var change = {};
				change[p.y] = [0,- (text.getSize().size.y) ];
				text.effects({duration:1000,transition:Fx.Transitions.Expo.easeOut})
					.start(change);
			};
			s.delay(1500);
			h.delay(this.transitionDuration + this.slideDuration - 500);
			text.remove.delay(this.transitionDuration + this.slideDuration,text);
		},
		
		_getAttr: function(name){
			if( !this.slide ){
				return false;
			}
			var matches = this.slide.className.match( new RegExp( 'ss\\-'+name+'\\-(\\w+)' ) );
			if( matches ){
				return matches[1];
			}
			return false;
		}
	}
}();
window.addEvent('domready', FrontPage.init.bind( FrontPage) );
window.addEvent('load', FrontPage.start.bind( FrontPage ) );