jQuery(document).ready(function() {

	jQuery("div.scrollableImgCaption").click(function() {

		jQuery(".items img[title='" + jQuery(this).attr("title") + "']").click();

	});


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

		var clickedImg = jQuery(this);
		var textPanel = jQuery("#pane1");

		if (clickedImg.attr("rel") != "") {

			textPanel.fadeOut("fast", function() {

				textPanel.html('<b>' + clickedImg.attr("title") + '</b><br />' + clickedImg.attr("rel"));

				textPanel.jScrollPane({

					scrollbarWidth: 20

				});

				textPanel.fadeIn("fast");

			});

		}


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

		// get handle to element that wraps the image and make it semitransparent
		var imgFront = jQuery("#image_wrap img.imgFront");
		var imgBack = jQuery("#image_wrap img.imgBack");

		var imgBox = jQuery('div.item.item_double').eq(1);
		var imgBoxOldWidth = imgBox.outerWidth();

		var breadcrumb = jQuery("#breadcrumb");

		


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

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

			imgBack.css("opacity", 1);

			imgBack.attr("src", url);

			// make wrapper fully visible
			imgFront.fadeTo("medium", 0, function() {

				imgFront.removeClass("imgFront").addClass("imgBack");
				imgBack.removeClass("imgBack").addClass("imgFront");

			});

			var imgWidth = imgBack.outerWidth();

			imgBox.animate({
				width: imgWidth + 16
			}, "medium");

			breadcrumb.animate({
				width: 390 + 10 + (imgWidth + 16)
			}, "medium");

		};

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

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

	jQuery('div.scrollable').scrollable({

		size: 3

	});

});