document.observe('dom:loaded',function(){
if ($('scrollbar_content')) {
   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><b>Inserted: ' + $('repeat').innerHTML + '</b></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();  
  }); 
}
});