function zeroPad(num, count) {
    var numZeropad = num + '';
    while (numZeropad.length < count) {
        numZeropad = "0" + numZeropad;
    }
    return numZeropad;
}
function getImageUrl(pageNo) {
    if (pageNo == 1) {
        return imageUrl + ".png";
    } else {
        return imageUrl + zeroPad(pageNo - 1, 4) + ".png";
    }
}

function UpdatePageButtons() {
    $("#PrevPage").toggleClass("page_prev_disabled", currentPage == 1);
    $("#PrevPage").toggleClass("page_prev", currentPage > 1);
    $("#FirstPage").toggleClass("page_first_disabled", currentPage == 1);
    $("#FirstPage").toggleClass("page_first", currentPage > 1);
    $("#NextPage").toggleClass("page_next_disabled", currentPage == pages);
    $("#NextPage").toggleClass("page_next", currentPage < pages);
    $("#LastPage").toggleClass("page_last_disabled", currentPage == pages);
    $("#LastPage").toggleClass("page_last", currentPage < pages);
}

function HideLoadingMsg() {
    $("#PreviewLoading").hide();
}

function ShowPreviewImage() {
    $("#PreviewLoading").show();
    $("#PreviewImage").attr('src', getImageUrl(currentPage)).load(function() {
        HideLoadingMsg();
    });
    UpdatePageButtons();
}

$(document).ready(function() {
    UpdatePageButtons();
    HideLoadingMsg();

    if (pages > 1) {
        $("#PrevPage").click(function(event) {
            event.preventDefault();
            if (currentPage > 1) {
                currentPage = currentPage - 1;
                ShowPreviewImage();
            }
        });
        $("#NextPage").click(function(event) {
            event.preventDefault();
            if (currentPage < pages) {
                currentPage = currentPage + 1;
                ShowPreviewImage();
            }
        });
        $("#FirstPage").click(function(event) {
            event.preventDefault();
            if (currentPage > 1) {
                currentPage = 1;
                ShowPreviewImage();
            }
        });
        $("#LastPage").click(function(event) {
            event.preventDefault();
            if (currentPage < pages) {
                currentPage = pages;
                ShowPreviewImage();
            }
        });

        $("#PreviewImage").click(function(event) {
            if (currentPage < pages) {
                currentPage = currentPage + 1;
            } else {
                currentPage = 1;
            }
            ShowPreviewImage();
        });
        $("#PreviewImage").css('cursor', 'pointer');
    }
});