$(document).ready(function(){   
  zoomImage_init('a.zi');
});


// g : groupe
// u : url
// a : titre, alt
// l : lecture auto
// n : index de l'image dans un groupe

// initialisation
function zoomImage_init(lien){
	// action sur click et recuperation des informations
	$(lien).click(function(){

		// mise en place fenetre
		zi_afficheFenetre();
		
		// infos sur l'image
		var l = '';
		var g = this.rel || false;
		var u = this.href || null;
		var a = this.title || this.alt || $(this).children().attr('alt') || $(this).children().attr('title') || false;
		var n = $("a[rel="+g+"]").index(this);
		// chargement de l'image
		zi_preloadImage(u,g,n,l,a);
		
		// suivi des evenements
		zi_evenements(g,l);
		
		// annule l'action
		return false;
	});
};


// mise en place fenetre de zoom
function zi_afficheFenetre() {
	// recuperation tailles et placement
	var h = $(window).height();
	var w = $(window).width();	
	// scrollTop
	var t = $('body').scrollTop(); /* ie, ff, opera */
	if (t==0) {
		t = $('html').scrollTop(); /* google chrome, safari */
	};		
	// création fenêtre du zoom
	var blocs = '\
	<div id="zi_fond" style="height: '+h+'px; width: '+w+'px;"></div> \
	<div id="zi_maitre" style="margin-top: '+t+'px;"> \
		<div id="zi_un"></div> \
		<div id="zi_deux"></div> \
		<div id="zi_trois"></div> \
		<div id="zi_quatre"></div> \
		<div id="zi_cinq"></div> \
		<div id="zi_titre"><span></span></div> \
		<div id="zi_image"> \
			<div></div> \
		</div> \
		<div id="zi_navigation"><table><tr><td class="fermerZoom" title="Fermer"></td></tr></table></div> \
		<div id="zi_cinq"></div> \
		<div id="zi_quatre"></div> \
		<div id="zi_trois"></div> \
		<div id="zi_deux"></div> \
		<div id="zi_un"></div> \
	</div>';	
	// insertion des blocs
	$("body").prepend(blocs);	
	// transparence sur le fond
	$("#zi_fond").fadeTo("fast", 0.8);	
};

// preload image
function zi_preloadImage(u,g,n,l,a) {

	// verifie si c'est un groupe
	if (g) {
		// si oui on recupere notre titre
		monImage = $('a:eq('+(Math.abs(n))+')[rel='+g+']');
		a = monImage.attr('title') || monImage.attr('alt') || monImage.children().attr('alt') || monImage.children().attr('title') || false;
	};	
	
	// suppression de l'image
	$('#zi_img').remove();
	
	// suppression des arrondis de l'image
	$('.zi_arrondi').remove();

	// création d'un objet image
	var img = new Image();
	img.src = u;	
	
	// vérifie si l'image a déjà été chargée
	if (img.width > 0) {
		// si oui
		var w = img.width;
		var h = img.height;
		var zimg = '<img src="'+u+'" width="'+w+'" height="'+h+'" id="zi_img" alt="'+a+'" />';
		$('#zi_image div').prepend(zimg);
		$('#zi_img').hide();
		zi_affiche(g,n,w,h,l,a);
	} else {
		// sinon affichage d'un animation
		var t = $('body').scrollTop(); /* ie, ff, opera */
		if (t==0) {
			t = $('html').scrollTop(); /* google chrome, safari */
		};	
		ww = window.innerWidth-45;
		wh = window.innerHeight;
		if(!ww) ww = document.documentElement.clientWidth-35;
		if(!wh) wh = document.documentElement.clientHeight;
		$('body').prepend('<img id="zi_chargement" src="fichiers/chargement.gif" style="position: absolute; top:'+(t+(wh/2)-20)+'px; left:'+((ww/2)-20)+'px; z-index: 12000"/>');

		// on attend le chargement complet de l'image
		$(new Image()).load(function() {
			var w = img.width;
			var h = img.height;
			var zimg = '<img src="'+u+'" width="'+w+'" height="'+h+'" id="zi_img" alt="'+a+'"/>';
			$('#zi_image div').prepend(zimg);
			$('#zi_img').hide();
			$('#zi_chargement').remove();
			zi_affiche(g,n,w,h,l,a);
		}).attr('src',u);
	};
};



