var gal_marker = 0;

$(document).ready(function () {

    // Put the first image in the primary pane.

    galset(0);
    $("#gallery #thumbs .thumb").hide();
    $("#gallery #thumbs .thumb").slice(0, 8).show();
    gal_marker = 0;

    // Make the thumbnails clickable.
    $("#gallery .thumb").each(function (i) {
        $(this).click(function () {
            galset(i);
        });
    });

    // Make the navigation clickable.

    $("#gal-nav-lt").click(function () {
        var pane_src = $("#gal-pane img").attr("src");
        var index = -1;
        $("#thumbs img").each(function (i) {
            var thumb_src = $(this).attr("src");
            if (thumb_src == pane_src)
                index = i;
        });
        index--;
        galset(index);
    });

    $("#gal-nav-rt").click(function () {
        var pane_src = $("#gal-pane img").attr("src");
        var index = -1;
        $("#thumbs img").each(function (i) {
            var thumb_src = $(this).attr("src");
            if (thumb_src == pane_src)
                index = i;
        });
        index++;
        galset(index);
    });

});

function galset(index) {
    max = $("#gallery #thumbs img").length;

    if (index >= max) {
        index = 0;
    }
    if (index < 0) {
        index = max - 1;
    }
    if (index > gal_marker + 7) {
        gal_marker = index - 7;
    }
    if (index < gal_marker) {
        gal_marker = index;
    }

    $("#gallery #thumbs .thumb").hide();
    $("#gallery #thumbs .thumb").slice(gal_marker, (gal_marker + 8)).show();

    var thumb_title = $("#gallery #thumbs img").eq(index).attr("title");
    var thumb_dsc = $("#gallery #thumbs img").eq(index).attr("alt");

    thumb_dsc = "<strong>"+ thumb_title +":</strong> "+ thumb_dsc + "<br/><strong><a href=\"/Gallery/\" >View our full Gallery &raquo;</a></strong>";

    // Place the description in the bottom div.
    $("#gal-btm p").html(thumb_dsc);

    // Update the image in the primary pane.
    $("#gal-pane img").remove();
    $("#thumbs img").eq(index).clone().prependTo("#gal-pane");

    // Adjust the thumbnails.
    $(".gal-active").removeClass("gal-active");
    $("#gallery .thumb").find("img").eq(index).addClass("gal-active");
}