var scrollHandle = 0,
    scrollStep = 5,
    parent = jQuery("#hatListSubContainer");

//Start the scrolling process
jQuery(".panner").on("mousedown", function () {
    console.log('click');
    var data = jQuery(this).data('scroll-modifier'),
        direction = parseInt(data, 10);

    jQuery(this).addClass('active');

    startScrolling(direction, scrollStep);
});

//Kill the scrolling
jQuery(".panner").on("mouseup", function () {
    stopScrolling();
    jQuery(this).removeClass('active');
});

//Actual handling of the scrolling
function startScrolling(modifier, scrollStep) {
    if (scrollHandle === 0) {
        scrollHandle = setInterval(function () {
            var newOffset = parent.scrollLeft() + (scrollStep * modifier);

            parent.scrollLeft(newOffset);

            console.log('startScrolling' + newOffset);

        }, 10);
    }
}

function stopScrolling() {
    clearInterval(scrollHandle);
    scrollHandle = 0;
}