$(document).ready(function() {
	$('.scrollable').scrollable();	
	$("#image_wrap img").click(function() {
		window.open($(this).attr('src'));
	});
	$(".items img").click(function() {

		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }

		// 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 semi-transparent
		var wrap = $("#image_wrap").fadeTo("medium", 0.5);


		// the large image from www.flickr.com
		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 www.flickr.com
		img.src = url;

		// activate item
		$(".items img").removeClass("active");
		$(this).addClass("active");

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

});