function setHScroller(scrollpaneid, scrollcontentid) {

//change the main div to overflow-hidden as we can use the slider now
$('#'+scrollpaneid).css('overflow','hidden');

//compare the width of the scroll content to the scroll pane to see if we need a scrollbar
var pwidth = $('#'+scrollpaneid).width();
var cwidth = $('#'+scrollcontentid).width();

var difference = parseInt(cwidth - pwidth); 
if (difference < 0) difference = 1;
   
var proportion = difference / cwidth; //eg 200px/500px
   var handleWidth = Math.round((1-proportion)*pwidth);//set the proportional width - round it to make sure everything adds up correctly later on
   handleWidth -= handleWidth%2; 

   $('div#'+scrollpaneid+'-wrap').remove(); // removing the existing div
   $("#"+scrollpaneid).after('<\div id="'+scrollpaneid+'-wrap"><\div id="'+scrollpaneid+'-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
   $("#"+scrollpaneid+"-wrap").width(pwidth);//set the width of the slider bar to that of the scroll pane

   //set up the slider 
   $('#'+scrollpaneid+'-horizontal').slider({
      orientation: 'horizontal',
      min: 0,
      max: 100,
      value: 100,
      slide: function(event, ui) {//used so the content scrolls when the slider is dragged
         var leftValue = -((100-ui.value)*difference/100);
         $('#'+scrollcontentid).css({left:leftValue});//move the left up (negative value) by the percentage the slider has been moved times the difference in width
      },
      change: function(event, ui) {//used so the content scrolls when the slider is changed by a click outside the handle or by the mousewheel
         var leftValue = -((100-ui.value)*difference/100);
         $('#'+scrollcontentid).css({left:leftValue});//move the left up (negative value) by the percentage the slider has been moved times the difference in width
      }
   });

   //set the handle width and right margin so the middle of the handle is in line with the slider
   $("#"+scrollpaneid+"-horizontal a.ui-slider-handle").css({width:handleWidth,'margin-left':-0.5*handleWidth});
	
   var origSliderWidth = $("#"+scrollpaneid+"-horizontal").width();//read the original slider width
   var sliderWidth = origSliderWidth - handleWidth ;//the width through which the handle can move needs to be the original width minus the handle width
   var sliderMargin =  (origSliderWidth - sliderWidth)*0.5;//so the slider needs to have both left and right margins equal to half the difference
   $("#"+scrollpaneid+"-wrap .ui-slider").css({width:sliderWidth,'margin-left':sliderMargin});//set the slider width and margins
   


$("#"+scrollpaneid+"-wrap .ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
   	event.stopPropagation();
   });
   
$("#"+scrollpaneid+"-horizontal").click(function(event){//clicks on the wrap outside the slider range
	  var offsetLeft = $(this).offset().left;//read the offset of the scroll pane
	  var clickValue = (event.pageX-offsetLeft)*100/$(this).width();//find the click point, subtract the offset, and calculate percentage of the slider clicked
	  $("#"+scrollpaneid+"-horizontal").slider("value", 100-clickValue);//set the new value of the slider
}); 
	 
//additional code for mousewheel
$("#"+scrollpaneid+",#"+scrollpaneid+"-wrap").mousewheel(function(event, delta){
	var speed = 5;
	var sliderVal = $("#"+scrollpaneid+"-horizontal").slider("value");//read current value of the slider
	
	sliderVal += (delta*speed);//increment the current value

	$("#"+scrollpaneid+"-horizontal").slider("value", sliderVal);//and set the new value of the slider
	
	event.preventDefault();//stop any default behaviour
});

}