$(function(){
    // main vertical scroll
    var vertical = $("#scrollableComplete").scrollable({
        // basic settings
        vertical: true,
        size: 1,
        clickable: false,
        speed: 1, //can not use speed 0 because it stops after last vertical menu in play mode

        // up/down keys will always control this scrollable
        keyboard: 'static',

        // assign left/right keys to the actively viewed scrollable
        onSeek: function(event, i) {
            //alert('Vertical onSeek');
            //alert('i:'+i);
            horizontal.eq(i).data("scrollable").focus();
            window.apiHorizontal = horizontal.eq(i).data("scrollable");
            scrollableCompleteVerticalOnSeek();
        }
    }).navigator("#scrollableVerticalNavi");

    // horizontal scrollables. each one is circular and has its own navigator instance
    // jQuery Tools clones 2 items for Circular plugin so subtract 2 to getSize() if using Circular plugin.
    // We do not need Circular plugin for this.
    var horizontal = $(".scrollableHorizontal").scrollable({
        size: 1,
        keyboard: 'static',
        speed: 1,
        clickable: false, // Required otherwise when any links(e.g. charts) are clicked then scrollable advances to next item
        onSeek: function(event, i) {
            //alert('Horizontal onSeek');
            scrollableCompleteHorizontalOnSeek();
        }
    }).mousewheel().navigator(".scrollableHorizontalNavi").autoscroll({
        steps: 1,
        interval: window.ScrollableCompleteInterval,
        autoplay:false
    });

    // when page loads setup keyboard focus on the first horizontal scrollable
    horizontal.eq(0).scrollable().focus();

    // provide scrollable API
    window.apiHorizontal = horizontal.eq(0).data("scrollable");
    window.apiVertical = vertical.eq(0).data("scrollable");
    pauseScrollableCompleteByHovering();
    scrollablePlay();

});