var overlay = {
    borderSize: 8,
    borderColor: "#D7D7D7",
    borderRadius: 15,

    background: $jq(document.createElement("div")),
    container: $jq(document.createElement("div")),
    closeButton: $jq(document.createElement("img")),

    show: function(content) {
        overlay.background.show();
        overlay.container.show();

        content = $jq(content);

        var container = overlay.container;

        container.children().remove();

        container.css("width", "auto");
        container.css("height", "auto");
        container.append(content);
        content.show();

        var width = content.outerWidth();
        var height = content.outerHeight();

        container.css("top", $jq(window).height() / 2 - height / 2 + $jq(window).scrollTop());
        container.css("margin-left", -width / 2 - overlay.borderSize);
        container.css("width", width);
        container.css("height", height);

        var closeButton = overlay.closeButton;
        container.append(closeButton);
        closeButton.click(overlay.hide);
    },

    hide: function() {
        overlay.background.hide();
        overlay.container.hide();
    }
};

$jq(document).ready(function($) {
    var background = overlay.background;
    var container = overlay.container;
    var closeButton = overlay.closeButton;

    background.css("position", "fixed");
    background.css("width", "100%");
    background.css("height", "100%");
    background.css("top", 0);
    background.css("left", 0);
    background.css("z-index", 110000);
    background.css("backgroundColor", "gray");
    if ($.browser == "msie")
        background.css("filter", "alpha(opacity=50)");
    else
        background.css("opacity", 0.5);

    container.css("position", "absolute");
    container.css("z-index", 110001);
    container.css("border", "solid " + overlay.borderSize.toString() + "px " + overlay.borderColor);
    container.css("left", "50%");
    container.css("backgroundColor", "white");
    container.css("-moz-border-radius", overlay.borderRadius);
    container.css("-webkit-border-radius", overlay.borderRadius);
    container.css("borderRadius", overlay.borderRadius);
    container.css("padding", 10);

    //<img src="/App_Themes/BoldBrick/Images/CloseButton.png" alt="Close button" style="float: right; margin-right: 10px; cursor: pointer" onclick="overlay.hide();" />
    closeButton.attr("alt", "Close");
    closeButton.attr("src", "/App_Themes/BoldBrick/Images/CloseButton.png");
    closeButton.css("position", "absolute");
    closeButton.css("top", 10);
    closeButton.css("right", 10);
    closeButton.css("cursor", "pointer");

    background.click(overlay.hide);

    background.hide();
    container.hide();

    var form = $("#form1");
    form.append(background);
    form.append(container);
});