$(function() {
		/* position of the <li> that is currently shown */
		var current = 0;
		  

		  
		$('#bg1,#bg2,#bg3,#bg4,#bg5').mouseover(function(e){

		  
			var $this = $(this);
			
			 /* item is bg1 or bg2 or bg3, depending where we are hovering */
			var item = e.target.id;
			
			/* if we hover the current one, then don't do anything */
			if($this.parent().index() == current){
				 if(item == 'bg1'){
				   $('ul.sub1').css('display','block');
				 }
				return;
			}


			/*
			this is the sub menu overlay. Let's hide the current one
			if we hover the first <li> or if we come from the last one,
			then the overlay should move left -> right,
			otherwise right->left
			

			 */
			if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5'))
			   
				$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-576px 0)"},300,function(){
					$(this).find('li').hide();
				});
			else
				$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(576px 0)"},300,function(){
					$(this).find('li').hide();
				});

			if(item == 'bg1' || ((current > 1 && current < 5) && item != 'bg5')){
				/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
				$('#menu > li').animate({backgroundPosition:"(-960px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
				move(1,item);
			}
			else {
				/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
				$('#menu > li').animate({backgroundPosition:"(960px 0)"},0).removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
				move(0,item);
			}
			
	
			/* change the current element */
			current = $this.parent().index();
			
			/* let's make the overlay of the current one appear */
		   
			$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
				$(this).find('li').fadeIn();
			});
		});

		function move(dir,item){
			if(dir){
				$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
				$('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},250);
				$('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},300);
				$('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},350);
				$('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},400,function(){
					$('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
				});
			}
			else{
				$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
					$('#menuWrapper').removeClass('bg1 bg2 bg3 bg4 bg5').addClass(item);
				});
				$('#bg2').parent().stop().animate({backgroundPosition:"(-192px 0)"},350);
				$('#bg3').parent().stop().animate({backgroundPosition:"(-384px 0)"},300);
				$('#bg4').parent().stop().animate({backgroundPosition:"(-576px 0)"},250);
				$('#bg5').parent().stop().animate({backgroundPosition:"(-768px 0)"},200);
			}
		}
	});