$(document).ready(function() {
    
    var heroAnimating = false;
    var heroFirst = 1;
    var heroLast = 3;
    var heroItems = $("#hero-items li").length;
    var heroWidth = 176;
    var heroActive = 1;
    var heroSpeed = 500;
    var heroTimer = setInterval(function() { nextHero(); }, 4000);
    
    // fix heights
	var heroMaxHeight = 0;
	$("#hero-items").find("li").each(function() {
	    heroMaxHeight = Math.max(heroMaxHeight, $(this).height());
	});
	$("#hero-items").css("height", heroMaxHeight + "px");
	$("#hero-items li").css("height", heroMaxHeight + "px");
	$("#hero-item-active").css("height", heroMaxHeight + "px");
    
    // clear timer as soon as mouse enters
    $("#hero-container").mouseenter(function() {
        clearInterval(heroTimer);
    });
    // start again as mouse leaves
    $("#hero-container").mouseleave(function() {
        clearInterval(heroTimer)
        heroTimer = setInterval(function() { nextHero(); }, 4000);
    });
    
    // add numbers to items
    i = 1;
    $("#hero-items a").each(function() {
        $(this).addClass(i.toString());
        i++;
    });

    // individual hero item is clicked
    $("#hero-items a").click(function() {
        // return if item is active
        if(heroActive == parseInt($(this).attr("class"))) return false;        
        // calculate where to move active box to
        left = (parseInt($(this).attr("class")) * heroWidth) - (heroWidth * heroFirst) + 1;
        // change active hero
        changeHero($(this).attr("class"));
        // animate
        $("#hero-item-active").animate({
            left: left + "px"
        }, heroSpeed, "easeInOutCirc");
        return false;
    });
    
    // prev/next controls are clicked
    $(".hero-control a").click(function() {
    
        // just return if items are already animating
        if(heroAnimating) return false;
        // at either end of item strip, don't move strip, but just move active box
        id = $(this).parent().attr("id");
        switch(id) {
            case "hero-prev":
                if(heroActive > heroFirst || heroFirst == 1) {
                    changeTo = heroActive - 1;
                    $("#hero-items a." + changeTo).trigger("click");
                    return false;
                }
                break;
            case "hero-next":
                if(heroActive < heroLast || heroLast == heroItems) {
                    changeTo = heroActive + 1;
                    $("#hero-items a." + changeTo).trigger("click");
                    return false;
                }
                break;
        }
        
        // calculate new margin
        changeTo = null;
        m = $("#hero-items").css("margin-left");
        m = parseInt(m.substring(0, m.length-2));
        switch(id) {
            case "hero-prev": m += 176; heroFirst--; heroLast--; changeTo = heroActive-1; break;
            case "hero-next": m -= 176; heroFirst++; heroLast++; changeTo = heroActive+1; break;
        }
        // change active hero
        changeHero(changeTo);
        // animate
        heroAnimating = true;
        $("#hero-items").animate({
            marginLeft: m + "px"
        }, heroSpeed, "easeInOutCirc", function() { heroAnimating = false; });
        return false;
    });
    
    // changes active hero
    var changeHero = function(to) {

        // enable/disable buttons
        if(to == 1) {
            $("#hero-prev a").addClass("disabled");
            $("#hero-next a").removeClass("disabled");
        }
        if(to > 1 && to < heroItems) {
            $("#hero-prev a").removeClass("disabled");
            $("#hero-next a").removeClass("disabled");
        }
        if(to == heroItems) {
            $("#hero-next a").addClass("disabled");
        }
        
        to = parseInt(to) - 1;
        $("#hero-items li.active").removeClass("active");
        $("#hero-items li:eq("+to+")").addClass("active");

        
        $(".hero").eq(to).fadeIn(heroSpeed);
        $(".hero-active").fadeOut(heroSpeed).removeClass("hero-active");
        $(".hero").eq(to).addClass("hero-active");
        heroActive = to+1;
    }
    
    // make whole hero clickable
    $("#hero-frame").click(function() {
        url = $(".hero-active").find(".link").attr("href");
        window.location.href = url;
    });
    
    // advance to next hero
    var nextHero = function() {
        if(heroActive == heroItems) {
        
            // reset everything
            heroActive = 1;
            heroFirst = 1;
            heroLast = 3;
            heroAnimating = true;
            changeHero(1);
            $("#hero-item-active").animate({
                left: "1px"
            }, heroSpeed, "easeInOutCirc");
            $("#hero-items").animate({
                marginLeft: "0px"
            }, heroSpeed, "easeInOutCirc", function() { heroAnimating = false; });
            
        } else {
            $("#hero-next a").trigger("click");
        }
    }
      
});