$(document).ready(function(){
	/* set 1st hero */
	var heroFirst = $("#hero ul li:first");
	heroFirst.addClass("on");	
	var heroOnWid = heroFirst.width();
	var heroOffWid = $("#hero ul li:last").width();
	var current = heroFirst;
	$.toggleHeroes(heroFirst);
	
	/* set hero backgrounds */
	$("#hero ul li").each(function() {
	    var heroId = $(this).attr("id");
	    $("div:last",this).css({background:'url(/images/heroHome' + heroId + '.png) no-repeat right'});
	    $("div:first",this).css({background:'url(/images/heroHome' + heroId + '.png) no-repeat left'});
	});
 

	/* hero hover */	
	$("#hero ul li").click(function(){		

		var elem = $(this);
		t = setTimeout(function() {
			elem.animate({width: heroOnWid}, {duration:80, queue:false});	
			if(elem.html() != current.html()){
				current.animate({width: heroOffWid}, {duration:80, queue:false});
			}			
			current = elem;
		}, 0);
		$.toggleHeroes(this);
	    },
	    function() {
		clearTimeout(t);
	});	
 });

 (function($){
     $.toggleHeroes = function(elem){
	$("div:last","#hero ul li").hide();
	$("div:first","#hero ul li").show();

	$("div:first",elem).hide();
	$("div:last",elem).show(); 
        
        return this;
     };
})(jQuery);