////////////////////////////////////////////////////////////////////////////////\\
////////////////////////////////////////////////////////////////////////////////\\
/////////////////// LightBox + Divers effets by Typhon v.0.1.3 \\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

/* ------------------------------------

	Author		: Typhon
	Version		: 0.1.3
	e-Mail		: minigrapheur@live.fr
	Last Edit	: 23/06/2010
	
------------------------------------ */



/////////////////////////////////////////////////////////////\\
///////////////////////// MultiStyles \\\\\\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

/*	///////////////////// Options MultiStyles \\\\\\\\\\\\\\\\\\\\\

	var defautDesign = 'defautDesign'; // Id du fichier par défaut pour le style css

	//////////////////////////////!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

	// Au chargement on li le cookie
	window.onload = function(event)
	{
		var cookieValue = _readCookie('cssStyle');
		var idStyle = cookieValue ? cookieValue : defautDesign;
		_disabledStyles(idStyle);
	}

	// On active uniquement le style du cookie
	function _disabledStyles(newStyleLinkId)
	{
		var links = document.getElementsByTagName('link');
		for(i=0; styleLink = links[i]; i++)
		{
			var styleLinkId = styleLink.getAttribute('id');
			if(styleLinkId == newStyleLinkId) {
				_createCookie('cssStyle', styleLinkId, 128);
				styleLink.disabled = false;
			}
			else {
				styleLink.disabled = true;
			}
		}
	}

	//  On crée un cookie avec son nom, sa valeur et sa date d'expiration
	function _createCookie(cookieName, idValue, daysDuration)
	{
		// On créer un objet date
		var date = new Date();
		// On attribut à la date (avec setTime), la date d'aujourd'hui (avec getTime) + la durée du cookie pour obtenir sa date d'expiration.
		date.setTime(date.getTime()+(daysDuration*24*60*60*1000));
		// On récupère sa date d'expiration
		var expireDate = date.toGMTString();
		// On créer le cookie
		document.cookie = cookieName+' = '+idValue+'; expires = '+expireDate+'; path = /';
	}

	// On lit le cookie et on retourne sa valeur
	function _readCookie(cookieName)
	{
		// On créé l'équation du nom du cookie
		var cookieNameEQ = cookieName + '=';
		// On récupère tout les cookies du site et on les sépare dans un tableau
		var cookies = document.cookie.split(';');
		// On parcours les cookies et on s'arrete quand on arrive au dernier
		for(var i=0; i < cookies.length; i++)
		{
			// On récupère les cookie un à un
			var cookie = cookies[i];
			// Si le premier caractère du cookie est un espace
			if(cookie.charAt(0)==' ') {
				// Alors on le retire
				cookie = cookie.substr(1, cookie.length);
			}
			// Si un cookie contient l'équation
			if(cookie.indexOf(cookieNameEQ) == 0) {
				// Alors on retire l'équation du cookie pour n'en avoir plus qua sa valeur
				var cookieValue = cookie.substring(cookieNameEQ.length, cookie.length);
				// Et on retourne cette valeur
				return cookieValue;
			}
		}
		return null;
	}
*/


/////////////////////////////////////////////////////////////\\
////////////////////// Animate Scrolling \\\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


