$(function() {
	//index of current item
	var current				= 0;
	//speeds / ease type for animations
	var fadeSpeed			= 400;
	var animSpeed			= 600;
	var easeType			= 'easeOutCirc';
	//caching
	var $thumbScroller		= $('#thumbScroller');
	var $scrollerContainer	= $thumbScroller.find('.container');
	var $scrollerContent	= $thumbScroller.find('.content');
	var $pg_title 			= $('#pg_title');
	var $pg_preview 		= $('#pg_preview');
	var $LinkSite 		    = $('#LinkSite');
	var $pg_desc1 			= $('#pg_desc1');
	var $pg_desc2 			= $('#pg_desc2');
	var $overlay			= $('#overlay');
	//number of items
	var scrollerContentCnt  = $scrollerContent.length;
	var sliderHeight		= $(window).height();
	//we will store the total height
	//of the scroller container in this variable
	var totalContent		= 0;
	//one items height
	var itemHeight			= 0;
	
	//First let's create the scrollable container,
	//after all its images are loaded
	var cnt		= 0;
	$thumbScroller.find('img').each(function(){
		var $img 	= $(this);
		$('<img/>').load(function(){
			++cnt;
			if(cnt == scrollerContentCnt){
				//one items height
				itemHeight = $thumbScroller.find('.content:first').height();
				buildScrollableItems();
				//show the scrollable container
				$thumbScroller.stop().animate({'left':'0px'},animSpeed);
			}
		}).attr('src',$img.attr('src'));
	});
	
	//when we click an item from the scrollable container
	//we want to display the items content
	//we use the index of the item in the scrollable container
	//to know which title / image / descriptions we will show
	$scrollerContent.bind('click',function(e){
		var $this 				= $(this);
		
		var idx 				= $this.index();
		//if we click on the one shown then return
		if(current==idx) return;
		
		//if the current image is enlarged,
		//then we will remove it but before
		//we animate it just like we would do with the thumb
		var $pg_large			= $('#pg_large');
		if($pg_large.length > 0){
			$pg_large.animate({'left':'350px','opacity':'0'},animSpeed,function(){
				$pg_large.remove();
			});
		}
		
		//get the current and clicked items elements
		var $currentTitle 		= $pg_title.find('h1:nth-child('+(current+1)+')');
		var $nextTitle 			= $pg_title.find('h1:nth-child('+(idx+1)+')');
		var $currentThumb		= $pg_preview.find('img.pg_thumb:eq('+current+')');
		var $nextThumb			= $pg_preview.find('img.pg_thumb:eq('+idx+')');
		var $currentLinkSite 	= $LinkSite.find('div:nth-child('+(current+1)+')');
		var $nextLinkSite 		= $LinkSite.find('div:nth-child('+(idx+1)+')');
		var $currentDesc1 		= $pg_desc1.find('div:nth-child('+(current+1)+')');
		var $nextDesc1 			= $pg_desc1.find('div:nth-child('+(idx+1)+')');
		var $currentDesc2 		= $pg_desc2.find('div:nth-child('+(current+1)+')');
		var $nextDesc2 			= $pg_desc2.find('div:nth-child('+(idx+1)+')');
		
		//the new current is now the index of the clicked scrollable item
		current		 			= idx;
		
		//animate the current title up,
		//hide it, and animate the next one down
		$currentTitle.stop().animate({'top':'-50px'},animSpeed,function(){
			$(this).hide();
			$nextTitle.show().stop().animate({'top':'25px'},animSpeed);
		});
		
		//show the next image,
		//animate the current to the left and fade it out
		//so that the next gets visible
		$nextThumb.show();
		$currentThumb.stop().animate({'left': '350px','opacity':'0'},animSpeed,function(){
			$(this).hide().css({
				'left'		: '250px',
				'opacity'	: 1,
				'z-index'	: 1
			});
			$nextThumb.css({'z-index':9999});
		});
		
		//animate both current descriptions left / right and fade them out
		//fade in and animate the next ones right / left
		$currentLinkSite.stop().animate({'left':'295px','opacity':'0'},animSpeed,function(){
			$(this).hide();
			$nextLinkSite.show().stop().animate({'left':'250px','opacity':'1'},animSpeed);
		});
		$currentDesc1.stop().animate({'left':'205px','opacity':'0'},animSpeed,function(){
			$(this).hide();
			$nextDesc1.show().stop().animate({'left':'250px','opacity':'1'},animSpeed);
		});
		$currentDesc2.stop().animate({'left':'295px','opacity':'0'},animSpeed,function(){
			$(this).hide();
			$nextDesc2.show().stop().animate({'left':'250px','opacity':'1'},animSpeed);
		});
		e.preventDefault();
	});
	
	//when we click a thumb, the thumb gets enlarged,
	//to the sizes of the large image (fixed values).
	//then we load the large image, and insert it after
	//the thumb. After that we hide the thumb so that
	//the large one gets displayed
	$pg_preview.find('.pg_thumb').bind('click',showLargeImage);
	
	//enlarges the thumb
	function showLargeImage(){
		//if theres a large one remove
		$('#pg_large').remove();
		var $thumb 		= $(this);
		$thumb.unbind('click');
		var large_src 	= $thumb.attr('alt');

		$overlay.fadeIn(200);
		//animate width to 600px,height to 500px
		$thumb.stop().animate({
			'width'	: '800px',
			'height': '500px'
		},500,function(){
			$('<img id="pg_large"/>').load(function(){
				var $largeImg = $(this);
				$largeImg.insertAfter($thumb).show();
				$thumb.hide().css({
					'left'		: '250px',
					'opacity'	: 1,
					'z-index'	: 1,
					'width'		: '480px',
					'height'	: '300px'
				});
				//when we click the large image
				//we revert the animation
				$largeImg.bind('click',function(){
					$thumb.show();
					$overlay.fadeOut(200);
					$(this).stop().animate({
						'width'	: '480px',
						'height': '300px'
					},500,function(){
						$(this).remove();
						$thumb.css({'z-index'	: 9999});
						//bind again the click event
						$thumb.bind('click',showLargeImage);
					});
					
				});
			}).attr('src',large_src);
		});
	}
	
	//resize window event:
	//the scroller container needs to update
	//its height based on the new windows height
	$(window).resize(function() {
		var w_h			= $(window).height();
		$thumbScroller.css('height',w_h);
		sliderHeight	= w_h;
	});
	
	//create the scrollable container
	//taken from Manos :
	//http://manos.malihu.gr/jquery-thumbnail-scroller
	function buildScrollableItems(){
		totalContent = (scrollerContentCnt-1)*itemHeight;
		$thumbScroller.css('height',sliderHeight)
		.mousemove(function(e){
			if($scrollerContainer.height()>sliderHeight){
				var mouseCoords		= (e.pageY - this.offsetTop);
				var mousePercentY	= mouseCoords/sliderHeight;
				var destY			= -(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
				var thePosA			= mouseCoords-destY;
				var thePosB			= destY-mouseCoords;
				if(mouseCoords==destY)
					$scrollerContainer.stop();
				else if(mouseCoords>destY)
					$scrollerContainer.stop()
				.animate({
					top: -thePosA
				},
				animSpeed,
				easeType);
				else if(mouseCoords<destY)
					$scrollerContainer.stop()
				.animate({
					top: thePosB
				},
				animSpeed,
				easeType);
			}
		}).find('.thumb')
		.fadeTo(fadeSpeed, 0.6)
		.hover(
		function(){ //mouse over
			$(this).fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			$(this).fadeTo(fadeSpeed, 0.6);
		}
	);
	}
});