<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(){
    var myProducts = new ScrollBar('products', 'bar', 'knob', {
        scroll: {
            duration: 2000,
            transition: 'elastic:out',
            onStart: function(){
            //    console.log('start ' + this.to[0]);
            },
            onComplete: function(){
            //    console.log('complete ' + this.to[0]);
            }
        },
        slider: {
            offset: -1,
            onChange: function(pos){
            //    console.log('change ' + pos);
            },
            onComplete: function(pos){
            //    console.log('complete ' + pos);
            }
        },
        knob: {
            duration: 1200,
            transition: 'elastic:out',
            onStart: function(){
            //    console.log('start ' + this.to[0].value); // knob position
            }
        }
    });
    
    myProducts.set(50);
    
    document.id('move0').addEvent('click', function(){ myProducts.set(0); });
    document.id('move10').addEvent('click', function(){ myProducts.set(10); });
    document.id('move100').addEvent('click', function(){ myProducts.set(100); });
    document.id('move1000').addEvent('click', function(){ myProducts.set(1000); });
    
    var products = $$('#products li');
    document.id('move1st').addEvent('click', function(){ myProducts.set(products[0]); });
    document.id('move2nd').addEvent('click', function(){ myProducts.set(products[1]); });
    document.id('move3rd').addEvent('click', function(){ myProducts.set(products[2]); });
    
    
    /*document.id('getPos').addEvent('click', function(){
        console.log(myProducts.steps);
    });*/
    
    
    // if your link is on the slider
    document.id('theSixth').addEvents({
        'mousedown': function(event){
            event.stop();
        },
        'click': function(){
            myProducts.set(products[5]);
        }
    });
    
});
</script>

<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function(){
    var myVProducts = new ScrollBar('vScroll', 'vBar', 'vKnob', {
        slider: {
            mode: 'vertical',
            offset: -1
        }
    });
    myVProducts.set(50);
    
    document.id('aBitToTop').addEvent('click', function(e){
        e.stop();
        myVProducts.move2(-25);
    });
    document.id('aBitToBottom').addEvent('click', function(e){
        e.stop();
        myVProducts.move2(25);
    });
});</script>