var step = 200;
var intervalId = null;

window.onload = function() {
    var container = $('.inner-box .content');
    var ul = $('.inner-box .content ul');
    var itemsWidth = ul.innerWidth() - container.outerWidth();
    var step = step;
    $(function() {
        $(".slider").slider({
            animate: true,
            min: 0,
            handle: '.ui-slider-handle',
            max: itemsWidth,
            /*stop: function(event, ui) {
            ul.animate({ 'left': ui.value * -1 }, 10);
            },*/
            slide: function(event, ui) {
                if (intervalId != null)
                    clearInterval(intervalId);
                ul.animate({ 'left': ui.value * -1 }, 10);
            }
        });
    });
};

function startStepRight() {
    if (intervalId != null)
        clearInterval(intervalId);
    intervalId = setInterval("stepRight()", 100);
}

function startStepLeft() {
    if (intervalId != null)
        clearInterval(intervalId);
    intervalId = setInterval("stepLeft()", 100);
}

function stop() {
    if (intervalId != null)
        clearInterval(intervalId);
}

function stepRight() {
    var obj = $(".slider");
    var ul = $('.inner-box .content ul');
    obj.slider('value', obj.slider('value') + step);
    ul.animate({ 'left': obj.slider('value') * -1 }, 10);
}

function stepLeft() {
    var obj = $(".slider");
    var ul = $('.inner-box .content ul');
    obj.slider('value', obj.slider('value') - step);
    ul.animate({ 'left': obj.slider('value') * -1 }, 10);
}