var hero_slides, activeSlide, activeIx, hero_timer, nav_popups, nav_icons, rotation_timer;
$(document).ready(function() {
    /*UL is only used as placeholder, only LI inner HTML is used, style w/o reling on ul/li*/
    hero_slides = $('#hero_slideshow > li');
    activeIx = 0;
    activeSlide = null;

    $('#hero_slideshow').hide();

    hero_slides.each(function(i) {
        $('<a href="#' + (i + 1) + '" rel="' + i + '">&nbsp;</a>').appendTo('#heronav');
    });

    loadSlide(activeIx);
    playHeroRotation();
    rotation_timer = setInterval(playHeroRotation, 30000);

    setupPopupBehavior();
});

function playHeroRotation() {
    clearInterval(hero_timer);
    activeIx = 0;
    hero_timer = setInterval('autoPlay()', 4000);
}

function loadSlide(ix)
{
	var topSlide = $('#hero_slideTop');
	var bottomSlide = $('#hero_slideBottom');
	var nextSlide = (activeSlide == topSlide) ? bottomSlide : topSlide;
	if(topSlide.is(':visible'))
	{
		bottomSlide.empty().append(hero_slides.eq(activeIx).html());
		topSlide.fadeOut(600);
	} else {
		topSlide.empty().append(hero_slides.eq(activeIx).html());
		topSlide.fadeIn(600);
	}
	activeSlide = nextSlide;
}
function autoPlay()
{
    if (activeIx + 1 < hero_slides.length) {
        activeIx = activeIx + 1;
        loadSlide(activeIx);
        highlightNavItem(activeIx);
    }
}

function highlightNavItem(ix) {
    var highlight = $('#learn_more_highlight');
    highlight.css("display", "none");
    if (ix == 1) {
        highlight.css("display", "block");
    }
    if (ix == 2) {
        highlight.css("display", "block");
        highlight.css("left", "100px");
    }
    if (ix == 3) {
        highlight.css("display", "block");
        highlight.css("left", "200px");
    }
    if (ix == 4) {
        highlight.css("display", "none");
    }
}

function setupPopupBehavior() {
    var popup_timer = null;
    /* length of time allowed before popups are hidden */
    var timer_length = 1000;
    
    /* set hover events for the nav icons */
    $('#nav_icons > li').hover(
    /* mouseover event: clears out timer, hides all popups, then shows the popup that corresponds to the icon by index e.g. 5th icon shows 5th popup */
        function(event) {
            endHeroRotation();
            clearTimeout(popup_timer);
            hidePopups();
            var index = $('#nav_icons > li').index(this);
            $('#nav_popups > li:eq(' + index + ')').show();
        },
    /* mouseout event: sets timer to hide all the popups */
        function(event) {
            popup_timer = setTimeout(hidePopups, timer_length);
            //playHeroRotation();
        }
    );
    
    $('#nav_popups > li').hover(
        /* mouseover event: when you mouse over popup, it clears out the timer, which cancels the hidePopups() call */ 
        function(event) {
            clearTimeout(popup_timer);
        },
        /* mouseout event: sets timer to hide all the popups */
        function() {
            popup_timer = setTimeout(hidePopups, timer_length);
            //playHeroRotation();
        }
    );
}

/* function to end the hero rotation */
function endHeroRotation() {
    activeIx = 0;
    activeSlide = null;
    loadSlide(activeIx);
    highlightNavItem(4);
    clearInterval(hero_timer);
}
/* function to hide all popups */
function hidePopups(){
    $('#nav_popups > li').hide();
}