// execute when the DOM is ready
$(function() {
    var scrollable = $("div.scrollable");
    var pageSize = 4;
    scrollable.attr("pageSize", pageSize);
    $("div.scrollable").scrollable({
        size: pageSize,
        items: ".scrollable div.items",
        item: ".navbar_btn"
    }); 
    $(".navbar_btn").hover(function() {
        if($(this).hasClass("rrSWnavBtnOn")) {
            return;
        }
        $(".navbar_btn").removeClass("rrSWnavBtnOn");
        $(this).addClass("rrSWnavBtnOn");
        var selectedItem = ".limo" + $(this).attr("id").substring(4);
        $(".item").hide();
        $(selectedItem).fadeIn();
    });
    $("div.scrollable .items #limo1").trigger("mouseover");
    var autoSlidingTimePeriod = 4;
    setInterval("SelectNextItem()", autoSlidingTimePeriod * 1000);
});
function SelectNextItem()
{
    var scrollable = $("div.scrollable");
    var activeNavbtn = scrollable.attr("activeNavbtn");
    if(activeNavbtn == undefined) {
        activeNavbtn = 0;
    }
    else activeNavbtn = Number(activeNavbtn);
    var api = $("div.scrollable").scrollable({api: true});
    var pageCount = api.getPageAmount();
    var pageIndex = api.getPageIndex();
    var pageSize = Number(scrollable.attr("pageSize"));
    var currItemInPage = api.getIndex();
    if(activeNavbtn != 0 && activeNavbtn % pageSize == 0) {
        if(pageIndex < pageCount-1) api.nextPage();
        else {
            api.setPage(0);
            activeNavbtn = 0;
        }
    }
    $("div.scrollable .items #limo" + (activeNavbtn + 1)).trigger("mouseover");
    activeNavbtn++;
    scrollable.attr("activeNavbtn", activeNavbtn);
}