/* Adds scroll bars when neccesary to the #content container */

var scrollbar, s, off;

document.observe("dom:loaded", function() {

var cont = $('content');
var wrapper = $('content_container');

if(cont.scrollHeight <= cont.offsetHeight) return;

cont.wrap('div', { id: 'content_scroll'} );
cont.style.overflow = 'hidden';
var cs = $('content_scroll');
cs.className = cont.className;

$('content_scroll').insert('<div id="scrollbar"><div id="scrollbar_track"><div id="scrollbar_handle"></div></div><div id="scrollbar_arrows"><span href="javascript:;" id="scroll_down"></span><span href="javascript:;" id="scroll_up"></span></div></div>');

scrollbar = new Control.ScrollBar('content','scrollbar_track',{'proportional': false });



/*Control.Scrollbar.addMethods({
	onChange: function($super,value) {
		$super(value);
		//this.handle.addClassName('active');
		alert('test');
	}
});*/

$('scroll_down').observe('mousedown',startscroll(1));  
$('scroll_down').observe('mouseup',function(event) { clearInterval(s); this.toggleClassName('active'); });
$('scroll_down').observe('mouseleave',function(event) { clearInterval(s); this.removeClassName('active'); });
$('scroll_up').observe('mousedown',startscroll(-1));
$('scroll_up').observe('mouseup',function(event) { clearInterval(s); this.toggleClassName('active'); });
$('scroll_up').observe('mouseleave',function(event) { clearInterval(s); this.removeClassName('active'); });
 
$('scrollbar_handle').observe('mousedown',function(event) { this.addClassName('active'); });
$('scrollbar_handle').observe('mouseup',function(event) { this.removeClassName('active'); });
//$('scrollbar_handle').observe('mouseleave',function(event) { this.removeClassName('active'); });

scrollbar.observe('change', function(){
	scrollbar.slider.dragging ? $('scrollbar_handle').addClassName('active') : $('scrollbar_handle').removeClassName('active');
});

});


function startscroll(d) { return function(event) { s = setInterval("scrollbar.scrollBy("+(d*5)+");",50); $(this).toggleClassName('active'); }; }