$(document).ready(function(){
    var transitionSpeed = 500; // lower == faster
    
    heroItemWidth = eval($("#hero").width());
    heroListWidth = $("#heroList li").size() * heroItemWidth;
    $("#heroList").css("width",heroListWidth);
    $("#heroList li:first").addClass("current");
    $("#heroControls li:first").addClass("current");
    
    $(".heroControl").click(function(){
            thisPanel = "#" + $("#panel-" + $(this).text()).attr("id");
            $(".current").removeClass("current");
            $(thisPanel).addClass("current");
            $(this).addClass("current");
            
            newPosition = heroItemWidth * ($(".current").attr("id").substring(6) - 1);
            newPosition = newPosition - (newPosition * 2); // make negative
            $("#heroList").animate({'margin-left': newPosition},transitionSpeed,function(){ /*all done*/ 			});
    });

	
});