//config
//set default images view mode
$defaultViewMode="full"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 
$scrollEasing=600; //scroll easing amount (0 for no easing) 
$scrollEasingType="easeOutCirc"; //scroll easing type 
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")


$(window).load(function() {

	$("#toolbar").data("imageViewMode",$defaultViewMode); //default view mode
	if($defaultViewMode=="full"){
		$("#toolbar a").html("<img src='img/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$("#toolbar a").html("<img src='img/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
	ShowHideNextPrev($nextPrevBtnsInitState);
	//thumbnail scroller
	$(".thumbScroller .container").css("marginLeft",$tsMargin+"px"); //add margin
	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=$(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); //with easing
	  		} else if(mouseCoords<destX){
		  		$(".thumbScroller .container").stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
	  		} else {
				$(".thumbScroller .container").stop();  
	  		}
		}
	});

	$("#thumbnails_wrapper").fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
	$("#thumbnails_wrapper").hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo("slow", 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
		}
	);

	$(".thumbScroller .thumb").hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
		}
	);

	//on window resize scale image and reset thumbnail scroller
	$(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);
	});

	
	$("#outer_container").data("nextImage",$(".content").first().next().find("a").attr("href"));
	$("#outer_container").data("prevImage",$(".content").last().find("a").attr("href"));
	
	
	//mouseover toolbar
	if($("#toolbar").css("display")!="none"){
		$("#toolbar").fadeTo("fast", 0.4);
	}
	$("#toolbar").hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo("fast", 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo("fast", 0.4);
		}
	);
	
	//Clicking on thumbnail changes the background image
	$("#outer_container a").click(function(event){
		event.preventDefault();
		var $this=$(this);
		GetNextPrevImages($this);
		SwitchImage(this);
		ShowHideNextPrev("show");
	}); 
	
	//next/prev images buttons
	$(".nextImageBtn").click(function(event){
		event.preventDefault();
		SwitchImage($("#outer_container").data("nextImage"));
		var $this=$("#outer_container a[href='"+$("#outer_container").data("nextImage")+"']");
		GetNextPrevImages($this);
	});
	
	$(".prevImageBtn").click(function(event){
		event.preventDefault();
		SwitchImage($("#outer_container").data("prevImage"));
		var $this=$("#outer_container a[href='"+$("#outer_container").data("prevImage")+"']");
		GetNextPrevImages($this);
	});
	
	//next/prev images keyboard arrows
	if($keyboardNavigation=="on"){
	$(document).keydown(function(ev) {
		if(ev.keyCode == 39) { //right arrow
			SwitchImage($("#outer_container").data("nextImage"));
			var $this=$("#outer_container a[href='"+$("#outer_container").data("nextImage")+"']");
			GetNextPrevImages($this);
			return false; // don't execute the default action (scrolling or whatever)
		} else if(ev.keyCode == 37) { //left arrow
			SwitchImage($("#outer_container").data("prevImage"));
			var $this=$("#outer_container a[href='"+$("#outer_container").data("prevImage")+"']");
			GetNextPrevImages($this);
			return false; // don't execute the default action (scrolling or whatever)
		}
	});
	}

});

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

//get next/prev images
function GetNextPrevImages(curr){
	var nextImage=curr.parents(".content").next().find("a").attr("href");
	if(nextImage==null){ //if last image, next is first
		var nextImage=$(".content").first().find("a").attr("href");
	}
	$("#outer_container").data("nextImage",nextImage);
	var prevImage=curr.parents(".content").prev().find("a").attr("href");
	if(prevImage==null){ //if first image, previous is last
		var prevImage=$(".content").last().find("a").attr("href");
	}
	$("#outer_container").data("prevImage",prevImage);
}

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



//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
	$("#toolbar").data("imageViewMode", theMode);
	FullScreenBackground($("#bgimg"),$("#bgimg").data("newImageW"),$("#bgimg").data("newImageH"));
	if(theMode=="full"){
		$("#toolbar a").html("<img src='img/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$("#toolbar a").html("<img src='img/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
}

//function to find element Position
	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];
	}