// JavaScript Document

//Declare the clock as a global variable. It needs to be outside of the document.ready.
var theClock;
//jQuery document.ready starts here.
$(document).ready(function() {
	$('.caption').css('display','none');
	$('#slideTabsList').css('display','none');
	//Grab the total number of slides in the slideshow. Add '1' to that number, because the random number generation rounds down. It is 'zero-based', and our DIVs are 'one-based'. 
	var totalSlides = $('.caption').length + 1;
	//Take a random starting number between 1 and the total.
	var startingPoint=Math.floor(Math.random()*totalSlides)
	if (startingPoint==0) {
		startingPoint=1;
	}
	//Opening animation. Slide caption container div over, change it's width, and fade up the correct caption.
	$('#captionContainer').css('width','390px').css('left','0px');
	$('#captionContainer').animate({left:"0px"},"slow").animate({width:"390px"},"slow", function(){$("#caption" + startingPoint).fadeIn();$("#slideTabsList").fadeIn();});
	//$("#caption" + startingPoint).css('display','block');
	//Load the corresponding image into the image container div.
	$("#image" + startingPoint + ' a').addClass('selected');
	var theImg = '<img src="' + $("#image" + startingPoint).find("a").attr("href") + '" alt="' + $("#image" + startingPoint).find("a").attr("title") + '" title="' + $("#image" + startingPoint).find("a").attr("title") + '" />'
	$("#imageContain").prepend(theImg);
	//Remove the extra 1 that we artificially added to the count and store it in a new variable.
	totalSlidesCount = totalSlides - 1;
	//Determine the next slide in the rotation.
	startNumber = startingPoint * 1;
	nextNumber = startNumber + 1;
	//In case we're already on the last one, go to the first one.
	if (nextNumber > totalSlidesCount) {
		nextNumber =1;
	}
	//Initiate the auto-rotation.
	theClock = setTimeout('slideChanger("'+nextNumber+'")', 8000);
	
	//Here's the jQuery FUNction to make the changer work on thumbnail click
	$("#slideTabsList li a:not(.arrow)").click(function() {
		var totalSlides = $('.caption').length;
		var id = $(this).parent().attr('id');
		var selectedSlide = id.replace('image','');
		selectedSlide = parseInt(selectedSlide);
		theNextSlide = selectedSlide + 1;
		if (theNextSlide > totalSlides) {
			theNextSlide =1;
		}
		$('.caption:visible').css('display','none');
		$('#caption'+selectedSlide).css('display','block');
		$('#slideTabsList li a').removeClass('selected');
		$('#image' + selectedSlide + ' a').addClass('selected');
		var target = $("#imageContain img").attr("src");
		var source =  $(this).attr("href");
		var alt_text = $(this).attr("title");
		if (target != source) {
			$("#imageContain img").fadeOut(250, function() {$("#imageContain img").attr({src: source, title: alt_text, alt: alt_text}).fadeIn(250);});
		};
		//Stop the existing timer
		clearTimeout(theClock);
		//Instantiate a new timer.
		//alert("theNextSlide is a " + typeof(theNextSlide) + " and its value is " + theNextSlide);
		theClock = setTimeout('slideChanger("'+theNextSlide+'")', 8000);
		return false;
	});
	//End of the click function.
	
	//Here's the jQuery FUNction to make the changer work on PREVIOUS arrow click
	$("#slideTabsList li a#prevSlide").click(function() {
		var totalSlides = $('.caption').length;							
		var id = $('.caption:visible').attr('id');
		var selectedSlide = id.replace('caption','');
		selectedSlide = parseInt(selectedSlide) - 1;
		theNextSlide = selectedSlide;
		if (theNextSlide < 1) {
			theNextSlide = totalSlides;
		}
		//alert("theNextSlide is a " + typeof(theNextSlide) + " and its value is " + theNextSlide);
		$('.caption:visible').css('display','none');
		$('#caption'+theNextSlide).css('display','block');
		$('#slideTabsList li a').removeClass('selected');
		$('#image' + theNextSlide + ' a').addClass('selected');
		var target = $("#imageContain img").attr("src");
		var source =  $("#image"+theNextSlide+" a").attr("href");
		var alt_text = $("#image"+theNextSlide+" a").attr("title");
		if (target != source) {
			$("#imageContain img").fadeOut(250, function() {$("#imageContain img").attr({src: source, title: alt_text, alt: alt_text}).fadeIn(250);});
		};
		//Stop the existing timer
		clearTimeout(theClock);
		//Instantiate a new timer.
		theNextNewSlide = theNextSlide + 1;
		if (theNextNewSlide > totalSlides) {
			theNextNewSlide = 1;
		}
		//alert("theNextNewSlide is a " + typeof(theNextNewSlide) + " and its value is " + theNextNewSlide);
		theClock = setTimeout('slideChanger("'+theNextNewSlide+'")', 8000);
		return false;
	});
	//End of the click function.
	
	//Here's the jQuery FUNction to make the changer work on NEXT arrow click
	$("#slideTabsList li a#nextSlide").click(function() {
		var totalSlides = $('.caption').length;							
		var id = $('.caption:visible').attr('id');
		var selectedSlide = id.replace('caption','');
		selectedSlide = parseInt(selectedSlide) + 1;
		theNextSlide = selectedSlide;
		if (theNextSlide > totalSlides) {
			theNextSlide =1;
		}
		//alert("theNextSlide is a " + typeof(theNextSlide) + " and its value is " + theNextSlide);
		$('.caption:visible').css('display','none');
		$('#caption'+theNextSlide).css('display','block');
		$('#slideTabsList li a').removeClass('selected');
		$('#image' + theNextSlide + ' a').addClass('selected');
		var target = $("#imageContain img").attr("src");
		var source =  $("#image"+theNextSlide+" a").attr("href");
		var alt_text = $("#image"+theNextSlide+" a").attr("title");
		if (target != source) {
			$("#imageContain img").fadeOut(250, function() {$("#imageContain img").attr({src: source, title: alt_text, alt: alt_text}).fadeIn(250);});
		};
		//Stop the existing timer
		clearTimeout(theClock);
		//Instantiate a new timer.
		theNextNewSlide = theNextSlide + 1;
		if (theNextNewSlide > totalSlides) {
			theNextNewSlide = 1;
		}
		//alert("theNextNewSlide is a " + typeof(theNextNewSlide) + " and its value is " + theNextNewSlide);
		theClock = setTimeout('slideChanger("'+theNextNewSlide+'")', 8000);
		return false;
	});
	//End of the click function.
});
//jQuery document.ready ends here.

//Here's the FUNction to be called by the auto-rotator.
function slideChanger(newSlide){
	var totalSlides = $('.caption').length;
	nextNextSlide = newSlide * 1;
	theNextNextSlide = nextNextSlide + 1;
	if (theNextNextSlide > totalSlides) {
		theNextNextSlide = 1;
	}
	$('.caption:visible').css('display','none');
	$('#caption'+newSlide).css('display','block');
	$('#slideTabsList li a').removeClass('selected');
	$('#image' + newSlide + ' a').addClass('selected');
	var newSource =  $("#image"+newSlide+" a").attr("href");
	var newTitle =  $("#image"+newSlide+" a").attr("title");
	$("#imageContain img").fadeOut(250, function() {$("#imageContain img").attr({src: newSource, title: newTitle, alt: newTitle}).fadeIn(250);});
	theClock = setTimeout('slideChanger("'+theNextNextSlide+'")', 8000);
};