$(document).ready(function(){
	// get number of current case studies
	var numCaseStudies = $("div.content-item").size();
	// each case study container is 650px, so multiply by the number of case studies for the new width of the horizontal container
	$("#content-holder").css("width",((numCaseStudies*650)+"px"));
	$("#content-slider").slider({
		animate: true,
		change: handleSliderChange,
		slide: handleSliderSlide
	});
  
  	function handleSliderChange(e, ui)
	{
	  var maxScroll = $("#content-scroll").attr("scrollWidth") -
					  $("#content-scroll").width();
	  $("#content-scroll").animate({scrollLeft: ui.value *
		 (maxScroll / 100) }, 1000);
	}
	
	function handleSliderSlide(e, ui)
	{
	  var maxScroll = $("#content-scroll").attr("scrollWidth") -
					  $("#content-scroll").width();
	  $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
	}
	  
});