$(document).ready(function() {
	 
	

current=0;
//could do this in less code by using 'this' to get the current item
    $("#mantlenav a").mouseover(function(){
	tabId = $(this).attr('class').substring(4,5);
	    //right here we call a function that does all our animation
	   mantleChange(tabId);
	    
    });
    
    
    var z=1;
while(z<5){
timeout = z*5000-5000;
setTimeout("mantleChange("+z+")", timeout);
// setTimeout("aRealFunction()", 200);
if(z>=4){setTimeout("mantleChange(1)", timeout+5000);}
z++;


}
	

    
    
    
    
});




function mantleChange(tabId){

	       	for (i=1;i<=4;i++){
			if (i != tabId){
				$(".content"+i).hide();
				$('.link' + i).removeClass('active').addClass('inactive');
				Cufon.replace('.link' + i);
			}
		} 
	$('.link' + tabId).removeClass('inactive').addClass('active');
		Cufon.replace('.link' + tabId);
		if(current!=tabId){
			$('.learn_more').fadeTo(0, .0);
			$('.mantle_content h1').hide();
			$('.mantle_content h2').hide();
			$(".content" + tabId).fadeIn();
			command = "$('.content" + tabId + " h1').stop().show();";
			window.setTimeout(command, 50);
			command = "$('.content" + tabId + " h2').stop().show();";
			window.setTimeout(command, 150);
			command = "$('.content" + tabId + " .learn_more').stop().fadeTo('slow', 1);";
			window.setTimeout(command, 255);
		}
	
      current=tabId;
    
}