var galleryDiv;     // Parent of the whole gallery
var imagesDiv;      // Div containing each large image
var captionsDiv;    // Div containing spans with a description for each image
var indexSpan;      // Span displaying the current image index
var totalSpan;      // Span displaying the total number of images

var index;          // Currently displayed image
var count;          // Total number of images

$(document).ready(function() {

    galleryDiv = $(".gallery");
    imagesDiv = $("#largePic", galleryDiv);
    captionsDiv = $("#desc_txt", galleryDiv);
    indexSpan = $(".index", galleryDiv);
    totalSpan = $(".total", galleryDiv);

    index = 0;
    count = $("img", imagesDiv).length;

    update();

    $("#prev_btn a", galleryDiv).click(function() {
        if (index > 0)
            index--;

        update();
    });

    $("#next_btn a", galleryDiv).click(function() {
        if ((index + 1) < count)
            index++;

        update();
    });

    var thumbnails = $(".thumbnails img", galleryDiv);

    thumbnails.click(function(i) {
        index = thumbnails.index(this);
        update();
    });
});

function update() {
    showIndex($("img", imagesDiv), index);
    showIndex($("span", captionsDiv), index);

    indexSpan.text(index + 1);
    totalSpan.text(count);
}

function showIndex(collection, index) {
    collection.hide();
    $(collection[index]).show();
}