$(function(){
	var toScroll = $('.scrollableContent:eq(0)');
	
	var scrollContentHeight;
	var scrollContentDifference;
	
	function refreshScrollContentHeight() {
		scrollContentHeight = toScroll[0].scrollHeight;
        
        if($.browser.msie)
            scrollContentDifference = scrollContentHeight;  
        else
            scrollContentDifference = scrollContentHeight - toScroll.height();  
	}
	
	if(toScroll.size() > 0) {

		refreshScrollContentHeight();
		
		$('#customScrollbar').show();

		$('#scrollBarControl').draggable({
			axis:'y',
			containment:'parent',
			drag:function(event, ui){
				refreshScrollContentHeight();
				var pos = (ui.position.top / 312) * scrollContentDifference;
				toScroll.scrollTo({top:pos+'px'}, {axis:'y'});
			}
		});
		
		$('#scrollBarControl').draggable('helper').css('top',0);
		
		$('#scrollBarUp').click(function(){
			refreshScrollContentHeight();
			toScroll.scrollTo({top:'-=30px'}, {axis:'y'});
			var amount = Math.round( toScroll[0].scrollTop / scrollContentDifference * 312);

			if(amount >= 0 && amount <= 330)
				$('#scrollBarControl').draggable('helper').css('top', amount);
		});
		
		$('#scrollBarDown').click(function(){
			refreshScrollContentHeight();
			toScroll.scrollTo({top:'+=30px'}, {axis:'y'});
			var amount = Math.round( toScroll[0].scrollTop / scrollContentDifference * 312);
			
			if(amount >= 0 && amount <= 330)
				$('#scrollBarControl').draggable('helper').css('top', amount);
		});
	}
	
});