jQuery(function() {
	//change the main div to overflow-hidden as we can use the slider now
	jQuery("#scroll-pane").css('overflow','hidden');
	//calculate the height that the scrollbar handle should be
	var difference = jQuery("#scroll-content").height()-jQuery("#scroll-pane").height();//eg it's 200px longer 
	var proportion = difference / jQuery("#scroll-content").height();//eg 200px/500px
	var handleHeight = Math.round((1-proportion)*jQuery("#scroll-pane").height());//set the proportional height
	//set up the slider	
	jQuery("#slider-vertical").slider({
		orientation: "vertical",
		range: "max",
		min: 0,
		max: 100,
		value: 100,
		slide: function(event, ui) {
			var topValue = -((100-ui.value)*difference/100);
			jQuery("#scroll-content").css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
		}
	});
	//set the handle height and bottom margin so the middle of the handle is ine line with the slider
	jQuery(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
	var origSliderHeight = jQuery("#slider-vertical").height();//read the original slider height
	var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
	var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
	jQuery(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
	//additional code for mousewheel
	jQuery(document).mousewheel(function(event, delta){
  		var speed = 5;
	    var sliderVal = jQuery("#slider-vertical").slider("value");//read current value of the slider
	    sliderVal += (delta*speed);//increment the current value
	    jQuery("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider
		var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
		if (topValue>0) topValue = 0;//stop the content scrolling down too much
		if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
		jQuery("#scroll-content").css({top:topValue});//move the content to the new position
	    event.preventDefault();//stop any default behaviour
 	});
});