// **********************************
// * Nom du script : OmmFeuilletez
// * Auteur: Richard  BEGHIN
// * Date de creation: 06/03/09
// * But : Permet d'afficher un ensemble d'images d'un tableau JSON (pictureUrls = {0:'path de ma premiere image' , 1:'path de ma deuxieme image'...}.
// * La premiere image a afficher est définie par initIdPicture (0 ou 1 ...)
// * Afin de naviguer dans ce livre, il faut définir les ids des boutons gauche et droite (idButtonLeft et idButtonRight).
// * Il est également possible de definir l'evenement pour lequel les pages doivent défiler (click sur le boutons, mouseover...) 
// * idPicture = l'id de l'image a remplacer
// *
//* Exemple de tml
// * -----------
// *<td>
// *		<a href="#feuille" id="buttonLeft">
// *			<img src="${asset:context:/include/images/elements/f_gauche.gif}" border="0"/>
// *		</a>
// *	</td>
// *	<td>
// *			<span id="pictureToDisplay" class="picture"> </span>
// *	</td>
// *	<td>
// *			<a href="#feuille" id="buttonRight">
// *			<img src="${asset:context:/include/images/elements/f_droite.gif}" border="0" />
// *			</a>
// *	</td>
// * -----------
// * Charger le fichier au onload en instanciant la classe OmmFeuilletez : 
// * Exemple : new OmmFeuilletez('pictureToDisplay','buttonLeft','buttonRight','click', '0', ["/display/000/001/475/14750.jpg","/display/000/001/475/14751.jpg"]);
// **********************************

OmmFeuilletez = Class.create({

	initialize : function(idPicture, idButtonLeft, idButtonRight, event , initIdPicture, pictureUrls){
		 this.currentIdPicture = initIdPicture;
		 this.idPicture = idPicture;
		 this.idButtonLeft = idButtonLeft;
		 this.idButtonRight = idButtonRight;
		 this.event = event;
		 this.pictureUrls = pictureUrls;
		 
		 this.setPicture();
		 
		 // Observe event on Button Left
		 if($(this.idButtonLeft) != undefined){
		 $(this.idButtonLeft).observe(this.event, function(){
		 	this.previous()}.bind(this));
		 }
		 
		 // Observe event on Button right
		 if($(this.idButtonRight) != undefined){
		 $(this.idButtonRight).observe(this.event, function(){
		 	this.next()}.bind(this));
		 }

 	},
 	
 	replacePicture: function(){
 		// update picture
		$(this.idPicture).src = this.pictureUrls[this.currentIdPicture];
		$(this.idPicture).fade({ duration: 1.0, from: 0.5, to: 1 });
 	},
 	
 	setPicture : function(){
 		if(this.currentIdPicture != undefined){
 		
 			if($(this.idPicture) != undefined && this.pictureUrls != undefined && this.currentIdPicture!= undefined ){			
				$(this.idPicture).replace("<span><p><img src='" + this.pictureUrls[this.currentIdPicture] + "' id='" + this.idPicture + "' class='picture' /></p></span>");
	 		}
	 		
 		} 		
 	},
 	
 	next : function(){
 		if(this.currentIdPicture != undefined){
 			this.currentIdPicture++;
 			
	 		(this.currentIdPicture) %=  this.pictureUrls.length;
	 		
			this.replacePicture();
		}
 	},
 	
 	previous : function(){
 		if(this.currentIdPicture != undefined){
	 		this.currentIdPicture--;
	 		if(this.currentIdPicture == -1){
	 			this.currentIdPicture = this.pictureUrls.length -1;
	 		}else{
	 			(this.currentIdPicture) %=  this.pictureUrls.length;
	 		}
	 		
	 		
	 		
			this.replacePicture();
		}
 	}
 	
 	
});