//Fonction pour centraliser les réglages en hauteur des pans
function panHeight(elName){
	switch (elName) {
		case "pan2": return -80;
		case "pan3": return -250;
		case "pan4": return -225;
		case "pan5": return -396;
		case "pan6": return -280;
		case "pan7": return -350;
	}
}
function panHeightHidden(elName){
	switch (elName) {
		case "pan2": return -911;
		case "pan3": return -844;
		case "pan4": return -999;
		case "pan5": return -923;
		case "pan6": return -1200;
		case "pan7": return -745;
	}
}

//Fonction recursive pour afficher/cacher alternativement une image
function LaunchFlash(state){
	if (state)
	{
		$('flash2').set('tween', {duration: 'short'});
		$('flash2').tween('opacity',0.1);
		setTimeout('LaunchFlash(0)',1000);
	}else{
		$('flash2').set('tween', {duration: 'long'});
		$('flash2').tween('opacity',1);
		setTimeout('LaunchFlash(1)',2000);
	}
}

//Les petits mouvements des pans
function LaunchSmallMoves(fx){
	smallMove = fx.start('top',Math.round(panHeight(fx.id)+3+Math.random()*9,0)).chain(function(){fx.start('top',panHeight(fx.id));});
	fx.timeout = setTimeout('LaunchSmallMoves('+fx.id+')',(2000+Math.random()*6500));
}



function InitPans(pan2,pan3,pan4,pan5){

	// Init puis descente des pan les uns après les autres
	panChain = pan4.start('top',panHeight('pan4')).chain(function(){
		pan5.start('top',panHeight('pan5')).chain(function(){
			pan3.start('top',panHeight('pan3')).chain(function(){
				pan2.start('top',panHeight('pan2')).chain(function(){
					// On refait les événements mouseenter
					$$('.menuitem .movableimg').each(function(el){
						el.addEvent('mouseenter',function(el){
							this.getParent('div').tween('top',panHeight(this.getParent('div').get('id'))+20);
						})
						el.addEvent('mousemove',function(el){
							this.getParent('div').tween('top',panHeight(this.getParent('div').get('id'))+20);
						})
						el.addEvent('mouseleave',function(el){
							this.getParent('div').tween('top',panHeight(this.getParent('div').get('id')));
						})
					})
					mode=0;
				})
			})
		})
	});

	//Relance des petits mouvements
//	pan2.timeout=setTimeout('LaunchSmallMoves(pan2)',(1000+Math.random()*6000));
//	pan3.timeout=setTimeout('LaunchSmallMoves(pan3)',(1300+Math.random()*6500));
//	pan5.timeout=setTimeout('LaunchSmallMoves(pan5)',(1700+Math.random()*7000));

}

function moveit(refelId,elId,xEl,yEl,xdec,ydec,x,y,Rmax){
		xRef = $(refelId).offsetLeft;
		yRef = $(refelId).offsetTop;
		xCenter = 2*xRef+xEl+xdec;
		yCenter = yRef+yEl+ydec;
		Xv = x-xCenter;
		Yv = y-yCenter;
		R = Math.sqrt((Xv*Xv)+(Yv*Yv));
		if (R<Rmax){
			$(elId).setStyle('left',x-xdec-2*xRef);
			$(elId).setStyle('top',y-ydec-yRef);
		}else{
			$(elId).setStyle('left',2*xRef+xEl+Math.round(((x-xCenter)*Rmax/R)-2*xRef,0));
			$(elId).setStyle('top',yRef+yEl+Math.round(((y-yCenter)*Rmax/R)-yRef,0));
		}
//		$('log').innerHTML = "x:" + Math.round(((x*Rmax/R)+xdec+xEl),0) + " y:" + Math.round(((y*Rmax/R)-ydec+yEl),0); 
//		$('log').innerHTML = Math.round(R,0); 
}

