// execute your scripts when the DOM is ready. this is a good habit
$(function() {
	// initialize scrollable
	$("div.scrollable").scrollable();
});

$(function() {
	$(".items img").click(function() {
		var str = "<br />";

		blurb = $(this).attr("longdesc");//.text();//.replace("_", "<br />");//$(this).parent().("span").text();
		blurb = blurb.replace(/_/g, str);

		$("#sideCopy").html(blurb);//blurb;

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

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

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

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

			// make wrapper fully visible
			//wrap.fadeTo("fast", 1);

			// change the image
			wrap.find("img").attr("src", url);		
		};

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

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