$( function() {
	//index of current item
	var current				= 0;
	//speeds / ease type for animations
	var fadeSpeed			= 400;
	var animSpeed			= 700;
	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 $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();
				itemHeight = $thumbScroller.find('img').attr("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 $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)+')');

		var currentThumbHeight = $currentThumb.attr("height");
		var currentThumbWidth = $currentThumb.attr("width");
		nextThumbHeight = $nextThumb.attr("height");
		nextThumbWidth = $nextThumb.attr("width");

		//reads the thumb height and sum some margin
		var marginDesc1 = $nextThumb.attr("height")+130;

		//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
		$currentDesc1.stop().animate({
			'left':'205px',
			'opacity':'0'
		},animSpeed, function() {
			$(this).hide();
			$nextDesc1.show().stop().animate({
				'top':marginDesc1,
				'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'	: '600px',
			'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'		: nextThumbWidth,
					'height'	: nextThumbHeight
				});
				//when we click the large image
				//we revert the animation
				$largeImg.bind('click', function() {
					$thumb.show();
					$overlay.fadeOut(200);
					$(this).stop().animate({
						'width'		: nextThumbWidth,
						'height'	: nextThumbHeight
					},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.7);
		}
		);
	}
//animate contact
//$('#information').animate({opacity: 0.90});
	    
	    
	$('#information').mouseenter(function() {
	  $('#information').animate({
	    opacity: 1,
	    right: '+=50px',
	    height: '70'
	  }, 500, function() {
	    // Animation complete.
	  });
	});
	
	$('#information').mouseleave(function() {
	  $('#information').animate({
	    opacity: 0.90,
	    right: '-=50px',
	    height: '27'
	  }, 500, function() {
	    // Animation complete.
	  });
	});

});