$(function() {
	$(".scrollable").scrollable({circular: true, vertical: true, mousewheel: true, speed: 1000}).autoscroll({ autoplay: false });
	
	$(".items img").click(function() {
		
		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }
		
		// get handle to element that wraps the image and make it semi-transparent
		var wrap = $("#image_wrap").fadeTo("fast", 0.5);
		
		// calclulate large image's URL based on the thumbnail URL
		var url = $(this).attr("src").replace("_t", "");
	
		// the large image
		var img = new Image();
		
		// 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
		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();
});