window.onload = function() {
    var container = $('div.sliderGallery');
    var ul = $('ul', container);

    var numberOfItems = $('li.item').size();
    var ulWidth = numberOfItems * 170;
    ul.css('width', ulWidth); //Set the ul size

    var itemsWidth = ul.innerWidth() - container.outerWidth();

    if (itemsWidth > 0) {
        var slider = $('.slider', container);
        slider.css('visibility', 'visible');
        slider.slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function(event, ui) {
                ul.animate({ 'left': ui.value * -1 }, 500);
            },
            slide: function(event, ui) {
                ul.css('left', ui.value * -1);
            }
        });

        // Use previous values
        var q = $.parseQuery();
        var handle = $('.handle', slider);

        var relativePosition = parseFloat(q.index) / parseFloat(numberOfItems - 1);
        var amount = relativePosition * itemsWidth;
        var handleAmount = relativePosition * 406;

        handle.animate({ 'left': handleAmount }, 500);
        //handle.animate({ 'left': amount }, 500);
        ul.animate({ 'left': amount * -1 }, 500);
    }
};