function showImage(thumbImage) {
    // set the main image properties based on the thumbnail clicked
    document.getElementById("pointGalleryMainImage").src = thumbImage.src.replace("_small", "_large");
    document.getElementById("pointGalleryMainImage").alt = thumbImage.alt;
    document.getElementById("pointGalleryMainImage").title = thumbImage.title;
}

var pageSize = 6;
var currentPage = 1;

function showNextPage() {

    // get the images
    var images = document.getElementById("pointGalleryThumbs").getElementsByTagName("img");

    // make sure there is a next page
    if ((currentPage * pageSize) < images.length) {
        // set the current page
        currentPage += 1

        // change the page
        changePage(images);
    }
}

function showPreviousPage() {

    // get the images
    var images = document.getElementById("pointGalleryThumbs").getElementsByTagName("img");

    // make sure there is a previous page
    if ((currentPage * pageSize) > pageSize) {
        // set the current page
        currentPage -= 1

        // change the page
        changePage(images);
    }
}

function changePage(images) {
    // determine the next link
    if ((currentPage * pageSize) < images.length) {
        // show the next link if there are more images to display
        document.getElementById("aNextPage").style.display = "inline";
    }
    else {
        // hide the next link
        document.getElementById("aNextPage").style.display = "none";
    }

    // determine the previous link
    if ((currentPage * pageSize) > pageSize) {
        // show the previous link if there are previous images to display
        document.getElementById("aPreviousPage").style.display = "inline";
    }
    else {
        // hide the previous link
        document.getElementById("aPreviousPage").style.display = "none";
    }

    // determine the min and max image number for this page
    var minImageNumber = (currentPage - 1) * pageSize - 1;
    var maxImageNumber = currentPage * pageSize - 1;

    // loop through the images
    for (var i = 0; i < images.length; i++) {
        // check if the image is on the current page
        if ((i > minImageNumber) && (i <= maxImageNumber)) {
            // display image
            images[i].style.display = "inline";
        }
        else {
            // hide image
            images[i].style.display = "none";
        }
    }
}