(function($) {
    $.fn.modal_setup = function() {


        return this.each(function() {
            CreateGlobals();
            //RegisterAllConfirmModals();
            RegisterAllImages();
        });
    };
})(jQuery);


var built;
var loaded = false;
var g_width = 640;
var g_height = 480;


function BuildImagePanel(index, pageY) {
    if (!built) {
        var children = $(".image_item");
        if (children.length > 0) {
            built = true;
            var image_parent = "<div id=\"image_parent\" class=\"parent\"><div id=\"image_parent_modal\" class=\"parent_modal\"></div><div class=\"centered_content2\"><div id=\"image_confirm_top\" class=\"parent_modal_child\"><div class=\"hs_2\"></div><div class=\"modal_popup_header\"><div id=\"image_confirm_close_corner\" class=\"modal_popup_header_close\"></div><div id=\"image_popup_header_text\" class=\"modal_popup_header_text\"></div></div><div class=\"hs_2\"></div><div id=\"image_popup_content\" class=\"modal_popup_content\"></div><div class=\"hs_10\"></div><div class=\"modal_popup_footer\"><div class=\"ac\"><a id=\"image_confirm_close_bottom\" class=\"Hyperlink_Standard_Modal\">Close</a></div><div class=\"cb\"></div><div class=\"hs_10\"></div></div></div></div></div>";
            $("#whole_page").append(image_parent);
            $("#image_parent_modal").click(function() {
                $("#image_parent").css({ display: "none" });
            });
            $("#image_popup_header_text").text($("#item_name").find(":first-child").text() + " Image Previews");
            $("#image_confirm_close_bottom").click(function() {
                $("#image_parent").css({ display: "none" });
            });
            $("#image_confirm_close_corner").click(function() {
                $("#image_parent").css({ display: "none" });
            });
            var html_text = "<div class=\"ac\"><span id=\"left_button\" class=\"button_position\"><span id=\"previous\" class=\"Hyperlink_Standard_Modal\">Previous</span></span><span id=\"photo_previews\">";
            $(".image_item").each(function() {
                var object = $(this).find(":first-child");
                var html_text1 = $(this).html();
                var clone = "<span class=\"image_item_preview\" style=\"display:inline-block; border:Solid 3px Transparent\">" + $(this).html() + "</span>";
                html_text = html_text + clone;
            });
            html_text = html_text + "</span><span id=\"right_button\" class=\"button_position\"><span id=\"next\" class=\"Hyperlink_Standard_Modal\">Next</span></span><div class=\"cb\"></div>";
            $("#image_popup_content").append(html_text);
            $("#image_popup_content").prepend("<div class=\"hs_5\"></div><div class=\"ac\" id=\"updating\"><span id=\"image_preview_full_image\" style=\"text-align:center;display:inline-block;\"><img id=\"image_full\" style=\"cursor:pointer\"></img></span></div><div class=\"hs_5\"></div>");
            var i = $("img", "#image_preview_full_image");
            if (i !== undefined) {
                i.load(function () {
                    loaded = true;
                    $(this).css({ display: "block" });
                    var height = i.height();
                    $("#updating").css({ "min-height": height + "px" });
                });
            }
            var left_button = $("#left_button");
            var right_button = $("#right_button");
            var combined_width = left_button.width() + right_button.width() + 5;
            var t_width = g_width - combined_width;
            if (t_width < 530)
                t_width = 530;
            $("#photo_previews").css({ "float": "left", "width": t_width + "px", "text-align": "center" });


            var p_height = $("#photo_previews").height();
            p_height = p_height / 2;
            var m_top = p_height - (left_button.height() / 2);
            left_button.css({ float: "left", marginTop: m_top + "px", marginLeft: "5px" });
            m_top = p_height - (right_button.height() / 2);
            right_button.css({ float: "right", marginTop: m_top + "px", marginRight: "5px" });


            var objects = $(".image_item_preview");
            objects.each(function(i) {
                $(this).data("index", i);
            });
            $(objects[index]).css({ border: "Solid 3px Black" });
            var src = $(objects[index]).find(":first-child").attr("src");
            src = src.replace(/Width=100/, "Width=" + g_width);
            src = src.replace(/Height=100/, "Height=" + g_height);
            $("#image_preview_full_image").find(":first-child").attr("src", src);
            var siblings = $(".image_item_preview").length;
            $("#next").data("siblings", siblings);
            $("#next").data("index", index);
            $(".image_item_preview").click(function() {
                SetActiveImage($(this).data("index"));
            });
            $("#image_preview_full_image").click(function() {
                if ($("#next").data("index") == ($("#next").data("siblings") - 1)) {
                    SetActiveImage(0);
                }
                else {
                    var next_index = $("#next").data("index") + 1;
                    SetActiveImage(next_index);
                }
            });
            $("#next").click(function() {
                if ($(this).data("index") == ($(this).data("siblings") - 1)) {
                    SetActiveImage(0);
                }
                else {
                    var next_index = $(this).data("index") + 1;
                    SetActiveImage(next_index);
                }
            });
            $("#previous").click(function() {
                if ($("#next").data("index") == 0) {
                    SetActiveImage($("#next").data("siblings") - 1);
                }
                else {
                    var next_index = ($("#next").data("index") - 1);
                    SetActiveImage(next_index);
                }
            });
            var width = $("#whole_page").width();
            var middle = width - (g_width + 10);
            middle = middle / 2;
            var default_top = "5px";
            if (pageY !== undefined) {
                if ((pageY - 250) > 5) {
                    default_top = (pageY-250) + "px";
                }
            }
            $("#image_confirm_top").css({ marginLeft: middle + "px", marginTop: default_top, width: (g_width + 10) + "px" });
        }
    }
    else {
        SetActiveImage(index);
    }
}


