// JavaScript Document
function ThumbnailScroller(id,tsType,tsMargin,scrollEasing,scrollEasingType,thumbnailOpacity,thumbnailFadeSpeed){
	/* ²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²
	parameters: 
	id: id of the container (div id)  
	tsType: scroller type (values: "horizontal", "vertical")
	tsMargin: first and last thumbnail margin (for better cursor interaction) 
	scrollEasing: scroll easing amount (0 for no easing) 
	scrollEasingType: scroll easing type 
	thumbnailOpacity: thumbnails default opacity 
	thumbnailFadeSpeed: thumbnails mouseover fade speed (in milliseconds) 
	*/

	//caching vars
	var $outer_container=$("#"+id);
	var $thumbScroller=$("#"+id+" .thumbScroller");
	var $thumbScroller_container=$("#"+id+" .thumbScroller .container");
	var $thumbScroller_content=$("#"+id+" .thumbScroller .contentScroll");
	var $thumbScroller_thumb=$("#"+id+" .thumbScroller .thumb");
	var $thumbScroller_horWrapper=$("#"+id+" .thumbScroller .horWrapper");

	if(tsType=="horizontal"){
		$thumbScroller_container.css("marginLeft",tsMargin+"px"); //add margin
		//set content width automatically
		$thumbScroller_horWrapper.css("width",999999); //set a rediculously high width value ;)
		$outer_container.data("totalContent",$thumbScroller_container.width()); //get inline div width
		$thumbScroller_horWrapper.css("width",$outer_container.data("totalContent")+tsMargin); //set back the proper content width value
	}
	
	var $the_outer_container=document.getElementById(id);
	var $placement=findPos($the_outer_container);
	
	function MouseMove(e){ //ICI ON RECUPERE ET ON ENVOI LA POSITION DE LA SOURIS
		if(tsType=="horizontal"){
			if($thumbScroller_container.outerWidth()>$thumbScroller.width()){ //check if content needs scrolling
				var mouseCoords=(e.pageX - $placement[1]); // ICI COORDONNE DU CURSEUR 
				//on affiche un boutton lorsque l'on met la souris vers la droite
				/*if (mouseCoords > $thumbScroller.width()-40 && mouseCoords < $thumbScroller.width()+5)
					affichageBouton ('on');
				else 
					affichageBouton ('off');*/
	  			var mousePercentX=mouseCoords/$outer_container.width();
	  			var destX=-(((($outer_container.data("totalContent")+(tsMargin*2))-($outer_container.width()))-$outer_container.width())*(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.css("left",0);
			}
		} 
	}
	
	
	$thumbScroller.bind("mousemove", function(event){
		MouseMove(event);									  
	});
	
	$thumbScroller_thumb.each(function () {
		var $this=$(this);
		$this.fadeTo(thumbnailFadeSpeed, thumbnailOpacity);
	});

	$thumbScroller_thumb.hover(
		function(){ //mouse over thumbnail
			var $this=$(this);
			$this.stop().fadeTo(thumbnailFadeSpeed, 1);
		},
		function(){ //mouse out thumbnail
			var $this=$(this);
			$this.stop().fadeTo(thumbnailFadeSpeed, thumbnailOpacity);
		}
	);
	
	//function to find element Position
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj != null){
			if (obj.offsetParent) {
				curleft = obj.offsetLeft
				curtop = obj.offsetTop
				while (obj = obj.offsetParent) {
					curleft += obj.offsetLeft
					curtop += obj.offsetTop
				}
			}
			return [curtop, curleft];
		}
	}
	
	$(window).resize(function() {
		$placement=findPos($the_outer_container);
	});
}