$(document).ready(function() {	
	$('#sidebar li').click(function(){
		if($(this).hasClass('selected')) {
			$('#sidebar li').removeClass('selected').find('p').hide();
		} else {
			$('#sidebar li').removeClass('selected').find('p').hide();
			$(this).addClass('selected').find('p').show();
		}
	});
	
	$('.scrollable').scrollable({next: '.right', prev: '.left', circular: false}).navigator();
	$('ul.products li a').fancybox({'titlePosition'  : 'over'});
	$('.member a.fancybox').fancybox({'titlePosition'  : 'over'});
	$('.map a').fancybox({'titlePosition'  : 'over'});

	$('.scrollable .item').each(function(){
		var headWidth = $(this).find('strong').width();
		$(this).find('div.text').css({width: headWidth + 62})
	});
});

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

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

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

   $(".contentRight").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($(".contentRight").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);
         $('.sliderWrap').css({top:topValue});
      }
   });

   //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
   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

$("#slider-wrap").click(function(){//this means the bottom of the slider beyond the slider range is clicked, so move the slider right down
   $("#slider-vertical").slider("value", 0);
   $('.sliderWrap').css({top:-difference});   
})
}//end if
	 
	//additional code for mousewheel
	$(".contentRight,#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
		
		$(".sliderWrap").css({top:topValue});//move the content to the new position
	    event.preventDefault();//stop any default behaviour
 	});
});