$(document).ready(function() {
        /* position of the <li> that is currently shown */
        var current = 5; // Setting this to the number of images allows link/image 1 to animate when on home page.
			// Num 1 position slides in.
		    if (location.href.indexOf("/locations/") != -1){
				var current = 0;
			} else if (location.href.indexOf("/coffees/") != -1){
				var current = 1;
			} else if (location.href.indexOf("/roasting/") != -1){
				var current = 2;
			} else if (location.href.indexOf("/our-story/") != -1){
				var current = 3;
			} else if (location.href.indexOf("/news/") != -1){
				var current = 4;
			} 


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

			var $this = $(this);
			/* if we hover the current one, then don't do anything */
			if($this.parent().index() == current)
				return;

			/* item is bg1 or bg2 or bg3, depending where we are hovering */
			var item = bkg_anim.target.id;
			var num = 0;
			switch (item) {
				//case 'bg1': num = 1; break; /// JM - R > L mouse causes R > L on num 1 bg slide.
				case 'bg2': num = 1; break; // Commenting any of these cause same reaction
				case 'bg3': num = 2; break;
				case 'bg4': num = 3; break;
				case 'bg5': num = 4; break;
				//case 'bg0': num = -1; break;
			}

			/* this is the sub menu overlay. Let's hide the current one
				if we hover the <li> lower than the current one,
				then the overlay should move left -> right,
				otherwise right->left */
					// OVERLAYS
			if (num < current){
				/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
				$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-400px 0)"},300,function(){
					$(this).find('li').hide();
			});
              $('#menu > li').animate({backgroundPosition:"(-1000px 0)"},0).removeClass('bg0 bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(1,item);
			}
			else { // if greater than the number selected
				/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
				$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(200px 0)"},300,function(){
					$(this).find('li').hide();
			});
                        $('#menu > li').animate({backgroundPosition:"(1000px 0)"},0).removeClass('bg0 bg1 bg2 bg3 bg4 bg5').addClass(item);
                        move(0,item);
			}


                    /* change the current element *** ON MOUSE OVER *** */
                    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();
                    });
                });
		

			// Display current sub menu when page loads.
				$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
                   $(this).find('li').fadeIn();
				});


                /*
                dir:1 - move left->right
                dir:0 - move right->left
                 */
                function move(dir,item){
                    if(dir){
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-200px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-400px 0)"},400);
						$('#bg4').parent().stop().animate({backgroundPosition:"(-600px 0)"},500);
                        $('#bg5').parent().stop().animate({backgroundPosition:"(-800px 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg0 bg1 bg2 bg3 bg4 bg5').addClass(item);
                        });
                    }
                    else{
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},600,function(){
                            $('#menuWrapper').removeClass('bg0 bg1 bg2 bg3 bg4 bg5').addClass(item);
                        });
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-200px 0)"},500);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-400px 0)"},400);
                        $('#bg4').parent().stop().animate({backgroundPosition:"(-600px 0)"},300);
						$('#bg5').parent().stop().animate({backgroundPosition:"(-800px 0)"},200);
                    }
                }
            });
 
 
 			

 
 //document.write(current);