/**
 * @class ST.Alert
 * This class manages a simple alert box that overlays and masks all other elements on
 * the page. This alert does not block the application like the standard DOM `alert()`
 * method.
 * 
 *       var myalert = ST.alert({
 *           title: 'My Alert',
 *           message: 'alert message',
 *           buttons: [
 *               {
 *                   text: 'destroy',
 *                   handler: function () {
 *                       myalert.destroy();
 *                   }
 *               },
 *               {
 *                   text: 'hide',
 *                   handler: function () {
 *                       myalert.hide();
 *                       setTimeout(function () {
 *                           myalert.show();
 *                       },500);
 *                   }
 *               }
 *               ]
 *       });
 *
 * Instances of this class are typically created by calling {@link ST#alert}.
 */
ST.Alert = ST.define({
    /**
     * @cfg {Object[]} buttons
     * An array of objects containing `text` and `handler` properties that indicate,
     * respectively, the button's text and callback to invoke on button click.
     */
 
    /**
     * @cfg {String} message 
     * The string to display inside the message box.
     */
 
    /**
     * @cfg {String} title 
     * The string to display in the title bar of the message box.
     */
 
    constructor: function(cfg) {
        var me = this,
            div = function() {
                return document.createElement('div');
            },
            maskWrap = me.maskWrap = div(),
            maskCell = div(),
            mask = div(),
            alert = div(),
            alertBody = div(),
            buttons = cfg.buttons,
            alertTitle, alertFooter, i, len, button, btn;
 
        maskWrap.className = 'orion-mask-wrap orion-border-box';
        maskCell.className = 'orion-mask-cell';
        mask.className = 'orion-mask';
        alert.className = 'orion-alert';
 
        alertBody.className = 'orion-alert-body';
        alertBody.innerHTML = cfg.message;
 
        if (cfg.title) {
            alertTitle = div();
            alertTitle.className = 'orion-alert-title';
            alertTitle.innerHTML = cfg.title;
            alert.appendChild(alertTitle);
        }
 
        alert.appendChild(alertBody);
 
        if (buttons) {
            alertFooter = div();
            alertFooter.className = 'orion-alert-footer';
 
            for (i = 0, len = buttons.length; i < len; i++) {
                button = buttons[i];
                btn = div();
                btn.className = 'orion-alert-button orion-noselect';
                btn.innerHTML = button.text;
                button.listener = ST.Element.on(btn, 'click', button.handler);
                alertFooter.appendChild(btn);
            }
 
            alert.appendChild(alertFooter);
        }
 
        //maskCell.appendChild(mask); 
        maskCell.appendChild(alert);
        maskWrap.appendChild(maskCell);
 
        me.hide();
        me._resize();
 
        me.resizeHandler = ST.Element.on(window, 'resize', function() {
            me._resize();
        });
 
        if (document.body) {
            document.body.appendChild(maskWrap);
        } else {
            var loaded = ST.Element.on(window, 'load', function () {
                loaded.destroy();
                loaded = null;
 
                document.body.appendChild(maskWrap);
            });
        }
    },
 
    /**
     * Displays the message box main element.
     */
    show: function() {
        this.maskWrap.style.display = '';
    },
 
    /**
     * Hides the message box main element.
     */
    hide: function() {
        this.maskWrap.style.display = 'none';
    },
 
    /**
     * Removes the message box element from the DOM.
     */
    destroy: function() {
        var me = this,
            buttons = me.buttons,
            resizeHandler = me.resizeHandler,
            len = buttons ? buttons.length : 0,
            button, i;
 
        if (resizeHandler) {
            me.resizeHandler = null;
            resizeHandler.destroy();
 
            document.body.removeChild(me.maskWrap);
 
            for (i = 0; i < len; i++) {
                button = buttons[i];
                button.listener.destroy();
                button.listener = null;
            }
        }
    },
 
    _resize: function() {
        var style = this.maskWrap.style,
            win = window,
            doc = document.documentElement;
 
        style.height = (win.innerHeight || doc.clientHeight) + 'px';
        style.width = (win.innerWidth || doc.clientWidth) + 'px';
    }
});
 
/**
 * Creates and returns an `ST.Alert` passing along the specified `config` object. This
 * method calls {@link ST.Alert#show} before returning the instance.
 *
 * @param {Object} config The config object for an instance of {@link ST.Alert}.
 * @return {ST.Alert}
 * @method alert
 * @member ST
 */
ST.alert = function(config) {
    var alert = new ST.Alert(config);
    alert.show();
    return alert;
};