$(document).ready(function() {

	// Autres varaibles
	var arrPageSizes	= ___getPageSize();
	var pageWidth		= arrPageSizes[0];
	var pageHeight		= arrPageSizes[1];
	var windowWidth		= arrPageSizes[2];
	var windowHeight	= arrPageSizes[3];
	var windowYcenter	= windowHeight/2;
	var windowYquart	= windowHeight/4;
	var maximum			= pageHeight-windowHeight;

	///////////////////// Options Scrolling \\\\\\\\\\\\\\\\\\\\\

	// Scrolling vertical
	var timeScrolling	= 750; // Temps qu'il faut pour parcouris la page du lien ancre à l'élement ancré
	var effectScrolling	= 'easeOutQuint'; // Effet donné au scrolling, librairie des effets ici: http://gsgd.co.uk/sandbox/jquery/easing/
	var relDefaut		= 'top'; // Emplacement par défaut du scroll

	//////////////////////////////!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

	// Lancement scroll Verticale
	$('a[href^="#"]').click(function _animScroll() {

		var cible		= $(this).attr('href');
		var rel			= $(this).attr('rel');

		if(cible == '#top') {
			$('html,body').animate({scrollTop:0},timeScrolling,effectScrolling);
			return false;
		}
		else {
			var contentHeight	= document.getElementById(cible.substr(1, cible.length-1)).offsetHeight;
			var contentYcenter	= contentHeight/2;
			if($(cible).length >= 1) {
				var hauteur = $(cible).offset().top;
			}
			else {
				var hauteur = $('a[name='+cible.substr(1,cible.length-1)+']').offset().top;
			}


			if(rel != 'top' && rel != '1/quart' && rel != 'center' && rel !=  '3/quart' && rel != 'bottom') {
				rel = relDefaut;
			}

			if(rel == 'top') {
				$('html,body').animate({scrollTop:hauteur},timeScrolling,effectScrolling);
				return false;
			}
			else if(rel == 'center') {
				var calculeScroll = Math.round(hauteur-windowYcenter+contentYcenter);
				if(calculeScroll > maximum) {
					var scrollToTop = maximum;
				}
				else if(calculeScroll < 0) {
					var scrollToTop = 0;
				}
				else if(calculeScroll >= 0 && calculeScroll <= maximum){
					var scrollToTop = calculeScroll;
				}
				$('html,body').animate({scrollTop:scrollToTop},timeScrolling,effectScrolling);
				return false;
			}

			else if(rel == 'bottom') {
				var calculeScroll = Math.round(hauteur-windowHeight+contentHeight);
				if(calculeScroll > maximum) {
					var scrollToTop = maximum;
				}
				else if(calculeScroll < 0) {
					var scrollToTop = 0;
				}
				else if(calculeScroll >= 0 && calculeScroll <= maximum){
					var scrollToTop = calculeScroll;
				}
				$('html,body').animate({scrollTop:scrollToTop},timeScrolling,effectScrolling);
				return false;
			}

			else if(rel == '1/quart') {
				var calculeScroll = Math.round(hauteur-windowYquart)/*+contentYcenter // pour que sa soit le centre du conteneur qui arrive à la position */;
				if(calculeScroll > maximum) {
					var scrollToTop = maximum;
				}
				else if(calculeScroll < 0) {
					var scrollToTop = 0;
				}
				else if(calculeScroll >= 0 && calculeScroll <= maximum){
					var scrollToTop = calculeScroll;
				}
				$('html,body').animate({scrollTop:scrollToTop},timeScrolling,effectScrolling);
				return false;
			}

			else if(rel == '3/quart') {
				var calculeScroll = Math.round(hauteur-(3*windowYquart)/*+contentYcenter // pour que sa soit le centre du conteneur qui arrive à la position */);
				if(calculeScroll > maximum) {
					var scrollToTop = maximum;
				}
				else if(calculeScroll < 0) {
					var scrollToTop = 0;
				}
				else if(calculeScroll >= 0 && calculeScroll <= maximum){
					var scrollToTop = calculeScroll;
				}
				$('html,body').animate({scrollTop:scrollToTop},timeScrolling,effectScrolling);
				return false;
			}
		}
		return false;
	});


	///////////////////// Options Scrolling \\\\\\\\\\\\\\\\\\\\\

	// Scrolling horizontal
	var placePageDefaut		= 'left'; // Emplacement de la seconde page, 'left' ou 'right' du côté ou elle apparaitra (par défaut)
	var appearSideDefaut	= 'reverse'; // Manière dont le changement de page se fait, 'reverse' elle se croise, 'opposed' elle se suivent (par défaut)
	var timeAppear			= 2000; // Temps pour que le contenue original disparaisse et que le secondaire apparaisse

	//////////////////////////////!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

	// Lancement simulation scroll Horizontal
	$('a[href^="&"]').click(function _animScroll() {

		var cibleSF		= $(this).attr('href');
		var startFinish	= cibleSF.split('/');
		var start		= startFinish[0]
		var startId		= start.substr(1,start.length-1);
		var finishId	= startFinish[1];

		var relSF		= $(this).attr('rel');
		var placeAppear	= relSF.split('/');
		var placePage	= placeAppear[0];
		var appearSide	= placeAppear[1];

		// Autres varaibles pour définir les paramètres des options
		if(placePage != 'left' && placePage != 'right') {
			placePage = placePageDefaut;
		}

		if(appearSide != 'reverse' && appearSide != 'opposed') {
			appearSide = appearSideDefaut;
		}

		if(placePage == 'left') {
			var positionToLeft = -pageWidth-500;
			if(appearSide == 'reverse') {
				var positionToLeft2 = -pageWidth-500;
			}
			else if(appearSide == 'opposed') {
				var positionToLeft2 = pageWidth+500;
			}
			else {
				var positionToLeft2 = -pageWidth-500;
			}
		}
		else if(placePage == 'right') {
			var positionToLeft = pageWidth+500;
			if(appearSide == 'reverse') {
				var positionToLeft2 = pageWidth+500;
			}
			else if(appearSide == 'opposed') {
				var positionToLeft2 = -pageWidth-500;
			}
			else {
				var positionToLeft2 = pageWidth+500;
			}
		}

		// css de base pour la seconde page caché
		$('#'+finishId).css({
			position			: 'absolute',
			top					: '0',
			width				: '100%',
			left				: positionToLeft+'px'
		});

		// Et on annime
		$('#'+finishId).animate({
			left				: '0',
			opacity				: 'show'
		}, timeAppear, function() {
			$('#'+finishId).css({
				position : 'relative'
			});
		});
		$('#'+startId).css({
			position			: 'absolute',
			width				: '100%'
		});
		$('#'+startId).animate({
			left				: positionToLeft2+'px',
			opacity				: 'hide'
		}, timeAppear, function() {
			if(appearSide == 'opposed') {
				$('#'+startId).css({
					left : -positionToLeft2+'px'
				});
			}
		});
		return false;
	});

	return false;

});



