/***
 * Gère un diaporama de photo avec gestion du zoom
 * 
 * @author Luc ALBERT <luc[at]nematis[dot]com>
 * @version 1.1
 * 
 * 26 juin 2007
 * 
 * Utilisation :
 * 
 * <img scr="" alt="" id="diap" />
 * 
 * <script type="text/javascript">
 *   var array_img = Array('image_1.jpg','image_2.jpg',...,'image_n.jpg');
 *   var array_alt = Array('altImg_1','altImg_2,...,'altImg_n');
 *   
 *   myDiap = new diapzomm(document.getElementById('diap'), array_img, array_alt, 1500);
 * </script>
 */


/***
 * Change log
 * 
 * 1.0 -> 1.1 [12 septembre 2007]
 * 
 * - Gestion du ratio=1 
 * 		pas de redimensionnement => + de fluidité dans les transitions
 *  
 * - Ajout des méthodes next(), previoust(), pause() et play()
 * 		navigation dans le diaporama avec des boutons
 * 
 */

	
	var diapImages = new Array(); // Tableau de préchargement des images
	
	/**
	 * 
	 * @param {Object} obj_img		L'objet image sur lequel on agit
	 * @param {Array} array_img		Tableau indéxé des src des images
	 * @param {Array} array_alt		Tableau indéxé des alt des images
	 * @param {Int} time			Temps entre chaque image du diaporama
	 * @param {Array} array_text	Text a affiché dynamiquement pour chaque image. Il faut créer un bloc div avec id="diapText"
	 */
	var diapzoom = function(obj_img, array_img, array_alt, time, array_text) 
	{
		
		// Paramètres de config pour le zoom
		this.ratio = 1;		// Ratio de diminution de l'image pour le zoom [si ratio=1 => pas de zoom]
		this.speed = 5;		// Vitesse de l'animation du zoom en ms
		
		this.zoomState = 'out'	// Initialisation du zoom
		
		this.modePause = false;	// Défini si on est en mode pause [plus de diaporama, juste ac les bouton suivant/précédent]
		
		// Initialisation des variables
		this.currentWidth = 0;
		this.currentHeight = 0;
		
		// Paramètres dynamiques pour les images
		this.obj_img = obj_img 		|| false;
		this.array_img = array_img 	|| false ;
		this.array_alt = array_alt 	|| false;
		this.time = time 			|| 4000;
		this.array_text = array_text|| null;
		
		
		//if(this.array_img.length != this.array_alt.length)return false;
		//if(this.array_img.length == 0 || this.array_alt.length == 0)return false;
		
		
		// Préchargement des images
		for(i=0; i<this.array_img.length; i++)
		{
			diapImages[i] = new Image();
			diapImages[i].src = this.array_img[i];
		}
		
		// Démarrage du diaporama
		this.cpt = 0;
		this.cptMax = this.array_img.length;
		
		//this.diap();
		My = this;
		setTimeout(function(){My.diap();}, this.time);
	}
	
	
	/**
	 * diap()
	 * 
	 * Moteur du diaporama
	 */
	function diap()
	{
		
		// Sauvegarde des paramètres de l'image
		this.width = diapImages[this.cpt].width;
		this.height = diapImages[this.cpt].height;
		
		
		if(this.ratio > 1) {
			// Calcul de la réduction
			this.h = Math.round(diapImages[this.cpt].height/this.ratio);
			this.w = Math.round(diapImages[this.cpt].width/this.ratio);
		} else {
			// Pas de réduction : dimension originale
			this.h = diapImages[this.cpt].height;
			this.w = diapImages[this.cpt].width;
		}
		
		// Attribution des nouvelles valeurs
		
		this.obj_img.src = '';
		this.obj_img.setAttribute("alt", '');
		
		if(this.ratio > 1) {
			this.obj_img.width = this.w;
			this.obj_img.height = this.h;
		}
		
		this.currentWidth = this.w;
		this.currentHeight = this.h;
		
		this.obj_img.src = this.array_img[this.cpt];
		if(this.array_alt != false)this.obj_img.setAttribute("alt", this.array_alt[this.cpt]);
		
		// Légende
		if (this.array_array_text != null) {
			document.getElementById('diapText').innerHTML = this.array_alt[this.cpt];
			document.getElementById('creditDiap').innerHTML = this.array_text[this.cpt];
		}
		
		if(!this.modePause) {
			My = this;  // Finte finteuse pour setTimeout();
			this.timer = setTimeout(function(){My.next();}, this.time);
		}
	}
	
