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('&lt;p><b>Inserted: ' + $('repeat').innerHTML + '</b>&lt;/p&gt;');
		//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();
	});
 
		});