////////////////////////////////////////////////////////////\\
////////////////////////// LightBox \\\\\\\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


$(document).ready(function() {

	////////////////////// Options LightBox \\\\\\\\\\\\\\\\\\\\\

	var galleryId		= 'galerie' // Id de l'élement contenant les liens des images de la lightbox à afficher

	var timeAppear		= 2500; // Durée en milliseconde de transition pour ouvrir la lightbox, valeur conseillé: entre 1000 et 3000
	var timeDisappear	= 2000; // Durée en milliseconde de transition pour fermer la lightbox, valeur conseillé: entre 1000 et 3000
	var timeChange		= 2000; // Temps de transition pour changer d'image (lors de la navigation avec les bouton précédent et suivant)
	var diaporama		= 3000; // Temps pendant lequel l'image rester afficher en mode diaporama

	// Général
	var txtColor		= '#ffffff'; // Couleur du texte pour la lightbox
	var txtSize			= '24px'; // Taille du texte pour le titre de la lightbox
	var bgColor			= '#333333'; // Couleur du fond de la lightbox
	var bgOpacity		= '1'; // Valeur de l'oppacité du fond
	var errorBox		= "Une erreur c'est produite lors du chargement de l'image."; // Texte par défaut si un erreur survient lors du chargement
	var abordBox		= "Le chargement de l'image a été interrompu."; // Texte par défaut si le chargement est interrompu

	// Barre de navigation
	var marginTitle		= '2'; // Marge en haut du titre pour le centré (à toi de voir la valeur qu'il faut xD)
	var bgColorNav		= '#222222'; // Couleur de la barre de navigation
	var borderNav		= '1px solid #111111'; // Bordure de la barre de navigation
	var heightNav		= '35'; // Hauteur de la barre de navigation
	var shadowNavWidth	= '10'; // Taille de l'ombre porté de la barre de navigation [Marche uniquement sur FireFox]
	var shadowNavColor	= '#111111'; // Couleur de l'ombre porté de la barre de navigation [Marche uniquement sur FireFox]
	var bgPlay			= 'gallery/lightbox/play.png'; // Url de l'image du bouton 'Play'
	var bgStop			= 'gallery/lightbox/stop.png'; // Url de l'image du bouton 'Stop'
	var playWidth		= '35'; // Largeur du bouton Play/Pause
	var playHeight		= '35'; // Hauteur du bouton Play/Pause
	var bgPrev			= 'gallery/lightbox/prev.png'; // Url de l'image du bouton 'Prev'
	var bgNext			= 'gallery/lightbox/next.png'; // Url de l'image du bouton 'Next'
	var nextWidth		= '39'; // Largeur du bouton Next/Prev
	var nextHeight		= '35'; // Hauteur du bouton Next/Prev
	var bgClose			= 'gallery/lightbox/close.png'; // Url de l'image du bouton 'Close'
	var closeWidth		= '35'; // Largeur du bouton Close
	var closeHeight		= '35'; // Hauteur du bouton Close

	// Conteneur de l'image
	var bgColor2		= '#555555'; // Couleur du fond qui contient l'image
	var marginNS		= '25'; // Marge à l'extérieur du cadre qui contient l'image (distance minimum entre le bord du cadre et le bord de la fênetre) sur le haut et le bas
	var marginEW		= '50'; // Marge à l'extérieur du cadre qui contient l'image (distance minimum entre le bord du cadre et le bord de la fênetre) Sur les bord
	var paddingNS		= '40'; // Marge à l'intérieur du cadre qui contient l'image (distance entre le bord du cadre et l'image) sur le haut et le bas
	var paddingEW		= '80'; // Marge à l'intérieur du cadre qui contient l'image (distance entre le bord du cadre et l'image) Sur les bord
	var border			= '1px solid #222222'; // Bordure du cadre qui contient l'image
	var radius			= '50px'; // Arrondi des angle du cadre qui contient l'image (La valeur doit être inférieur au double du padding) [Marche uniquement sur FireFox]
	var shadowWidth		= '20'; // Taille de l'ombre porté de la barre de navigation [Marche uniquement sur FireFox]
	var shadowColor		= '#111111'; // Couleur de l'ombre porté de la barre de navigation [Marche uniquement sur FireFox]

	//////////////////////////////!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

	$('#'+galleryId+' a[href^="$"]').click(function _lightbox() {

		// -------------- Variables necessaires --------------
		var objClick	= $(this); // Objet cliqué
		var urlLink		= objClick.attr('href'); // Url de l'objet cliqué
		var urlTitle	= objClick.attr('title'); // Titre de l'objet cliqué
		var imgLink		= urlLink.substr(1,urlLink.length-1); // Url de l'image à afficher
		var nbrImg		= $('#'+galleryId).find('a').length; // Nombre d'image contenue dans la lightbox
		var save = jQuery.extend({imgPosition : 0}); // Ici on enregistre la position de l'image
		
		var lightbox	= '<div id="lightbox" style="display: none;">			<div id="overlay" style="display: none;"></div>			<div id="contentbox" style="display: none;"><div id="navbox"><div id="toolbox"><a href="#play" id="playbox"></a><a href="#stop" id="stopbox" style="display: none;"></a><a href="#prev" id="prevbox"></a><span id="titlebox"></span><a href="#close" id="closebox"></a><a href="#next" id="nextbox"></a></div></div>	<div id="imgboxparrent"><div id="imgbox"><img id="imgboxchild" /><span id="errorbox"></span></div></div></div>			<div id="loadbox" style="display: none;"></div>			</div>';

		// -------------- Création de la LightBox --------------
		if($('#lightbox').length == 0) { // Si l'élement ayant pour Id 'lightbox' n'existe pas alors on le créer, on l'affiche et on anime le chargement
			$('body').append(lightbox);
			_open();
			_animateLoad();
			_preload();
		}
		else { // Sinon on ne fait que l'afficher
			_open();
		}

		// -------------- Style css de la LightBox --------------
		$('#lightbox').css({
			position			: 'absolute',
			width				: '100%',
			height				: '100%',
			'z-index'			: '200',
			top					: '0',
			left				: '0',
			color				: txtColor
		});
		$('#overlay').css({
			position			: 'fixed',
			width				: '100%',
			height				: '100%',
			top					: '0',
			left				: '0',
			'background-color'	: bgColor
		});
		$('#contentbox').css({
			position			: 'absolute',
			width				: '100%',
			height				: '100%',
			left				: '0'
		});
		$('#navbox').css({
			position			: 'fixed',
			width				: '100%',
			left				: '0',
			'z-index'			: '200',
			height				: heightNav+'px',
			'background-color'	: bgColorNav,
			'border-bottom'		: borderNav,
			top					: -1*((shadowNavWidth*1)+(heightNav*1))+'px',
			'-moz-box-shadow'	: '0 0 '+shadowNavWidth+'px '+shadowNavColor
		});
		$('#toolbox').css({
			height				: heightNav+'px',
			margin				: '0 auto',
			width				: '800px',
			'text-align'		: 'center',
			overflow			: 'hidden',
			position			: 'relative'
		});
		$('#playbox').css({
			position			: 'absolute',
			'background-image'	: 'url('+bgPlay+')',
			left				: '0',
			width				: playWidth+'px',
			height				: playHeight+'px'
		});
		$('#playbox').attr({
			title				: 'Play'
		});
		$('#stopbox').css({
			position			: 'absolute',
			'background-image'	: 'url('+bgStop+')',
			left				: '0',
			width				: playWidth+'px',
			height				: playHeight+'px'
		});
		$('#stopbox').attr({
			title				: 'Pause'
		});
		$('#prevbox').css({
			position			: 'absolute',
			'background-image'	: 'url('+bgPrev+')',
			left				: (50*1)+(1*playWidth)+'px',
			width				: nextWidth+'px',
			height				: nextHeight+'px'
		});
		$('#prevbox').attr({
			title				: 'Previous'
		});
		$('#titlebox').css({
			display				: 'inline-block',
			'margin-top'		: marginTitle+'px',
			'font-size'			: txtSize
		});
		$('#nextbox').css({
			position			: 'absolute',
			'background-image'	: 'url('+bgNext+')',
			right				: (50*1)+(1*closeWidth)+'px',
			width				: nextWidth+'px',
			height				: nextHeight+'px'
		});
		$('#nextbox').attr({
			title				: 'Next'
		});
		$('#closebox').css({
			position			: 'absolute',
			'background-image'	: 'url('+bgClose+')',
			right				: '0',
			width				: closeWidth+'px',
			height				: closeHeight+'px'
		});
		$('#closebox').attr({
			title				: 'Close'
		});
		$('#imgboxparrent').css({
			margin				: '0 auto',
			padding				: (marginNS*1)+(heightNav*1)+'px '+marginEW+'px '+marginNS+'px'
		});
		$('#imgbox').css({
			display				: 'block',
			position			: 'relative',
			'background-color'	: bgColor2,
			padding				: paddingNS+'px '+paddingEW+'px',
			border				: border,
			'-moz-border-radius': radius
		});
		$('#imgboxchild').css({
			display				: 'block',
			margin				: '0 auto',
			'-moz-box-shadow'	: '0 0 '+shadowWidth+'px '+shadowColor
		});
		$('#loadbox').css({
			position			: 'fixed',
			cursor				: 'pointer',
			'z-index'			: '200',
			width				: '40px',
			height				: '40px',
			top					: '50%',
			left				: '50%',
			'margin-left'		: '-20px',
			'margin-top'		: '-20px',
			'background-image'	: 'url("gallery/lightbox/loading.png")'
		});
		$('#loadbox').attr({
			title	: 'Close'
		});

		// -------------- C'est ici que sont déclarer les commandes de la LightBox (fermer, défiler...) --------------
		$(document).keyup(function(event) {
			if(event.keyCode == 27 && $('#lightbox:visible').length > 0) {
				_close();
			}
		});
		$('#closebox').click(_close);
		$('#loadbox').click(_close);
		$('#nextbox').click(_next);
		$('#prevbox').click(_prev);
		$('#playbox').click(_play);
		$('#stopbox').click(_stop);

		// -------------- On affiche le fond de la LightBox --------------
		function _open() {
			if( nbrImg == 1 ) {
				$('#nextbox').css({
					display	: 'none'
				});
				$('#prevbox').css({
					display	: 'none'
				});
				$('#playbox').css({
					display	: 'none'
				});	
			}
			// On affiche le fond
			$('#lightbox').animate({
				opacity	: 'show'
			}, timeAppear, null);
			if(bgOpacity < '1' && bgOpacity >= '0') {
				$('#overlay').css({
					opacity	: bgOpacity
				});
			}
			$('#overlay').animate({
				opacity	: 'show'
			}, timeAppear, function() {
				// On Lance le chargement
				_load('open');
			});
			return false;
		}

		// -------------- Cache la LightBox --------------
		function _close() {
			$('#contentbox').animate({
				opacity : 'hide'
			}, timeDisappear, null);
			$('#overlay').animate({
				opacity : 'hide'
			}, timeDisappear, null);
			$('#loadbox').animate({
				opacity : 'hide'
			}, timeDisappear, null);
			$('#lightbox').animate({
				opacity : 'hide'
			}, timeDisappear, function() {
				$('#navbox').css({
					top : -1*((shadowNavWidth*1)+(heightNav*1))+'px'
				});
			});
			_stop();
			return false;
		}
		
		// -------------- Annimation du chargement --------------
		var loading = 0;
		function _animateLoad() {
			if(loading < 11) {
				loading++
			}
			else {
				loading = 0;
			}
			var loadPosition = loading*40;
			$('#loadbox').css({
				'background-position'	: '0px -'+loadPosition+'px'
			});
			setTimeout(_animateLoad, 100); // on relance toutes les 0,1 secondes
		}

		// -------------- Préchargement des images de la lightbox --------------
		function _preload() {
			for (i=0; i < nbrImg; i++) {
				var imgUrl = $('#'+galleryId).find('a:eq('+i+')').attr('href'); // Lien des images
				var imgSrc = imgUrl.substr(1,imgUrl.length-1);
				loadImg = new Image();
				loadImg.src = imgSrc;
			}
		}

		// -------------- On vérifie le chargement de l'image avant de continuer --------------
		function _load(fonction) {
			// On affiche le chargement
			$('#loadbox').animate({
				opacity	: 'show'
			}, 0, null);

			if(fonction =='open') {
				var openImg = new Image();
				openImg.onerror = function() {_showImg(0, 0, 'error/open', imgLink, urlTitle)};
				openImg.onabord = function() {_showImg(0, 0, 'abord/open', imgLink, urlTitle)};
				openImg.onload = function() {
					var openImgWidth = openImg.width;
					var openImgHeight = openImg.height;
					_showImg(openImgWidth, openImgHeight, 'open', imgLink, urlTitle);// On lance la fonction pour afficher l'image
					openImg.onload = function() {}; // Nettoyage du onLoad, IE behaves irratically with animated gifs otherwise
				};
				openImg.src = imgLink;
			}
			else if(fonction == 'change') {
				var newUrlTitle	= $('#galerie').find('a:eq('+save.imgPosition+')').attr('title');
				var newUrlLink	= $('#galerie').find('a:eq('+save.imgPosition+')').attr('href');
				var newImgLink	= newUrlLink.substr(1,newUrlLink.length-1);
				var newImg = new Image();
				newImg.onerror = function() {_showImg(0, 0, 'error/change', newImgLink, newUrlTitle)};
				newImg.onabord = function() {_showImg(0, 0, 'abord/change', newImgLink, newUrlTitle)};
				newImg.onload = function() {
					var changeImgWidth = newImg.width;
					var changeImgHeight = newImg.height;
					_showImg(changeImgWidth, changeImgHeight, 'change', newImgLink, newUrlTitle);// On lance la fonction pour afficher l'image
					newImg.onload = function() {}; // Nettoyage du onLoad, IE behaves irratically with animated gifs otherwise
				};
				newImg.src = newImgLink;
			}
			return false;
		}

		// -------------- On affiche l'image une fois chargé --------------
		function _showImg(imgWidth, imgHeight, fonction, imgSrc, imgTitle) {
			var arrScrollSizes	= ___getScrollSize();
			var scrollToTop		= arrScrollSizes[0];
			var scrollToLeft	= arrScrollSizes[1];
			$('#loadbox').animate({
				opacity	: 'hide'
			}, 0, null);
			$('#contentbox').css({
				top		: scrollToTop+'px'
			});
			$('#titlebox').text(
				imgTitle
			);
			if(fonction == 'open' || fonction == 'change') {
				$('#errorbox').text(
					""
				);
				$('#imgboxparrent').css({
					width	: imgWidth+(paddingEW*2)+'px'
				});
				$('#imgbox').css({
					width	: imgWidth+'px'
				});
				$('#imgboxchild').attr({
					src		: imgSrc,
					title	: imgTitle,
					width	: imgWidth,
					height	: imgHeight
				});
			}
			else if(fonction == 'error/open' || fonction == 'error/change' || fonction == 'abord/open' || fonction == 'abord/change') {
				$('#contentbox').css({
					'text-align'	: 'center'
				});
				$('#imgboxparrent').css({
					display	: 'inline-block',
					width	: 'auto'
				});
				$('#imgbox').css({
					display	: 'inline-block',
					width	: 'auto'
				});
				$('#imgboxchild').attr({
					src		: imgSrc,
					title	: imgTitle,
					width	: 0,
					height	: 0
				});
			}

			if(fonction == 'open') {
				$('#contentbox').animate({
						opacity	: 'show'
				}, timeAppear, null);
				$('#navbox').animate({
						top	: '0'
				}, 800, null);
			}
			else if(fonction == 'change') {
				$('#contentbox').animate({
						opacity	: 'show'
				}, Math.round(timeChange/2), function() {
					$('#navbox').animate({
							top	: '0'
					}, 800, null);
				});
			}
			else if(fonction == 'error/open') {
				$('#errorbox').text(
					errorBox
				);
				$('#contentbox').animate({
						opacity	: 'show'
				}, timeAppear, function() {
					$('#navbox').animate({
							top	: '0'
					}, 800, null);
				});
			}
			else if(fonction == 'error/change') {
				$('#errorbox').text(
					errorBox
				);
				$('#contentbox').animate({
						opacity	: 'show'
				}, Math.round(timeChange/2), function() {
					$('#navbox').animate({
							top	: '0'
					}, 800, null);
				});
			}
			else if(fonction == 'abord/open') {
				$('#errorboxerro').text(
					abordBox
				);
				$('#contentbox').animate({
						opacity	: 'show'
				}, timeAppear, function() {
					$('#navbox').animate({
							top	: '0'
					}, 800, null);
				});
			}
			else if(fonction == 'abord/change') {
				$('#imgbox').text(
					abordBox
				);
				$('#contentbox').animate({
						opacity	: 'show'
				}, Math.round(timeChange/2), function() {
					$('#navbox').animate({
							top	: '0'
					}, 800, null);
				});
			}
			return false;
		}

		// -------------- Passe à l'image suivante --------------
		function _next() {
			// Détermine l'emplacement actuel de l'image
			var $imgLink = '$'+$('#imgboxchild').attr('src');
			if( nbrImg > 1 ) {
				save.imgPosition = 0;
				while($('#'+galleryId).find('a:eq('+save.imgPosition+')').attr('href') != $imgLink) {
						save.imgPosition++
				}
			}

			// On incrément l'emplacement actuel de l'image pour récupérer l'emplacement de l'image suivante
			if(save.imgPosition+1 < nbrImg) {
				save.imgPosition++;
			}
			else {
				save.imgPosition = 0;
			}

			// On cache la contentbox et on remonre la navbox
			$('#contentbox').animate({
				opacity : 'hide'
			}, Math.round(timeChange/2), function() {
				$('#navbox').css({
					top	: -1*((shadowNavWidth*1)+(heightNav*1))+'px'
				});
				// On lance le chargement de l'image suivante
				_load('change');
			});
			return false;
		}

		// -------------- Passe à l'image précédente --------------
		function _prev() {
			// Détermine l'emplacement actuel de l'image
			var $imgLink = '$'+$('#imgboxchild').attr('src');
			if( nbrImg > 1 ) {
				save.imgPosition = 0;
				while($('#'+galleryId).find('a:eq('+save.imgPosition+')').attr('href') != $imgLink) {
						save.imgPosition++
				}
			}

			// On désincrément l'emplacement actuel de l'image pour récupérer l'emplacement de l'image précédente
			if(save.imgPosition > 0) {
				save.imgPosition--;
			}
			else {
				save.imgPosition = nbrImg-1;
			}

			// On cache la contentbox et on remonre la navbox
			$('#contentbox').animate({
				opacity : 'hide'
			}, Math.round(timeChange/2), function() {
				$('#navbox').css({
					top	: -1*((shadowNavWidth*1)+(heightNav*1))+'px'
				});
				// On lance le chargement de l'image suivante
				_load('change');
			});
			return false;
		}

		// -------------- Active le 'Diaporama'  --------------
		function _diaporama(action, delay) {
			setTimeout(function() {
				if(action == 'play' && stopDiapo == false) {
					_next();
					_diaporama('play', (1*diaporama)+(1*timeChange))
				}
				else if(action == 'stop' && playDiapo == false) {
					return stopDiapo = true;
				}
			}, delay);
			return false;
		}

		function _play() {
			$('#playbox').animate({
				opacity : 'hide'
			}, 800, null);
			$('#stopbox').animate({
				opacity : 'show'
			}, 800, null);
			_diaporama('play', diaporama);
			return stopDiapo = false;
		}

		function _stop() {
			$('#stopbox').animate({
				opacity : 'hide'
			}, 800, null);
			$('#playbox').animate({
				opacity : 'show'
			}, 800, null);
			_diaporama('stop', 0);
			return playDiapo = false;
		}
		return false;
	});

	return false;
});



