// execute your scripts when the DOM is ready. this is a good habit
$(function() {

	// initialize scrollable
	$("div.scrollable").scrollable();

});

$(function() {

$(".items img").click(function() {

	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	var url = $(this).attr("src").replace("_t", "");
	var imgtitle = $(this).attr("title");

	// get handle to element that wraps the image and make it semitransparent
	var wrap = $("#image_wrap");//.fadeTo("fast", 0.1);
	wrap.find("img").fadeTo("fast", 0.1);

	// the large image from flickr
	var img = new Image();

	// call this function after it's loaded
	img.onload = function() {

		// make wrapper fully visible
		wrap.find("img").fadeTo("slow", 1);

		// change the image
		wrap.find("img").attr("src", url);
		
		//change caption
		var caption = document.getElementById('caption');
		if(imgtitle != "")
		{
			caption.innerHTML = imgtitle;
			wrap.find("img").attr("alt", imgtitle);
		}
		else
		{
			caption.innerHTML = "&#60 no caption &#62";
			wrap.find("img").attr("alt", "");
		}
	};

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

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});