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

	// initialize scrollable
	$(".scrollable").scrollable();
	
	
	$(".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");

  	// get handle to element that wraps the image and make it semi-transparent
  	var wrap = $(this).parents(".gallery_wrapper").children(".image_wrap").fadeTo(1, 0.5);

  	// the large image from www.flickr.com
  	var img = new Image();
  	
  	//change the caption
  	var cap = $(this).attr("title");
  	var the_caption = $(this).parents(".gallery_wrapper").children(".image_wrap").children(".captioncontent");
  	var the_caption_holder = $(this).parents(".gallery_wrapper").children(".image_wrap").children(".photocaption");
  	if(cap != ""){
  	  the_caption_holder.show();
  	  the_caption.show();
  	  the_caption.html(cap);
	}
	else{
	  the_caption_holder.hide();
	  the_caption.hide();
	}

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

  		// make wrapper fully visible
  		wrap.fadeTo("slow", 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
  })
  
  $(".items ul:first-child li:first-child img").click();

});