// DialogWindow - Javscript library

// Author: Chris@moodia.com
// This library creates a dialog (Popup) window in the center of the screen
// which can be automatically resized depending on the screen dimensions


var DialogWindow = Class.create();

DialogWindow.prototype =
{
    elementId: null,
    elementBodyId: null,
    elementBody: null,
    footer: null,
    title: null,
    subTitle: null,
    defaultWidth: 400,
    defaultHeight: 300,
    width: null,
    minWidth: null,
    maxWidth: null,
    height: null,
    minHeight: null,
    maxHeight: null,
    paddingWidth: 20,
    paddingHeight: 20,
    resizable: true,
    buttons: null,
    widthResizableElements: null,
    heightResizableElements: null,
    closeOnMaskClick: false,
    showCloseButton: false,
    maskInstance: null,
    maskDepth: 1,
    dialogDepth: 99,
    windowLoaded: false,
    showOnLoad: false,

    visible: false,

    pagesize: null,

    initialize: function(elementBodyId, resizable)
    {
        this.elementId = 'DialogWindow_' + elementBodyId;
        this.elementBodyId = elementBodyId;

        if (resizable != undefined) this.resizable = resizable;

        this.windowLoaded = false;
        this.buttons = new Array();
        this.widthResizableElements = new Array();
        this.heightResizableElements = new Array();

        this.width = this.defaultWidth,
        this.minWidth = this.defaultWidth,
        this.maxWidth = this.defaultWidth,
        this.height = this.defaultHeight,
        this.minHeight = this.defaultHeight,
        this.maxHeight = this.defaultHeight,

        Event.observe(window, 'load', this.windowLoad.bindAsEventListener(this));

    },


    windowLoad: function()
    {
        this.elementBody = $(this.elementBodyId);

        this.initResizableElements(this.widthResizableElements);
        this.initResizableElements(this.heightResizableElements);

        if (this.elementBody == null)
        {
            alert('Element "' + this.elementBodyId + '" not found!');
            return;
        }

        if (this.resizable)
        {
            Event.observe(window, 'resize', this.windowResize.bindAsEventListener(this));
        }

        this.windowLoaded = true;

        if (this.showOnLoad)
        {
            this.show();
        }

    },

    windowResize: function()
    {
        if (this.element && this.visible) this.setPosition();
    },

    initResizableElements: function(items)
    {
        for (var i = 0; i < items.length; i++)
        {
            var name = items[i];
            var el = $(items[i]);

            if (el == null)
            {
                alert('Element "' + name + '" not found!');
                return;
            }

            items[i] = el;
        }
    },

    addButton: function(text, clickEventHandler)
    {
        var button = $(document.createElement("INPUT"));

        button.writeAttribute("type", "button");
        button.writeAttribute("value", text);
        button.writeAttribute("value", text);
        button.className = "button2";
        button.setStyle({ marginLeft: '10px' });

        if (clickEventHandler != null)
        {
            button.onclick = clickEventHandler;
        }

        this.buttons[this.buttons.length] = button;

        return button;

    },

    setTitle: function(value)
    {
        var title = $(this.elementId + "_dialogWindowTitle");

        if (title) title.innerHTML = value;
        else this.title = value;
    },

    setSubTitle: function(value)
    {
        var subTitle = $(this.elementId + "_dialogWindowSubTitle");

        if (subTitle) subTitle.innerHTML = value;
        else this.subTitle = value;
    },

    show: function()
    {
        if (!this.windowLoaded)
        {
            this.showOnLoad = true;
            return;
        }

        if (!this.elementBody) return;

        if (!this.element)
        {
            this.maskInstance = new Mask(this.elementBodyId + '_mask', this.maskDepth);

            var html = '<div id="' + this.elementId + '" class="dialogWindow" style="display:none;z-index:' + this.dialogDepth + ';">';

            html += '<h4><span id="' + this.elementId + '_dialogWindowTitle">' + this.title + '</span>';

            if (this.showCloseButton)
            {
                html += '<span style="position:absolute;right:0px;font-size:0.75em;margin-top:2px;margin-right:5px;"><a href="javascript:void(0)" id="' + this.elementId + '_dialogWindowCloseButton">close</a></span>';
            }
            else {
                html += '<span style="position:absolute;right:0px;font-size:0.75em;margin-top:2px;margin-right:5px;"><a href="javascript:void(0)" id="' + this.elementId + '_dialogWindowCloseButton" style="display:none;">close</a></span>';
            }

            html += '</h4>';

            if (this.subTitle)
            {
                html += '<h5><span id="' + this.elementId + '_dialogWindowSubTitle">' + this.subTitle + '</span></h5>';
            }

            html += '</div>';

            Element.insert(this.elementBody, { before: html });

            this.element = $(this.elementId);

            this.element.appendChild(this.elementBody);

            if (this.showCloseButton)
            {
                var dialogWindowCloseButton = $(this.elementId + "_dialogWindowCloseButton");
                dialogWindowCloseButton.onclick = this.hide.bindAsEventListener(this);
            }


            if (this.buttons.length > 0)
            {
                this.footer = document.createElement("P");
                this.footer.className = "footerButton";
                this.footer.setAttribute("id", this.elementId + "_footer");

                this.element.appendChild(this.footer);

                for (var i = 0; i < this.buttons.length; i++)
                {
                    this.footer.appendChild(this.buttons[i]);
                }

                this.footer = $(this.footer);
            }

            this.elementBody.show(); // remove the display:none style
        }


        this.setPosition();

        if (this.element)
        {
            if (this.closeOnMaskClick)
            {
                this.maskInstance.onclick = this.hide.bindAsEventListener(this);
            }

            this.maskInstance.show();

            this.element.show();
            this.visible = true;
        }

    },

    hide: function()
    {
        if (!this.element) return;

        if (this.element)
        {
            this.element.hide();
            this.maskInstance.hide();
            this.visible = false;
        }
    },

    hideCloseButton: function() {
        var CloseButtonElement = $(this.elementId + '_dialogWindowCloseButton');
        if (CloseButtonElement)
            CloseButtonElement.hide();
    },
    
    displayCloseButton: function() {
        var CloseButtonElement = $(this.elementId + '_dialogWindowCloseButton');
        if (CloseButtonElement)
            CloseButtonElement.show();
    },

    diffWidth: null,
    diffHeight: null,

    setDimension: function(propertyName)
    {
        var isHeight = (propertyName == 'height') ? true : false;
        var diffVar = (isHeight) ? this.diffHeight : this.diffWidth;
        var resizableElements = (isHeight) ? this.heightResizableElements : this.widthResizableElements;
        var pageDimension = (isHeight) ? this.pagesize.winHeight : this.pagesize.winWidth;
        var minDimension = (isHeight) ? this.minHeight : this.minWidth;
        var maxDimension = (isHeight) ? this.maxHeight : this.maxWidth;
        var paddingDimension = (isHeight) ? this.paddingHeight : this.paddingWidth;

        if (diffVar == null)
        {
            for (var i = 0; i < resizableElements.length; i++)
            {
                eval("resizableElements[i].setStyle({" + propertyName + ":'" + minDimension + "px'})");
            }

            var elementDimension = 0;

            if (isHeight)
            {
                elementDimension = this.element.getHeight();
                this.diffHeight = elementDimension - minDimension;
                diffVar = this.diffHeight;
            }
            else
            {
                elementDimension = this.element.getWidth();
                this.diffWidth = elementDimension - minDimension;
                diffVar = this.diffWidth;
            }
        }

        var newDimension = pageDimension - diffVar - (paddingDimension * 2);

        if (newDimension + diffVar < minDimension) newDimension = minDimension - diffVar;
        else if (newDimension + diffVar > maxDimension && maxDimension != 0)
        {
            if (isHeight)
                newDimension = maxDimension - diffVar;
            else
                newDimension = maxDimension; // -diffVar;
        }

        for (var i = 0; i < resizableElements.length; i++)
        {
            eval("resizableElements[i].setStyle({" + propertyName + ":'" + newDimension + "px'})");
        }

        var dialogDimension;

        if (isHeight)
            dialogDimension = newDimension + diffVar;
        else
            dialogDimension = newDimension;

        var dialogPosition = parseInt((pageDimension - dialogDimension) / 2);

        if (dialogPosition < paddingDimension)
        {
            dialogPosition = paddingDimension;
            newDimension = newDimension - (paddingDimension * 2);

            if (newDimension + diffVar < minDimension) newDimension = minDimension - diffVar;

            for (var i = 0; i < resizableElements.length; i++)
            {
                eval("resizableElements[i].setStyle({" + propertyName + ":'" + newDimension + "px'})");
            }
        }

        return dialogPosition;

    },

    setPosition: function()
    {
        this.pagesize = getPageSize();

        var dialogLeft = this.setDimension('width');
        var dialogTop = this.setDimension('height');

        this.element.setStyle({ left: dialogLeft + 'px', top: dialogTop + 'px' });

    },

    setHeightResizableElements: function()
    {
        for (var i = 0; i < arguments.length; i++)
        {
            this.heightResizableElements[i] = arguments[i];
        }
    },

    setWidthResizableElements: function()
    {
        for (var i = 0; i < arguments.length; i++)
        {
            this.widthResizableElements[i] = arguments[i];
        }
    }
}


var Mask = Class.create();

Mask.prototype =
{
    element: null,
    maskId: 'maskingContainer',
    maskDepth: 1,

    initialize: function(id, depth)
    {
        this.maskDepth = depth;
        this.maskId = id;
    },

    show: function ()
    {
        this.ensureHtmlExists();
        this.element.show();
    },

    hide: function ()
    {
        if (this.element != null) this.element.hide();
    },

    ensureHtmlExists: function ()
    {
        if (this.element == null)
        {
            var mCont = $(this.maskId);

            if (mCont == null)
            {
                var html = "<div id='" + this.maskId + "' style='position:fixed;z-index:" + this.maskDepth + ";width:100%;height:100%;left:0px;top:0px;background-color:#CCCCCC;'></div>";
                new Insertion.Before("container", html);

                setOpacity(this.maskId, 80);
            }

            this.element = $(this.maskId);

            if (this.onclick) this.element.onclick = this.onclick;
        }
    },

    onclick: null

}