function handleSliderChange(e, ui)
{
  var maxScroll = $(".wrapper").attr("scrollWidth") - $(".wrapper").width();
  $(".wrapper").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $(".wrapper").attr("scrollWidth") - $(".wrapper").width();
  $(".wrapper").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

$(document).ready(function () {
    $(document).pngFix();
    $("#content-holder").find("span").hide()
    $(".wrapper").animate({scrollLeft: 0});
    $(".category .wrapper").css('overflow', 'hidden');    
    // Find number of products, and set the width of the div accordingly
    $children = $("#content-holder").children().size();
    $width = $(".product").outerWidth();
    $("#content-holder").css('width', $children*$width);
    
    $("#content-slider").slider({animate: true,handle: "#content-slider",change: handleSliderChange,slide: handleSliderSlide});
    
    $(".category .product").hover(function(){
    	$(this).find("span").fadeIn(200);
    },function(){
    	$(this).find("span").fadeOut(200);
    })
});