var items_per_screen = 4; // dictated by design: there are 4 boxes visible at a time

var height = 0;
var max_scroll = 0;
var position = 0;

var up_button = 0;
var down_button = 0;

var cookiename;

$(function() {
    cookiename = window.location.href + "lastpos";
    up_button = $("#topNavigation");
    down_button = $("#bottomNavigation");

    up_button.click(navigateUp);
    down_button.click(navigateDown);
    height = $(".contentSection").height() + parseInt($(".contentSection").css("margin-bottom"));

    var cookie = $.cookies.get(cookiename);
    if(cookie) {
        position = parseInt(cookie);
    } else {
        position = 0;
    }

    max_scroll = $(".contentSection").length - items_per_screen;

    animate(0); // set up initial button disabled/enabled states
    $("#scrollableContent").css("top", -height * position);

});


function disableButtonIf(cond, obj) {
    if(cond) {
        obj.addClass("disabled");
    } else {
        obj.removeClass("disabled");
    }
}

function animate(delta) {
    var last_pos = position;
    position += delta;
    if(position < 0) { position = 0; }
    if(position > max_scroll) { position = max_scroll; }
    $.cookies.set(cookiename, position.toString());


    var newTopValue = position * -height;


    if(position != last_pos) {
        $('#scrollableContent').stop().animate({top: newTopValue}, 1000);
    }

    disableButtonIf(position == 0, up_button);
    disableButtonIf(position == max_scroll, down_button);
}


function navigateUp() {
    animate(-1);

}

function navigateDown() {
    animate(1);
}