$(document).ready(function(){						   
	
	$("div.heroNav ul li a").click(function(e){
		e.preventDefault();
		
		// update the tabs to ensure the correct one it selected
		$("div.heroNav ul li a").attr("class", "");
		$(this).attr("class", "selected");		
		
		var indexOfSelectedPanel = $('div.heroNav ul li a').index(this) + 1;		
		var widthOfAllPanels = $('div.tabContentWrapperInner').width() - 927;
		var numberOfPanels = $('div.heroNav ul li a').size();
		var newLeft = (widthOfAllPanels / numberOfPanels) * indexOfSelectedPanel;

		$(".tabContentWrapper .tabContentWrapperInner").animate({left:"-" + newLeft},500);
		
	});
	
});