function SetActiveImage(index) {
    loaded = false;
    // setTimeout(function() {
    // if (!loaded)
    // $("#image_preview_full_image").find(":first-child").css({ display: "none" });
    // }, 700);
    $("#image_preview_full_image").find(":first-child").css({ display: "none" });
    var current_index = $("#next").data("index");
    var objects = $(".image_item_preview");
    var current_object = $(objects[index]);
    $(objects[current_index]).css({ border: "Solid 3px Transparent" });
    var src = current_object.find(":first-child").attr("src");
    src = src.replace(/Width=100/, "Width=" + g_width);
    src = src.replace(/Height=100/, "Height=" + g_height);
    $("#image_preview_full_image").find(":first-child").attr("src", src);
    current_object.css({ border: "Solid 3px Black" });
    $("#next").data("index", current_object.data("index"));
    $("#image_parent").css({ display: "block" });
}


function RegisterAllImages() {
    $(".image_item").each(function (i) {
        $(this).data("index", i);
        $(this).click(function (evt) {
            evt.preventDefault(); 
            BuildImagePanel($(this).data("index"), evt.pageY);
        });
    });
    $("#zoom_image").click(function (evt) {
        evt.preventDefault(); 
        BuildImagePanel(0, evt.pageY);
    });
    $("#instructions").append("<div class=\"dhs_5px\"></div><div>Click on a image to see large preview</div><div class=\"dhs_5px\"></div>");
}


var modal_counter;
var confirm_panel;
var confirm_panel_href;
var modal_confirm_top;


function CreateGlobals() {
    modal_counter = 0;
    built = false;
}


function RegisterAllConfirmModals() {
    CreateConfirmModalPanel();
    $(".confirm_modal").click(function() {
        var href = $(this).find(":first-child").attr("href");
        confirm_panel_href.attr("href", href);
        confirm_panel.css({ display: "block" });
        var t_width = $("#whole_page").width();
        var m_left = ((t_width) / 2) - 150;
        modal_confirm_top.css({ marginTop: "200px", marginLeft: m_left + "px" });
        return false;
    });
}