/*****************************************************************/
/**               Gestion de la navigation                      **/
/*****************************************************************/	

	/**
	 * Active la lecture du diaporama
	 * 
	 * @access public
	 */
	function play()
	{
		// Vérifie si on est en pause
		if(this.timer == null) {
			My = this;
			this.timer = setTimeout(function(){My.diap();}, this.time);
		}
		
		this.modePause = false;
		
	}
	
	/**
	 * Met le diaporama en pause
	 * 
	 * @access public
	 */
	function pause()
	{
		this.killTimer();
		this.modePause = true;
		
	}
	
	/**
	 * Navigue à la vignette suivante
	 * 
	 * @access public
	 */
	function next()
	{
		// Tue le timer actuel
		this.killTimer();
		
		this.cpt++;
		if(this.cpt == this.cptMax)this.cpt = 0;
		
		this.diap();
	}
	
	/**
	 * Navigue à la vignette précédente
	 * 
	 * @access public
	 */
	function previoust()
	{
		// Tue le timer actuel
		this.killTimer();
		
		if(this.cpt == 0)this.cpt = this.cptMax-1;
		else this.cpt--;
			
		this.diap();
	}
	
	/**
	 * Tue le timer
	 * 
	 * @access private
	 */
	function killTimer()
	{
		// Vérifie si on est en lecture
		if(this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	}
	
	
/*****************************************************************/
/**                   Gestion du zoom                           **/
/*****************************************************************/

	/**
	 * Effectue l'agrandissement de l'image
	 * 
	 * @access private
	 */
	function zoomIn()
	{
		// Stop du timer
		if(this.timer)
		{
			clearTimeout(this.timer);
			this.timer = null;
		}
		
		// Début de la gestion du zoom
		this.stepW = (this.width - this.w) / this.speed;
		this.stepH = (this.height - this.h) / this.speed;
		
		if(this.currentWidth < this.width) 
		{
			this.currentWidth = Math.round(this.currentWidth + this.stepW);
			this.currentHeight = Math.round(this.currentHeight + this.stepH);
		}
		else
		{
			// On stope le timer
			this.timerZI = clearTimeout(this.timerZI);
			this.timerZI = null;
		}
		
		this.obj_img.width = this.currentWidth;
		this.obj_img.height = this.currentHeight;
		
		My = this;  // Finte pour setTimeout();
		this.timerZI = setTimeout(function(){My.zoomIn();}, 1);
	}
	
	/**
	 * Effectue la diminution de l'image
	 * 
	 * @access private
	 */
	function zoomOut()
	{
		// Stop le timer si besoin
		if(this.timerZI)
		{
			this.timerZI = clearTimeout(this.timerZI);
			this.timerZI = null;
		}
		
		// Redimensionne l'image
		this.obj_img.width = this.w;
		this.obj_img.height = this.h;
		
		// Réattribut les valeurs
		this.currentWidth = this.w;
		this.currentHeight = this.h;
		
		// Redémarrage du timer
		if(!this.timer)
		{
			My = this;  // Finte pour setTimeout();
			this.timer = setTimeout(function(){My.diap();}, this.time);
		}
	}
	
	/**
	 * Gère le zoom. Cette méthode gère l'agrandissement ou la diminution
	 * d'une image
	 * 
	 * @access public
	 */
	function zoom()
	{
		if(this.zoomState == 'out')
		{
			this.zoomState = 'in';
			this.zoomIn();
		}
		else
		{
			this.zoomState = 'out';
			this.zoomOut();
		}
	}
	
	// Déclaration des méthodes de la classe
	diapzoom.prototype.diap = diap;
	
	// Navigation
	diapzoom.prototype.next = next;
	diapzoom.prototype.previoust = previoust;
	diapzoom.prototype.play = play;
	diapzoom.prototype.pause = pause;
	
	diapzoom.prototype.killTimer = killTimer;
	
	// Zoom
	diapzoom.prototype.zoomIn = zoomIn;
	diapzoom.prototype.zoomOut = zoomOut;
	diapzoom.prototype.zoom = zoom;