$(document).ready(function () {
    
    var stage = $('#stage');
    var stageScrollable = stage.scrollable({
        size: 1,
        clickable: true,
        loop: true,
        items: '#product-views',
        speed: 800,
        keyboard: true,
        api: true
    });
    
    var stageNavigation = $('#stage-navigation .scrollable');
    var stageNavigationScrollable = stageNavigation.scrollable({
        size: 2,
        clickable: true,
        speed: 200,
        keyboard: false,
        api: true
    });
    
    $('#stage-navigation a.prev, #stage-navigation a.next').bind('click', function (event) {
        return false;
    });
    
    stageNavigation.find('a').each(function (i) {
        $(this).bind('click', function () {
            stageScrollable.seekTo(i);
            return false;
        });
    });
    
});