{literal}
<script language="javascript" type="text/javascript" src="{/literal}{$_module.wwwpath}{literal}customs/default/js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="{/literal}{$_module.wwwpath}{literal}customs/default/css/style.css" />
<div id="bg">
<a href="#" class="nextImageBtn" title="Suivant"></a>
<a href="#" class="prevImageBtn" title="Précédent"></a>
{/literal}
  {foreach from=$_vars.first item=img key=k } <img src="{$_module.ressources}{$img.chemin}" alt="" title="" id="bgimg" /> {/foreach}
{literal}
</div>
<div id="preloader"><img src="{/literal}{$_module.wwwpath}{literal}customs/default/img/ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="&Eacute;largir" onClick="ImageViewMode('full');return false"><img src="{/literal}{$_module.wwwpath}{literal}customs/default/img/toolbar_fs_icon.png" width="50" height="50"  /></a></div>
<div id="thumbnails_wrapper">
  <div id="outer_container">
    <div class="thumbScroller">
      <div class="container">
		{/literal}
        {foreach from=$_vars.result item=img key=k }
        <div class="content">
          <div><a href="{$_module.ressources}{$img.chemin}"><img src="{$_module.ressources}miniatures/{$img.chemin}" title="" alt="" class="thumb" /></a></div>
        </div>
        {/foreach}
		{literal}
		</div>
    </div>
  </div>
</div>
<script>
$defaultViewMode="full";
$tsMargin=30;
$scrollEasing=600; 
$scrollEasingType="easeOutCirc"; 
$thumbnailsContainerOpacity=0.8; 
$thumbnailsContainerMouseOutOpacity=1; 
$thumbnailsOpacity=0.6; 
$nextPrevBtnsInitState="show";
$keyboardNavigation="on"; 

$thumbnails_wrapper=jQuery("#thumbnails_wrapper");
$outer_container=jQuery("#outer_container");
$thumbScroller=jQuery(".thumbScroller");
$thumbScroller_container=jQuery(".thumbScroller .container");
$thumbScroller_content=jQuery(".thumbScroller .content");
$thumbScroller_thumb=jQuery(".thumbScroller .thumb");
$preloader=jQuery("#preloader");
$toolbar=jQuery("#toolbar");
$toolbar_a=jQuery("#toolbar a");
$bgimg=jQuery("#bgimg");
$img_title=jQuery("#img_title");
$nextImageBtn=jQuery(".nextImageBtn");
$prevImageBtn=jQuery(".prevImageBtn");

jQuery(window).load(function() {
	$toolbar.data("imageViewMode",$defaultViewMode);
	if($defaultViewMode=="full"){
		$toolbar_a.html("<img src='{/literal}{$_module.wwwpath}{literal}customs/default/img/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restorer");
	} else {
		$toolbar_a.html("<img src='{/literal}{$_module.wwwpath}{literal}customs/default/img/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximiser");
	}
	ShowHideNextPrev($nextPrevBtnsInitState);
	$thumbScroller_container.css("marginLeft",$tsMargin+"px");
	sliderLeft=$thumbScroller_container.position().left;
	sliderWidth=$outer_container.width();
	$thumbScroller.css("width",sliderWidth);
	var totalContent=0;
	fadeSpeed=200;
	
	var $the_outer_container=document.getElementById("outer_container");
	var $placement=findPos($the_outer_container);
	
	$thumbScroller_content.each(function () {
		var $this=jQuery(this);
		totalContent+=$this.innerWidth();
		$thumbScroller_container.css("width",totalContent);
		$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
	});

	$thumbScroller.mousemove(function(e){
		if($thumbScroller_container.width()>sliderWidth){
	  		var mouseCoords=(e.pageX - $placement[1]);
	  		var mousePercentX=mouseCoords/sliderWidth;
	  		var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
	  		var thePosA=mouseCoords-destX;
	  		var thePosB=destX-mouseCoords;
	  		if(mouseCoords>destX){
		  		$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); 
	  		} else if(mouseCoords<destX){
		  		$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); 
	  		} else {
				$thumbScroller_container.stop();  
	  		}
		}
	});

	$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
	$thumbnails_wrapper.hover(
		function(){
			var $this=jQuery(this);
			$this.stop().fadeTo("slow", 1);
		},
		function(){
			var $this=jQuery(this);
			$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
		}
	);

	$thumbScroller_thumb.hover(
		function(){ 
			var $this=jQuery(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){
			var $this=jQuery(this);
			$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
		}
	);

	jQuery(window).resize(function() {
		FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
		$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
		var newWidth=$outer_container.width();
		$thumbScroller.css("width",newWidth);
		sliderWidth=newWidth;
		$placement=findPos($the_outer_container);
	});

	var the1stImg = new Image();
	the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
	the1stImg.src = $bgimg.attr("src");
	$outer_container.data("nextImage",jQuery(".content").first().next().find("a").attr("href"));
	$outer_container.data("prevImage",jQuery(".content").last().find("a").attr("href"));
});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
	$this.fadeOut("fast",function(){
		$this.attr("src", "").attr("src", imgSrc);
		FullScreenBackground($this,imageWidth,imageHeight);
		$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
		var imageTitle=$img_title.data("imageTitle");
		if(imageTitle){
			$this.attr("alt", imageTitle).attr("title", imageTitle);
			$img_title.fadeOut("fast",function(){
				$img_title.html(imageTitle).fadeIn();
			});
		} else {
			$img_title.fadeOut("fast",function(){
				$img_title.html($this.attr("title")).fadeIn();
			});
		}
	});
}

