$(function() {
$('.scroll-pane').each(function(){
//change the main div to overflow-hidden as we can use the slider now
$(this).css('overflow','hidden');
//$(this).find('.scroll-content').css('border','1px solid #00ff00');
  
//$(this).css('border','1px solid #ff0000');

//wrap an extra div around the scrollpane so we can use the mousewheel later
$(this).wrap('<\div class="scroll-container">');

//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
var difference = $(this).find('.scroll-content').height()-$(this).height()+30;//eg it's 200px longer
if(difference<0) {difference = difference * -1};
                  if(difference==0) {difference=300};                  
if(difference>0)//if the scrollbar is needed, set it up...
{
  var proportion = difference / $(this).find('.scroll-content').height();//eg 200px/500px
      if($(this).find('.scroll-content').height() == 0)
      {
        proportion=.75
      };
        
   
   var handleHeight = Math.round((1-proportion)*$(this).height());//set the proportional height - round it to make sure everything adds up correctly later on
        //alert($(this).find('.scroll-content').height());
   handleHeight -= handleHeight%2;

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


   //set up the slider
   $(this).next().find('.slider-vertical').slider({
      orientation: 'vertical',
      min: 0,
      max: 100,
      value: 100,
      slide: function(event, ui) {
         var topValue = -((100-ui.value)*difference/100);
         $(this).parent().prev('.scroll-pane').find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
        //console.log($(this).parent().prev('.scroll-pane').find('.scroll-content').css({top:topValue}))
      },
      change: function(event, ui) {
       
         var topValue = -((100-ui.value)*difference/100);
         $(this).parent().prev('.scroll-pane').find('.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
   $(this).next().find(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
   var origSliderHeight = $(this).next().find(".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
   $(this).next().find(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins


}//end if
  
  //code for clicks on the scrollbar outside the slider
  $(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
       event.stopPropagation();
     });
   
  $(".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
      $(this).find(".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
  });
   
  //additional code for mousewheel
  $(this).parent().mousewheel(function(event, delta){
      var speed = 15;
      var sliderVal = $(this).find(".slider-vertical").slider("value");//read current value of the slider
    
      sliderVal += (delta*speed);//increment the current value
 
      $(this).find(".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
    
      event.preventDefault();//stop any default behaviour
   });
  
  
});//end each
  
});