window.onload = function () {
    var container = $('div.sliderGallery');
    var ul = $('ul', container);

    var itemsWidth = ul.innerWidth() - container.outerWidth();

    $('.slider').slider({
        min: 0,
        max: itemsWidth,
        slide: function (event, ui) {
            ul.css('left', ui.value * -1);
            if (ui.value > 35)
                $('.ui-slider-handle').css('margin-left', -15);
        },
        stop: function (event, ui) {
            ul.animate({ 'left': ui.value * -1 }, 500);
            if (ui.value > container.outerWidth() + 30)
                $('.ui-slider-handle').css('margin-left', -35);
            else
                $('.ui-slider-handle').css('margin-left', 0);
        }
    });
};
