// JavaScript Document


//Editable Variables.

//in milliseconds
var animateSpeed = 1000;
var animateDelay = 8000;



//Everything below here is part of the functionality.
//Proceed with Caution
var totalImages = 0;
var thisImage = 1;
var navString = '';

$(document).ready(function(){
	
	//for each link, we add a class of 'slideshowImage', and an ID of
	//slideshowImage1, slideshowImage2, slideshowImage3, etc.
	//we later use these dynamic values to show / hide the images.
	$('#slideshow a').each(function(count){
		var imageNo = count + 1;
		$(this).attr('id', 'slideshowImage'+imageNo);
		$(this).addClass('slideshowImage');
		totalImages++;
	});
	
	//we append a new DIV, slideshowNavigation
	$('#slideshow').append('<div id="slideshowNavigation"></div>');
	
	//we create a navigation string based on the number of totalImages
	for(var i=1; i <= totalImages; i++)
	{
		navString += '<a id="slideshowNav'+i+'" class="slideshowNav">&nbsp;</a>';
	}
	
	//we add the navString to our newly created 'slideshowNavigation' DIV
	//and add a click event to each slideshowNav
	$('#slideshowNavigation').html(navString);
	$('.slideshowNav').click(jumpToSlide);
	
	//fade in the first image
	//and add the 'active' class to the first link.
	$('#slideshowImage'+thisImage).fadeIn(animateSpeed);
	$('#slideshowNav1').addClass('active');
	thisImage++;
	
	//everyTime will take a function and repeat it infinitely.
	$(document).everyTime(animateDelay, function(){										
		fadeOutImage();
	});
		
	function fadeOutImage()
	{
		$('#slideshow').fadeOut(animateSpeed, fadeInNextImage);
	}
	
	function fadeInNextImage()
	{
		//remove the 'active' class from every button
		//re-add the 'active' class to the current button (based on thisImage)
		$('.slideshowNav').removeClass('active');
		$('#slideshowNav'+thisImage).addClass('active');
		
		//hide every image
		//show the current button (based on thisImage)
		$('.slideshowImage').hide();
		$('#slideshowImage'+thisImage).show();
		
		//fade the slideshow back in
		$('#slideshow').fadeIn(animateSpeed);
		
		//increase the value of thisImage. if it's greater than the total
		//number of images, reset it to 1.
		thisImage++;
		if(thisImage > totalImages) thisImage = 1;
	}
	
	function jumpToSlide(event)
	{
		//we grab the number in the ID by
		//stripping off 'slideshowNav'
		var thisID = $(this).attr('id');
		thisID = thisID.substr(12,thisID.length);
		
		//reset the global imageID and reset the cycle
		thisImage = thisID;
		fadeOutImage();
	}
	
});