////////////////////////////////////////////////////////////\\
///////////////////// Page & Window View \\\\\\\\\\\\\\\\\\\\\
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


// Cette fonction permet de récupérer les dimensions de la page et les dimensions de la fenêtre
function ___getPageSize() {
	var xScroll, yScroll;
	if(window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	}
	else if(document.body.scrollHeight > document.body.offsetHeight) {
		// all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else {
		// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if(self.innerHeight) {
		// all except Explorer
		if(document.documentElement.clientWidth) {
			windowWidth = document.documentElement.clientWidth; 
		}
		else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	}
	else if(document.documentElement && document.documentElement.clientHeight) {
		// Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if(document.body) {
		// other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight) {
		pageHeight = windowHeight;
	}
	else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth) {	
		pageWidth = windowWidth;	
	}
	else {
		pageWidth = xScroll;;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
}

// Cette fonction permet de récupérer la valeur des scrolls
function ___getScrollSize() {
	var scrollToTop, scrollToLeft;
	scrollToTop = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrollToTop = window.pageYOffset;
	}
	else if( document.body && ( document.body.scrollTop ) ) {
		//DOM compliant
		scrollToTop = document.body.scrollTop;
	}
	else if( document.documentElement && ( document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrollToTop = document.documentElement.scrollTop;
	}

	scrollToLeft = 0;
	if( typeof( window.pageXOffset ) == 'number' ) {
		//Netscape compliant
		scrollToLeft = window.pageXOffset;
	}
	else if( document.body && ( document.body.scrollLeft ) ) {
		//DOM compliant
		scrollToLeft = document.body.scrollLeft;
	}
	else if( document.documentElement && ( document.documentElement.scrollLeft ) ) {
		//IE6 standards compliant mode
		scrollToLeft = document.documentElement.scrollLeft;
	}
	arrayScrollSize = new Array(scrollToTop,scrollToLeft);
	return arrayScrollSize;
}


