Ext.namespace("Flowz");

/**
 * Custom dialog to show resulting message from an action
 * @param config
 *  - type (error or info)
 *  - message (text to display)
 *  - onShow (function to call when showing)
 *  - onHide (function to execute when closing)
 *  - context (the path to the root of the application)
 */
Flowz.Dialog = function(config) {
    Ext.apply(this, config);
    Flowz.Dialog.superclass.constructor.call(this, config);
};

Flowz.Dialog = Ext.extend(Flowz.Dialog, Ext.util.Observable, {
	context: "/",

    show: function() {
        if(!this.el) {
            this.el = Ext.DomHelper.append(Ext.getBody(), {
                tag: 'div', id: 'flowz-dialog', cls: 'flowz-dialog x-hidden'
            }, true);

            this.contentEl = Ext.DomHelper.append(this.el, {
                tag: 'div', id: 'flowz-dialog-content', cls: 'flowz-dialog-content'
            }, true);
        }

        if(this.type == "error") {
            Ext.DomHelper.append(this.contentEl, [{
                tag: 'div', id: 'dialog-buttons', children: [{
                    tag: 'a', href: 'javascript:Ext.emptyFn();', html: 'Dismiss', cls: 'button highlighted', id: 'dialog-dismiss-btn'
                }]
            },{
                tag: 'div', id: 'dialog-icon', children: [{
                    tag: 'img', src: this.context + 'images/icon-error.png'
                }]
            },{
                tag: 'div', id: 'dialog-message', html: this.message
            }]);
        } else {
            Ext.DomHelper.append(this.contentEl, [{
                tag: 'div', id: 'dialog-buttons', children: [{
                    tag: 'a', href: 'javascript:Ext.emptyFn();', html: 'Dismiss', cls: 'button highlighted', id: 'dialog-dismiss-btn'
                }]
            },{
                tag: 'div', id: 'dialog-icon', children: [{
                    tag: 'img', src: this.context + 'images/icon-info.png'
                }]
            },{
                tag: 'div', id: 'dialog-message', html: this.message
            }]);
        }
        var button = Ext.get("dialog-dismiss-btn");
        button.on('click', this.hide, this);
        this.el.setTop(0);
        this.el.setLeft(0);
        this.el.removeClass("x-hidden");
        this.el.slideIn();

        if(this.onShow) {
            this.onShow();
        }
    },

    hide: function() {
        // for some readon, endOpacity is not animated along with the sliding :(
        // so we will add our own as a separate call to hide().  grr.
        this.el.hide({ duration: .4});
        this.el.slideOut('t', {
            endOpacity: 0,
            easing: 'easeOut',
            duration: .8,
            remove: true,
            useDisplay: false
        });

        if(this.onHide) {
            this.onHide();
        }
		return false;
    }
});