var festiShow = {
	
	init: function(){
	
		this.options = Object.extend({
			thumbsDir : "/min",
			resizeDuration: 400,
			resizeTransition: Fx.Transitions.sineInOut,
			initialWidth: 250,
			initialHeight: 250,
			thumbsHeight: 50,
			scroll: 56,
			noCommentsTxt: "Aucun commentaire disponible pour cette image"
		});
		
		this.images = [];
		
		//Events sur les photos
		$$('#festishow a').each(
			function(el){
				el.setProperty('href','javascript:void(0)');
			}
		);
		$$('#festishow img').each(
			function(el, i){
				el.addEvent('click',function(){this.open(i)}.bind(this));
				var tempSrc = el.getProperty('src');
				var j = tempSrc.length;
				
				while(tempSrc.charAt(j) != '/'){
					j--;
				}
				this.images[i] = tempSrc.substring(0, j-(this.options.thumbsDir.length-1))+tempSrc.substring(j+1, tempSrc.length);
			}.bind(this)
		);
		
		// Events clavier
		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		document.addEvent('keydown', this.eventKeyDown);
		
		this.nbTotalImg = this.images.length;
		this.currentImgId = 0;
			
		
		// Fondu noir
		this.overlay = new Element('div').setProperty('id', 'overlay').injectInside(document.body);
		//this.overlay.addEvent('click',function(){this.close()}.bind(this));
		
		//Cadre
		this.cadre = new Element('div').setProperty('id', 'cadre').setStyles({
			'width': this.options.initialWidth+'px', 
			'height': this.options.initialHeight+'px', 
			'display': 'none',
			'left':((window.getSize().size.x-this.options.initialWidth)/2)+'px',
			'top':((window.getSize().size.y-this.options.initialHeight)/2)+'px'
		}).injectInside(document.body);
		
		//Image
		this.image = new Element('div').setProperty('id', 'image').setStyle('display','none').injectInside(this.cadre);
		
		//Navigation
		this.prevLink = new Element('a').setProperties({
			id: 'prec', 
			href: 'javascript:void(0)'
		}).setStyle('display', 'none').injectInside(this.cadre);
		this.nextLink = this.prevLink.clone().setProperty('id', 'suiv').injectInside(this.cadre);
		this.nextLink.addEvent('click',function(){this.changeImage(this.currentImgId+1)}.bind(this));
		
		this.prevLink.addEvent('click',function(){this.changeImage(this.currentImgId-1)}.bind(this));
		
		this.closeBtn = new Element('a').setProperties({
			'id': 'close', 
			'href': '#'
		}).setStyle('display', 'none').injectInside(document.body).addEvent('click',function(){this.close()}.bind(this));
		
		//Barre de Thumbs
			// Hauteur de la barre
			this.thumbsHeight = (this.options.thumbsHeight*2)+38;
			
		this.thumbs = new Element('div').setProperty('id', 'thumbs').setStyles({
			'display':'none',
			'left':((window.getSize().size.x-760)/2),
			'top':0,
			'width':0,
			'opacity':0
		}).injectInside(document.body);
		
			// Ajout du btn Thumbs precedents
			this.prevThumbs = new Element('a').setProperties({
				id: 'precThumbs', 
				href: 'javascript:void(0)'
			}).injectInside(this.thumbs);
			
			// Ajout du cache qui accueillera le div des thumbs
			this.thumbsCache = new Element('div').setProperty('id', 'thumbsCache').injectInside(this.thumbs);
			// Ajout du div qui accueillera toutes les thumbs
			this.thumbsContent = new Element('div').setProperty('id', 'thumbsContent').setStyles({
				'left':0,
				'top':0 
			}).injectInside(this.thumbsCache);

				// Ajout des thumbs au div thumbsContent
				$$('#festishow img').each(
					function(el, i){
						el.clone().setProperties({
							'width': (el.width*this.options.thumbsHeight)/(el.height),
							'height': this.options.thumbsHeight
						}).setStyles({
							'margin':'2px',
							'border':'1px solid #666666'
						}).injectInside(this.thumbsContent).addEvent('click',function(){
							this.changeImage(i)
						}.bind(this));
						
					}.bind(this)
				);
			this.thumbsCurrent = new Element('div');
			this.thumbsCurrent.setStyles({
				'width':0,
				'height':this.options.thumbsHeight,
				'border':'2px solid orange',
				'position':'absolute',
				'opacity':0,
				'top':0,
				'left':0,
				'display':'none'
			}).injectInside(this.thumbsContent);
			
				
			// Ajout du btn Thumbs suivants 
			this.nextThumbs = this.prevThumbs.clone().setProperty('id', 'suivThumbs').injectInside(this.thumbs);
			// Events Navigation Thumbs
			this.nextThumbs.addEvent('click',function(){this.scrollThumbs(-this.options.scroll)}.bind(this));
			this.prevThumbs.addEvent('click',function(){this.scrollThumbs(this.options.scroll)}.bind(this));
		
			//Ajout du cadre qui montre la photo actuellement regardée
		
		
		// Comments
		this.comments = new Element('div').setProperty('id', 'ftscomments').setStyles({
			'left':'20px',
			'top':'20px',
			'opacity':0
		}).injectInside(document.body);

		// Ensemble des Effets
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			resize: this.cadre.effects({
				duration: this.options.resizeDuration, 
				transition: this.options.resizeTransition,
				onComplete: function(){
					this.set();
				}.bind(this)
			}),
			move: this.cadre.effects({
				duration: this.options.resizeDuration, 
				transition: this.options.resizeTransition
			}),
			moveCloseBtn: this.closeBtn.effects({
				duration: this.options.resizeDuration, 
				transition: Fx.Transitions.Back.easeInOut
			}),
			thumbsDisplay: this.thumbs.effects({
				duration: 800, 
				transition: Fx.Transitions.Back.easeOut,
				onComplete: function(){
					var el = $('thumbsContent').getElements('img')[this.currentImgId];
					this.thumbsCurrent.style.display = '';
					
					this.fx.showCurrentThumbs.start({
						'width':el.getStyle('width'),
						'top':(el.getPosition().y-$('thumbsContent').getPosition().y)+'px',
						'left':(el.getPosition().x-$('thumbsContent').getPosition().x)+'px',
						'opacity':1
					});
				}.bind(this)
			}),
			moveCacheThumbs: this.thumbsContent.effects({
				duration: 400, 
				transition: Fx.Transitions.Back.easeOut
			}),
			showCurrentThumbs:this.thumbsCurrent.effects({
				duration: 600, 
				transition: Fx.Transitions.Back.easeInOut
			}),
			showComments:this.comments.effects({
				duration: 600, 
				transition: Fx.Transitions.sineInOut
			})
		};
		// Div avec les actions possible
		this.action = new Element('div').setProperty('id','action').injectInside(this.overlay);
		new Element('a').setProperty('href','javascript:void(0)').appendText('Fermer la	galerie').addEvent('click',function(){this.close()}.bind(this)).injectInside(this.action);
		new Element('a').setProperty('href','javascript:void(0)').appendText('Afficher / Cacher les miniatures').addEvent('click',function(){this.toggleThumbs()}.bind(this)).injectInside(this.action);

		
		// En cas de move, resize de la fenetre
		window.onscroll=function(){ this.position();}.bind(this);
		
	},
	
	/*
	*	Ecouteurs clavier
	*/
	keyboardListener: function(event){
		// alert(event.keyCode);
		if(this.overlay.style.display == 'none') return false;
		switch (event.keyCode){
			case 67: case 13: 												// C, Enter
				if(this.cadre.style.display == '')
					this.toggleComments();
			break;
			case 88: case 27: this.close(); 								// X,  echap
			break;
			case 37: case 80: 												//Gauche
				if(this.cadre.style.display == '')
					this.changeImage(this.currentImgId-1); 
			break;
			case 39: case 78: 												// Drite
				if(this.cadre.style.display == '')
					this.changeImage(this.currentImgId+1); 
			break; 
			case 84: case 17: 												// T, Ctrl
				if(this.cadre.style.display == '')
					this.toggleThumbs(); 
			break;							
			case 38: 														// Haut
				if(this.cadre.style.display == '')
					this.scrollThumbs(this.options.scroll); 
			break;
			case 40: 														// Bas
				if(this.cadre.style.display == '')
					this.scrollThumbs(-this.options.scroll); 
			break;
		}
	},

	/*
	*	Positionne les elements apres un onscroll
	*/ 
	position: function(){
		if(this.overlay.style.display == 'none') return false;
		this.overlay.setStyles({
			'top': window.getScrollTop()+'px', 
			'height': window.getHeight()+'px'
		});
		this.cadre.style.top = (window.getScrollTop()+50)+'px';
		this.closeBtn.style.top = (window.getScrollTop()+40)+'px';
		this.thumbs.style.top = (window.getScrollTop()+window.getSize().size.y-this.thumbs.getStyle('height').toInt())+'px';
		this.comments.style.top = window.getScrollTop()+'px';
	},
	
	
	/*
	*	Mise en FS d'une photo
	*/
	open: function(i){
		this.currentImgId = i;
		// on recupere le src de l'image grande
		var src = this.images[i];
		
		//position + apparition du fond noir
		window.getScrollTop();
		this.overlay.setStyles({
			'top': window.getScrollTop()+'px', 
			'height': window.getHeight()+'px'
		});
		this.fx.overlay.start(0.8);
		
		//apparition photo
		this.cadre.style.display = '';		
		this.cadre.className = 'loading';
		
		this.currentImg = new Element('img');
		this.currentImg.onload = function(){
			var width 	= this.currentImg.width+20;
			var height 	= this.currentImg.height+20;
			
			this.currentImg.injectInside(this.image);
			
			this.cadre.className = '';
			
			this.fx.resize.start({
				'width':width,
				'height':height
			});
			this.fx.move.start({
				'left':((window.getSize().size.x-width)/2),
				'top':window.getScrollTop()+((window.getSize().size.y-height)/2)
			});
			this.fx.moveCloseBtn.start({
				'left':((window.getSize().size.x-width)/2)+(width-10),
				'top':window.getScrollTop()+((window.getSize().size.y-height)/2)-10
			});
		}.bind(this)
		
		this.currentImg.setProperty('src', src);
		
	},
	
	
	/*
	*	Met tout en place apres le fondu noir
	*	set est apellé apres un fx.resize
	*/
	set: function(){
		this.image.style.display = this.prevLink.style.display = this.nextLink.style.display = this.closeBtn.style.display = '';
		// Comments
		var com = $('thumbsContent').getElements('img')[this.currentImgId].getProperty('alt');
		this.comments.empty();
		if(com != null){
			this.comments.appendText(com);
		}
		else{
			this.comments.appendText(this.options.noCommentsTxt);
		}
	},
	
	
	/*
	*	On change d'image avec prev et suiv
	*/
	changeImage: function(i){
		//On stop les effets
		for (var f in this.fx){ 
			if(	f != 'thumbsDisplay' &&
				f != 'moveCacheThumbs' &&
				f != 'showComments') this.fx[f].stop();
		}
		
		if(i<0) i = this.nbTotalImg-1;
		if(i>this.nbTotalImg-1) i= 0;
		this.currentImgId = (i);
		// on recupere le src de l'image grande
		var src = this.images[i];
		
		this.cadre.className = 'loading';
		this.image.empty();
		
		
		//***** Cadre orange (code a bouger pour faire plus propre)
		var el = $('thumbsContent').getElements('img')[this.currentImgId];
		this.thumbsCurrent.style.display = '';
		
		this.fx.showCurrentThumbs.start({
			'width':el.getStyle('width'),
			'top':(el.getPosition().y-$('thumbsContent').getPosition().y)+'px',
			'left':(el.getPosition().x-$('thumbsContent').getPosition().x)+'px'
		});
		
		
		this.currentImg = new Element('img');
		this.currentImg.onload = function(){
					
			var width 	= (this.currentImg.width+20);
			var height 	= (this.currentImg.height+20);
			
			this.image.style.display = 'none';
			this.currentImg.injectInside(this.image);
		
			this.cadre.className = '';
			
		
			
			this.fx.resize.start({
				'width':width,
				'height':height
			});
			this.fx.move.start({
				'left':((window.getSize().size.x-width)/2),
				'top':window.getScrollTop()+((window.getSize().size.y-height)/2)
			});
			this.fx.moveCloseBtn.start({
				'left':((window.getSize().size.x-width)/2)+(width-10),
				'top':window.getScrollTop()+((window.getSize().size.y-height)/2)-10
			});
			
			
		}.bind(this)
			
		this.currentImg.setProperty('src', src);
		
		

	},
	
	
	/*
	*	Affiche/cache la barre de miniatures
	*/
	toggleThumbs: function(){
		if(this.thumbs.getStyle('opacity') == 0){
			this.thumbs.style.display = '';
			this.fx.thumbsDisplay.start({
				'width':'760px',
				'opacity':0.8,
				'top':(window.getScrollTop()+window.getSize().size.y-this.thumbs.getStyle('height').toInt())+'px'
			});
			
		}
		else{
			this.fx.thumbsDisplay.start({
				'opacity':0
			});
		}
	},
	
	
	/*
	*	Scroller vertical de thumbs
	*/
	scrollThumbs: function(scroll){
		if((this.thumbsContent.style.top.toInt()+scroll) > 0) return false;
		if(-(this.thumbsContent.style.top.toInt()+scroll) > this.thumbsContent.getStyle('height').toInt()) return false;
		
		// Si la barre de thumb est cachée, on l'ouvre
		if(this.thumbs.getStyle('opacity') == 0){
			this.thumbs.style.top = (window.getScrollTop()+window.getSize().size.y-this.thumbs.getStyle('height').toInt())+'px';
			this.thumbs.style.visibility = '';
			this.fx.thumbsDisplay.start({
				'opacity':0.8
			});
			
			
		}
		
		// Scroller
		this.fx.moveCacheThumbs.start({
			'top':(this.thumbsContent.style.top.toInt()+scroll)+'px'
		});
	},
	
	
	/*
	*	Affiche les commentaires d'une image
	*/
	toggleComments: function(){
		if(this.comments.style.opacity == 0){
			this.fx.showComments.start({
				'opacity':0.8
			});
		}
		else{
			this.fx.showComments.start({
				'opacity':0
			});
		}
	},
	
	/*
	*	Fermeture du FS
	*/
	close: function(){
		// On arrete tout les effects
		for (var f in this.fx){ this.fx[f].stop();}
		//Overlay
		this.fx.overlay.start(0);
		//Cadre
		this.cadre.style.display = this.image.style.display = this.thumbsCurrent.style.display = this.closeBtn.style.display ='none';
		//Image
		this.image.empty();
		//Thumbs
		this.fx.thumbsDisplay.start({
			'opacity':0
		});
		this.fx.showComments.start({
			'opacity':0
		});
		return false;
	}
	
};

window.addEvent('domready', function(){ festiShow.init();});