var looping = true;

$(document).ready(function(){

	$(".scrollable").scrollable();


	change_image($(".items img:first"));

	$(".items img").click(function() {
		looping = false;
		change_image($(this));
	});
	

	$('.browse').click(function(){
		looping = false;
		var item;
		if($(this).hasClass('right')){
			item = $(".items img.active").parent().next('span').children('img');
			if(item.length == 0){
				$(".scrollable").scrollable().next();
				item = $(".items img.active").parent().parent().next('div').children('span:first').children('img');
			}
		}else{
			item = $(".items img.active").parent().prev('span').children('img');
			if(item.length == 0){
				$(".scrollable").scrollable().prev();
				item = $(".items img.active").parent().parent().prev('div').children('span:last').children('img');
			}
		}
		change_image(item);
	});


	window.setTimeout('loop()', 3000);
	

});



function change_image(obj){

		if(typeof(obj.attr("src")) != 'string'){
			return;
		}
		
		// see if same thumb is being clicked
		if (obj.hasClass("active")) {return;}

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

		// get handle to element that wraps the image and make it semi-transparent
	//	var wrap = $("#image_wrap").fadeTo("fast", 0.5);
		var wrap = $("#image_wrap").show();

		// 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");
		obj.addClass("active");
	
}



function loop(){
	if(!looping){
		return false;
	}
	var item;

	item = $(".items img.active").parent().next('span').children('img');
	if(item.length == 0){
		$(".scrollable").scrollable().next();
		item = $(".items img.active").parent().parent().next('div').children('span:first').children('img');
	}

			
	if(item.length == 0){
		item = $(".items img:first");
		$(".scrollable").scrollable().seekTo(0);
	}
	change_image(item);
	
	
	window.setTimeout('loop()', 3000);

}