$(function() { 
	$("div.scrollable").scrollable({ 
	    size: 5 
	});
	
	var photographers = $('#photographer a');
	
	$(".items img").click(function() { 
		// Hide the old photograper credit
		photographers.fadeOut();
		
	    // calclulate large image's URL based on the thumbnail URL (flickr specific) 
	    var url = $(this).attr("src").replace("_t", ""); 
	 	var photographerId = $(this).attr("alt");
	
	    // get handle to element that wraps the image and make it semitransparent 
	    var wrap = $("#image_wrap img").fadeTo("medium", 0, function ()
		{
			// the large image from flickr 
		    var img = new Image();

		    // call this function after it's loaded 
		    img.onload = function() {
		        wrap.attr("src", url);
				wrap.fadeTo("medium", 1);
		    };

		    // begin loading the image from flickr 
		    img.src = url;

			// Switch the photographers name
			$( '#' + photographerId ).fadeIn();
		}); 
		
	}).filter(":first").click(); // when page loads simulate a "click" on the first image 
});