$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");
$bgimg="#bgimg";

jQuery(window).load(function() {
	//thumbnail scroller
	sliderLeft=$thumbScroller_container.position().left;
	padding=$outer_container.css("paddingRight").replace("px", "");
	sliderWidth=jQuery(window).width()-padding;
	$thumbScroller.css("width",sliderWidth);
	var totalContent=0;
	fadeSpeed=200;
	
	$thumbScroller_content.each(function () {
		var $this=jQuery(this);
		totalContent+=$this.innerWidth();
		$thumbScroller_container.css("width",totalContent);
		$this.children().children().children(".thumb").fadeTo(fadeSpeed, 0.6);
	});

	$thumbScroller.mousemove(function(e){
		if($thumbScroller_container.width()>sliderWidth){
	  		var mouseCoords=(e.pageX - this.offsetLeft);
	  		var mousePercentX=mouseCoords/sliderWidth;
	  		var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
	  		var thePosA=mouseCoords-destX;
	  		var thePosB=destX-mouseCoords;
	  		var animSpeed=600; //ease amount
	  		var easeType="easeOutCirc";
	  		if(mouseCoords>destX){
		  		//$thumbScroller_container.css("left",-thePosA); //without easing
		  		$thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
	  		} else if(mouseCoords<destX){
		  		//$thumbScroller_container.css("left",thePosB); //without easing
		  		$thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
	  		} else {
				$thumbScroller_container.stop();  
	  		}
		}
	});

	$outer_container.fadeTo(fadeSpeed, 0.8);
	$outer_container.hover(
		function(){ //mouse over
			var $this=jQuery(this);
			$this.stop().fadeTo("slow", 1);
		},
		function(){ //mouse out
			var $this=jQuery(this);
			$this.stop().fadeTo("slow", 0);
		}
	);

	$thumbScroller_thumb.hover(
		function(){ //mouse over
			var $this=jQuery(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			var $this=jQuery(this);
			$this.stop().fadeTo(fadeSpeed, 0.6);
		}
	);

	//on window resize scale image and reset thumbnail scroller
	jQuery(window).resize(function() {
		FullScreenBackground($bgimg);
		$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
		var newWidth=jQuery(window).width()-padding;
		$thumbScroller.css("width",newWidth);
		sliderWidth=newWidth;
	});

	FullScreenBackground($bgimg); //scale 1st image
});

jQuery($bgimg).load(function() {
	$preloader.fadeOut("fast"); //hide preloader
	var $this=jQuery(this);
	$this.removeAttr("width").removeAttr("height").css({ width: "", height: "" });
	FullScreenBackground($this);

	var imageTitle=jQuery("#img_title").data("imageTitle");
	if(imageTitle){
		$this.attr("title", imageTitle);
		jQuery("#img_title").html(imageTitle);
	} else {
		jQuery("#img_title").html(jQuery(this).attr("title"));
	}
	
	var imageDesc=jQuery("#img_desc").data("imageDesc");
	if(imageDesc){
		$this.attr("alt", imageDesc);
		jQuery("#img_desc").html(imageDesc);
	} else {
		jQuery("#img_desc").html(jQuery(this).attr("alt"));
	}
	
	

	$this.fadeIn("slow"); //fadein background image
});


//Clicking on thumbnail changes the background image
jQuery("#outer_container a").click(function(event){
	event.preventDefault();
	$preloader.fadeIn("fast"); //show preloader
	var $this=jQuery(this);
	
	var title_attr=$this.children("img").attr("title"); //get image title attribute
	var alt_attr=$this.children("img").attr("alt"); //get image title attribute
	jQuery("#img_title").data("imageTitle", title_attr); //store image title
	jQuery("#img_desc").data("imageDesc", alt_attr); //store image title
	
	
	jQuery($bgimg).css("display","none").attr("src", this); //change image source
}); 

//Image scale function
function FullScreenBackground(theItem){
var winWidth=jQuery(window).width();
var winHeight=jQuery(window).height();
var imageWidth=jQuery(theItem).width();
var imageHeight=jQuery(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
		jQuery(theItem).css("width",winWidth);
		jQuery(theItem).css("height",picHeight*winWidth);
	} else {
		jQuery(theItem).css("height",winHeight);
		jQuery(theItem).css("width",picWidth*winHeight);
};
jQuery(theItem).css("margin-left",(winWidth-jQuery(theItem).width())/2);
jQuery(theItem).css("margin-top",(winHeight-jQuery(theItem).height())/2);
}