var _SlideBoxes = null;
var _currentSlideBoxIndex = 0;

function moveToBox(increment) {
    goToBox(_currentSlideBoxIndex + increment);
}

function bindMenu() {
    $("#menu a").each(function () {
        $(this).click(function (event) {
            goToBox($("#menu a").index($(this)));
            event.preventDefault();
        });
    });
}

function goToBox(boxIndex) {
    // We ensure the box index is valid.
    if (boxIndex < 0) boxIndex = 0;
    if (boxIndex >= _SlideBoxes.size()) boxIndex = _SlideBoxes.size() - 1;

    var oBox = $(_SlideBoxes.get(boxIndex));
    var oPos = oBox.position();
    _currentSlideBoxIndex = boxIndex;
    checkArrowAvailability();
    $("#container").animate({ left: "-" + oPos.left }, 'slow');

}

$(document).ready(function () {
    // We select the direct children divs of the #container
    _SlideBoxes = $("#container > div");
    checkArrowAvailability();
    bindMenu();
    $("#next").click(function () {
        moveToBox(1);
    });
    $("#prev").click(function () {
        moveToBox(-1);

    });

    if ($('#container').touchwipe) {
        $('#container').touchwipe({
            wipeLeft: function () {
                moveToBox(1);
            },
            wipeRight: function () {
                moveToBox(-1);
            }
        });
    }
});

function checkArrowAvailability() {
    var prevOpacity = (_currentSlideBoxIndex <= 0) ? '0.0' : '1.0';
    var nextOpacity = (_currentSlideBoxIndex >= _SlideBoxes.size() - 1) ? '0.0' : '1.0';
    $("#prev").animate({ opacity: prevOpacity }, 'slow');
    $("#next").animate({ opacity: nextOpacity }, 'slow');
}