/* ------------------------------------
////////////// ChangeLog \\\\\\\\\\\\\\

v.0.1.1 :	- Ajout: Animate Scrolling
			- Ajout: LightBox
			- Ajout: Page & Window View

v.0.1.2 :	- Modification: Animate Scrolling - Option Vertical & Horizontal
			- Bug Fix: LightBox - Compatibilité Internet Explorer 7&-
			- Modification: LightBox - Nouveau Style
			- Bug Fix: Page & Window View - Lorsque seul le scroll horizontal était présent il n'étais pas prit en compte pour FireFox

v.0.1.3 :	- Ajout: MultiStyles
			- Bug Fix: LightBox - Si il y avait une erreur de chargement, le chargement ne s'arretais pas, maintenant le visiteur est prévenus de l'erreur et peux continuer
			- Modification: LightBox - Fonction de préchargement des images de la lightbox à son ouverture pour éviter une attente trop longue par la suite

////////////// ChangeLog \\\\\\\\\\\\\\
------------------------------------ */



/* ------------------------------------
///////////////// FAQ \\\\\\\\\\\\\\\\\

{-} MultiStyles :

	[*] Principe:
	Permet de donner au visiteur de votre site le choix entre plusieurs design.

	[*] Fonctionnement:
	Vous devez créer autant de fichier css que de design que vous voudrez, puis dans le head du site préciser pour chacun des design dans leur balises link un Id différent et mettre cet Id 'defautDesign' pour le style par défaut (paramétrable dans les options);
	Après il vous faut créer autant de bouton que de style et pour chacun des boutons préciser pour l'attribut 'onclick' ce morceau de code '_disabledStyles('IDSTYLE'); history.go(0);' avec à la place de 'IDSTYLE' l'Id du style qu'il affichera.

	[*] Exemple:
	// Dans le head du site
		<link rel="stylesheet" media="screen" type="text/css" id="defautDesign" href="design_1.css" />
		<link rel="stylesheet" media="screen" type="text/css" id="secondDesign" href="design_2.css" />
		<link rel="stylesheet" media="screen" type="text/css" id="thirdDesign" href="design_3.css" />
	
	// Dans le body du site
		<input type="button" onClick="_disabledStyles('defautDesign'); history.go(0);"s>
		<input type="button" onClick="_disabledStyles('secondDesign'); history.go(0);">
		<input type="button" onClick="_disabledStyles('thirdDesign'); history.go(0);">



{-} Animate Scrolling :

	[*] Principe:
	Permet de faire scroller la page du lien ancre à l'élément ancré lors du clique sur le lien ancre.

	[*] Fonctionnement:
		- Vertical:
			Il faut créer un lien ancre, dont l'attribut 'href' commence par '#';
			Puis de rajouter l'Id de l'élément ancré vers lequels le scroll va s'effectué apèrs '#' de l'attibut 'href'.

		- Horizontal:
			Il faut créer un lien ancre, dont l'attribut 'href' commence par '&';
			Puis de rajouter l'Id de l'élément ancré de départ, un '/' et l'Id de l'élement ancré vers lequels le scroll va s'effectué apèrs '&' de l'attibut 'href'.

			Le deuxième contenue doit être impérativement en "display: none;" (Ce que vous pouvez préciser en css ou directement dans l'élement avec l'attribut style="").
			Les deux contenues doivent être impérativement dans un même contenue parrent étant en "position: relative".

	[*] Options:
		- Vertical:
			Pour revenir tout en haut de la page il faut indiquer '#top' dans l'attribut 'href';
			Par défaut le scroll va venir centrer l'élément ancré au haut de la fenêtre (modifiable dans les options),
			On peut précisier dans l'attribut 'rel' du lien: 'top', '1/quart', 'center', '3/quart' ou 'bottom' pour centré l'élement ancré au niveau correspondant de la fenêtre.

		- Horizontal:
			Ici on peut choisir la manière dont les élement vont défiler, il peuvent venir de droite ou de gauche,
			Et on peut choisir que le deuxième élément apparaise du même côté 'reverse" (dans ce cas les deux éléments vont se croiser) ou de l'autre 'opposed' (dans ce cas les deux éléments vont se suivre)
			Par défaut les options sont 'left' et 'reverse' pour les personnaliser il faut preciser en premier 'right' ou 'left' puis mettre un '/' et enfin 'reverse' ou 'opposed' dans l'attribut 'rel' du lien

	[*] Exemple:
		- Vertical:
			<a href="#block2" rel="center">Centrer le Block 2 en millieu de page</a>

		- Horizontal:
			<a href="#contentA/ContentB" rel="left/reverse">Aller du contentA au content B par la gauche en mode reverse</a>

	[*] Petit Plus:
	Le scrolling horizontal et en faite un déplacement du contenue dans la fênetre simulant un scrolling,
	ceci pour éviter de pouvoir scroller manuelement avec la barre de scroll horizontal qui est reserver pour les contenus trop grand sur les écrans des petites résolutions.



{-} LightBox :

	[*] Principe:
	La LightBox permet de voir en taille et qualité réelle les images de votre galerie.

	[*] Fonctionnement:
	Pour chaque image il faut créer un lien, dont l'attribut 'href' commence par '$' précédé du lien de votre image;
	Il faut que chacun des liens soit inclut dans un dans un élement ayant pour Id celui préciser dans les options de la lightbox 'galerie' (Vous pouvez le modifier dans les options de la lightbox),
	Il ne doit pas y avoir d'autre lien que ceux qui contienne les liens des images.

	[*] Options:
	Vous pouvez regler dans les options de la lightbox les paramètre CSS de la lightbox, les temps d'affichage de transition les images de la barre de navigation...

	[*] Exemple:
	<div id="galerie">
		<a href="$images/image-1.png">Voir mon image n°1</a>
		<a href="$images/image-2.jpg">Voir mon image n°2</a>
		<a href="$images/image-3.gif">Voir mon image n°3</a>
	</div>
	
	[*] Petit Plus:
	En faite la lightbox et un contenu caché dont tout est prédéfinit dans le script, et qui s'affiche lors du clique sur le lien.



{-} Page & Window View :

	[*] Principe:
	C'est un ensemble de fonctions qui permetent de récuperer les dimensions de la fenêtre du visiteur, celles de la page, ou encore la valeur du scrollToTop et ScrollToLeft.

	[*] Petit Plus:
	Les calcules pour récuperer les valeurs s'effectuent une fois la fonction correspondant lancée avec _getPageSize() ou _getScrollSize().

///////////////// FAQ \\\\\\\\\\\\\\\\\
------------------------------------ */



// End Thanks !