/* <![CDATA[ */
         
         function makeScrollbar(content,scrollbar,handle,buttonup,buttondown,horizontal,ignoreMouse){
            var steps = (horizontal?(content.getSize().scrollSize.x - content.getSize().size.x):(content.getSize().scrollSize.y - content.getSize().size.y))
            var slider = new Slider(scrollbar, handle, {   
               steps: steps,
               mode: (horizontal?'horizontal':'vertical'),
               onChange: function(step){
                  // Scrolls the content element in x or y direction.
                  var x = (horizontal?step:0);
                  var y = (horizontal?0:step);
                  content.scrollTo(x,y);
               }
            }).set(0);
            if( !(ignoreMouse) ){
               // Scroll the content element when the mousewheel is used within the
               // content or the scrollbar element.
               $$(content, scrollbar).addEvent('mousewheel', function(e){   
                  e = new Event(e).stop();
                  var step = slider.step - e.wheel * 30;   
                  slider.set(step);
               });
            }

            buttonup.addEvent('click', function(e){
               e = new Event(e).stop();
                    var step = slider.step - 30;   
                    slider.set(step);
            });
            buttondown.addEvent('click', function(e){
               e = new Event(e).stop();
                    var step = slider.step + 30;   
                    slider.set(step);
            });
            // Stops the handle dragging process when the mouse leaves the document body.
            $(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
         }
                  
         window.addEvent('domready', function(){            
            // -- first example, vertical scrollbar --
            makeScrollbar( $('content1'), $('scrollbar1'), $('handle1'),$('buttonup1'),$('buttondown1') );
            // -- second example, horizontal scrollbar --
            makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'),$('buttonup2'),$('buttondown2'), true );
         });
         /* ]]> */