/**
* Objet Diaporama qui va gérer un diaporama à partir d'un tableau de photos passé dans le paramètre listURLPhotos, et devant s'afficher
* dans un élément DOM passé dans le paramètre rootElement. Cet élément racine contiendra des balises IMG qui définiront les emplaements
* des images.
* Par exemple le code HTML suivant, peut être utilisé:
* <ul>
*	<li><img /></li>
*	<li><img /></li>
*	...
* </ul>
* Le nombre d'images sera déterminé par le nombre de balises IMG contenues par l'élément racine du diaporama (ici l'élément UL).
* - "1" - listURLPhotos: tableau d'élément photos, c'est à dire d'élement disposant des trois propriétés; small, big, qui sont deux URLs
* contenant les addresses des deux versions d'une même image (format réduit, et format normal).
* - "2" - rootElement: Elément DOM racine du diaporama.
* - "3" - flecheGauche: Elément DOM sur lequel il faudra cliquer pour faire déplacer les imges du diaporama vers la 
* gauche.
* - "4" - flecheDroite: idem vers la droite.
* - "5" - rotation: paramètre optionnel définissant si le diaporama effectue ou non une rotation des images affichées. Ce paramètre
* accepte une valeur booléenne true=rotation, false=pas de rotation, par défaut positionné à true. La rotation
* est désactivée si le nombre d'images à afficher est inférieur ou égal au nombre de balises IMG dans le 
* diaporama.
* - "6" - redirect: définit si le diaporama redirige vers une page au lieu d'ouvrir la grande image (paramètre booléen optionnel) par défaut false;
* - "7" - invert: Paramètre booléen qui inverse le sens de navigation dans le diaporama. Paramètre optionnel par 
* défaut positionné à false. (pour pouvoir utiliser ce paramètre il faut au préalable définir le paramètre 
* rotation).
* - "8" - debug: active les fonctions de débuggage (paramètre booléen optionnel) par défaut false;
* - "9" - openFunction : chaine de caractères définissant le nom de la fonction de redirection d'une image , lorsque la redirection est active par défault "clik" (c.f all.js);
**/
function Diaporama(listURLPhotos,rootElement,flecheGauche,flecheDroite,rotation,redirect,invert,debug,openFunction){
	this.redirect=false;
	if(redirect!=undefined) this.redirect=redirect;
	this.openFunction="clik";
	if(openFunction!=undefined) this.openFunction=openFunction;
	this.debug=false;
	if(debug!=undefined) this.debug=debug;
	if(listURLPhotos==undefined || listURLPhotos==""){
		if(this.debug) alert("Le paramètre listURLPhotos n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	if(rootElement==undefined){
		if(this.debug) alert("Le paramètre rootElement n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	if(flecheGauche==undefined){
		if(this.debug) alert("Le paramètre flecheGauche n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	if(flecheDroite==undefined){
		if(this.debug) alert("Le paramètre flecheDroite n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	if(redirect==undefined){
		if(this.debug) alert("Le paramètre redirect n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	if(openFunction==undefined){
		if(this.debug) alert("Le paramètre openFunction n'est pas défini dans le constructeur de Diaporama");
		return;
	}
	// On référence l'instance dans le pool
	this.poolIndex=diaporamaPool.add(this);				
	/**
	* Elément DOM racine contenant le diaporama.
	**/
	this.rootElement=rootElement;
	/**
	* Tableau contenant les objets Photos (propriétés small et big contenant les URLs des photos).
	**/
	this.listURLPhotos=normalizeJSONArray(listURLPhotos);
	/**
	* Tableau contenant les éléments DOM images et paragraphes qui vont servir à l'affichage.
	**/
	this.listImgs=this.rootElement.getElementsByTagName("IMG");
	this.listImgsP=this.rootElement.getElementsByTagName("P");
	/**
	* Propriété définissant si le diaporama est en mode rotation ou non (cf. doc classe plus haut).
	**/
	this.rotation=this.listURLPhotos.length>this.listImgs.length;
	if(rotation!=undefined) this.rotation=rotation;
	/**
	* Propriété définissant si le sens de rotation est inversé.
	**/	
	this.invert=false;
	if(invert!=undefined) this.invert=invert;
	if(this.invert){
		addJavascriptToAttribute(flecheDroite,"onclick","diaporamaPool.get("+this.poolIndex+").previousImg()");
		addJavascriptToAttribute(flecheGauche,"onclick","diaporamaPool.get("+this.poolIndex+").nextImg()");
	}
	else{
		addJavascriptToAttribute(flecheGauche,"onclick","diaporamaPool.get("+this.poolIndex+").previousImg()");
		addJavascriptToAttribute(flecheDroite,"onclick","diaporamaPool.get("+this.poolIndex+").nextImg()");
	}
	/**
	* Elément DOM DIV destiné à générer une fond transparent intercallé entre this.displayDiaporama, et le reste de la page.
	* Ce div dispose de la classe intercalaireDiaporama qui le rend absolute et initialement invisible.
	**/
	this.intercalaireDiaporama=document.createElement("DIV");
	addClass(this.intercalaireDiaporama,"intercalaireDiaporama");
	addJavascriptToAttribute(this.intercalaireDiaporama,"onclick","diaporamaPool.get("+this.poolIndex+").hidePanel()");
	var body=document.getElementsByTagName("BODY")[0];
	body.appendChild(this.intercalaireDiaporama);
	
	/**
	* Elément DOM DIV, calque indépendant de this.intercalaireDiaporama contenant la grande photo avec ces détails bloc fermeture , legende etc
	* Ce div est ajouté dans le BODY
	**/
	this.displayDiaporama=document.createElement("DIV");
	addClass(this.displayDiaporama,"displayDiaporama");	
	body.appendChild(this.displayDiaporama);
	
	// Balise P qui contient le texte de fermeture du panel.				
	var bigCloseP=document.createElement("P");
	this.displayDiaporama.appendChild(bigCloseP);
	if (window.lang=="es_ES") {
	    var bigCloseText=document.createTextNode("Cerrar");
	}
	else if (window.lang=="it_IT") {
		var bigCloseText=document.createTextNode("Chiudere");
	}
	else if (window.lang=="en_GB") {
		var bigCloseText=document.createTextNode("Close");
	}
	else if (window.lang=="de_DE") {
		var bigCloseText=document.createTextNode("Schließen");
	}
	else {
		var bigCloseText=document.createTextNode("Fermer");
	}
	bigCloseP.appendChild(bigCloseText);
	addJavascriptToAttribute(bigCloseP,"onclick","diaporamaPool.get("+this.poolIndex+").hidePanel()");
	
	// Balise IMG qui contient l'icône de fermeture du panel.
	var bigCloseImg=document.createElement("IMG");
	addClass(bigCloseImg,"close");
	this.displayDiaporama.appendChild(bigCloseImg);
	addJavascriptToAttribute(bigCloseImg,"onclick","diaporamaPool.get("+this.poolIndex+").hidePanel()");
	
	/**
	* Elément DOM IMG permettant l'affichage de la grande image elle même, ajoutée dans le div.
	**/
	this.bigImageImg=document.createElement("IMG");
	this.displayDiaporama.appendChild(this.bigImageImg);
	addClass(this.bigImageImg,"display");

	/**
	* Elément DOM Text contenant la légende associée à la grande image.
	**/
	var bigLegendP=document.createElement("P");
	this.displayDiaporama.appendChild(bigLegendP);
	addClass(bigLegendP,"bigLegend");
	
	//	La légende est placée dans un tag P ajouté dans le div de la grande image.
	var bigLegendTextA=document.createElement("A");
	this.bigLegendText=document.createTextNode("empty");
	bigLegendTextA.appendChild(this.bigLegendText);
	bigLegendP.appendChild(bigLegendTextA);
	addClass(bigLegendTextA,"bigLegendText");
	
	//	Elements permettant de passer à la photo précedente dans la grande image
	var bigPrecedentText=document.createTextNode("");
	this.bigPrecedent=document.createElement("A");
	this.bigPrecedent.appendChild(bigPrecedentText);
	bigLegendP.appendChild(this.bigPrecedent);
	addClass(this.bigPrecedent,"bigPrecedent");
	addJavascriptToAttribute(this.bigPrecedent,"onclick","diaporamaPool.get("+this.poolIndex+").previousImgBig()");
	
	//	Elements permettant de lancer le défilement automatique des grandes images
	var bigPlayText=document.createTextNode("");
	this.bigPlay=document.createElement("A");
	this.bigPlay.appendChild(bigPlayText);
	bigLegendP.appendChild(this.bigPlay);
	addClass(this.bigPlay,"bigPlay");
	addJavascriptToAttribute(this.bigPlay,"onclick","diaporamaPool.get("+this.poolIndex+").playAuto()");
	
	//	Elements permettant d'arreter le défilement automatique des grandes images
	var bigPauseText=document.createTextNode("");
	this.bigPause=document.createElement("A");
	this.bigPause.appendChild(bigPauseText);
	bigLegendP.appendChild(this.bigPause);
	addClass(this.bigPause,"bigPause");
	addJavascriptToAttribute(this.bigPause,"onclick","diaporamaPool.get("+this.poolIndex+").stopDiapo()");
	
	//	Elements permettant de passer à la photo suivante dans la grande image
	var bigSuivantText=document.createTextNode("");
	this.bigSuivant=document.createElement("A");
	this.bigSuivant.appendChild(bigSuivantText);
	bigLegendP.appendChild(this.bigSuivant);
	addClass(this.bigSuivant,"bigSuivant");
	addJavascriptToAttribute(this.bigSuivant,"onclick","diaporamaPool.get("+this.poolIndex+").nextImgBig()");
	
	//Propriété booléenne définissant si le défilement automatique est activé
	this.auto=false;
	//Initialise le timeur de défilement
	this.timer=0;
	/**
	* Propriété indiquant quelle photo est affichée dans la première image de la liste this.listImgs.
	**/
	this.photoIndex=0;
	/**
	* Propriété indiquant l'index courante dans this.listImgs.
	**/
	this.currentPhotoIndex=0;
	/**
	* Modifie l'attribut src des élément IMG contenus dans this.listImgs afin d'y afficher une liste de photos issues des URLs
	* de this.listURLPhotos, en commencant dans l'IMG de gauche par la photo désignée par la propriété this.photoIndex dans le 
	* tableau this.listURLPhotos.
	**/
	this.displayPhoto=function(){
		for(var i=0;i<this.listImgs.length;i++){
			// Par défaut on n'autorise pas l'affichage d'une image dont l'index est supérieur ou égal
			// à this.listURLPhotos.length (car un telle image n'existe pas dans le tableau this.listURLPhotos)
			if((i+this.photoIndex)<this.listURLPhotos.length){
				// si l'image existe dans le tableau this.listURLPhotos, on lui affecte son url et ajoute à l'attribut 
				// onclick la fonction displayPanel, si celle-ci existe déjà la modifie.
				this.listImgs[i].src=this.listURLPhotos[(i+this.photoIndex)].small;
				this.listImgs[i].alt=this.listURLPhotos[(i+this.photoIndex)].legend;
				this.listImgsP[i].innerHTML=this.listURLPhotos[(i+this.photoIndex)].legend;
				if(!redirect){
					modifyJavascriptInAttribute(this.listImgs[i],"onclick","diaporamaPool.get("+this.poolIndex+").displayPanel("+(i+this.photoIndex)+")");
				}else{
					if(this.openFunction=="clik"){
						modifyJavascriptInAttribute(this.listImgs[i],"onclick",""+this.openFunction+"('http://"+window.location.host+this.listURLPhotos[(i+this.photoIndex)].urls+"')");
					}else{
						modifyJavascriptInAttribute(this.listImgs[i],"onclick",""+this.openFunction+"('"+this.listURLPhotos[(i+this.photoIndex)].urls+"')");
					}
				}
			}
			// Cependant, si la rotation est activée, on complète l'affichage dans les balises IMG avec les 
			// index supérieurs à this.listURLPhotos.length réduits à un modulo, ce qui revient à recompter les index
			// à partir de 0.
			else if(this.rotation){
				// si la rotation est activée , on affecte à l'image l'url correspondante dans le tableau this.listURLPhotos, 
				// et ajoute à l'attribut onclick la fonction displayPanel, si celle-ci existe déjà la modifie.
				this.listImgs[i].src=this.listURLPhotos[(i+this.photoIndex)%this.listURLPhotos.length].small;	
				this.listImgs[i].alt=this.listURLPhotos[(i+this.photoIndex)%this.listURLPhotos.length].legend;
				this.listImgsP[i].innerHTML=this.listURLPhotos[(i+this.photoIndex)%this.listURLPhotos.length].legend;
				if(!redirect){
					modifyJavascriptInAttribute(this.listImgs[i],"onclick","diaporamaPool.get("+this.poolIndex+").displayPanel("+(i+this.photoIndex)%this.listURLPhotos.length+")");
				}else{
					if(this.openFunction=="clik"){
						modifyJavascriptInAttribute(this.listImgs[i],"onclick",""+this.openFunction+"('http://"+window.location.host+this.listURLPhotos[(i+this.photoIndex)%this.listURLPhotos.length].urls+"')");
					}else{
						modifyJavascriptInAttribute(this.listImgs[i],"onclick",""+this.openFunction+"('"+this.listURLPhotos[(i+this.photoIndex)%this.listURLPhotos.length].urls+"')");
					}
				}
			}
		}
	}
	this.displayPhoto();
	/**
	* Incrémente la valeur de l'attribut photoIndex, afin de décaler l'affichage vers la gauche.
	*/
	this.nextImg=function(){
		// L'incrémentation n'est autorisée que si photoIndex est strictement inférieur à la dernière image ou
		// si on est en rotation.
		if(this.photoIndex<this.listURLPhotos.length-this.listImgs.length||(this.rotation)){
			this.photoIndex++;
			// Si l'index a dépassé la dernière image, on revient à la première (index=0).
			if(this.photoIndex>=this.listURLPhotos.length) this.photoIndex=0;
		}
		this.displayPhoto();
	}
	/**
	* Incrémente la valeur de l'attribut photoIndex, afin de décaler l'affichage vers la gauche dans la grande Image.
	*/
	this.nextImgBig=function(){
		// L'incrémentation n'est autorisée que si photoIndex est strictement inférieur à la dernière image ou
		// si on est en rotation.
		this.photoIndex=this.currentPhotoIndex;
		if(this.photoIndex<this.listURLPhotos.length-1||(this.rotation)){		
			this.photoIndex++;
			// Si l'index a dépassé la dernière image, on revient à la première (index=0).
			if(this.photoIndex>=this.listURLPhotos.length) {
				this.photoIndex=0;
			}
		}	
		this.currentPhotoIndex=this.photoIndex;
		this.bigImageImg.src=this.listURLPhotos[this.photoIndex].big;
		this.bigLegendText.nodeValue=this.listURLPhotos[this.photoIndex].legend;
		this.displayPhoto();
	}
	/**
	* Désincrémente la valeur de l'attribut photoIndex, afin de décaler l'affichage vers la droite.
	*/
	this.previousImg=function(){
		// La décrémentation n'est autorisée que si this.photoIndex est strictement supérieur à 0, ou si la 
		// rotation est autorisée.
		if(this.photoIndex>0||this.rotation){
			this.photoIndex--;
			// dans le cas où photoIndex est négatif (donc en rotation) on revient à la dernière image du tableau
			// listURLPhotos.
			if(this.photoIndex<0) this.photoIndex=this.listURLPhotos.length-1;
		}
		this.displayPhoto();
	}
	/**
	* Désincrémente la valeur de l'attribut photoIndex, afin de décaler l'affichage vers la droite.
	*/
	this.previousImgBig=function(){
		this.photoIndex=this.currentPhotoIndex;
		// La décrémentation n'est autorisée que si this.photoIndex est strictement supérieur à 0, ou si la 
		// rotation est autorisée.
		if(this.photoIndex>0||this.rotation){
			this.photoIndex--;
			// dans le cas où photoIndex est négatif (donc en rotation) on revient à la dernière image du tableau
			// listURLPhotos.
			if(this.photoIndex<0) {
				this.photoIndex=this.listURLPhotos.length-1;
			}
		}
		this.currentPhotoIndex=this.photoIndex;
		this.bigImageImg.src=this.listURLPhotos[this.photoIndex].big;
		this.bigLegendText.nodeValue=this.listURLPhotos[this.photoIndex].legend;
		this.displayPhoto();
	}
	/**
	* Fonction permettant d'afficher un panneau contenant la photo selectionnée en grand format ainsi que 
	* sa legende.
	* - indexImage : paramètre correspond à l'index de l'image dans le tableau listURLPhotos.
	*/
	this.displayPanel=function(indexImage){
			//Affecte l'url selectionée dans la grande photo affichée.  
			this.currentPhotoIndex=indexImage;
			this.bigImageImg.src=this.listURLPhotos[indexImage].big;
			this.bigLegendText.nodeValue=this.listURLPhotos[indexImage].legend;
			
			var scrollH, scrollG;
			// Position dans la page
			if (window.pageYOffset) {			
				// Netscape
				scrollH = window.pageYOffset;
				scrollG = window.pageXOffset;
			}else{												
				// IE
				scrollH = document.documentElement.scrollTop;
				scrollG = document.documentElement.scrollLeft;
			}
			// Chargement de l'image
			/*
			img = new Image();
			img.onload=function(){
				var imgl = img.width;
				var imgh = img.height;
				if (imgl + 60 > largeur) {
					imgl = largeur - 60;
					imgh = img.height * imgl / img.width;
				}
				if (imgh + 60 > hauteur) {
					imgh = hauteur - 60;
					imgl = img.width * imgh / img.height;
				}
			}
			*/
			//permet de centrer displayDiaporama et intercalaireDiaporama
			this.intercalaireDiaporama.style.top = 0;
			this.intercalaireDiaporama.style.left = 0;
			this.displayDiaporama.style.top=(scrollH+(document.documentElement.clientHeight-this.displayDiaporama.offsetHeight)/2)+'px';
			this.displayDiaporama.style.left=(scrollG+(document.documentElement.clientWidth-this.displayDiaporama.offsetWidth)/2)+'px';
			this.intercalaireDiaporama.style.width=document.body.clientWidth+"px";
			this.intercalaireDiaporama.style.height=document.body.clientHeight+"px";
			//rend displayDiaporama et intercalaireDiaporama visibles.
			this.intercalaireDiaporama.style.visibility='visible';
			this.displayDiaporama.style.visibility='visible';
	}	
	
	this.body=document.getElementsByTagName("BODY")[0];
	addJavascriptToAttribute(this.body,"onscroll","diaporamaPool.get("+this.poolIndex+").moveDisplayDiaporama()");
	
	this.moveDisplayDiaporama=function(){
		if(this.displayDiaporama.style.display == 'block' || this.displayDiaporama.style.visibility == 'visible'){
			var scrollH, scrollG;
				// Position dans la page
				if (window.pageYOffset) { 		
					// Netscape
					scrollH = window.pageYOffset;
					scrollG = window.pageXOffset;
				}else{											
					// IE
					scrollH = document.documentElement.scrollTop;
					scrollG = document.documentElement.scrollLeft;
				}
			this.displayDiaporama.style.top=(scrollH+(document.documentElement.clientHeight-this.displayDiaporama.offsetHeight)/2)+'px';
			this.displayDiaporama.style.left=(scrollG+(document.documentElement.clientWidth-this.displayDiaporama.offsetWidth)/2)+'px';
		}else return;
	}
	
	//Masque le panneau d'affichage de la grande photo.
	this.hidePanel=function(){
		this.photoIndex=0;
		this.displayPhoto();
		this.intercalaireDiaporama.style.visibility='hidden';
		this.displayDiaporama.style.visibility='hidden';
		this.stopDiapo();
	}
	//Fonction qui permet de gérer le défilement automatique du diaporama.
	this.playAuto=function(){
		//variable définissant le délai en millisecondes entre chaque photo.
		var timeDelay=2500;
		if(!this.auto){
			this.bigPrecedent.style.display='none';
			this.bigSuivant.style.display='none';
			this.timer=setInterval("diaporamaPool.get("+this.poolIndex+").nextImgBig()", timeDelay);
			this.auto=true; 
		}
		else{		
			this.stopDiapo();
		}		
	}
	//Fonction qui arrete le défilement automatique du diaporama et réinitialise le timeur.
	this.stopDiapo=function(){
		clearInterval(this.timer);
		this.bigPrecedent.style.display='block';
		this.bigSuivant.style.display='block';
		this.auto=false; 
		this.timer=0;
	}
}
/**
* Objet qui référence toutes les instances de Diaporama présentes sur la page.
**/
function DiaporamaPool(){
	this.pool=new Array();
	this.add=function(diaporama) {
	this.pool.push(diaporama);	
	return this.pool.length-1;
	}
	this.get=function(poolIndex) {
		return this.pool[poolIndex];
	}
}
var diaporamaPool=new DiaporamaPool();