//Fixed Vertical Scroll Bar with jQuery UI Slider JP- Saturday 26/2/2011

$(document).ready(function() {
//$(function() {
		$('.scroll-pane').each(function(){
			setSlider($(this));
		});//end each
});


function setSlider($scrollpane){

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

//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
var difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();//eg it's 200px longer 

if(difference>0)//if the scrollbar is needed, set it up...
{
   var proportion = difference / $scrollpane.find('.scroll-content').height();//eg 200px/500px

   var handleHeight = 22;//set the proportional height - round it to make sure everything adds up correctly later on
   
   if($scrollpane.find('.slider-wrap').length==0)//if the slider-wrap doesn't exist, insert it
   {
      $scrollpane.append('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed
      $scrollpane.find('.slider-wrap').height($scrollpane.height());//set the height of the slider bar to that of the scroll pane
   }
   
   //set up the slider 
   $scrollpane.find('.slider-vertical').slider({
      orientation: 'vertical',
      range: 'max',
      min: 0,
      max: 100,
      value: 100,
      slide: function(event, ui) {
         var topValue = -((100-ui.value)*difference/100);
         $(this).parents('.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
   $scrollpane.find(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
   var origSliderHeight = $scrollpane.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
   $scrollpane.find(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
   $scrollpane.find(".ui-slider-range").css({top:-sliderMargin});//position the slider-range div at the top of the slider container

   //if the slider has already been set up and this function is called again, we may need to set the position of the slider handle
   var contentposition = $scrollpane.find('.scroll-content').position();	
   var newSliderValue = 100*(1-Math.abs(contentposition.top)/difference);
   $scrollpane.find(".slider-vertical").slider("value", newSliderValue);//and set the new value of the slider
   
   $scrollpane.find(".slider-wrap").click(function(){//this means the bottom of the slider beyond the slider range is clicked, so move the slider right down
	   $(this).find(".slider-vertical").slider("value", 0);
	   $scrollpane.find('.scroll-content').css({top:-difference});   
	})

}//end if
	 
	 
$(this).find(".slider-vertical a").click(function(event){
    event.preventDefault();
  }             
);



//additional code for scrolling to anchors

$('#anchors a').click(function(){

	var difference = $('.scroll-content').height()-$('.scroll-pane').height();//calculate the difference - not needed if within the main slider code
	
	var targetclass = ($(this).attr('class'));//read the class of the clicked anchor
    
	var position = $(".scroll-content ."+targetclass).position();//search for a div with matching class and read its position
    var topValue = -(position.top);//content top is just the negative of the top 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

	$(".scroll-content").css({top:topValue});//set the new content top
		
	sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
	$(".slider-vertical").slider("value", sliderVal);//set the slider position

	return false;

});


	//additional code for mousewheel
	$scrollpane.mousewheel(function(event, delta){
  		var speed = 5;
	    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
		
		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
		$(this).find(".scroll-content").css({top:topValue});//move the content to the new position
	    event.preventDefault();//stop any default behaviour
 	});
 	

	
	
}