function drawLine(x1,y1,x2,y2,color,divId) 
{ 
	//on calcule la longueur du segment 
	var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); 

	//stepX, stepY (distance entre deux points de pointillés); 
	var stepX=(x2-x1)/lg; 
	var stepY=(y2-y1)/lg; 
	
	//on recreer un point apres l'autre 
	var strNewPoints=''; 
	for(var i=1 ; i<lg ; i++) 
	{	strNewPoints+='<div style="font-size:1px; width:1px; heigth:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; ">&nbsp;</div>';  } 

	//pointe de depart 
	strNewPoints+='<div style="font-size:1px; width:3px; heigth:3px; background-color:'+color+'; position:absolute; top:'+(y1-1)+'px; left:'+(x1-1)+'px; ">&nbsp;</div>'; 

	//point d'arrive 
	strNewPoints+='<div style="font-size:1px; width:3px; heigth:3px; background-color:'+color+'; position:absolute; top:'+(y2-1)+'px; left:'+(x2-1)+'px; ">&nbsp;</div>'; 

	//on suprimme tous les points actuels et on mets les nouveaux div en place 
	//obj container des points 
	$(divId).innerHTML=strNewPoints; 
} 


window.addEvent('domready', function(){


	// Mouvements des yeux
	$('body').addEvent('mousemove', function(event){	
		moveit('pan4','oeildroit', 55,578,7,7,event.client.x,event.client.y,12);
		moveit('pan4','oeilgauche',94,582,7,7,event.client.x,event.client.y,3);
		
//		drawLine(500,0,event.client.x,event.client.y,"#fff",'userRope')
	});

	// Définition des effets dynamiques
//{duration:250,transition: Fx.Transitions.Bounce.easeOut}
//{duration:250,transition: Fx.Transitions.Elastic.easeOut}
	window.pan2 = new Fx.Tween('pan2',{duration:700,transition: Fx.Transitions.Bounce.easeOut});	
	pan2.id = 'pan2';
	pan2.set('top',panHeightHidden('pan2'));
	window.pan3 = new Fx.Tween('pan3',{duration:700,transition: Fx.Transitions.Bounce.easeOut});
	pan3.id = 'pan3';	
	pan3.set('top',panHeightHidden('pan3'));
	window.pan4 = new Fx.Tween('pan4',{duration:700,transition: Fx.Transitions.Bounce.easeOut});
	pan4.id = 'pan4';	
	pan4.set('top',panHeightHidden('pan4'));
	window.pan5 = new Fx.Tween('pan5',{duration:700,transition: Fx.Transitions.Bounce.easeOut});
	pan5.id = 'pan5';	
	pan5.set('top',panHeightHidden('pan5'));
	window.pan6 = new Fx.Tween('pan6',{duration:700,transition: Fx.Transitions.Bounce.easeOut});
	pan6.id = 'pan6';	
	pan6.set('top',panHeightHidden('pan6'));
	window.pan7 = new Fx.Tween('pan7',{duration:700,transition: Fx.Transitions.Bounce.easeOut});
	pan7.id = 'pan7';
	pan7.set('top',panHeightHidden('pan7'));
	
	//Requete de modification du contenu
	var req = new Request({
		onSuccess: function(content) {
			//Inject the new elements into the results div.
			$('pan6_middle').innerHTML = content;
			var myAccordion = new Accordion($$('.togglers'), $$('.elements'), {
				alwaysHide: true
			});
		},
		//Our request will most likely succeed, but just in case, we'll add an
		//onFailure method which will let the user know what happened.
		onFailure: function() {
			$('pan6_middle').set('text', 'Une erreur est survenue au chargement.');
		}
	});

	window.panChain = new Chain;
	window.mode = 2;
	
	// Boucle pour chaque élément cliquable
	$$('.movable .movableimg').each(function(el){
			
		// Intialisation des effets
		el.getParent('div').setStyle('top',(-el.getParent('div').getSize().y-50));	
		el.getParent('div').set('tween', {duration: 'short',Transitions: Fx.Transitions.Pow.easeIn});
		
		// Au click
		el.addEvent('click',function(elClick){

			if (mode==2){return;}
			
			
			//Le id séléctioné
			selId = el.getParent('div').getProperty('id');
			
			// Cas de passage de l'accueil vers un contenu
			if(mode==0){
				mode=2;

				//Chargement du contenu associé
				$('pan6_middle').innerHTML='<img src="./images/ajaxloading.gif" /><br />&nbsp;';
				if(selId == "pan2"){
					$('pan6_top').innerHTML = 'Surprises'
					req.send({url:'./setsurprises.php'});
				}
				if(selId == "pan3"){
					$('pan6_top').innerHTML = 'Etude de la Bible';
					req.send({url:'./setbible.php'});
				}
                if(selId == "pan5"){
                    $('pan6_top').innerHTML = 'Activités';
                    req.send({url:'./setactivites.php'});
                }


				// Arret des animations en cours
				clearTimeout(pan2.timeout);
				clearTimeout(pan3.timeout);
				clearTimeout(pan5.timeout);
				panChain.resume;
				pan2.resume;
				pan3.resume;
				pan4.resume;
				pan5.resume;
				pan6.resume;
				pan7.resume;
				
				// On désactive les mouseenter, sauf pour le contenu et le séléctionné
				// on remonte le tout, sauf pour le contenu et le séléctionné
				$$('.pan').each(function(el2){
					el2Id = el2.id;
					if (el2Id != selId && (el2Id == "pan2" || el2Id == "pan3"  || el2Id == "pan4" || el2Id == "pan5"))
					{
						eval(el2Id+".start('top',"+panHeightHidden(el2Id)+")");
					}
				});
				$$('.movable .movableimg').each(function(el2){
					el2Id = el2.getParent('div').getProperty('id');
					if (el2Id != selId && (el2Id == "pan2" || el2Id == "pan3"  || el2Id == "pan4" || el2Id == "pan5"))
					{
						el2.removeEvents('mouseenter');	
						el2.removeEvents('mouseleave');
					}
				});
				
				//On "tire sur le fil" 
				this.getParent('div').tween('top',panHeight(this.getParent('div').get('id'))+50);

				//On descend plus le pan dans certains cas
				if (selId == 'pan5'){
					this.removeEvents('mouseenter');
					this.removeEvents('mouseleave');
					this.removeEvents('mousemove');
					this.getParent('div').tween('top',-250);
					this.addEvent('mouseenter',function(el){
						this.getParent('div').tween('top',-220);
					})
					this.addEvent('mouseleave',function(el){
						this.getParent('div').tween('top',-250);
					})
					this.addEvent('mousemove',function(el){
						this.getParent('div').tween('top',-220);
					})
				}

				// On ajuste le left du contenu
				if (selId == 'pan3'){	$('pan6').setStyle('left',420);}
					else{						$('pan6').setStyle('left',37);}

				// Affichage des pan
				pan6.start('top',panHeight('pan6'));
				pan7.start('top',panHeight('pan7'));
				
				$('back').addEvent('mouseenter',function(el){
						this.getParent('div').tween('top',panHeight(this.getParent('div').get('id'))+20);
				});
				$('back').addEvent('mouseleave',function(el){
						this.getParent('div').tween('top',panHeight(this.getParent('div').get('id')));
				});

				mode=1;

			// Cas de passage d'un contenu vers l'accueil
			}else{
				mode=2;
				
				//Désactivation du mouseenter et mouseleave
				$$('.movable .movableimg').each(function(el){
					el.removeEvents('mouseenter');
					el.removeEvents('mouseleave');
					el.removeEvents('mousemove');
				});

				panChain.resume;
				pan2.resume;
				pan3.resume;
				pan4.resume;
				pan5.resume;
				pan6.resume;
				pan7.resume;
				
				//On vire les pans de contenu				
				pan6.start('top',panHeightHidden('pan6'));
				pan7.start('top',panHeightHidden('pan7'));

				//Réinitialisation des pans d'origine
				InitPans(pan2,pan3,pan4,pan5);

			}
		})
	})

	InitPans(pan2,pan3,pan4,pan5);
	LaunchFlash(0);

})