$(document).ready(function(){
	$('#home_course_hero_list_menu li:first').addClass('active_list');
	$('#home_course_hero_active_bg > .home_course_hero_bg:first').css('display','block');					   
	$('#home_course_hero_active_text > .home_course_hero_text:first').css('display','block');
	setInterval(updateHeroBg,7500);
	
	$('#home_course_hero_list_menu li').hover(function(){
		itemid = $(this).attr('id').replace('hero_list_','');
		$('#home_course_hero_list_menu li').removeClass('active_list');
		$(this).addClass('active_list');
		$('#home_course_hero_active_bg > .home_course_hero_bg').css('display','none');
		$('#home_course_hero_active_text > .home_course_hero_text').css('display','none');
		$('#hero_'+itemid).css('display','block');
		$('#hero_text_'+itemid).css('display','block');
	});
	
	//Get our elements for faster access and set overlay width
 	var div = $('div.sc_menu'),
	ul = $('ul.sc_menu'),
	// unordered list's left margin
	ulPadding = 15;

	//Get menu width
	var divWidth = div.width();
	
	//Remove scrollbars
	div.css({overflow: 'hidden'});
	
	//Find last image container
	var lastLi = ul.find('li:last-child');
	
	//When user move mouse over menu
	div.mousemove(function(e){
	
	//As images are loaded ul width increases,
	//so we recalculate it each time
	var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
	
	var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
	div.scrollLeft(left);
  });
  
  
});

function updateHeroBg() {
	$('#home_course_hero_active_bg > .home_course_hero_bg').filter(function(){
			if ($(this).css('display')=='block'){return true;}
		}).each(function() {
			var heroid = $(this).attr('id').replace('hero_','');
			$('#home_course_hero_list_menu li').removeClass('active_list');
			$('#hero_text_'+heroid).css('display','none');
			$(this).css('display','none');
			if($(this).is(':last-child')){
				$('#home_course_hero_active_bg > .home_course_hero_bg:first').css('display','block');
				heroid = $('#home_course_hero_active_bg > .home_course_hero_bg:first').attr('id').replace('hero_','');
				$('#hero_text_'+heroid).css('display','block');
				$('#hero_list_'+heroid).addClass('active_list');
			} else {
				$(this).next().css('display','block');
				heroid = $(this).next().attr('id').replace('hero_','');
				$('#hero_text_'+heroid).css('display','block');
				$('#hero_list_'+heroid).addClass('active_list');
			}
		});
}