$(function(){
    // initialize scrollable
    var horizontal = $("div.scrollableBanner").scrollable({
        size: 1,
        keyboard: 'static',
        hoverClass: 'hover',
        clickable: false, // Required otherwise when any links(e.g. charts) are clicked then scrollable advances to next item
        speed: 1,
        onSeek: function(event, i) {
            //alert('Horizontal onSeek');
            scrollableHorizontalOnSeek();
        }
    }).navigator({navi:'div.scrollableBannerNavi'}).mousewheel().autoscroll({
        steps: 1,
        interval: window.ScrollableInterval,
        autoplay:false,
        autopause:false //autopause was not working with play/pause navigator so use our own function (pauseScrollableBannerByHovering) to pause.
    });

    // provide scrollable API
    window.apiHorizontal = horizontal.eq(0).data("scrollable");
    pauseScrollableBannerByHovering();
    scrollablePlay();
});