function CreateConfirmModalPanel() {


    var modal_parent = "<div id=\"modal_confirm_parent\" class=\"parent\"><div class=\"parent_modal\"></div><div class=\"centered_content\"><div id=\"modal_confirm_top\" class=\"parent_modal_child\" style=\"width:300px;\"><div class=\"dhs_2px\"></div><div class=\"modal_popup_header\"><div id=\"modal_confirm_close_corner\" class=\"modal_popup_header_close\"></div><div class=\"modal_popup_header_text\">Please confirm you wish to continue</div></div><div class=\"dhs_2px\"></div><div class=\"modal_popup_content\"></div><div class=\"dhs_2px\"></div><div class=\"modal_popup_footer\"><div class=\"ac\"><a id=\"modal_confirm_confirm_button\" class=\"Hyperlink_Standard_Modal\">Confirm</a><span class=\"sws_5px\"></span><a id=\"modal_confirm_close_bottom\" class=\"Hyperlink_Standard_Modal\">Cancel</a></div><div class=\"clear_both\"></div><div class=\"dhs_2px\"></div></div></div></div></div>";
    $("#whole_page").append(modal_parent);
    confirm_panel = $("#modal_confirm_parent");
    confirm_panel_href = $("#modal_confirm_confirm_button");
    modal_confirm_top = $("#modal_confirm_top");
    $("#modal_confirm_close_corner", "body").click(function() {
        confirm_panel.css({ display: "none" });
    });
    $("#modal_confirm_close_bottom", "body").click(function() {
        confirm_panel.css({ display: "none" });
    });
    confirm_panel.css({ display: "none" });
}


function CreateNewModal(parent, target, open) {
    var parent_ele = $(parent);
    var width = parent_ele.width();
    width++;
    width += 20;
    var height = parent_ele.height();
    var doc = $("#header");
    var t_width = doc.width();
    var t_offset_left = doc.offset().left;
    var m_left = ((t_width - width) / 2) + t_offset_left;
    var modal_header_text = $(".modal_header", parent).find(":first-child").text();
    if (target === "") {
        var model_buttons_panel = $("#modal_popup_buttons_panel");
        var n_target = "<a id=\"modal_navigation_" + modal_counter + "\" class=\"Hyperlink_Sub_Menu_Selected Hyperlink_Standard_FL\">" + modal_header_text + "</a><div class=\"sws_fl_4px\"></div>";
        model_buttons_panel.append(n_target);
        target = $("#modal_navigation_" + modal_counter, "#modal_popup_buttons_panel");
    }
    else {
        target = $(target);
    }
    var t_top = target.offset().top;
    t_top++;
    t_top += 10;


    $(".modal_header", parent).empty();
    var cloned_ele = parent_ele.clone();
    parent_ele.empty();




    var modal_parent = "<div class=\"parent\"><div class=\"parent_modal\"></div><div class=\"centered_content\"><div class=\"parent_modal_child\" style=\"width:" + g_width + "px;margin-left:" + m_left + "px;margin-top:" + t_top + "px;\"><div class=\"dhs_2px\"></div><div class=\"modal_popup_header\"><div class=\"modal_popup_header_close\"></div><div class=\"modal_popup_header_text\">" + modal_header_text + "</div></div><div class=\"dhs_2px\"></div><div class=\"modal_popup_content\"></div><div class=\"dhs_2px\"></div><div class=\"modal_popup_footer\"><div class=\"close_modal_panel_fr\"><a id=\"close_modal_panel_" + modal_counter + "\" class=\"Hyperlink_Standard_Modal\">Cancel</a></div><div class=\"clear_both\"></div><div class=\"dhs_2px\"></div></div></div></div></div>";
    $(parent).data("modal_id", "#modal_panel_" + modal_counter);
    var modal_panel = "<div id=\"modal_panel_" + modal_counter + "\">" + modal_parent + "</div>";
    $(parent).append(modal_panel);
    cloned_ele.prependTo($(".modal_popup_content", parent));
    target.click(function() {
        $($(parent).data("modal_id")).css({ display: "block" });
    });
    $(".modal_popup_header_close", parent).click(function() {
        $($(parent).data("modal_id")).css({ display: "none" });
    });
    $("#close_modal_panel_" + modal_counter, parent).click(function() {
        $($(parent).data("modal_id")).css({ display: "none" });
    });
    if (open)
        $($(parent).data("modal_id")).css({ display: "block" });
    else
        $($(parent).data("modal_id")).css({ display: "none" });


    modal_counter++;
}