$(function() {
	//on bind le bouton de fermeture de la fenêtre se zoom
	$("#closeZoomImagePanel").bind ("click", function () {
		//On réinitialise tous les éléments de la fenêtre de zoom.
		$("#imageZoomDiv").hide();	
		$("#productZoomImage").hide();
		$("#ajaxZoomLoader").hide();
		$("#imageZoomDiv").css ("height", "600px");
		$.unblockUI();
	});
	
	$(document).ready(function () {
		//Si l'image est vide alors on n'affiche pas la loupe
		if ($("#productImage").length == 0) {
			return;
		}
        
        //On affiche l'image avant de calculer ses coordonnées finales (sinon marche pas sous IE)
        $("#zoomProduct").show();
        
		//Calcul des coordonnées de l'images
		var obj = document.getElementById("productImage");
		var curleft = obj.offsetLeft || 0;
        var curtop = obj.offsetTop || 0;
        while (obj = obj.offsetParent) {
           curleft += obj.offsetLeft;
           curtop += obj.offsetTop;
        }
       
        //Calcul des coordonées de la loupe
        curleft += document.getElementById("productImage").width  - document.getElementById("zoomProduct").width;
        curtop  += document.getElementById("productImage").height - document.getElementById("zoomProduct").height;

        	    
        $("#zoomProduct").css ("left", curleft);
        $("#zoomProduct").css ("top", curtop);

	});


	//On bind la loupe sur la page de détail du produit
	/*$(".productImage").bind ("mouseover" , function () {		
		
        var imageSrc = $(this).attr("id");
 
		//Si l'image est vide alors on n'affiche pas la loupe
		if (imageSrc == '') {
			return;
		}
		
		//Calcul des coordonnées de l'images
		var obj = this;
		var curleft = obj.offsetLeft || 0;
        var curtop = obj.offsetTop || 0;
        while (obj = obj.offsetParent) {
           curleft += obj.offsetLeft;
           curtop += obj.offsetTop;
        }
        
        //On affiche l'image avant de calculer ses coordonnées finales (sinon marche pas sous IE)
        $("#zoomProduct").fadeIn();
        
        //Calcul des coordonées de la loupe
        curleft += this.width  - document.getElementById("zoomProduct").width;
        curtop  += this.height - document.getElementById("zoomProduct").height;
        
        	        
        $("#zoomProduct").css ("left", curleft);
        $("#zoomProduct").css ("top", curtop);

        //On bind le clic sur la loupe
        $("#zoomProduct").unbind("click");
    	$("#zoomProduct").bind ("click", function () {
    		//$("#zoomProduct").fadeOut();
    		displayImageZoom (imageSrc);
    	});
    	
       
	});*/
	
	//On bind la loupe sur la page des gammes
	$(".productImageMini").bind ("mouseover" , function (event) {	
	
		
        var imageSrc = $(this).attr("id");
      
        //Si l'image est vide alors on n'affiche pas la loupe
		if (imageSrc == '/frontoffice/images/no_Image.jpg') {
			return;
		}
		
		//Calcul des coordonnées de l'images
		var obj = this;
		var curleft = obj.offsetLeft || 0;
        var curtop = obj.offsetTop || 0;
        while (obj = obj.offsetParent) {
           curleft += obj.offsetLeft;
           curtop += obj.offsetTop;
        }
       
        //On affiche l'image avant de calculer ses coordonnées finales (sinon marche pas sous IE)
        $("#zoomProductMini").show();
        
        //Calcul des coordonées de la loupe
        curleft += this.width  - document.getElementById("zoomProductMini").width;
        curtop  += this.height - document.getElementById("zoomProductMini").height;

        $("#zoomProductMini").css ("left", curleft);
        $("#zoomProductMini").css ("top", curtop);

        //On bind le survol sur la loupe
        $("#zoomProductMini").unbind("mousemove");
    	$("#zoomProductMini").bind ("mousemove", function (event) {
    		//On calcul la position de l'image par rapport à la position de la souris
    		var cursorLeft = event.pageX;
    		var cursorTop = event.pageY;
 
    		$("#imageMiniZoomDivImg").css("left", cursorLeft + 2);
    		$("#imageMiniZoomDivImg").css("top", cursorTop + 2);
    		
    		$("#imageMiniZoomDivImg").attr("src", imageSrc);
    	
    		$("#imageMiniZoomDivImg").show();
    	});
    	
    	$("#zoomProductMini").unbind("mouseout");
    	$("#zoomProductMini").bind ("mouseout", function () {
    		if (event.relatedTarget != null && event.relatedTarget.id != "imageMiniZoomDivImg") {	
    			$("#imageMiniZoomDivImg").hide();
    		}
    	});
       
	});
	
	//On masque la loupe en sortant de l'image (pour la page gamme)
	$("#zoomProduct, .productImage, #zoomProductMini, .productImageMini, #imageMiniZoomDivImg").bind ("mouseout", function (event) {
		if ($(event.relatedTarget).hasClass("zoomItem") == false) {	
			//$("#zoomProduct").fadeOut();
			$("#zoomProductMini").hide();
		}
	});
})

function displayImageZoom (imageSrc) {
	if (imageSrc != undefined && imageSrc.length > 0) {

		//On simule un clic sur le panel de fermeture si il est ouvert.
		$("#imageZoomDiv").hide();
		
		//Récupération de la largeur et de la hauteur de la page
		//selon les différents navigateurs
		var largeur = 0, hauteur = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			largeur = window.innerWidth;
			hauteur = window.innerHeight;
		}
		else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			largeur = document.documentElement.clientWidth;
			hauteur = document.documentElement.clientHeight;
		}
		else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			largeur = document.body.clientWidth;
			hauteur = document.body.clientHeight;
		}
		else {
			largeur = -1;
			hauteur = -1;
		}
		
		//On centre la fenêtre de zoom de l'image
		$("#imageZoomDiv").css ("left", (largeur - 800) / 2);
		$("#imageZoomDiv").css ("top", (hauteur - 600) / 2);
		
		//On masque l'image en cours
		$("#productZoomImage").hide();
		
		//On bloque l'interface derrière
		$.blockUI({ message: null });
		$("#imageZoomDiv").css ("z-index", "2000");
		
		//On affiche la fenêtre de zoom
		$("#imageZoomDiv").fadeIn(200, function () {
			//On affiche le loader ajax
			$("#ajaxZoomLoader").show();
			
			//on défini la source de l'image et on la charge
			$("#productZoomImage").attr("src",imageSrc); 
					
			$("#productZoomImage").load (function () {
				//On redimensionne l'image si besoin
				var hauteurImage = $('#productZoomImage').height();
				if (hauteurImage > hauteur - 200) {
					//L'image ne doit pas dépasser la hauteur de la page		
					$("#productZoomImage").attr("height",hauteur - 200); 
				}
				var largeurImage = $('#productZoomImage').width();
				if (largeurImage > '780') {
					//L'image ne doit pas dépasser la hauteur de la page		
					$("#productZoomImage").attr("width", '780'); 
				}
				
				//On anime le redimmensionnement de la fenêtre à la taille de l'image
				$("#imageZoomDiv").animate( {height:$("#productZoomImage").height()}, 
						{duration : 100, complete : function () {
							//on masque le loader et on affiche l'image
							$("#ajaxZoomLoader").hide();
							$("#productZoomImage").fadeIn(300);							
				}});		
			});			
		});
	}
}