// JavaScript Document

var PopImage = Class.create();

PopImage.prototype = {
	
	listPops:$H(),
	popCourant : new String,
	z_index: 1000,
	
		
	initialize: function(){
	//***************************************************************//	
	//Initialise le lecteur de fiche
		//initialisation du nombre de vignettes
		var nbThumb = 0;
		//pour chaque vignette trouvée...
		Element.getElementsByClassName('body', 'pop_js').each( 
			function(e){	
							//On pose un ecouteur, un attribut un ID, on recupere le chemin de la grande photo
							Event.observe(e, 'click', demare, false);
							var thumbId = 'thumb'+nbThumb;
							e.setAttribute('id', thumbId);
							Element.setStyle(e, {cursor:'pointer'});
							var grandePhoto = e.getAttribute('src').toString().sub(/thumbs/, 'grandes');
							//On crée un obj conteneur pour chaque vignette
							var objConteneur = { idConteneur:'conteneur'+nbThumb, photo:grandePhoto, coeff:1, deltaX:0, deltaY:0 }; 
							PopImage.prototype.listPops[thumbId] = $H(objConteneur);
							//on precharge la grande photo
							PopImage.prototype.preload(grandePhoto);
							//on construit le conteneur
							PopImage.prototype.constructConteneurPhoto('conteneur'+nbThumb, e.up(), thumbId);
							nbThumb += 1;
						}
		);
	
	},
	
	constructConteneurPhoto : function (idConteneur, cadreThumb, idThumb) {
	//construction du conteneur contenant les grandes photos	
		//creation du code html du conteneur
		var conteneur = document.createElement('div');
		conteneur.setAttribute('id', idConteneur);
		Element.addClassName(conteneur, 'grande');
		Element.setStyle(conteneur, {visibility: 'hidden',	position:'absolute'});
		
		var photo = document.createElement('img');
		Element.setStyle(photo, {display: 'block'});
		
		conteneur.appendChild(photo);
		$(cadreThumb).insertBefore(conteneur, $(idThumb));	
	},
	
	preload : function(lienImg){
	//***************************************************************//
	//preload une image	
		var pre = new Image;
		pre.src = lienImg;
	},
	
	loadImage : function(idThumb){
	//***************************************************************//
	//load une image
	
		//affiche loading
		//this.afficheLoading();
		
		//sauvegarde de la position sous ie6
		var gauche = $(popImage.listPops[idThumb].idConteneur).offsetLeft;
		var droite = $(popImage.listPops[idThumb].idConteneur).offsetTop;
		
		//chargement de l'image
		imgPreloader = new Image();
		
		//Quand l'image est chargée...
		imgPreloader.onload=function(){
			//on place l'image dans son conteneur
			$(popImage.listPops[idThumb].idConteneur).down('img').src = this.src;
			//calcul du coeff de redimmentionnement
			popImage.calculCoef(idThumb);
			//positionnement
			popImage.listPops[idThumb].deltaX = popImage.positionX(idThumb, gauche);
			popImage.listPops[idThumb].deltaY = popImage.positionY(idThumb, droite);
			//redimentionnement
			popImage.redimImage(idThumb);
			//effet affichage
			popImage.togglePop(idThumb);
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}
		
		imgPreloader.src = popImage.listPops[idThumb].photo;
	},
	
	
	calculCoef : function(idThumb){
	//***************************************************************//
	//calcul le coeff de redimmentionnement
		popImage.listPops[idThumb].coeff = (Element.getDimensions(idThumb).width ) / (Element.down(popImage.listPops[idThumb].idConteneur,'img').getDimensions().width );
	},
	
	
	redimImage : function(idThumb){
	//***************************************************************//
	//redimmentione le conteneur à la taille du thumbnail
		Element.setStyle($(popImage.listPops[idThumb].idConteneur).down('img'), { 
													height: Element.getDimensions(idThumb).height+'px', 
													width: Element.getDimensions(idThumb).width +'px'});
	},
	
	
	positionX : function(idThumb, pX){
	//***************************************************************//
	//calcul de la position de la grande photo
		//(re)positionnement de la grande photo pour ie6
		Element.setStyle($(popImage.listPops[idThumb].idConteneur), { left: pX});
		//calcul du delta X
		var contDim = Element.down(popImage.listPops[idThumb].idConteneur,'img').getDimensions();
		var gdX = (675 - (contDim.width+6))/2 + 60;
		return (gdX - pX);
	},
	
	positionY : function(idThumb, pY){
	//***************************************************************//
	//calcul de la position de la grande photo
		//(re)positionnement de la grande photo pour ie6
		Element.setStyle($(popImage.listPops[idThumb].idConteneur), { top: pY});
		//calcul du delta Y
		var contDim = Element.down(popImage.listPops[idThumb].idConteneur,'img').getDimensions();
		var gdY = ($('thumbs').offsetTop + Element.getHeight($('thumbs'))/2 - (contDim.height/2));
		return (gdY - pY);
	},
	
	ecoutePop : function(conteneur){
	//***************************************************************//
	//Ecoute la grande photo	
		Event.observe(conteneur, 'click', popImage.fermePop, false);
	},	
	
	stopEcoutePop : function(conteneur){
	//***************************************************************//
	//Ecoute la grande photo	
		Event.stopObserving(conteneur, 'click', popImage.fermePop, false);
	},	
	
	ouvrePop : function(idThumb){
	//***************************************************************//
	//Ouvre le Pop
		//alert('ouvrePop');
		var idCont = popImage.listPops[idThumb].idConteneur;
		var coeff = popImage.listPops[idThumb].coeff;
		var dX = popImage.listPops[idThumb].deltaX;
		var dY = popImage.listPops[idThumb].deltaY;
		
		//popImage.z_index;
		
		Element.setStyle($(idCont), {visibility: 'visible', zIndex: popImage.z_index+=1 });
		Element.setStyle($(idThumb), {visibility: 'hidden' });
		Element.getElementsByClassName('body', 'pop_js').each( 
			function(e){	
							//On ote l'ecouteur
							Event.stopObserving(e, 'click', demare, false);
			});
		
		new Effect.Parallel([
			new Effect.Scale(
								$(idCont).down('img'),
								100/coeff, 
								{	
									sync: true, 
									scaleFromCenter: true, 
									scaleFrom: 100 
																
								}),
			new Effect.Move(
								$(idCont),
								{	
									sync:true,
									x: dX, 
									y: dY, 
									mode:'relative'																										
								})
			], {
					duration:1,
					afterFinish: function(effet)
						{
							popImage.ecoutePop((effet.effects[0].element).up('div'));
							//nouveau popCourant
							popImage.popCourant = idThumb;
							Element.getElementsByClassName('body', 'pop_js').each( 
								function(e){	
									//On pose un ecouteur
									Event.observe(e, 'click', demare, false);
								});
						}
		});
	
	},
	
	
	fermePop : function(idThumb){
	//***************************************************************//
	//ferme le Pop
		var idCont = popImage.listPops[popImage.popCourant].idConteneur;
		var coeff = popImage.listPops[popImage.popCourant].coeff;
		var dX = - popImage.listPops[popImage.popCourant].deltaX;
		var dY = - popImage.listPops[popImage.popCourant].deltaY;
		var mini = popImage.listPops[popImage.popCourant].deltaY;
		
		new Effect.Parallel([
			new Effect.Scale(
								$(idCont).down('img'),
								100*coeff, 
								{	
									sync: true, 
									scaleFromCenter: true, 
									scaleFrom: 100
																
								}),
			new Effect.Move(
								$(idCont),
								{	
									sync:true,
									x: dX, 
									y: dY, 
									mode:'relative'																										
								})
			], {
					duration:0.5,
					afterFinish: function(effet)
						{	
							Element.setStyle((effet.effects[0].element), {width:  Element.getDimensions($(popImage.popCourant)).width+'px', height:  Element.getDimensions($(popImage.popCourant)).height+'px'});
							popImage.stopEcoutePop((effet.effects[0].element).up('div'));
							Element.setStyle((effet.effects[0].element).up('div'), {visibility:'hidden'});
							Element.setStyle($(popImage.popCourant), {visibility:'visible'});
							//raz du popCourant
							popImage.popCourant = "";
						}
		});
	
	},
	
	
	togglePop : function(idThumb){
	//***************************************************************//	
	//masque le pop up ouvert(s'il existe) et affiche le nouveau pop up
		
		//on arrete d'observer les vignettes durant les effets
		//popImage.stopEcoute();
		
		if(popImage.popCourant != ""){
			popImage.fermePop(idThumb);
		}
		popImage.ouvrePop(idThumb);
					
	
	},
	
		

	start : function(e){
	//***************************************************************//	
	//lance le pop up
			var idThumb = e.getAttribute('id');
			if(popImage.listPops[idThumb].coeff == 1){
				popImage.loadImage(idThumb);
			}else{
				popImage.togglePop(idThumb);
			}
			
			
	}
		
	

}// fin de l'objet popImage
// -----------------------------------------------------------------------------------//


function demare (e){
//lance le lecteur de fiche
	Event.stop(e);
	popImage.start(Event.element(e));
}

function initialisation(){
//lance l'initialisation de la gallerie
	//on instantie la gallerie
	popImage = new PopImage;
}


//on lance l'initialisation du JS des que la page s'est chargée
Event.observe(window, 'load', initialisation, false);