/*

$(window).bind("load", function() {
   	$("div#portfolio").prepend('<img src="/images/portfolio/loading.gif" class="loading" alt="loading..." / >');
   	$("ul#gallery").hide().portfolio();
});

*/

// jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
// t: current time, b: beginning value, c: change in value, d: duration

jQuery.extend( jQuery.easing, {
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	} 
});

jQuery.fn.portfolio = function() {

	return this.each(function() {
	
		// 'loading' GIF gives the screenshots time to load, then disappears
		// when ready, ditch the GIF and display the previously hidden <ul>
		var $polaroid = $(this);
		$polaroid.parent().find("img.loading").remove();
		$polaroid.show();		
	
		// 1. find image width and number, then determine width of <ul>
		// 2. set width of <ul> and <li>
		var imgWidth = $polaroid.children("li").width();
		var imgNum = $polaroid.children("li").length;		
		var galleryWidth = imgWidth * imgNum;
		$polaroid.css("width", galleryWidth);
		$polaroid.children('li').css("width", imgWidth);
	
		// activate navigation and assign "current" states 	
		$("ul#sequence a").each(function(i) {
		
			$(this).bind("mouseover", function(){
			
				var margin = - (imgWidth * i);
			
				$(this).addClass("current").parent().parent().find("a:not($(this))").removeClass("current");

				// hey ya! shake shake shake it like a polaroid picture!
				$polaroid.animate({left: margin}, 500, "easeInOutExpo");
				
				// this is just see what's happening in the Firebug console
				// "if" statement necessary so IE don't chuck a wobbly -- Thanks, Karl!
				// http://groups.google.com/group/jquery-en/browse_thread/thread/9aa791d3ce8751a1
				if (window.console && console.log) { 
					console.log("i = "+i+" and margin = "+margin+"px");
				}
			
			});
			
			$(this).click(function() {return false});

		});

	});
	
};