// JavaScript Classe Diaporama


/*############################################################################################################################
#	La classe Diaporama
/*############################################################################################################################
#	- Réalisation/Copyright : Nicolas LUSSAGNET
#	- Date : 31 octobre 2005 @ 21h54
#	- site web : www.nikkowebsite.com
#	- contact : contact@nikkowebsite.com
#	- principe : 
#				 Il s'agit de créer un diaporama dans une seule balise <img> créée dynamiquement par la classe d'objet créée.
#				 Il est ensuite possible d'indiquer quelles sont les imagette à faire défiler dans le diaporama puis les images
#				 à afficher dans une popup lorsqu'on clique sur l'imagette avec la designation et l'argumentaire lié au produit.
#	- fonctionnement :
#				 Il suffit d'appeller le contructeur de classe en lui transmettant les variable attendue :
#				 	- idUnique (Number)			 =	identifiant unique de l'instance d'objet qui sera créée
#				 	- racine	(String)		 =	l'identifiant de l'élément directement contener deu diaporama dans lequel la balise
#						 							<img> sera créée
#				 	- nomOccurence	(String)	 =	le nom de l'ocurence d'objet créée pour pouvoir y faire référence par la suite
#				 	- elements		(Array)		 =	le tableau contenant les imagettes et images à afficher :
#						:: elements[n]['mini']	 		 = le chemin de l'image en miniature
#						:: elements[n]['grande']		 = le chemin de l'image en taille réelle
#						:: elements[n]['designation']	 = la désignation du produit
#						:: elements[n]['argumentaire']	 = l'argumentaire du produit
#				 	- delai			(Number)	 =	le délai pour faire défiler le diaporama et changer d'images
#				 	- 6ème argument	(Bool)		 = FACULTATIF : true	=> les événement onmouseover, onmouseout et onclik sont capturés pour ouvrir une popup
#				 												false	=> pas d'ouverture de popup, aucune réaction à ces événements
#				 Une balise <img> est ensuite créée par le constructeur et ajoutée au document HTML dans le conteneur définit. 
############################################################################################################################*/
	
	// Constructeur de classe
	// -----------------------------------
	function Diaporama(idUnique,racine,nomOccurence,elements,delai) {
		
		// Propriétés
		// -----------------------------------
		this.idUnique	= idUnique;					// id du produit dans la base de donnée
		this.racine		= racine;					// id de l'élément racine auquel le diaporama doit être rattaché
		this.box;									// boite du diaporama : balise <img >
		this.logBox;								// boite du Log du diaporama : balise <div >
		this.nom		= nomOccurence;				// nom de l'occurence de l'objet diaporama
		this.delai		= delai;					// delai du timer pour le diaporama
		this.images		= new Array();				// tableau d'images pour le diaporama
		this.nb			= elements.length;			// nombre d'images pour le diaporama
		this.imageActive= 0;						// nombre d'images pour le diaporama
		this.timer;									// timer du diaporama
		this.idUnique	= idUnique;					// identifiant unique servant à nommer, afficher et atteindre la balise image
		this.loop		= true;						// le diaporama tourne-t-il en boucle ?
		this.enableOnClick = arguments[5]==false ? false : true ;					// activer l'action d'ouverture de popup sur l'événement onclick
																			// si le 6ème argument est défini c'est qu'on souhaite désactiver cette fonctionnalité

		// Méthodes
		// -----------------------------------
		this.toString	= Diaporama_afficher;		// Affichage des informations du diaporama
		this.afficher	= Diaporama_afficher;		// Affichage des informations du diaporama
		this.defiler	= Diaporama_defiler;		// Défilement du diaporama
		
		
		// Initialisation
		// -----------------------------------
			
			// Préchargement d'une ou plusieurs images pour le diaporama
			// et des informations contenues dans le tableaux passé en paramètres
			// -----------------------------------
			for(i=0;i<this.nb;i++){
				this.images[i] = new Array();
				
				this.images[i]["mini"]			= new Image();
				this.images[i]["mini"].src		= elements[i]["mini"];
				
				this.images[i]["grande"]		= new Image();
				this.images[i]["grande"].src	= elements[i]["grande"];
				
				this.images[i]["designation"]	= elements[i]["designation"];
				this.images[i]["argumentaire"]	= elements[i]["argumentaire"];
			}
			
			if(this.nb>0){

				// Création de la balise <img > de l'objet diaporama
				// -----------------------------------
				this.box				= document.createElement("img");
				this.box.id				= "imgDiaporama_" + this.idUnique;
				
				// Si on autorise les événement onmouseover, onmouseout et onclik
				// -----------------------------------
				if(this.enableOnClick){
				
					this.box.alt			= "Cliquez pour voir l'image en taille réelle";
					this.box.title			= "Cliquez pour voir l'image en taille réelle";
					this.box.onmouseover	= function(){
						this.style.cursor = "pointer";
					};
					this.box.onmouseout		= function(){
						this.style.cursor = "normal";
					};
					var tmpIdUnique			= this.idUnique;
					this.box.onclick		= function(){ 
						var titre = "Agrandissement"; 
						w = window.open(this.designation,'image','width=500,height=400,toolbar=no,scrollbars=no,resizable=no'); 
						wContent = "";
						wContent += "<HTML>\n";
						wContent += "  <HEAD>\n";
						wContent += "    <TITLE>"+ this.designation +"</TITLE>\n";
						wContent += "    <SCR"+"IPT language=javascript>\n";
						wContent += "      function checksize() {\n";
						wContent += "        var ecartHeight = 100;\n";
						wContent += "        if (document.images[0].complete){\n";
						wContent += "          window.resizeTo(document.images[0].width+10,document.images[0].height+30+ecartHeight);\n";
						wContent += "          window.focus();\n";
						wContent += "        }else{\n";
						wContent += "          setTimeout('checksize()',250);\n";
						wContent += "        }\n";
						wContent += "      }\n";
						wContent += "      window.onload = checksize;";
						wContent += "    </"+"SCRI"+"PT>\n";
						wContent += "    <style>\n";
						wContent += "      *	{ font-size:11px; font-family:Verdana, sans-serif; }\n";
						wContent += "      body	{ margin:0; padding:0;	}\n";
						wContent += "        .tdImage			{ vertical-align:top; text-align:center;	}\n";
						wContent += "        .tdArgumentaire	{ vertical-align:top; 	}\n";
						wContent += "    </style>\n";
						wContent += "  </HEAD>\n";
						wContent += "  <BODY>\n";
						wContent += "    <TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'>\n";
						wContent += "      <TR>\n";
						wContent += "        <TD class=\"tdImage\">\n";
						wContent += "          <IMG src='"+ this.srcGrande +"' border=0>\n";
						wContent += "        </TD>\n";
						wContent += "      </TR>\n";
						wContent += "      <TR>\n";
						wContent += "        <TD class=\"tdArgumentaire\">\n";
						wContent += "          "+ this.argumentaire + "\n";
						wContent += "        </TD>\n";
						wContent += "      </TR>\n";
						wContent += "    </TABLE>"; 
						wContent += "  </BODY>\n";
						wContent += "</HTML>"; 
						w.document.write(wContent); 
						w.document.close(); 
						w.focus(); 
						
					};
				
				}
	
				// Mise en forme de la balise <img>
				// -----------------------------------
				this.box.style.display	= "none";
				//this.box.style.height	= "75px";
				//this.box.style.width	= "100px";
				
				
				// Attache le diaporama à son élément racine
				// -----------------------------------
				document.getElementById(this.racine).appendChild(this.box);
				this.box = document.getElementById("imgDiaporama_" + this.idUnique);
				
				
				// Défilement du diaporama
				// -----------------------------------
				this.defiler();
				
			}
			
	}
	
	
	// Méthode defiler()
	// -----------------------------------
	function Diaporama_defiler() {
		
		n = this.imageActive;
		
		// Affichage du diaporama
		// -----------------------------------
		if(this.box.style.display == "none"){
			this.box.style.display	= "block";
		}
		
		// respect des limites en nombre d'images
		// -----------------------------------
		if(n<0 || n==null || isNaN(n) || n>=this.nb){
			n = 0;					  
		}
		
		// On affiche l'image numéro n
		// -----------------------------------
		this.box.src			= this.images[n]["mini"].src;
		this.box.srcGrande		= this.images[n]["grande"].src;
		this.box.designation	= this.images[n]["designation"];
		this.box.argumentaire	= this.images[n]["argumentaire"];
		
		
		// incrémentation du numéro de l'image active
		// -----------------------------------
		this.imageActive = n;
		this.imageActive++;
		
		// Si on interdit de boucler et qu'on a atteint la dernière image 
		// on détruit le timer s'il existe et on ne le rappelle plus
		// -----------------------------------
		if(this.loop==false && this.imageActive==this.nb){
			if(this.timer)	clearTimeout(this.timer);
		// Stockage du nom de l'objet dans une variable temporaire
		// pour l'associer à la méthode à rappeller avec le délai défini
		// -----------------------------------
		}else{
			var temp="top." + this.nom + ".defiler()";
			this.timer = setTimeout(temp,this.delai);
		}
				
	}
	
	
	
	// Méthode afficher()
	// -----------------------------------
	function Diaporama_afficher() {
		var infos = "";
		infos += "<ul>";
		for(var p in this){
			infos += "<li>"+ p.substring(0,1).toUpperCase() + p.substring(1,p.length) + " = " + this[p] + "</li>";
		}
		infos += "</ul>";
		return infos;
	}
	

	
/*############################################################################################################################
#	Fin classe Diaporama
############################################################################################################################*/