// #ul_imagery	=	large image
// #carousel	=	thumbnails

var item_width;

var slideshow = {
	frame_duration: 4000,
	status: "playing",
	timeout: null
};

$(function() {
	if ($("#carousel ul li").length > 0) {

		// add the play/pause button
		$("#imagery").prepend('<a href="#" id="play_pause" class="pause">play/pause</a>');

		// Setup initial image statuses
		$("#ul_imagery li:first img").css({ opacity: "1.0", display: "block" }).addClass("current").parent().addClass("current");
		$("#ul_imagery li:gt(0) img").css({ opacity: "0.0", display: "block" });
		$("#carousel li:first").addClass("current");

		// change images when thumbnail is clicked
		$("#carousel li")
			.click(carousel_click);

		$("#play_pause")
			.click(play_pause_click);

		$("#carousel").jcarousel({
			animation: "fast",
			scroll: 3,
			visible: 6
		});

		slideshow.timeout = setTimeout(play_slideshow, slideshow.frame_duration);
	}
});

function carousel_click() {
	var prod_img = $(this).find("img").attr("id").replace("thumb", "large"); 			// Image ID in the ul_imagery array

	change_image("#ul_imagery img.current", "#" + prod_img);

	clearTimeout(slideshow.timeout);
	
	slideshow.timeout = setTimeout(play_slideshow, slideshow.frame_duration);
	slideshow.status = "playing";
	$("#play_pause").addClass("pause");

	// add current class to selected image
	$(this).siblings(".current").removeClass("current");
	$(this).addClass("current");
	return false;
}

function play_pause_click() {
	switch(slideshow.status){
		case "playing":
			$("#play_pause").removeClass("pause");
			clearTimeout(slideshow.timeout);			
			slideshow.status = "paused";
			break;
			
		case "paused":
			$("#play_pause").addClass("pause");
			play_slideshow();
			slideshow.status = "playing";
			break;
	}
	
	return false;
}

function play_slideshow() {
	// Work out index of currently selected image
	var index = $("#ul_imagery li").index($("#ul_imagery li.current"));

	index = index == ($("#ul_imagery li").length - 1) ? 0 : index + 1;
			
	change_image("#ul_imagery img.current", "#ul_imagery li:eq(" + index + ") img", function() {
		// Sort out selected on carousel
		$("#carousel ul li.current")
		.removeClass("current")
		.next("li")
			.addClass("current");
	});

	
	

	slideshow.timeout = setTimeout(play_slideshow, slideshow.frame_duration);	
}

function change_image(old_image, new_image, callback) {	
	if($(old_image).attr("id") != $(new_image).attr("id")) {
		$(old_image)
			.fadeTo(750, 0.0)
			.removeClass("current")
			.parent()
				.removeClass("current");

		$(new_image)
			.fadeTo(500, 1.0, callback)
			.addClass("current")
			.parent()
				.addClass("current");
	}
}