document.observe('dom:loaded',function(){
		
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');

$('scroll_down_50').observe('click',function(event){
	scrollbar.scrollBy(-50);
	event.stop();
});

$('scroll_up_50').observe('click',function(event){
	scrollbar.scrollBy(50);
	event.stop();
});

$('scroll_top').observe('click',function(event){
	scrollbar.scrollTo('top');
	event.stop();
});

$('scroll_bottom').observe('click',function(event){
	//to animate a scroll operation you can pass true
	//or a callback that will be called when scrolling is complete
	scrollbar.scrollTo('bottom',function(){
		if(typeof(console) != "undefined")
			console.log('Finished scrolling to bottom.');
	});
	event.stop();
});

$('scroll_second').observe('click',function(event){
	//you can pass a number or element to scroll to
	//if you pass an element, it will be centered, unless it is
	//near the bottom of the container
	scrollbar.scrollTo($('second_subhead'));
	event.stop();
});

$('scroll_third').observe('click',function(event){
	//passing true will animate the scroll
	scrollbar.scrollTo($('third_subhead'),true);
	event.stop();
});

$('scroll_insert').observe('click',function(event){
	$('scrollbar_content').insert('<p>Inserted: ' + $('repeat').innerHTML + '</p>');
	//you only need to call this if ajax or dom operations modify the layout
	//this is automatically called when the window resizes
	scrollbar.recalculateLayout();
	event.stop();
});

	});