function zi_affiche(g,n,w,h,l,a)  {

	// recuperation des infos de dimensions
	imgw = Math.abs(w);
	imgh = Math.abs(h);

	oimgw = Math.abs(w);
	oimgh = Math.abs(h);

	ww = window.innerWidth-45;
	wh = window.innerHeight;
	
	// si ie
	if(!ww) ww = document.documentElement.clientWidth-35;
	if(!wh) wh = document.documentElement.clientHeight;
	
	// calcul des dimensions
	if((imgh+100)>wh) {
		imgh = (wh-140);
		imgw = (oimgw/oimgh)*imgh;
	};
	if(imgw>ww) {
		imgw = ww-20;
		imgh = ((oimgh/oimgw)*imgw)-10;
	};
	
	mw = imgw;
	mh = imgh;
	if (imgw < 140) mw = 200;
	if (imgh < 140) mh = 200;
	
	// verifie si c'est un groupe d'images
	if(g) {
		// si oui on crée la navigation
	
		// recupere le nombre d'images dans le groupe
		var nb = $('a[rel='+g+']').length;
	
		// fermeture
		var fermer = "<td class=\"fermerZoom\" title=\"Fermer\" ></td>";
	
		// suivante
		if (n>=0 && n<(nb-1) && l!='auto') {
			usuiv = $('a:eq('+(Math.abs(n)+1)+')[rel='+g+']').attr('href');
			nsuiv = Math.abs(n)+1;
			suiv = "<td class=\"suivZoom\" title=\"Suivante\" rel=\""+usuiv+"\"><span style=\"display:none\">"+nsuiv+"</span></td>";
		} else {
			suiv = "<td class=\"suivnZoom\"></td>";
		};
		
		// précédente
		if (n <= (nb-1) && n>=1 && l!='auto') {
			uprec = $('a:eq('+(Math.abs(n)-1)+')[rel='+g+']').attr('href');
			nprec = Math.abs(n)-1;
			prec = "<td class=\"precZoom\" title=\"Précédente\" rel=\""+uprec+"\"><span style=\"display:none\">"+nprec+"</span></td>";
		}else {
			prec = "<td class=\"precnZoom\"></td>";
		};
		
		// derniere
		if (n<(nb-1) && l!='auto') {
			uder = $('a:eq('+(Math.abs(nb)-1)+')[rel='+g+']').attr('href');
			nder = Math.abs(nb)-1;
			der = "<td class=\"derZoom\" title=\"Fin\" rel=\""+uder+"\"><span style=\"display:none\">"+nder+"</span></td>";
		} else {
			der = "<td class=\"dernZoom\" ></td>";
		};
		
		// premiere
		if(n>=1 && l!='auto') {
			uprem = $('a:eq(0)[rel='+g+']').attr('href');
			nprem = 0;
			prem = "<td class=\"premZoom\" title=\"Début\" rel=\""+uprem+"\"><span style=\"display:none\">"+nprem+"</span></td>";
		} else {
			prem = "<td class=\"premnZoom\"></td>";
		};	
		
		if (l!='auto') {
			uauto = $('a:eq('+(Math.abs(n))+')[rel='+g+']').attr('href');
			nauto = Math.abs(n);
			auto = "<td class=\"autoZoom\" title=\"Lecture\" rel=\""+uauto+"\"><span style=\"display:none\">"+nauto+"</span></td>";
		} else if (l=='auto') {
			upause = $('a:eq('+(Math.abs(n))+')[rel='+g+']').attr('href');
			npause = Math.abs(n);
			auto = "<td class=\"stopZoom\" title=\"Stop\"></td><td class=\"pauseZoom\" title=\"Pause\" rel=\""+upause+"\"><span style=\"display:none\">"+npause+"</span></td>";
		}
		
		// mise en place des boutons
		$("#zi_navigation table tr").html(prem+prec+fermer+auto+suiv+der);
		
		// le titre
		titre = $('#zi_img').attr('alt') + ' [Image '+(Math.abs(n)+1)+' sur '+nb+']';
	} else {
		// sinon pas de navigation
		
		// le titre
		titre = $('#zi_img').attr('alt');
	};
	
	
	// verification du mode
	if (l == 'auto') {
		// mode automatique
		$("#zi_titre span").html('Chargement...');
		$("#zi_maitre").animate({width: mw+30, left: (ww-mw)/2, top: ((wh-mh)/2)-40}, 500, function(){
			$("#zi_image").animate({height: mh}, 500, function(){		
				$('#zi_img').attr({height:imgh, width:imgw, alt: a});
				$("#zi_titre span").html(titre);
				if (imgh < 140) {
					$('#zi_image div').css({'padding-top': +((140-imgh)/2)+'px'});
				} else {
					$('#zi_image div').css({'padding-top': '0'});
				}
				//$('#zi_image div').append('<div id="zi_imghg" class="zi_arrondi"></div><div id="zi_imghd" class="zi_arrondi"></div>');
				//$('#zi_image div').append('<div id="zi_imgbg" class="zi_arrondi"></div><div id="zi_imgbd" class="zi_arrondi"></div>');
				$('#zi_img').fadeIn(1000,function(){
					$("#zi_maitre").animate({opacity: 1}, 2000, function(){
						$('#zi_img').fadeOut(500,function(){
							u = $('a:eq('+(Math.abs(n)+1)+')[rel='+g+']').attr('href');
							n = (Math.abs(n)+1);
							if (n==(Math.abs(nb))) { 
								n=0; 
								u = $('a:eq(0)[rel='+g+']').attr('href');
							};
							zi_preloadImage(u,g,n,l);
						});	
					});		
				});	
			});	
		});
	
	} else {	
		// mode normal
		
		$("#zi_titre span").html('Chargement...');
		$("#zi_maitre").animate({width: mw+30, left: (ww-mw)/2, top: ((wh-mh)/2)-40}, 500, function(){
			$("#zi_image").animate({height: mh}, 500, function(){		
				$('#zi_img').attr({height:imgh, width:imgw, alt: a});
				$("#zi_titre span").html(titre);
				if (imgh < 140) {
					$('#zi_image div').css({'padding-top': +((140-imgh)/2)+'px'});
				} else {
					$('#zi_image div').css({'padding-top': '0'});
				}
				//$('#zi_image div').append('<div id="zi_imghg" class="zi_arrondi"></div><div id="zi_imghd" class="zi_arrondi"></div>');
				//$('#zi_image div').append('<div id="zi_imgbg" class="zi_arrondi"></div><div id="zi_imgbd" class="zi_arrondi"></div>');
				$('#zi_img').fadeIn(1000,function(){
				});	
			});	
		});
	};
	
	if ($.browser.msie) {
		if (jQuery.browser.version.substr(0,3) == '6.0') {
			// suppression des arrondis de l'image si ie 6
			$('.zi_arrondi').remove();
		};
	};
	
	
};

