var BGPics = [
				{id: 1, src: "images/accueil-1.jpg", alt: "Croisières aux baleines sur le Saint-Laurent"},
				{id: 2, src: "images/accueil-2.jpg", alt: "La pêche à la truite en pourvoirie"},
				{id: 3, src: "images/accueil-3.jpg", alt: "Le kayak de mer aux Escoumins"},
				{id: 4, src: "images/accueil-4.jpg", alt: "La plongée sous-marine aux Escoumins"},
				{id: 5, src: "images/accueil-5.jpg", alt: "La motoneige en sentiers balisés sur la Côte-Nord"}
			 ];
		
//slideshow class
var SlideShow = new Class({
	_initialized: false,
	_divover: $('over'),
	_thumbs: $$('#menuactivite a'),	
	_bgpics : BGPics,
	_prefixPics: 'imagebg',
	_divbox : null,
	_divbg : null,
	_currentID: 0,
	//_FXTransition: Fx.Transitions.linear,
	_FXTransition: Fx.Transitions.Expo.easeInOut,
	//_FXTransition: Fx.Transitions.Bounce.easeOut,
	//_FXTransition: Fx.Transitions.Elastic.easeOut,
	_timer: 5000,
	_timerFX: 2000, //must be lower than _timer
	_FX : null,
	_FX2 : null,
	
	Initialize: function(){
		if(!this._initialized){
			//create the div with each image on the background
			var html = "";
			var imagebg = $('imagebg');
			
			//create bg
			this._divbg = new Element('div', {
												'id': 'divbg',
												'styles': {
															'position': 'relative',
															'top' : '0px',
															'left' : '0px',
															'overflow': 'hidden',
															'height': imagebg.height,
															'width': imagebg.width
														  }
											 }
									 );
			
			//create box for pics									   
			this._divbox = new Element('div', {
												'id': 'divbox',
												'styles': {
															'position': 'absolute',
															'top' : '0px',
															'left' : '0px',
															'height': imagebg.height,
															'width': (imagebg.width * this._thumbs.length)
														  }
											  }
									 );
			
			//insert a span and img tags for each bgpics
			for(x=0; x<this._bgpics.length;x++){
				span = new Element('span', {
											'styles': {
														'float': 'left',
														'display': 'block'
													  }
										   }
								  );
				img = new Element('img', {
											'id': this._prefixPics + this._bgpics[x].id,
											'src': this._bgpics[x].src,
											'alt': this._bgpics[x].alt,
											'title': this._bgpics[x].alt,
											'styles': {
														'display': 'block',
														'height': imagebg.height,
														'width': imagebg.width
													  }
										  }
								  );
				span.adopt(img);
				this._divbox.adopt(span);
			}
			//insert divbox in divbg
			this._divbg.adopt(this._divbox);
			//insert divbg at the same place of imagebg
			imagebg.getParent().adopt(this._divbg);
			//hide imagebg
			imagebg.set('styles', {
									'display': 'none'
								  }
					   );
					   
			this._initialized = true;
		}
	},
	
	Start: function(){
		if(this._initialized){
			this.DoSlide.periodical(this._timer, this);
		}
	},
	
	DoSlide: function(){
		this._currentID++;
		if (this._currentID == this._thumbs.length){
			this._currentID = 0;
		}
		//move divover over thumbs (could be slide too (Morph))
		this._FX = new Fx.Move(this._divover,
										{
											relativeTo: this._thumbs[this._currentID],
											position: 'upperLeft',
											transition: this._FXTransition,
											duration: this._timerFX
										}
									  ).start();
		//slide head pic
		/*this._FX2 = new Fx.Morph(this._divbox,
											{
												transition: this._FXTransition,
												duration: (this._currentID == 0)?0:this._timerFX
											}
										).start(
												{
													'left': -(this._currentID * (parseInt(this._divbox.getStyle('width')) / this._thumbs.length))
												}
											   );*/
		this._FX2 = new Fx.Morph(this._divbox,
											{
												transition: this._FXTransition,
												duration: this._timerFX
											}
										).start(
												{
													//'left': -(this._currentID * (parseInt(this._divbox.getStyle('width')) / this._thumbs.length))
													'left': -((parseInt(this._divbox.getStyle('width')) / this._thumbs.length))
												}
											   ).chain(function(){
													//move the first pic to the end of list
													//remove the left property of the box
													var divbox = $("divbox");
													var divbg = $("divbg");

													divbox.getFirst().inject(divbox);
													divbox.setStyle('left', parseInt(divbox.getStyle('left')) + parseInt(divbg.getStyle('width')));
											   });
	}
});