// marquee functions
var marqueeMoveNext = false;
var marqueeInAnimation = false;
var marqueeIntervalID;
var marqueeInterval = 8000;

$(function(){
	// preload images
	$(".marqueePanels img").imgpreload(function(){
		initializeMarquee();
	});
	
	var photoWidth = $(".marqueeContainer").width();
	var photoHeight = $(".marqueeContainer").height();
	// create photo lineup
	$("img.marqueePanelPhoto").each(function(index){
		var photoPosition = index * photoWidth;
		$(".marqueePhotos").append('<img class="marqueePhoto" style="top: 0; left: '+photoPosition+'" src="'+$(this).attr('src')+'" alt="'+$(this).attr('alt')+'" width="'+$(this).attr('width')+'" height="'+$(this).attr('height')+'" />');
		$(".marqueePhotos").css('width',photoPosition+photoWidth);
	});
	
	// generate navigation links
	$(".marqueePanels .marqueePanel").each(function(index){
		$(".marqueeNav").append('<a class="marqueeNavItem"></a>');
	});
	
	// set up navigation link events
	$(".marqueeNav a.marqueeNavItem").click(function(){
		var navClicked = $(this).index();
		activateMarqueePanel(navClicked, true);
		
		// do not auto rotate after clicking on a navigation link
		autoRunMarquee(false);
	});
	
});

function setCaption() {
	var captionHeight = $(".marqueeCaption").height();
	var marqueeHeight = $(".marqueeContainer").height();
	var newCaptionHeight = marqueeHeight - captionHeight - 50;
	$(".marqueeCaption").delay(100).animate({top: newCaptionHeight}, 500);
}

function initializeMarquee() {
	// activate the first panel
	activateMarqueePanel(0, false);
	
	// add event listener so that auto rotation is turned off while mouseover and turn on when mouseout
	$(".marqueeContainer").hover(function(){autoRunMarquee(false);},function(){autoRunMarquee(true);});
	
	// add event listener so auto rotations stops /starts when the page loses/gains focus
	$(document).blur(function(){ autoRunMarquee(false); });
	$(document).focus(function(){ autoRunMarquee(true); });
	
	// auto rotate panels
	autoRunMarquee(true);
}

function autoRunMarquee(toggle) {
	if (toggle) {
		// turn on the auto rotation event if it is not already on
		if (!marqueeMoveNext) {
			marqueeMoveNext=true;
			marqueeIntervalID = window.setTimeout(showNextMarqueePanel, marqueeInterval);
		}
	} else {
		// turn off the auto rotation event
		if (marqueeMoveNext) { window.clearTimeout(marqueeIntervalID); marqueeMoveNext=false; }
	}
}

function showNextMarqueePanel() {
	if (marqueeMoveNext) {
		// determine the numner of panels that we have
		var panelCount = $(".marqueePanels .marqueePanel").length-1;
		// determine the currently selected panel
		var linkList = $(".marqueeNav a.marqueeNavItem.selected");
		var curIndex = $(".marqueeNav a.marqueeNavItem").index(linkList);
	
		// if we're at the last panel, go back to the first, otherwise go to the next one
		if (curIndex==panelCount) {  
			activateMarqueePanel(0, true);
		} else { 
			activateMarqueePanel(curIndex+1, false);
		}
		
		//if the marqueeMoveNext flag is set, setup call to next panal in a few seconds otherwise we're paused
		if (marqueeMoveNext) { marqueeIntervalID = window.setTimeout(showNextMarqueePanel, marqueeInterval); }
	}
}

function activateMarqueePanel(newIndex, aniFade) {
	if (!marqueeInAnimation) {
		marqueeInAnimation=true;
		$(".marqueeNav a.marqueeNavItem").removeClass('selected');
		$(".marqueeNav a.marqueeNavItem:eq(" + newIndex + ")").addClass('selected');
		
		var marqueeWidth=$(".marqueeContainer").width();
		var distanceToMove = marqueeWidth * (-1);
		var newPhotoPosition = newIndex * distanceToMove + 'px';
		var newCaption = $('.marqueePanelCaption').get(newIndex);
		
		if (aniFade) {
			$(".marqueePhotos").fadeOut(500,function() {
				$(".marqueePhotos").css('left',newPhotoPosition);
				$(".marqueePhotos").fadeIn(500);
				marqueeInAnimation=false;
			});
		} else {
			$(".marqueePhotos").animate({left: newPhotoPosition}, 1000, function() { marqueeInAnimation=false; });
		}
		
		$(".marqueeCaption").animate({top: '330px'}, 500, function(){
			var newHTML=$(newCaption).html();
			$(".marqueeCaptionContent").html(newHTML);
			setCaption();
		});
	}
}