// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {

//$(".scrollable").scrollable({circular: true}).autoscroll({ autoplay: true });
$(".scrollable").scrollable({circular: true, mousewheel: true,
	onSeek: function() {
	//alert('11');
				//$("#images").data("scrollable").seekTo(index, 0);

	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	//var api = $("#images").data("scrollable");
	var api = $(".scrollable").data("scrollable"); 
	if (!api)
	{
		return;
	}
var index = api.getIndex();
$("#info").html('index='+index);
if (index<0) index=0;
	var url = api.getItems()[index].src.replace("_t", "");
$("#info").append(url);

	// get handle to element that wraps the image and make it semi-transparent
	var wrap = $("#image_wrap").fadeTo("fast", 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");

			}
}).autoscroll({ autoplay: true, steps: 1, interval: 2000 });

});