timeline.js

jQuery.noConflict(); // necessario para nao conflitar com o MooTools

// jQuery(document).ready faz com que a funcao callback seja executada
// assim que o DOM estiver pronto. Eh melhor que onload porque nao precisa
// esperar por imagens e outros assets demorados pra carregar.
jQuery(document).ready(function() {
    var maxWidth = 905; // max width da barra de rolagem
    var container = jQuery('#block-wrap'), // div com overflow:hidden
        handler = jQuery('#tl-nav-current-bk'), // botao de rolagem
        maxHandlerPos = maxWidth-55, // posicao maxima do botao
        minHandlerPos = 35; // posicao minima do botao
        
    // deixa o botao na posicao minima por default
    handler.css('margin-left', minHandlerPos);

    // transforma a barra de rolagem num objeto Slider da jQuery UI
    jQuery('#tl-nav').slider({
        min: 0,
        max: maxWidth,
        handle: '#tl-nav-current-bk',
        slide: function (event, ui) {
            // o botao de rolagem tem 180px, entao precisamos levar
            // em consideracao essa medida ao setar as posicoes
            var containerPos = ui.value-125, // 180/2 + 35
                handlerPos = ui.value-90; // 180/2
            if(ui.value < maxHandlerPos) { // o botao so se move ate certo ponto
                // e a posicao minima nao pode ser menor que minHandlerPos
                if(handlerPos < minHandlerPos) handlerPos = minHandlerPos;
                // muda a margem pra mudar a posicao do botao, usando
                // velocidade 0
                handler.animate({'margin-left':handlerPos}, 0);
            }
            // faz o scroll no div com overflow:hidden
            container.scrollLeft(containerPos);
        }
    });
});