$(function() {
	/* position of the <li> that is currently shown */
	var current = 0;
	//console.log('- current value is '+current);
	$('#bg1,#bg2,#bg3,#bg4').live('mouseenter',function(e){
		$('.marketing-info').css({'display':'none'});
		//$('#menuWrapper').addClass('bg1');	
		var $this = $(this);
		$('#'+$this.attr('rel')).css({'display':'block'});
		/* if we hover the current one, then don't do anything */
		//console.log('--- Parent Index is : '+$this.parent().index())
		if($this.parent().index() == current)
			return;

		/* item is bg1 or bg2 or bg3, depending where we are hovering */
		var item_val = $this.attr('id');
		if(item_val!='') {
			//console.log('------- ALERT ALERT ! unable to get the prev ID');
		
		//console.log('---- new class is : '+item_val);
		//$('#menuWrapper').removeClass('bg1_ghost bg2_ghost bg3_ghost bg4_ghost').addClass(item+'_ghost');
		
		$('#menu > li').animate({backgroundPosition:"(960px 0)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(item_val);
		move(0,item_val);
		
		/* change the current element */
		current = $this.parent().index();
		//console.log('-- current value is : '+current);
		}
	});
				
	/*
	dir:1 - move left->right
	dir:0 - move right->left
	 */
	function move(dir,item_val){
		if(dir){
			$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},300);
			$('#bg2').parent().stop().animate({backgroundPosition:"(-240px 0)"},400);
			$('#bg3').parent().stop().animate({backgroundPosition:"(-480px 0)"},500);
			$('#bg4').parent().stop().animate({backgroundPosition:"(-720px 0)"},600);
		}
		else{
			$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},600);
			$('#bg2').parent().stop().animate({backgroundPosition:"(-240px 0)"},500);
			$('#bg3').parent().stop().animate({backgroundPosition:"(-480px 0)"},400);
			$('#bg4').parent().stop().animate({backgroundPosition:"(-720px 0)"},300);
		}
	}
});