var intervalID;
var delayTime = 6000;
var fadeTime = 1500; // must be less than delayTime
var bannerPlaying = true;
/*
	IMAGE ROTATION
*/
$(document).ready(function() {
	
	// If there is more than one banner, set up and start the rotation
	if ($("#BannerAd span div").length > 1)
	{
		// Reverse the order of the banners to match the order in the xml file
		$("#BannerAd span div").reverse();

		// Make next and back buttons visible
		$("#BannerAd #image_next, #BannerAd #image_back, #BannerAd #image_pause, #BannerAd #image_next").css("visibility", "visible");
		
		// START rotating the banners
		intervalID = setInterval("autoPlay()", delayTime);
	}
	
	// Show the banner(s)
	$("#BannerAd").css("visibility", "visible");
	
	// NEXT button, fade out the top image and move it to the bottom
	$("#image_next").click(function(){
		// make sure the image is not currently animating
		if ($("#BannerAd span div img:animated").size() == 0)
		{
			// stop the auto animation
			clearInterval(intervalID);
			// fade out the top image
			$("#BannerAd span div:last img").fadeOut(fadeTime, function() {
				// when the top image is faded out move it to the bottom
				$("#BannerAd span div:last").insertBefore("#BannerAd span div:first");
				// prep the bottom image for when it becomes the top image
				$("#BannerAd span div:first img").fadeIn(1);
				// start the auto animation
				if (bannerPlaying)
				{
					intervalID = setInterval("autoPlay()", delayTime);
				}
			});
		};
	});
	
	// PAUSE button
	$("#image_pause").click(function() {
		showPlayButton();
		bannerPlaying = false;
		// stop the auto animation
		clearInterval(intervalID);
	});	
	
	// PLAY button
	$("#image_play").click(function() {
		showPauseButton();
		bannerPlaying = true;
		// START the banners
		intervalID = setInterval("autoPlay()", delayTime);
	});			

	// BACK button, move the bottom image to the top and fade it in
	$("#image_back").click(function() {
		// make sure the image is not currently animating
		if ($("#BannerAd span div img:animated").size() == 0)
		{
			// stop the auto animation
			clearInterval(intervalID);
			// prep the bottom image to move to the top
			$("#BannerAd span div:first img").fadeOut(1, function() {
				// when the bottom image is ready move it to the top
				$("#BannerAd span div:first").insertAfter("#BannerAd span div:last");
				// fade in the top image
				$("#BannerAd span div:last img").fadeIn(fadeTime);
				// start the auto animation
				if (bannerPlaying)
				{
					intervalID = setInterval("autoPlay()", delayTime);
				}
			});
		};
	});
}
);
//
function autoPlay() {
	$("#BannerAd span div:last img").fadeOut(fadeTime, function()
	{
		// when the top image is faded out move it to the bottom
		$("#BannerAd span div:last").insertBefore("#BannerAd span div:first");
		// prep the bottom image for when it becomes the top image
		$("#BannerAd span div:first img").fadeIn(1);
	});
}
// When the images are pulled from the xml they are stacked on top of each other, so the first image goes on the bottom...
// reverse the order of the images. Target the elements in the container.
jQuery.fn.reverse = function() {
	this.each(function() {
		$(this).parent().prepend(this);
	});
};
function showPauseButton() {
	$("#image_pause").css("visibility", "visible");
	$("#image_play").css("visibility", "hidden");
}
function showPlayButton() {
	$("#image_play").css("visibility", "visible");
	$("#image_pause").css("visibility", "hidden");
}

/*
	end IMAGE ROTATION
*/