/*____________________________________________
|     _     _ ___      __ _                   |
|    (_)___(_) __|___ / _| |_ __ _ _ _ ___    |
|    | |_ /| \__ | _ \  _|  _/ _` | '_/ -_)   |
|    |_/__||_|___|___/_|  \__\__,_|_| \___|   |
|                                             |
|       ©2010 iziSoftware - Version 1.0       |
|_____________________________________________|


WEGalleryCarrousel1 : Gestion galerie d'image en mode carrousel

*/
//Démarrage


window.onload = function(){
	WEGalleryCarrousel1.Initialize();
	
	};


var WEGalleryCarrousel1 = {

   // déclaration des variables globales : 
//    ConfWECarrousel : contenu json du carrousel
//    ListLenght: Longueur du tableau d'image d'origine > nb d'image au départ
//    NbVisible: Nombre d'élément visible à la fois (déterminé par la largeur du div parent)
//    Decalage:  Décalage de déplacement
//    Sens:null: Sens de décalage
//    FirstIndex: Index de la première image visible
//    auto: boolean qui renseigne sur un décalage automatique ou non 
//    Vitesse: temps de défilement pour déplacer une image. (en milliseconde)
//    Delay: délai entre chaque déplacement si mode automatique (en milliseconde) 
//    Infinite: indique si le carrousel est en mode infini ou non 
//    ImgRatio: tableau de ratio des images (définition de la largeur par rapport à la hauteur
//    ImgOuterX:  tableau contenant les largeurs des images retravaillées par rapport à leur nom
//    $DivImagesCarrousel:  div qui contient les images
//    $DivParent:  div parent qui contient le carrousel 
//    $Elem: div de base de l'élément  

    Initialize:function(){	
    	 for (Elem in OEConfWEGalleryCarrousel1) {
    	         var $Elem = $("#"+Elem)
    	        
				 if (WEInfoPage.RenderMode == "Editor") { 		
				    var ImgDim =[ ]			 
				    // On garde en memoire l'ensemble des valeurs de tailles et de marge des images (identiques pour toutes les images)
                        var firstImages = $Elem.find('.WECarrousel1ImagesParent:first').find("img:first")
                        ImgDim["margin-left"]=firstImages.css("margin-left");
                        ImgDim["margin-right"]=firstImages.css("margin-right");
                        ImgDim["padding-left"]=firstImages.css("padding-left");
                        ImgDim["padding-right"]=firstImages.css("padding-right");
		                $Elem.data("DimImg",ImgDim); 
				 	//Fonction Start du Resize du carrousel		 
				    $Elem.bind('resizestart', function(e, ui) {
                        $(this).find("img").each(function(){
                            $(this).css("visibility","hidden"); 
                        })
				    });
				    //Fonction Stop du resize du carrousel
				    $Elem.bind('resizestop', function(e, ui) {
				        //suppression des clones
				        $(this).find('.Clone').remove()
				        // on redefinie la taille du contenant à 100%
				        $(this).find(".WECarrousel1Parent:first").width("100%")
				      
				        var $thisElem = $(this)
				        // On redefinie la taille des images et on les remet  visible
					    $(this).find("img").each(function(){
						   $(this).css("margin-left", $thisElem.data("DimImg")["margin-left"]);
                           $(this).css("margin-right", $thisElem.data("DimImg")["margin-right"]);
                           $(this).css("padding-left", $thisElem.data("DimImg")["padding-left"]);
                           $(this).css("padding-right", $thisElem.data("DimImg")["padding-right"]);
                           $(this).css("visibility","visible"); 
                        })
                        WEGalleryCarrousel1.IniCarrousel($(this).attr("id"));                        
                   })
                 }
                 
                  WEGalleryCarrousel1.IniCarrousel(Elem)				                  
         }
    },
    
    IniCarrousel: function(Elem){

	 	var $Elem= $("#"+Elem)
 		$Elem.data("ConfWECarrousel",OEConfWEGalleryCarrousel1[Elem])
        $Elem.data("NbVisible",0)    //initialisation des paramètres 
        $Elem.data("FirstIndex",0)    //initialisation des paramètres 
        
        var $DivParent = $Elem.find(".WECarrousel1Parent:first");//Zone parent du carrousel
        var $DivImagesCarrousel= $DivParent.find('.WECarrousel1ImagesParent:first');//zone contenant les images
        var $PrevBtn = $Elem.find('.OESZ_Previous:first'); //bouton précédent
        var $NextBtn = $Elem.find('.OESZ_Next:first'); //bouton suivant
      
		var XRef = 0 ; // taille de référence pour les images 
		var index = 0 ;         
        var $ListImages =  $DivImagesCarrousel.find("img"); //liste des images du carrousel
        $Elem.data("ListLenght", $DivImagesCarrousel.find("img").length);
	  
		if ($Elem.data("ListLenght") ==0){return;}; // Pas la peine de continuer car on a aucunes images
	 
	    // recherche du nombre d'element 		 
		$ListImages.each(function(){
			// Redefinir la hauteur des éléments 
			var contour = $(this).outerHeight(true) - $(this).height();			
        	var ItemHeight = $Elem.height()-contour;
			$(this).css("height",ItemHeight); 
			var outerX = WEGalleryCarrousel1.FindImgOuterWidth($(this),ItemHeight, index, $Elem);  // largeur de l'image
			if (XRef<outerX){XRef = outerX};	 // on prend la plus grande largeur
			index++; 			
		})       
	 	 
	 	$Elem.data("NbVisible",Math.floor(($DivParent.width())/XRef))
        if ($Elem.data("NbVisible")==0){        
           if (WEInfoPage.RenderMode == "Editor") { alert("La taille du carrousel est trop petite par rapport aux images qui le compose"); }
        }
        
        if ($Elem.data("NbVisible")>$ListImages.length){
           if (WEInfoPage.RenderMode == "Editor") { alert("La taille du carrousel est trop grande par rapport aux images qui le compose. Aucun effet de déplacement n'est possible"); }
            $Elem.find('.Clone').remove(); 
            $DivImagesCarrousel.css("right","0px");
            $DivImagesCarrousel.css("left","0px");
            //Renvoi de l'information de la nouvelle hauteur des images au vb 
            WEEdToVB.SetElementData(Elem, $DivImagesCarrousel.find("img:first").css("height"))
            return ;
        }
				
		var nbpage = Math.floor($Elem.data("ListLenght")/$Elem.data("ConfWECarrousel").Decalage) +1;
						
   		//Ajout des clones avant et après pour permettre le glissement
   		//Avant > correspond au décalage
   		$ListImages.filter(':first').before($ListImages.slice(-$Elem.data("ConfWECarrousel").Decalage).clone().addClass('Clone'));

		//Après > correspond au décalage + les éléments necessaires pour finir la dernière page
		var ajout = $Elem.data("ConfWECarrousel").Decalage + ($Elem.data("NbVisible")-1 + (nbpage-1)*$Elem.data("ConfWECarrousel").Decalage)+1 - $Elem.data("ListLenght")
		$ListImages.filter(':last').after($ListImages.slice(0,ajout).clone().addClass('Clone'));

		$ListImages =  $DivImagesCarrousel.find("img"); // on reselectionne les images 

		//on redefinie le margin des éléments
		var xElem = Math.round(($DivParent.width()-XRef*$Elem.data("NbVisible"))/(2*$Elem.data("NbVisible")))
		  
		var divWidth = 0;
		$ListImages.each(function(){
			// a ces valeurs il faut ajouter la différence entre le XRef et leur outerwidth 
			var outerWidth = $(this).outerWidth(true)
			var diff = (XRef-outerWidth)/2;  
			 
			var marginLeft = parseInt($(this).css('margin-left'))  + xElem + diff
			var marginRight =  parseInt($(this).css('margin-right')) + xElem + diff
				//On doit prendre en compte ces valeurs pour le calcul suivant( taille du div)
				divWidth = divWidth+ 2*(xElem + diff)
		
			$(this).css('margin-left',marginLeft);
			$(this).css('margin-right',marginRight);
			//interdit la sélection des images
			$(this).attr("UNSELECTABLE","on");
		})
		// on redefinie XRef avec les valeurs rajoutées  et la largeur du contenu 
		XRef = XRef + xElem*2
		$DivParent.width(XRef*$Elem.data("NbVisible")); 
  
		// on redefinie la taille des images et la largeur du div englobant			 
		$ListImages.each(function(){
			var outerWidth = $(this).outerWidth(true); 
			divWidth = divWidth + outerWidth ;
							 
	    }); 		
		$DivImagesCarrousel.css("width",divWidth); 
	
	    // on se repositionne sur le point de départ
		 $Elem.data("FirstIndex", $Elem.data("ConfWECarrousel").Decalage);
		var value = $Elem.data("FirstIndex")*XRef*(-1)
		 $DivImagesCarrousel.css('left',value); 
		
		if (WEInfoPage.RenderMode == "Editor") {  
            //Renvoi de l'information de la nouvelle hauteur des images au vb 
            WEEdToVB.SetElementData(Elem, $DivImagesCarrousel.find("img:first").css("height"))
		    return false; 
		} // désactivation dans l'éditeur des évenements (mais pas du repositionnement)
	
			    
		if ($Elem.data("ConfWECarrousel").Auto==true){
			 //Sens = "GoToLeft" (0)
			if ($Elem.data("ConfWECarrousel").Sens==0){
				WEGalleryCarrousel1.Next(XRef,$Elem,$DivImagesCarrousel); 
			}else{
				WEGalleryCarrousel1.Prev(XRef,$Elem,$DivImagesCarrousel); 
			}
		}else{	
		
		 	 // Evenevement sur les boutons
		    $PrevBtn.click(function () {		    	
			    WEGalleryCarrousel1.Prev(XRef,$Elem,$DivImagesCarrousel);
			    });
		    $NextBtn.click(function () {
			    WEGalleryCarrousel1.Next(XRef,$Elem,$DivImagesCarrousel); 
		    });
		
		}	
    },
    
    // Function de déplacement de la droite vers la gauche
	Next: function(XRef,$Elem,$DivImagesCarrousel){
		 $Elem.data("FirstIndex",$Elem.data("FirstIndex")+ $Elem.data("ConfWECarrousel").Decalage)
		     $DivImagesCarrousel.stop(); 
			$DivImagesCarrousel.animate({
					left:  WEGalleryCarrousel1.LeftPosition(XRef,$Elem.data("FirstIndex"))
					} , {
					duration:  $Elem.data("ConfWECarrousel").Vitesse * $Elem.data("ConfWECarrousel").Decalage,
					easing : "linear",
					complete: function(){					
						if  (($Elem.data("FirstIndex")+ $Elem.data("NbVisible")) >= ($DivImagesCarrousel.find("img").length-1)){
						    $Elem.data("FirstIndex", $Elem.data("FirstIndex") - $Elem.data("ListLenght"));									
							$DivImagesCarrousel.css('left', WEGalleryCarrousel1.LeftPosition(XRef,$Elem.data("FirstIndex")));
						}							 
						if ($Elem.data("ConfWECarrousel").Auto==true &&  $Elem.data("ConfWECarrousel").Sens==0){
							setTimeout(function () {
								WEGalleryCarrousel1.Next(XRef,$Elem,$DivImagesCarrousel); 
							}, $Elem.data("ConfWECarrousel").AutoWaitingTime);
						}
					}
				})
	},
		
		//Function de déplacement de la gauche vers la droite
	Prev: function(XRef,$Elem,$DivImagesCarrousel){
		 $Elem.data("FirstIndex",  $Elem.data("FirstIndex")- $Elem.data("ConfWECarrousel").Decalage );
		     $DivImagesCarrousel.stop(); 
			$DivImagesCarrousel.animate({
				left:  WEGalleryCarrousel1.LeftPosition(XRef,$Elem.data("FirstIndex"))
				},{
					duration :  $Elem.data("ConfWECarrousel").Vitesse *  $Elem.data("ConfWECarrousel").Decalage,
					easing: 'linear',
					complete:  function(){
						if ( $Elem.data("FirstIndex")<  $Elem.data("ConfWECarrousel").Decalage){
							 $Elem.data("FirstIndex",  $Elem.data("FirstIndex") + $Elem.data("ListLenght"));
							 $DivImagesCarrousel.css('left',WEGalleryCarrousel1.LeftPosition(XRef,$Elem.data("FirstIndex")));
						}
						if ($Elem.data("ConfWECarrousel").Auto==true &&  $Elem.data("ConfWECarrousel").Sens==1){
						    setTimeout(function () {
							    WEGalleryCarrousel1.Prev(XRef,$Elem,$DivImagesCarrousel); 
							},  $Elem.data("ConfWECarrousel").AutoWaitingTime);
						}
					}
				})
	},
    
    //calcul la taille global( padding et margin inclu) de l'image passé en paramètre par rapport à la taille du conteneur. 
    FindImgOuterWidth: function($this,ItemHeight, index, $Elem){
			// calcul de la largeur par rapport à la hauteur et au ratio et affectation de la valeur
				var newWidth = parseInt(($Elem.data("ConfWECarrousel").ImagesRatio[index])*ItemHeight);
				var paddingLeft =   parseInt($this.css('padding-left')) ;
				var paddingRight =  parseInt($this.css('padding-right'));
				var MarginLeft = parseInt($this.css('margin-left'))   ;
				var MarginRight =  parseInt($this.css('margin-right')) ;
				var borderLeft = parseInt($this.css('border-left-width'));
				var borderRight = parseInt($this.css('border-right-width'));
				
				var outerwidth = newWidth+paddingLeft+paddingRight+borderLeft+borderRight+MarginLeft+MarginRight;
	
				if (isNaN(outerwidth) ){
					return ($this.outerWidth(true));
				}else{
					return outerwidth;
				}
		},
	
	//calcul la position Left du div conteneur des images
	LeftPosition : function(XRef,FirstIndex){
			return FirstIndex*XRef*(-1)	
		}		
		
}