jQuery(document).ready(function(){
	
	var imageCounter = 1;
	var liWidth = 760;
	var currentImage = 1;
	var totalImages = jQuery('.jesseSlider ul').children('li').size();	
	
	jQuery('.jesseSlider .container').stop().animate({'scrollLeft' : 0}, 0);
	
	// load first image
	loadNextImage();
	
	
	
	
	/* Counter Display
	------------------------------*/
	function counterDisplay()
	{
		jQuery('.jesseSlider .counter').html(currentImage + ' / ' + totalImages);	
	}
	counterDisplay();
	
	
	/* Next
	------------------------------*/
	jQuery('.next').click(function(){
		
		currentImage+=1;
		var scrollSpeed = 500;
		if(currentImage > totalImages){currentImage = 1; scrollSpeed=1500;}
		

		var scrollX	= (currentImage*liWidth) - liWidth;	
		jQuery('.jesseSlider .container').stop().animate({'scrollLeft' : scrollX}, scrollSpeed);
		
		
		counterDisplay();
		
		return false;

	});
	
	
	/* Prev
	------------------------------*/
	jQuery('.prev').click(function(){
		
		currentImage-=1;
		var scrollSpeed = 500;
		if(currentImage < 1){currentImage = totalImages; scrollSpeed=1500;}
		currentHeight=jQuery('li#'+currentImage).innerHeight();
		
		var scrollX	= (currentImage*liWidth) - liWidth;	
		jQuery('.jesseSlider .container').stop().animate({'scrollLeft' : scrollX}, scrollSpeed);
		
		counterDisplay();
		
		return false;

	});
	
	
	/* Load Next Image
	------------------------------*/
	function loadNextImage()
	{
		
		var div = jQuery('.loadable-image#'+imageCounter);
		var parent = div.parent();
		var img = '<img src="'+div.attr('src')+'" alt="" />';
		parent.attr('id', imageCounter);
		var loading='<div class="loading"></div>'
		var caption = "";
		if(div.attr('caption') != "")
		{
			caption = '<p>'+div.attr('caption')+'</p>';
		}
		
		parent.html(loading+img+caption);
		parent.find('img').hide();
		parent.find('p').hide();
		
		parent.find('img').load(function(){
		
			parent.find('.loading').fadeOut(500);
			var imgHeight = parent.find('img').height();
			if(imgHeight < 510)
			{
				parent.find('img').css({'padding-top' : (510 - imgHeight)/2});
			}
			else
			{
				parent.find('img').css({'height' : 510});
			}
			
			parent.find('img').fadeIn(500);
			imageCounter++;
			loadNextImage();
			
			
			parent.hover(
				function(){parent.stop().find('p').fadeIn(500)}, function(){parent.stop().find('p').fadeOut(500)});
			
			
				
			
		});
		
		
	}

});