$(document).ready(function(){
	$(".productCategory").hover(function(){
	$('div.sc_menu').scrollLeft(0);
	var currentlyAt = "garden_natural_soups";
		if (this.id == "garden_natural_soups"){
			$("#caret").animate({left: "65px"});
			$("#blind").css({zIndex: '422'});
			var newContent = $("#garden_natural_soups_data").html();
			$("#productRangeHolder").html(newContent);
			$("#blind").css({zIndex: '1'});
		}else if (this.id == "garden_natural_broths"){
			$("#caret").animate({left: "225px"});
			$("#blind").css({zIndex: '422'});
			var newContent = $("#garden_natural_broths_data").html();
			$("#productRangeHolder").html(newContent);
			$("#blind").css({zIndex: '1'});
		}else if (this.id == "low_sodium"){
			$("#caret").animate({left: "370px"});
			$("#blind").css({zIndex: '422'});
			var newContent = $("#low_sodium_data").html();
			$("#productRangeHolder").html(newContent);
			$("#blind").css({zIndex: '1'});
                                           }else if (this.id == "chunky_soups"){
			$("#caret").animate({left: "515px"});
			$("#blind").css({zIndex: '422'});
			var newContent = $("#chunky_soups_data").html();
			$("#productRangeHolder").html(newContent);
			$("#blind").css({zIndex: '1'});
		}else if (this.id == "gravies"){
			$("#caret").animate({left: "670px"});
			$("#blind").css({zIndex: '422'});
			var newContent = $("#gravies_data").html();
			$("#productRangeHolder").html(newContent);
			$("#blind").css({zIndex: '1'});
		}
	},function(){
		
		$(function(){
			//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;
				if (parseInt(left) > 0) /*Some kinda IE mystery bug*/
					div.scrollLeft(left);
			});
		});

	});
});	


$(function(){
			//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;
				if (parseInt(left) > 0)
					div.scrollLeft(left);
			});
		});