$(function() {
//change the main div to overflow-hidden as we can use the slider now
$('#scroll-pane').css('overflow','hidden');

//calculate the height that the scrollbar handle should be
var difference = $('#scroll-content').height()-$('#scroll-pane').height();//eg it's 200px longer 

if(difference>0)//if the scrollbar is needed, set it up...
{
   var proportion = difference / $('#scroll-content').height();//eg 200px/500px
   var handleHeight = Math.round((1-proportion)*$('#scroll-pane').height());//set the proportional height - round it to make sure everything adds up correctly later on
   handleHeight -= handleHeight%2;
   handleHeight = 11;

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


   //set up the slider 
   $('#slider-vertical').slider({
      orientation: 'vertical',
      range: 'max',
      min: 0,
      max: 100,
      value: 100,
      slide: function(event, ui) {
         var topValue = -((100-ui.value)*difference/100);
         $('#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
	$(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
	
	var origSliderHeight = $("#slider-vertical").height();//read the original slider height
	//alert('handle= '+handleHeight+' - '+origSliderHeight);
	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
	$(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
	$(".ui-slider-range").css({top:-sliderMargin});//position the slider-range div at the top of the slider container
}//end if
	 
	//additional code for mousewheel
	$("#scroll-pane,#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
 
	    $("#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
		
		$("#scroll-content").css({top:topValue});//move the content to the new position
	    event.preventDefault();//stop any default behaviour
 	});
	
	
	
});



function scroll_up_new() {
	//alert($('.ui-slider-range').css('height'));
	//var maxDim=$('#scroll-content').css('height');
	var maxDim=document.getElementById('scroll-content').offsetHeight;
	maxDim=parseInt(maxDim);
	//alert('offsetHeight='+maxDim);
	if (maxDim>parseInt($('#scroll-pane').css('height'))) {
		//alert(maxDim+'__>'+$('#scroll-pane').css('height'));
		maxDim=maxDim-parseInt($('#scroll-pane').css('height'));
		//alert('max='+maxDim);
		var scrollDiv=(maxDim/10);
		//alert('div='+scrollDiv);
		var scrollMuch=$('#scroll-content').css('top');
		scrollMuch=parseInt(scrollMuch);
		if (scrollMuch<0) scrollMuch=scrollMuch*(-1);
		//alert('scrolltop='+scrollMuch);
		scrollDiv=scrollMuch-scrollDiv;
		//alert('scrollDiv='+scrollDiv);/**/
	
		var val=$('#slider-vertical .ui-slider-range').css('height');
		val=parseInt(val);
		val=val-10;
		
		if (val<0) val=0;
		if (scrollDiv<0) scrollDiv=0;
		
		var valBottom=val;
		//var valBottom_perc=val+'%';
		
		$('#slider-vertical .ui-slider-range').css({height:val+'%'});
		$('#slider-vertical .ui-slider-handle').css({bottom:(100-val)+'%'});
		//$('#scroll-content').css({top:(-val*9.6)+'%'});
		//$('#scroll-content').css({top:(-val)+'%'});
		$('#scroll-content').css({top:-scrollDiv});
	}
}

function scroll_down_new() {
	//alert($('#scroll-content').css('height'));
	
	//var maxDim=$('#scroll-content').css('height');
	var maxDim=document.getElementById('scroll-content').offsetHeight;
	maxDim=parseInt(maxDim);
	//alert('offsetHeight='+maxDim);
	if (maxDim>parseInt($('#scroll-pane').css('height'))) {
		//alert(maxDim+'__>'+$('#scroll-pane').css('height'));
		maxDim=maxDim-parseInt($('#scroll-pane').css('height'));
		//alert('max='+maxDim);
		var scrollDiv=(maxDim/10);
		//alert('div='+scrollDiv);
		var scrollMuch=$('#scroll-content').css('top');
		scrollMuch=parseInt(scrollMuch);
		if (scrollMuch<0) scrollMuch=scrollMuch*(-1);
		//alert('scrolltop='+scrollMuch);
		scrollDiv=scrollMuch+scrollDiv;
		//alert('scrollDiv='+scrollDiv);/**/
		
		/*alert('scrollcontent_top='+$('#scroll-content').css('top'));
		alert('scrollcontent_height='+$('#scroll-content').css('height'));
		alert('scrollcontent_offset='+document.getElementById('scroll-content').offsetHeight);*/
		
		var val=$('#slider-vertical .ui-slider-range').css('height');
		val=parseInt(val);
		val=val+10;
		
		if (val>100) val=100;
	
		//alert(scrollDiv+' - '+maxDim);
		if (scrollDiv>maxDim) scrollDiv=maxDim;
		
		$('#slider-vertical .ui-slider-range').css({height:val+'%'});
		$('#slider-vertical .ui-slider-handle').css({bottom:(100-val)+'%'});
		//$('#scroll-content').css({top:(-(val*9.6))+'%'});
		$('#scroll-content').css({top:-scrollDiv});
		//alert('scroll='+$("#scroll-content").scroll());
		
		//calculate the height that the scrollbar handle should be
		/*var difference = $('#scroll-content').height()-$('#scroll-pane').height();//eg it's 200px longer 
		var topValue = -((100-val)*difference/100);//calculate the content top from the slider position
		$("#scroll-content").css({top:topValue});//move the content to the new position*/
	}
}/**/