firstTimeMouseWheel = true;
function verticalScroll(element) {
   //change the main div to overflow-hidden as we can use the slider now
   element = (!element) ? "" : element+" ";
   
   $(element +  '.slider-wrap').fadeOut('slow');
   $(element +  '.slider-vertical').slider('destroy');
   $(element + '.scroll-pane').css('overflow','hidden');
   $(element + '.scroll-content').css({top:"0"});
   
   
   
   //compare the height of the scroll content to the scroll pane to see if we need a scrollbar
   var difference = $(element+'.scroll-content').height()-$(element+'.scroll-pane').height();//eg it's 200px longer 
   
   if(difference>20)//if the scrollbar is needed, set it up...
   {
	  var proportion = difference / $(element+'.scroll-content').height();//eg 200px/500px
	  var handleHeight = Math.round((1-proportion)*$(element+'.scroll-pane').height());//set the proportional height - round it to make sure everything adds up correctly later on
	  handleHeight -= handleHeight%2; 
   
   //if ($("#slider-wrap").length==0){
	  $(element+".slider-wrap").remove();
	  $(element+".slider-vertical").remove();

	  $(element+".scroll-pane").after('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed
   //}
	  $(element+".slider-wrap").height($(element+".scroll-pane").height());//set the height of the slider bar to that of the scroll pane
   
	  //set up the slider 
	  $(element+'.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);
			$(element+'.scroll-content').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);
			$(element+'.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 in line with the slider
	  $(element+".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
	   
	  var origSliderHeight = $(element+".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
	  $(element+".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
	  
   }//end if
   
   $(element+".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
	   event.stopPropagation();
	  });
	  
   $(element+".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
		 $(element+".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
   }); 


   
   //additional code for mousewheel
   if (firstTimeMouseWheel) {
	  //firstTimeMouseWheel = false;
	  $(element+".scroll-pane,"+element+".slider-wrap").mousewheel(function(event, delta){
		  var speed = 1;
		  var sliderVal = $(element+".slider-vertical").slider("value");//read current value of the slider
		  
		  sliderVal += (delta*speed);//increment the current value
	  
		  $(element+".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
		  
		  event.preventDefault();//stop any default behaviour
	  });
   }
   
}