// Image rotator with moving arrow

//First image should be have id 'rotateMain'. All rotating images should be of the rotate class.

var mainImageID = "#rotateMain"; // The id (with #) of the main rotating image
var rotateClass = ".rotate"; //The class of the series of images to be rotated


var contantDelay = 2000; //The delay time between each rotation
var initialDelay = 1500; //The delay time for the first fade. This is usually shorter than the constant delay, to account for image load times
var fadeTime = 'normal';  //The time it takes to fade in, or fade out. This can be 'slow', 'fast', 'normal' or a millisecond number (i.e. 1000 would be one second)



/*************** Don't edit beyond this point ********************/
var currentImg = 0; //Image counter
var $mainImage; //The main image
var $rotating; //The rotating images 
var currentSrc; //Current image source
var delayInterval = initialDelay;



$(document).ready(
	function()
	{
		$mainImage = $(mainImageID);
		$rotating = $('img' + rotateClass); 	
	}
);

$(window).load(function(){$.getScript('js/pause.js', imgFade)});

function imgFade()
{
	currentImg = (currentImg + 1) % $rotating.length; //count up to next image
	currentSrc = $rotating.eq(currentImg).attr('src'); //get next image source
	$mainImage
	.pause(delayInterval)
	.fadeOut(fadeTime) //fade out current image 
	.queue(changeSrc)
	.fadeIn(fadeTime)
	.animate({opacity : 1}, delayInterval, function(){ delayInterval = contantDelay;imgFade();});
}

function changeSrc()
{
	$mainImage.attr('src', currentSrc).dequeue(); //set current image source to next image 
}