// Image rotator with moving arrow

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

var currentImg = 0; 
var $mainImage; //The main image
var $rotating; //The rotating images 
var currentSrc;

var delayMainInterval = 3000; //The time in ms to delay each rotation
var delayStartInterval = 2500;// initial delay interval. This should be shorter than the main interval to compensate for load time.
var delayInterval = delayStartInterval; 


$(document).ready(
	function()
	{
		$mainImage = $('#newMainImage');
		$rotating = $('img.rotate'); 	
	}
);

$(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('normal') //fade out current image 
	.queue(changeSrc) //Switch images
	.fadeIn('normal') //Fade in new image
	.animate({opacity : 1}, delayInterval, function(){ delayInterval = delayMainInterval;imgFade();});
}

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