var heroIdx = 0;

$(function () {

    $('span.heroCount').text(heros.length);

    if (heros.length > 1) {
        $('#heroPagination').fadeIn('fast');
    }

    $('div.heroPrev').click(function () {
        changeHero('prev');
    });
    $('div.heroNext').click(function () {
        changeHero('next');
    });
    $('#heroLoading').hide();
});

function changeHero(dir) {
    $('#heroLoading').show();

    if (dir == 'next') {
        heroIdx++;
        if (heroIdx >= heros.length) {
            heroIdx = 0;
        }
    }
    else {
        heroIdx--;
        if (heroIdx < 0) {
            heroIdx = heros.length - 1;
        }
    }

    var newHero = heros[heroIdx];
    var currentDiv = $('div.heroImg')[0];
    var newDiv = $(currentDiv).clone();
    $(newDiv).css('z-index', 5);
    $('#hero').append($(newDiv));
    $(newDiv).children().remove();

    var newImg = $('<img></img>');
    $(newDiv).append(newImg);

    $(newImg).load(function () {
        var currentHeight = $('#heroCopyOrangeBorder').height();
        $('#heroCopyOrangeBorder').css('height', currentHeight + 'px');

        $('#heroCopyOrangeBorder a').fadeOut('fast', function () {
            $('#heroCopyOrangeBorder a').attr('href', newHero.ActionLink.Url).text(newHero.Title);
            var newHeight = $('#heroCopyOrangeBorder a').actual('height');
            $('#heroCopyOrangeBorder').animate({
                height: newHeight
            }, 'fast', function () {
                $('#heroCopyOrangeBorder a').fadeIn('fast');
                $('#heroLoading').hide();
            });
        });


        $('span.heroIdx').text(heroIdx + 1);
        $(currentDiv).fadeOut('slow', function () {
            $(newDiv).css('z-index', 10);
            $(this).remove();
        });
    });

    $(newImg).attr('src', newHero.Image.ImageUrl);
    
}