/**********************************************************************************************************/
		/**********************************************************************************************************/
		/****************** Script réalisé par Cédric Carmié - contact@c2p1.com - www.c2p1.com ********************/
		/***************************** Toute copie, même partielle, est interdite *********************************/
		/****************************** "Propriété intellectuelle tu connais ?" ***********************************/
		/**********************************************************************************************************/
		/**********************************************************************************************************/
		
		/**********************************************************************************************************/
		/******************************************* ça on peut le modifier : *************************************/
		/**********************************************************************************************************/
		var nombre_de_cadres = 4;
		var position_de_depart_en_y = 20; // Par défault on fait un décalage de 20 pixels par rapport au haut
		var decalage_entre_div = 10; // Par défault le décalage entre les div est de 20 pixels
		var hauteur = 260; // Correspond à la hauteur des div
		var largeur = 170; // Correspond à la largeur des div
		
		/**********************************************************************************************************/
		/******************************************* après, vaut mieux pas !! *************************************/
		/**********************************************************************************************************/
	
		var calque = null;
		var cadre_en_cour = null; // Cette variable contient le numéro du cadre qui est saisit
		var objet_cache; // On se sert de cet objet pour le cacher ou le rendre visible
		var x,y;
		var dx;
		var dy;
		var valeur_opacite = 100; // Au début, l'opacité vaut 100
		var opacite_du_contenu;
		var nombre_de_cadres_actifs = nombre_de_cadres;

		// On crée un tableau qui nous permets de gérer les positions des cadres (exemple : "le cadre N°1 est à l'emplacement N°3"
		// Ce tableau nous permets de stocker des NUMEROS DE CADRES
		var position = new Array; // Attention, pour plus de clareté, le tableau commence à la valeur 1 !
		
		for (var pos=1; pos<=nombre_de_cadres; pos++) // On remplit le tableau...
		{
			position[pos] = pos; 	// A la position 1, il y a le cadre 1, a la position 2, il y a le calque N°X,...
									// Plus tard, s'il n'y a plus rien à une position, on remplacera par NULL
		}
		
		// On crée un tableau qui nous permets de voir à quelle position se trouvent les cadres
		// Ce tableau nous permets de stocker des NUMEROS DE POSITIONS
		var calque_num = new Array; // Attention, pour plus de clareté, le tableau commence à la valeur 1 !
		
		for (var pos=1; pos<=nombre_de_cadres; pos++) // On remplit le tableau...
		{
			calque_num[pos] = pos; 	// Le calque numéro x se trouve à la valeur renvoyée par le tableau
		}
		
		var coord_x = new Array; 	// On stocke dans un tableau toute les coordonnée en x des emplacements
									// Ce tableau peut se lire de la façon suivante :
									// coord_x[1] renvoie les coordonnées du cadre N°1, etc...
		
		for (var i=1;i<=nombre_de_cadres; i++) // On remplit le tableau...
		{
			if (i==1) 
			{
				coord_x[i] = decalage_entre_div;
			}
			
			else
			{
				var temp = i;
				temp--;
				coord_x[i] = decalage_entre_div+(largeur+decalage_entre_div)*temp; // on ajoute le décalage du début à chaque fois
			}
		}
		
		var nombre_de_contenu_par_cadre = 3;
		var contenu = new Array; // Attention, pour plus de clareté, le tableau commence à la valeur 1 !
		
		for (var pos=1; pos<=nombre_de_cadres; pos++) // On remplit le tableau...
		{
			contenu[pos] = 1; // Le contenu du cadre N°pos, c'est le calque 1
		}
		
		// On appelle le changement de contenu à interval régulier :
		setTimeout("change_contenu(4)",6500);
				
		/**********************************************************************************************************/
		/********************************************** Les fonctions : *******************************************/
		/**********************************************************************************************************/
		
		function selectionne(objet, event, position_en_x, position_en_y) // Fonction qui permets d'initialiser le déplacement
		{
			cadre_en_cour = objet; // On récupère le numéro du cadre qui est sélectionné
			
			objet = "cadre"+objet;
			objet_cache = document.getElementById(objet+"_cache");
			objet = document.getElementById(objet);
		
			calque = objet;
			
			calque.style.zIndex = 2; // Pour détecter que la souris passe sur un calque, le calque en cour doit avoir un z-index inférieur à celui des autres (inférieur à 3, mais supérieur à 1)
						
			objet_cache.style.visibility = "visible"; // On rend visible le calque de derrière
			opacite(objet); // On change l'opacité
			
			// Début calcul
				event.returnValue = false;
			
				if(event.preventDefault)
				{
					event.preventDefault();
				}
					
				calque.style.position = 'relative';
				
				var calque_temp = calque;
					
				x = event.clientX; // Coordonnées en x de la souris
				y = event.clientY; // Coordonnées en y de la souris
				
				dx = x-calque_temp.offsetLeft-document.getElementById("conteneur").offsetLeft;
				dy = y-calque_temp.offsetTop-document.getElementById("conteneur").offsetTop;
			// Fin calcul
		}
		
		function bouge(event) // Cette fonction est appellée grace aux nouveaux évènements : dès que la souris bouge !
		{			
			if (calque) // Le calque doit être différent de "null"
			{
				var x = event.clientX;
				var y = event.clientY;
						
				//On applique le décalage
				x = x-dx-document.getElementById("conteneur").offsetLeft;
				y = y-dy-document.getElementById("conteneur").offsetTop;
				
				calque.style.left = x + 'px'; // Lorsque la souris se déplace, le calque la suit en x
    			calque.style.top = y + 'px'; // Lorsque la souris se déplace, le calque la suit en y
			}
		}
		
		function arret(event) // Cette fonction est appellée grace aux nouveaux évènements : dès que la souris est relâchée !
		{
			if (calque) // Le calque doit être différent de "null"
			{
				calque.style.position = 'absolute';
				valeur_opacite = 50; // On remets l'opacité à 50 pour éviter les bugs
				opacite(calque); // On remets l'opacité du calque à 100%
				
				calque.style.top = position_de_depart_en_y + 'px'; // On remet la position de départ
				calque.style.left = coord_x[cadre_en_cour] + 'px'; // On remet la position de départ
				
				objet_cache.style.visibility = "hidden"; // On cache le calque de derrière
				
				calque.style.zIndex = 3; // On remets le z-index à 3
				
				calque = null; // On vide la valeur du calque
				cadre_en_cour = null;
			}
		}
		
		// On ajoute de nouveaux évènements
		function nouvel_evenement(doc,event,fonction) // On passe en paramètre le calque à déplacer, la position de la souris et la fonction
		{
			if (doc.attachEvent)
			{
				doc.attachEvent('on' + event,fonction);
			}
			else
			{
				doc.addEventListener(event,fonction,true);
			}
		}
		
		nouvel_evenement(document,'mousemove',bouge); // Tant que la souris bouge, on appelle la fonction bouge
		nouvel_evenement(document,'mouseup',arret); // Quand la souris est relachée, on arrete le déplacement
		
		function opacite(le_calque_en_opacite) // Cette fonction permets de changer l'opacité du calque sélectionné
		 {
			if (valeur_opacite == 100) // Si l'opacité du calque vaut 100, alors on la passe à 50
			{
				le_calque_en_opacite.style.opacity = (50 / 100);
				le_calque_en_opacite.style.MozOpacity = (50 / 100);
				le_calque_en_opacite.style.KhtmlOpacity = (50 / 100);
				le_calque_en_opacite.style.filter = "alpha(opacity=" + 50 + ")";
				valeur_opacite = 50; // On remets la valeur à 50
			}
			
			else if (valeur_opacite == 50) // Sinon, l'opacité du calque vaut 50, donc on la passe à 100
			{
				le_calque_en_opacite.style.opacity = (100 / 100);
				le_calque_en_opacite.style.MozOpacity = (100 / 100);
				le_calque_en_opacite.style.KhtmlOpacity = (100 / 100);
				le_calque_en_opacite.style.filter = "alpha(opacity=" + 100 + ")";
				valeur_opacite = 100; // On remets la valeur à 100
			}
		 }
		 
		 function supprimer(le_calque_a_supprimer) // Cette fonction permets de supprimer un cadre dont l'identifiant du calque est passé en paramètre
		 {
		 	nom = document.getElementById("cadre"+le_calque_a_supprimer);
			var referent = document.getElementById("conteneur");		
			referent.removeChild(nom); // On supprime le cadre en question
			coord_x[le_calque_a_supprimer] = null;
			position[calque_num[le_calque_a_supprimer]] = null;
			calque_num[le_calque_a_supprimer] = null;
			ajuste_cadre();
		 }
		 
		 function supprimer_tout() // Quand il n'y a plus de calques, on supprime le calque conteneur
		 {
			nom = document.getElementById("parent_conteneur");		
			var referent = document.getElementById("parent_parent_conteneur");
			referent.removeChild(nom); // On supprime le cadre en question
		 }
		 
		 function ajuste_cadre() // Quand on supprime un cadre, il y a un trou,... cette fonction, elle bouche le trou !
		 {
		 	var trou; // La variable trou, c'est la position qui est vide
		 	// On parcours le tableau position et on cherche la valeur null
			for (var pos=nombre_de_cadres; pos>=1; pos--) // On parcours le tableau depuis la fin car il peut y avoir plusieur valeurs null. Celle qui nous interesse, c'est la première
			{
				if(position[pos] == null)
				{
					trou=pos;
				}
			}
			
			trou++; // La valeur qui nous interesse, c'est la position suit le trou
			
			var temp;
			
			for (var i=trou; i<=nombre_de_cadres_actifs; i++) // On part du trou, jusqu'à avoir parcouru toutes les positions du tableau.
			{
				// i, c'est une position
				if (document.getElementById("cadre"+position[i])) // Seulement si le calque existe
				{
					calcul = coord_x[position[i]] - largeur - decalage_entre_div;		
					coord_x[position[i]] = calcul; // Ici , on mets les coordonnées à jour dans coord_x[]...
					//alert("On déplace le cadre N°"+i+ " aux coordonnées "+coord_x[i]);
					
					//alert("Le calque que l'on veut faire bouger : "+position[i]+"\nIl est à la position"+i);
					bouge_fluide(position[i], calcul);
					
					position[i-1] = position[i];
					
					temp = calque_num[position[i]];
					temp--;
					calque_num[position[i]] = temp;
				}
			}
			
			position[nombre_de_cadres_actifs] = null;
			calque_num[position[nombre_de_cadres_actifs]] = null;
			nombre_de_cadres_actifs--;
			
			if (nombre_de_cadres_actifs <= 0)
			{
				supprimer_tout();
			}
		 }		 
		 function bouge_fluide(num_du_cadre, nouvelle_position_en_x)
		 {
		 	var decalage_x_temp = document.getElementById("cadre"+num_du_cadre).offsetLeft;
			decalage_x_temp--;
			
			if (decalage_x_temp > nouvelle_position_en_x)
			{			
			 	document.getElementById("cadre"+num_du_cadre).style.left = decalage_x_temp + 'px'; // On déplace le cadre...
				document.getElementById("cadre"+num_du_cadre+"_cache").style.left = decalage_x_temp + 'px'; // ...mais également le cadre invisible
				setTimeout("bouge_fluide('"+num_du_cadre+"', '"+nouvelle_position_en_x+"')", 2); // On déplace le cadre
			}
		 }
		 		 
		 function depose(num) // Quand la souris "tient" un cadre, et qu'elle bouge sur un autre, alors c'est qu'elle veut le déposer à sa place
		 {		 
		 	if (cadre_en_cour)
			{
				if (cadre_en_cour != num) // Il faut bien entendu que le cadre sur lequel la souris passe ne soit pas celui qui est "en cour"
				{						
					// On calcule les nouvelles positions
						var ancienne_position = calque_num[cadre_en_cour]; // Je récupère le numéro du cadre qui se trouve à cette position
						var nouvelle_position = calque_num[num]; // Je récupère le numéro du cadre qui se trouve à cette position
					// Fin
					
					// On calcule les nouveaux numéros de calque
						var ancien_numero = position[calque_num[cadre_en_cour]];
						var nouveau_numero = position[calque_num[num]];						
					// Fin
					
					// On change aussi le numéro du cadre se trouvant à la position voulue
						position[calque_num[cadre_en_cour]] = nouveau_numero;
						position[calque_num[num]] = ancien_numero;
					// Fin
					
					// La on modifie le tableau : (on y stocke les nouvelles positions)
						calque_num[cadre_en_cour] = nouvelle_position;
						calque_num[num] = ancienne_position;
					// Fin
					
					// La on modifie le tableau coordonnées :
						var ancienne_position_x = coord_x[cadre_en_cour];
						var nouvelle_position_x = coord_x[num];
						
						coord_x[cadre_en_cour] = nouvelle_position_x;
						coord_x[num] = ancienne_position_x;
					// Fin
					
					// On inverse les positions :
					document.getElementById("cadre"+num+"_cache").style.left = ancienne_position_x + 'px';
					document.getElementById("cadre"+num).style.left = ancienne_position_x + 'px';
					
					document.getElementById("cadre"+cadre_en_cour+"_cache").style.left = nouvelle_position_x + 'px';
					document.getElementById("cadre"+cadre_en_cour).style.left = nouvelle_position_x + 'px';
				}
			}
		 }
		 
		 /**********************************************************************************************************/
		 /**********************************************************************************************************/
		 
		 function change_contenu(num)
		 {
			var numero_du_cadre_concerne = num;
			var contenu_du_cadre_concerne = contenu[num]; // Actuellement, le contenu affiché, c'est le cadre N° contenu[num]
			opacite_du_contenu = 100; // Au début ça vaut 100%
			baisse_opacite(numero_du_cadre_concerne, contenu_du_cadre_concerne);

			contenu_cadre = null;
		 }
		 
		 function baisse_opacite(num, num_contenu)
		 {
			if (opacite_du_contenu > 0)
			{
				opacite_du_contenu--;
				var calque_baisse_opacite_temp = document.getElementById("contenu_cadre_"+num+"_"+num_contenu);
				
				calque_baisse_opacite_temp.style.opacity = (opacite_du_contenu / 100);
				calque_baisse_opacite_temp.style.MozOpacity = (opacite_du_contenu / 100);
				calque_baisse_opacite_temp.style.KhtmlOpacity = (opacite_du_contenu / 100);
				calque_baisse_opacite_temp.style.filter = "alpha(opacity=" + opacite_du_contenu + ")";
				setTimeout("baisse_opacite('"+num+"', '"+num_contenu+"')",10);
			}
			
			else
			{
				document.getElementById("contenu_cadre_"+num+"_"+num_contenu).style.display = "none"; // Son opacité est de 0, mais on le cache
				
				contenu_du_cadre_concerne = num_contenu; // Actuellement, le contenu affiché, c'est le cadre N° contenu
				contenu_du_cadre_concerne++;
				
				if (contenu_du_cadre_concerne > nombre_de_contenu_par_cadre)
				{
					contenu_du_cadre_concerne=1; // On le remets à 1 (au début)
				}
				
				contenu[num] = contenu_du_cadre_concerne;
				
				var calque_a_augmente = document.getElementById("contenu_cadre_"+num+"_"+contenu_du_cadre_concerne);
				calque_a_augmente.style.opacity = (0 / 100);
				calque_a_augmente.style.MozOpacity = (0 / 100);
				calque_a_augmente.style.KhtmlOpacity = (0 / 100);
				calque_a_augmente.style.filter = "alpha(opacity=" + 0 + ")";
				
				document.getElementById("contenu_cadre_"+num+"_"+contenu_du_cadre_concerne).style.display = "block";
				augmente_opacite(num, contenu_du_cadre_concerne);
				
				opacite_du_contenu = null;
			}
		 }
		 
		 function augmente_opacite(num, num_contenu)
		 {
			if (opacite_du_contenu < 100)
			{
				opacite_du_contenu++;
				var calque_augmente_opacite_temp = document.getElementById("contenu_cadre_"+num+"_"+num_contenu);
				
				calque_augmente_opacite_temp.style.opacity = (opacite_du_contenu / 100);
				calque_augmente_opacite_temp.style.MozOpacity = (opacite_du_contenu / 100);
				calque_augmente_opacite_temp.style.KhtmlOpacity = (opacite_du_contenu / 100);
				calque_augmente_opacite_temp.style.filter = "alpha(opacity=" + opacite_du_contenu + ")";
				setTimeout("augmente_opacite('"+num+"', '"+num_contenu+"')",10);
			}
			
			else
			{
				opacite_du_contenu = null;
				// On appelle le changement de contenu à interval régulier :
				setTimeout("change_contenu(4)",6500);
			}
		 }
		 
		 /**********************************************************************************************************/
		 /**********************************************************************************************************/
		 /**********************************************************************************************************/
		 /**********************************************************************************************************/
		 
		 function affiche_img_lien()
		 {
			 document.getElementById("cadre3_description_lien").style.display='none';
			 document.getElementById("cadre3_img_lien").style.display='block';
		 }
		 
		 function cache_img_lien()
		 {
			 document.getElementById("cadre3_description_lien").style.display='block';
			 document.getElementById("cadre3_img_lien").style.display='none';			 
		 }