if($toolbar.css("display")!="none"){
	$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
	function(){
		var $this=jQuery(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){
		var $this=jQuery(this);
		$this.stop().fadeTo("fast", 0.4);
	}
);

jQuery("#outer_container a").click(function(event){
	event.preventDefault();
	var $this=jQuery(this);
	GetNextPrevImages($this);
	GetImageTitle($this);
	SwitchImage(this);
	ShowHideNextPrev("show");
}); 

$nextImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("nextImage"));
	var $this=jQuery("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

$prevImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("prevImage"));
	var $this=jQuery("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

if($keyboardNavigation=="on"){
jQuery(document).keydown(function(ev) {
    if(ev.keyCode == 39) {
        SwitchImage($outer_container.data("nextImage"));
		var $this=jQuery("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false;
    } else if(ev.keyCode == 37) {
        SwitchImage($outer_container.data("prevImage"));
		var $this=jQuery("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; 
    }
});
}

function ShowHideNextPrev(state){
	if(state=="hide"){
		$nextImageBtn.fadeOut();
		$prevImageBtn.fadeOut();
	} else {
		$nextImageBtn.fadeIn();
		$prevImageBtn.fadeIn();
	}
}

function GetImageTitle(elem){
	var title_attr=elem.children("img").attr("title");
	$img_title.data("imageTitle", title_attr); 
}

function GetNextPrevImages(curr){
	var nextImage=curr.parents(".content").next().find("a").attr("href");
	if(nextImage==null){ 
		var nextImage=jQuery(".content").first().find("a").attr("href");
	}
	$outer_container.data("nextImage",nextImage);
	var prevImage=curr.parents(".content").prev().find("a").attr("href");
	if(prevImage==null){ 
		var prevImage=jQuery(".content").last().find("a").attr("href");
	}
	$outer_container.data("prevImage",prevImage);
}

function SwitchImage(img){
	$preloader.fadeIn("fast");
	var theNewImg = new Image();
	theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
	theNewImg.src = img;
}

function CreateDelegate(contextObject, delegateMethod){
	return function(){
		return delegateMethod.apply(contextObject, arguments);
	}
}

function theNewImg_onload(){
	$bgimg.data("newImageW",this.width).data("newImageH",this.height);
	BackgroundLoad($bgimg,this.width,this.height,this.src);
}

function FullScreenBackground(theItem,imageWidth,imageHeight){
	var winWidth=jQuery(window).width();
	var winHeight=jQuery(window).height();
	if($toolbar.data("imageViewMode")!="original"){ 
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;
		if($toolbar.data("imageViewMode")=="full"){ 
			if ((winHeight / winWidth) < picHeight) {
				jQuery(theItem).attr("width",winWidth);
				jQuery(theItem).attr("height",picHeight*winWidth);
			} else {
				jQuery(theItem).attr("height",winHeight);
				jQuery(theItem).attr("width",picWidth*winHeight);
			};
		} else { 
			if ((winHeight / winWidth) > picHeight) {
				jQuery(theItem).attr("width",winWidth);
				jQuery(theItem).attr("height",picHeight*winWidth);
			} else {
				jQuery(theItem).attr("height",winHeight);
				jQuery(theItem).attr("width",picWidth*winHeight);
			};
		}
		jQuery(theItem).css("margin-left",(winWidth-jQuery(theItem).width())/2);
		jQuery(theItem).css("margin-top",(winHeight-jQuery(theItem).height())/2);
	} else { 
		jQuery(theItem).attr("width",imageWidth);
		jQuery(theItem).attr("height",imageHeight);
		jQuery(theItem).css("margin-left",(winWidth-imageWidth)/2);
		jQuery(theItem).css("margin-top",(winHeight-imageHeight)/2);
	}
}

function ImageViewMode(theMode){
	$toolbar.data("imageViewMode", theMode);
	FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
	if(theMode=="full"){
		$toolbar_a.html("<img src='{/literal}{$_module.wwwpath}{literal}customs/default/img/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$toolbar_a.html("<img src='{/literal}{$_module.wwwpath}{literal}customs/default/img/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
}

	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curtop, curleft];
	}
</script>
{/literal}