$(document).ready(function() {

    var imageIndex = $("[id$='hdn_imageIndex']");
    var app_path = $("[id$='hdn_app_path']");

    var json = "{'Index':'" + imageIndex.val() + "'}";
    var ajaxPage = app_path.val() + "/JSONProcessor.aspx?GetImage=1"; //this page is where data is to be retrieved and processed
    var options = {
        type: "POST",
        url: ajaxPage,
        data: json,
        contentType: "application/json;charset=ISO-8859-1",
        dataType: "json",
        async: false,
        success: function(result) {
            var newIndex = result.images[0];
            var height = result.images[1];
            var url = decodeURIComponent(result.images[2].replace(/\+/g, " "));
            $("#hdn_imageIndex").attr("value", newIndex);
            $("#img_shown").css("height", height);
            $("#img_shown").attr("src", url);

            if (url.indexOf("noimage", 0) > 0) {
                $("#btn_next").css("display", "none");
                $("#btn_previous").css("display", "none");
            }
        },
        error: function(msg) { alert("failed: " + msg.d); }
    };

    $.ajax(options);

    $("#btn_next").click(function() {

        var json = "{'Index':'" + imageIndex.val() + "'}";
        var ajaxPage = app_path.val() + "/JSONProcessor.aspx?NextImage=1"; //this page is where data is to be retrieved and processed
        var options = {
            type: "POST",
            url: ajaxPage,
            data: json,
            contentType: "application/json;charset=ISO-8859-1",
            dataType: "json",
            async: false,
            success: function(result) {
                var newIndex = result.images[0];
                var height = result.images[1];
                var url = decodeURIComponent(result.images[2].replace(/\+/g, " "));
                $("#hdn_imageIndex").attr("value", newIndex);
                $("#img_shown").css("height", height);
                $("#img_shown").attr("src", url);
            },
            error: function(msg) { alert("failed: " + msg.d); }
        };

        $.ajax(options);
    });

    $("#btn_previous").click(function() {

        var json = "{'Index':'" + imageIndex.val() + "'}";
        var ajaxPage = app_path.val() + "/JSONProcessor.aspx?PreviousImage=1"; //this page is where data is to be retrieved and processed
        var options = {
            type: "POST",
            url: ajaxPage,
            data: json,
            contentType: "application/json;charset=ISO-8859-1",
            dataType: "json",
            async: false,
            success: function(result) {
                var newIndex = result.images[0];
                var height = result.images[1];
                var url = decodeURIComponent(result.images[2].replace(/\+/g, " "));
                $("#hdn_imageIndex").attr("value", newIndex);
                $("#img_shown").css("height", height);
                $("#img_shown").attr("src", url);
            },
            error: function(msg) { alert("failed: " + msg.d); }
        };

        $.ajax(options);
    });
});

function NewThumb(thumbNo)
{
    var json = "{'Index':'" + thumbNo + "'}";
    var app_path = $("[id$='hdn_app_path']");
    var ajaxPage = app_path.val() + "/JSONProcessor.aspx?GetImage=1"; //this page is where data is to be retrieved and processed
    var options = {
        type: "POST",
        url: ajaxPage,
        data: json,
        contentType: "application/json;charset=ISO-8859-1",
        dataType: "json",
        async: false,
        success: function(result) {
            var newIndex = result.images[0];
            var height = result.images[1];
            var url = decodeURIComponent(result.images[2].replace(/\+/g, " "));
            $("#hdn_imageIndex").attr("value", newIndex);
            $("#img_shown").css("height", height);
            $("#img_shown").attr("src", url);
        },
        error: function(msg) { alert("failed: " + msg.d); }
    };

    $.ajax(options);
}