var heroes_length = 0;
$.each(heroes, function(i, n){if(n != null)heroes_length++;});
var currentHero=0;
var intervalID=null;

$(document).ready(function(){
    PopulateHeroes();
    beginInterval();
});
function PopulateHeroes(){
    $("#MainHero").empty();
    for(var i=0;(i<8)&&(i<heroes_length);i++){
        $("#MainHero").append("<div class=\"Heroes\" id=\"Hero"+heroes[i].id+"\"><a href=\""+heroes[i].link+"\" "+heroes[i].target+"><img src=\""+heroes[i].pic+"\" /></a><div class=\"HeroTitle\"><h1>"+heroes[i].title+"</h1><span>"+heroes[i].summary+"</span></div></div>");
    }
}
function autoPlay(){
    currentHero++;
    if(currentHero>heroes_length-1){
        currentHero=0;
    }
    if(heroes_length==1){
        if(intervalID != null) {
            window.clearInterval(intervalID);
        }
    }
    $("#Hero .Heroes").hide();
    $("#" + heroes[currentHero].rel).fadeIn(300);
}
function beginInterval(){
    if(intervalID != null) {
        window.clearInterval(intervalID);
    }
    if(heroes_length>1){
        intervalID=setInterval('autoPlay()',4000);
    }
}