var $currentCarousel;
var rotationSpeedMilli = 1000;
var autoRototateMilli = 5000;
var hoverLeaveRotateRestartMilli = 1000;
var autoRotate;//the interval object
var hoverOutRotate;//the timer object

$(document).ready(function(){

	if (atLeastThreeActive()) {
		setupSelector();
		startAutoRotate();
		$('#promoRight').hover(stopAutoRotate, startAutoRotateAfterHover);
	}
	
	$('#promoLeft, #promoMiddle, .carouselItem').click(handleClick);

});

function atLeastThreeActive() {
	var i=0;
	$('#carouselWrapper').children('.carouselItem').each(function(){
		if (/\S/.test($(this).children('div').html())) i++;
	});
	return (i >= 3);
}

function setupSelector() {
	var $wrapper = $('#carouselWrapper');
	var i=0;
	$wrapper.children('.carouselItem').each(function(){
		var $carouselItem = $(this);
		$carouselItem.attr("id", "c"+i);
		var $richHtmlField = $carouselItem.children('div');
		if (/\S/.test($richHtmlField.html())) {//carousel item has content
			var $selector = $("<div>").addClass('selectorBox').attr("id", "s"+i);
			$selector.appendTo('#carouselSelector');
			if (i==0) {
				$currentCarousel = $carouselItem;//make first carousel currently selected
			}
			if (i++ < 2) {//make first two selected by default
				$selector.addClass('selectorBoxActive');
			}
			
			$carouselItem.bind("ciVisible", function() {
				$selector.addClass('selectorBoxActive');
			});
			
			$selector.click(function(){
				stopAutoRotate();
				var index = this.id.substring(1);
				showCarousel($('#c'+index));
			});

		} else {//no content, don't render
			$carouselItem.remove();
		}
	});
}

function showCarousel($newCarousel) {
	$('.selectorBox').removeClass('selectorBoxActive');
	var currentTop = parseInt($('#carouselWrapper').css("top"));
	var newTop;
	if ($newCarousel.is(':last-child')) {
		//selected item is bottom.  Move top item to bottom and scroll down
		$('.carouselItem:first-child').insertAfter($newCarousel);
		newTop = currentTop + 95;//95 is total vertical space used for carousel item
		$('#carouselWrapper').css("top", newTop);//adjust for DOM change
	}
	animateToCarousel($newCarousel);
	$currentCarousel = $newCarousel;
	$newCarousel.trigger("ciVisible");
	$newCarousel.next().trigger("ciVisible");
}

function animateToCarousel($carousel){
	var y = $carousel.position().top;
	var newTop = (25 + y) * -1;//25 for the #carouselSelector offset
	$('#carouselWrapper').animate({
		top : newTop
	}, rotationSpeedMilli, 'swing');
}


function showNext() {
	showCarousel($currentCarousel.next());
}

function startAutoRotate() {
	autoRotate = setInterval(showNext, autoRototateMilli);
}

function startAutoRotateAfterHover() {
	clearTimeout(hoverOutRotate);//in case this function is called before the timeout executed
	hoverOutRotate = setTimeout(function(){
		showNext();
		startAutoRotate();
	}, hoverLeaveRotateRestartMilli);
}

function stopAutoRotate() {
	clearInterval(autoRotate);
	clearTimeout(hoverOutRotate);
}

function handleClick(event) {
	/*	since the link being clicked is inside the div, the click event will bubble up
	*	make sure this function only fires for the initial click (the parent div) to avoid infinite loop
	*/
	if (event.target.nodeName != "A") {//the bubbling event from when the anchor was clicked
		var $link = $(this).find('a:first');//get the first link
		if (typeof($.data($link.get(0), 'events')) == "undefined") {//no existing click event
			var url = $link.attr("href");
			if ($link.attr("target") == "_blank") {
				window.open(url, "_blank", "''");
			} else {
				window.location = url;
			}
		} else {//use existing click event
			$link.click();
		}
	}
}