// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){
	/**
	 * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
	 */
	
	/**
	 * No need to have only one element in view, you can use it for slideshows or similar.
	 * In this case, clicking the images, scrolls to them.
	 * No target in this case, so the selectors are absolute.
	 */
	
	$('#thumbBox').serialScroll({
		items:'li.thumbnail',
		event:'mouseover',
		offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:1, //as we are centering it, start at the 2nd
		duration:1200,
		force:true,
		stop:true,
		lock:false,
		axis:'y',
		cycle:true, //don't pull back once you reach the end
		easing:'easeOutQuart', //use this easing equation for a funny effect
		jump: true //click on the images to scroll to them
	});
	
	$(".thumbnail a").click(function()
	        {
	        var imageSource = $(this).attr("href");
	        var title = $(this).attr("title");
	       
	        $(".photoContainer").addClass("loading");
	          showImage(imageSource,title);
	          return false;
	        });
		
		// show the first image
		var first_imageSource = $("#portfolio a").attr("href");
		var first_title = $("#portfolio a").attr("title");
		showImage(first_imageSource,first_title);


function showImage(src,title)
{
$(".photoContainer img").fadeOut("normal").remove();
var largeImage = new Image();
$(largeImage).load(function()
                        {
                        $(this).hide();
                        $(".photoContainer").append(this).removeClass("loading");
                                             
                        $(this).fadeIn("slow");              
                        });    
                        $(largeImage).attr("src", src);
					$("#title").text(title);
                                                                                          
}	
	
});