var dialog_overlay_styles =
    "visibility: hidden; position: absolute; z-index: 1000; " +
    "left: 0px; top: 0px; width: 100%; height: 100%;";

var dialog_overlay_div = null;
    
var Dialog =
{
    create: function(content_div, title)
    {
        dialog_div = Builder.node("div", {style: "display: none;", "class": "dialog"});
        Object.extend(dialog_div, Dialog.prototype);
        dialog_div.initialize(content_div, title);
        return dialog_div;
    }
}

Dialog.prototype =
{
    title_div: null,
    body_div: null,
    content_div: null,
    title: "dialog",

    initialize: function(content_div, title)
    {
        this.content_div = content_div;
        this.title = title;
    
        if (!dialog_overlay_div)
        {
            dialog_overlay_div = Builder.node("div",
                { style: dialog_overlay_styles });
            $("base").appendChild(dialog_overlay_div);
            Event.observe(dialog_overlay_div, "click", function()
            {
                var dialogs = dialog_overlay_div.childNodes;
                $A(dialogs).each(function(el) { el.hide() });
            });
        }
        
        this.title_div = Builder.node("div", {"class": "title"});
        this.body_div = Builder.node("div", {"class": "body"});
        Element.addClassName(this.body_div, "body");
        this.appendChild(this.title_div);
        this.appendChild(this.body_div);
        
        Event.observe(this, "click", function(e) { Event.stop(e); });
        
        dialog_overlay_div.appendChild(this);
    },
    
    popup: function()
    {
        var dialogs = dialog_overlay_div.childNodes;
        $A(dialogs).each(function(el) { el.hide() });
        
        if (this.body_div.childNodes.length == 0)
        {
            content_div = $(this.content_div);
            this.body_div.appendChild(content_div);
            Element.show(content_div);
        }
        
        var dlg_dim = Element.getDimensions(this);
        var window_dim = windowDimensions();
        var offset = windowOffset();
        offset[0] += (window_dim[0] - dlg_dim.width) / 2;
        offset[1] += (window_dim[1] - dlg_dim.height) / 2;
        
        Element.setStyle(this, { left: offset[0] + "px", top: offset[1] + "px" });
                         
        Element.update(this.title_div, this.title);
        Element.show(this);
        Element.setStyle(dialog_overlay_div, {visibility: "visible"});
    },
    
    hide: function()
    {
        if (Element.visible(this))
        {
            Element.hide(this);
            var dialogs = $A(dialog_overlay_div.childNodes);
            if (!dialogs.any(function(el) { return Element.visible(el); }))
            {
                Element.setStyle(dialog_overlay_div, {visibility: "hidden"});
            }
        }
    }
};