var pageSize = 4;
function updatePosition() 
{
    ti = $("div.scrollable div.thumb").size();
    remainder = (this.getPageAmount() * this.getSize()) - ti;
    pi = this.getPageIndex();
    pa = this.getPageAmount();
	pic = pi + 1;
    if (pic == pa) 
    {
        v = (ti - pageSize) + 1 + ' - ' + ti;
    }
    else 
    {
        f = (pi * pageSize) + 1;
        l = (pi * pageSize) + pageSize;
        v = f + ' - ' + l;
    }

    $(".naviNumbers").html("Showing " + v + " of " + ti);
    if (ti > 4) {
      $("#scroll-tip").html("(scroll left and right)");
    }
    // $(".naviNumbers").html("Page " + (this.getPageIndex()+1) + " of " + this.getPageAmount());
}
$(document).ready(function() 
{
	if($('div.scrollable').length)
	{
	    // init scroller
	    var children = $("div.scrollable div.thumb").size();
	    if (children < 4) {
	        pageSize = children;
	    }
	    $("div.scrollable").scrollable({
	        size: pageSize,
	        speed: 600,
	        clickable: false,
	        onSeek: updatePosition
	    });
	    var scroller = $("div.scrollable").scrollable({ api: true });
	    // find page index of the active item
		indexActive = $(".scrollable .items div").index($('.active'));
	    perPage = 4;
	    //test to see which page it's on and seek to that page
	    switch (true) {
	        case indexActive < perPage:
	            pageToSeek = 0;
	            break;
	
	        case indexActive < (perPage * 2):
	            pageToSeek = 1;
	            break;
	
	        case indexActive < (perPage * 3):
	            pageToSeek = 2;
	            break;
	
	        case indexActive < (perPage * 4):
	            pageToSeek = 3;
	            break;
	
	        case indexActive < (perPage * 5):
	            pageToSeek = 4;
	            break;
	
	        case indexActive < (perPage * 6):
	            pageToSeek = 5;
	            break;
	
	        case indexActive < (perPage * 7):
	            pageToSeek = 6;
	            break;
	
	        case indexActive < (perPage * 8):
	            pageToSeek = 7;
	            break;
	
	        case indexActive < (perPage * 9):
	            pageToSeek = 8;
	            break;
	
	        case indexActive < (perPage * 10):
	            pageToSeek = 9;
	            break;
	
	        case indexActive < (perPage * 11):
	            pageToSeek = 10;
	            break;
	
	        default:
	            pageToSeek = 0;
	            break;
	
	    }  // switch ()

	    scroller.setPage(pageToSeek,1);
	
	    $("#count").html(scroller.getItems().size());
	
	    // jump up scroller titles
	    $("div.scrollable .thumb.not-viewing a span").css({ bottom: -50 });
	    $("div.scrollable .thumb.not-viewing a").hover(function() 
	    {
	        $(this).children('span').animate({ bottom: 0 });

	    }, function() 
	    {
	        var pullup = '-' + ($(this).children("span").height() + 15);
	        $(this).children('span').animate({ bottom: pullup }, 'fast');
	    });
	    $("div.scrollable .thumb.active a span").css({ bottom: 0 });
	}
});