/**
 * JQUERY IMAGE ZOOM PLUGIN v1.0 :
 * Plugin jQuery d'agrandissement d'images.
 * @author Alexandre GUEDO
 */
(function($) {

	/**
	 * Ajoute la fonctionnalité aux éléments sélectionnés.
	 * @param {array}		userOptions		les options de l'utilisateur
	 */
	$.fn.imagezoom = function(userOptions) {
		// Paramètres par défaut
		var options = { overlayTransparency : 0,			// Transparence de l'arrière-plan : entre 0 et 1 (1 = complétement opaque)
						overlayBackground : "#FFFFFF",		// Couleur de l'arrière-plan
						closeImgPath : "includes/js/jquery_img_zoom/img/closebox.png", 	// Url de l'image de fermeture de l'image
					 	zoomImgPath : "includes/js/jquery_img_zoom/img/enlarge.png",	// Url de l'image d'agrandissment de l'image
					 	animDuration : 500, 				// Durée de l'animation en millisecondes 
					 	animBeginEasing : "linear",			// Effet de l'animation d'apparition
						animEndEasing : "linear",			// Effet de l'animation de disparition cf http://docs.jquery.com/Effects/animate et le fichier js/jquery.easing.1.3.js
						shadowOffset : 0  };				// Position de l'ombre en pixels
		// Merge des paramètres par défaut avec les paramètres utilisateurs
		jQuery.extend(options, userOptions);
		
		// Préchargement des images de fermeture et de zoom
		var closeImg = new Image();
		var zoomImg  = new Image();
		closeImg.src = options.closeImgPath;
		zoomImg.src	 = options.zoomImgPath;
		
		/**
		 * Fait apparaitre l'image en grande dimension.
		 * @param {object}	thumb	la miniature
		 * @param {object}	big		l'image en grande dimension
		 */
		function showImg(thumb, big) {
			// Dimensions de la page
			var bodyHeight	= $(window).height();
			var bodyWidth	= $(window).width();
			// Position de la page
			var posX		= window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
			var posY		= window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
			// Positions et dimensions de la miniature
			var thumbTop	= $(thumb).offset().top;
			var thumbLeft	= $(thumb).offset().left;
			var thumbHeight	= $(thumb).height();
			var thumbWidth	= $(thumb).width();
			// Positions et dimensions de la grande image
			var bigHeight	= big.height;
			var bigWidth	= big.width;
			// Ajustement de la taille de  l'image si la taille de la page est inférieure à la taille de l'image
			if(bigHeight >= bodyHeight) {
				bigHeight	= bodyHeight - closeImg.height;
				bigWidth	= bigWidth * bigHeight / big.height;
			}
			var bigTop		= ((bodyHeight - bigHeight) / 2) + posY;
			var bigLeft		= ((bodyWidth - bigWidth) / 2) + posX;
			
			// Ajout d'un arrière plan qui prend tout l'espace disponible dans la page
			$(document.body).append('<div id="izOverlay" />');
			$("#izOverlay").css("display", "block");
			$("#izOverlay").css("z-index", "9");
			$("#izOverlay").css("position", "fixed");
			$("#izOverlay").css("left", "0px").css("top", "0px");
			$("#izOverlay").width("100%").height("100%");
			if( $.browser.msie && $.browser.version < 7 ){
				$("#izOverlay").css({position:"absolute",height:$(document).height(),width:$(document).width()});
			}
			// Gestion de la transparence de l'arrière-plan
			$("#izOverlay").css("background-color", options.overlayBackground);
			$("#izOverlay").css("opacity", options.overlayTransparency);
			$("#izOverlay").css("filter", "alpha(opacity=" + options.overlayTransparency*100 + ")");
			$("#izOverlay").css("-moz-opacity", options.overlayTransparency);
					
			// Ajout du div qui contiendra l'image en grande taille
			$(document.body).append('<div id="izContent"></div>');
			$("#izContent").css("position", "absolute").css("visibility", "visible").css("z-index", "10");
			
			// On le met à la même position que la miniature
			$("#izContent").css("top", thumbTop + "px").css("left", thumbLeft + "px");
			// On lui donne les mêmes dimensions que l'image miniature
			$("#izContent").css("height", thumbHeight + "px").css("width", thumbWidth + "px");
	
			// On ajoute la grande image dans son container
			$("#izContent").append('<img src="' + big.src + '" style="width: 100%; height: 100%;" />');
			
			// Animation d'ouverture du div contenant la grande image : agrandissement jusqu'aux dimensions réelles de d'image et centrage sur la page
			var animate = true;
			$("#izContent").animate({
					top : bigTop + "px",
					left : bigLeft + "px",
					height : bigHeight + "px",
					width : bigWidth + "px"
				}, 
				options.animDuration, 
				options.animBeginEasing,
				function() {
					// Ajout de l'image de fermeture à la fin de l'animation
					$(this).append('<img src="' + options.closeImgPath + '"'
								  + ' class="izCloseImage"'
								  + ' style="position:absolute; z-index:10; opacity: 1; visibility: visible;'
								  + 'top: -' + closeImg.height/2  + 'px; left: -' + closeImg.width/2  + 'px;"/>');
					// Ajout de l'ombre
					if(options.shadowOffset>0 && $.fn.shadow) {
						$(this).shadow({offset: options.shadowOffset, opacity : options.overlayTransparency + 0.1 , color: options.overlayBackground });
					}
					animate = false;
				}
			);
			
			// Animation de fermeture du div contenant la grande image
			function disappear() {
				if(animate==false) {
					// Suppression de l'ombre
					$("#izContent").shadowDestroy();
					// Suppression de l'image de fermeture
					$(".izCloseImage").remove();
					// Animation
					$("#izContent").animate({
							top :  thumbTop + "px",
							left : thumbLeft + "px",
							height : thumbHeight + "px",
							width : thumbWidth + "px"
						}, 
						options.animDuration, 
						options.animEndEasing, 
						function() { 
							// Suppression du div principal à la fin de l'animation
							$("#izOverlay").remove();
							$("#izContent").remove();
						}
					);
				}
			}
	
			// Animation de fermeture du div contenant la grande image lors du clic sur le div de la grande image
			$("#izContent").click(function() {	
				disappear();
			});
			
			// Animation de fermeture du div contenant la grande image lors du clic sur le div principal
			$("#izOverlay").click(function() {	
				disappear();
			});
	
		}
	
		/**
		 * Ajoute l'image d'agrandissement à une miniature. L'image est positionnée dans le coin supérieur gauche de la miniature.
		 * @param {object} elm	la miniature
		 */
		function addEnlargeImg(elm) {
			var offset = $(elm).offset();
			var top = offset.top;
			var left = offset.left;
			if(options.zoomImgPath!=""){
			$(document.body).append('<img src="' + options.zoomImgPath + '"'
								   + ' class="izZoomImage"'
								   + ' style="position: absolute; z-index: 10; top: ' + top + 'px; left: ' + left + 'px;'
								   + 'margin-top: -' + zoomImg.height/2  + 'px; margin-left: -' + zoomImg.width/2  + 'px;"/>');
			}
		}
		
		/**
		 * Supprime l'image d'agrandissement.
		 */
		function removeEnlargeImg() {
			$(".izZoomImage").remove();
		}
		
		/**
		 * Déplace le div de l'image de grande taille lors du redimensionnement de la fenêtre.
		 */
		$(window).resize(function() {
			$("#izContent").shadowDestroy();
			var bigTop = (($(window).height() - $("#izContent").height()) / 2);
			var bigLeft = (($(window).width() - $("#izContent").width()) / 2);
			$("#izContent").css("top", bigTop + "px").css("left", bigLeft + "px").shadow();
		});
		
		// Pour chaque lien sélectionné, on précharge l'image en grande taille
		this.each(function() {
			var img = new Image();
			img.src = this.href;
			var thumb = $(this).find('img');
	
			// Gestion des évènements
			$(this).click(function() {
				showImg(thumb, img);
				return false;
			}).mouseover(function() {
				addEnlargeImg(thumb);
			}).mouseout(function() {
				removeEnlargeImg();
			});
		});
	};

})(jQuery);