// Slideshow settings variable
var slideshow = {
	frame_duration: 4000,
	status: "playing",
	timeout: null
};

$(document).ready(function() {

	if ($("#carousel ul li").length > 0) {
		thumb_init();
		// 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");
		
		$("#ul_imagery li:gt(0) img").css({ opacity: "0.0", display: "block" });
		
		$("#ul_imagery li img").load(function() {
			var img_height = $(this).height();
			var img_width = $(this).width();	
					
			//console.log(main_image[i] + i + ": " + img_height + " (height) * " + img_width + " (width)");
			
			if (img_height > img_width) {
				$(this).addClass("portrait");
				
				var spacer = (500 - img_width) / 2;			
				$(this).css("margin-left", spacer + "px");			
			} else if (img_height < img_width) {
				$(this).addClass("landscape");			
				
				var spacer = (500 - img_height) / 2;
				$(this).css("margin-top", spacer + "px");
			}
		});
		
		//img_centre();
		
		// 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 thumb_init() {
	$("#carousel li img").preload({
		placeholder:'css/jcarousel_skins/helen/loading-small.gif'
	});
}


function img_centre() {
	var main_image = $("#ul_imagery li img");
	//console.log(main_image);
	for(var i = 0; i < main_image.length; i++) {
		$(main_image[i]).load(function () {
			
		});		
	}
}


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");
	}
}