function zi_evenements(g)
{
	$("body").click(function(event) 
	{
		// on recupere évenement et son élement
		var $this, $tgt = $(event.target);
		
		// fermeture
		if ($tgt.is("#zi_img") || $tgt.is(".fermerZoom")) {
			zi_fermer();
		};
		
		// suivante, précédente, dernière et première
		if ($tgt.is(".suivZoom") || $tgt.is(".precZoom") || $tgt.is(".derZoom") || $tgt.is(".premZoom")) {
			var l = '';
			var u = ($tgt.attr('rel'));
			var n = ($tgt.children('span').html());
			$('#zi_img').fadeOut(500,function(){
				zi_preloadImage(u,g,n,l);
			});		
		};	
		
		// pause
		if ($tgt.is(".pauseZoom")) {
			$("#zi_maitre").stop();
			var l = '';
			var u = ($tgt.attr('rel'));
			var n = ($tgt.children('span').html());
			$('#zi_img').fadeOut(500,function(){
				zi_preloadImage(u,g,n,l);
			});		
		};	
		
		// auto
		if ($tgt.is(".autoZoom")) {
			var l = 'auto';
			var u = ($tgt.attr('rel'));
			var n = ($tgt.children('span').html());
			zi_preloadImage(u,g,n,l);
		};
		
		// stop
		if ($tgt.is(".stopZoom")) {
			$("#zi_maitre").stop();
			var l = '';
			var n = 0;
			var u = $('a:eq(0)[rel='+g+']').attr('href');
			$('#zi_img').fadeOut(250,function(){
				zi_preloadImage(u,g,n,l);
			});
		};
		
	});
};

function zi_fermer()
{
	$("#zi_maitre").fadeTo("slow", 0, function(){});
	$("#zi_fond").fadeTo("slow", 0, function(){
		$("#zi_maitre").remove();
		$("#zi_fond").remove();
	});
};