jQuery(document).ready(function() {
	//change the main div to overflow-hidden as we can use the slider now
	jQuery('#content-scroll').css('overflow','hidden');
	//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
	var difference = jQuery('#content-scroll #cont_wrap').height() - jQuery('#content-scroll').height();//eg it's 200px longer 
	if(difference>0)//if the scrollbar is needed, set it up...
	{
	 var proportion = difference / jQuery('#cont_wrap').height();//eg 200px/500px
	 var handleHeight = Math.round((1-proportion)*jQuery('#content-scroll').height());//set the proportional height - round it to make sure everything adds up correctly later on
	 handleHeight -= handleHeight%2; 

	 jQuery("#content-scroll").after('<div id="slider-wrap"><div id="slider-vertical"></div></div>');//append the necessary divs so they're only there if needed
	 jQuery("#slider-wrap").height($("#content-scroll").height());//set the height of the slider bar to that of the scroll pane


	 //set up the slider 
$('#slider-vertical').slider({
			orientation: 'vertical',
			min: 0,
			max: 100,
			value: 100,
			slide: function(event, ui) {//used so the content scrolls when the slider is dragged
				 var topValue = -((100-ui.value)*difference/100);
				 jQuery('#cont_wrap').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
			},
			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 topValue = -((100-ui.value)*difference/100);
				 jQuery('#cont_wrap').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 in 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
		 
	}//end if

jQuery(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
   	event.stopPropagation();
   });
   
jQuery("#slider-wrap").click(function(event){//clicks on the wrap outside the slider range
	  var offsetTop = $(this).offset().top;//read the offset of the scroll pane
	  var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked
	  jQuery("#slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
}); 
	 
//additional code for mousewheel
jQuery("#content-scroll,#slider-wrap").mousewheel(function(event, delta){
	var speed = 5;
	var sliderVal = $("#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
	
	event.preventDefault();//stop any default behaviour
});

});