// Image rotator with moving arrow

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

var currentImg = 0; 
var $mainImage; //The main image
var $rotating; //The rotating images 
var currentSrc; //Current image source
var delayInterval = 1500; //The time in ms to delay each rotation

//For the blue arrow
var blueArrow;
var boxHeight = 66; //Height of each link box
var fromTop = 13; //Distance from top of div

$(document).ready(
	function()
	{
		$mainImage = $('#rotateMainImage');
		$blueArrow = $('#blueArrow');
		$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) //Change image source
	.fadeIn('normal', moveArrow);  //Fade image back in and move arrow
}

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

//Move blue arrow to highlighted box
function moveArrow()
{
	delayInterval = 5000; // pause interval should be longer after the initial pause
	var heightString = (boxHeight * currentImg) + fromTop + 'px'; //calculate new distance from top and convert to string
	//Move bluearrow and keep it there for delay interval. Begin next imagefade
	$blueArrow.animate({top : heightString}, 'fast', imgFade);
}