Ext.ns('Ext.ux');

Ext.ux.PopupManager = function() {
    var oPopups = {};
    var xOpen   = false;

    var api = {
        closeOpen: function() {
            for (var o in oPopups) {
                oPopups[o].close();
            }
        }
      , create: function(config) {
            if (config.isComposite) {
                throw 'Config can not be a composite object';
            }

            var xPop = new Popup(config);
            oPopups[xPop.id] = xPop;

            return xPop;
        }
      , defaultConfig: {
            anchor:      'l'
          , animate:     true
          , durationIn:  0.5
          , durationOut: 0.5
          , easingIn:    'easeIn'
          , easingOut:   'ghost'
        }
      , get: function(id) {
            if (!oPopups[id]) {
                return false;
            }

            return oPopups[id];
        }
      , getLastOpened: function() {
            return xOpen;
        }
      , multiOpen: false
    }

    var privateHandles = {
        beforeOpen: function(xPop) {
            if (api.multiOpen === false) {
                if (xOpen != false && xOpen.isOpen) {
                    xOpen.close();
                }
            }

            xOpen = xPop;
        }
    }

    var getEl = function(o) {
        if (o && o.isComposite) {
            return o.item(0);
        }

        return Ext.get(o);
    }

    var fnFalse = function() {
        return false;
    }

    var Popup = Ext.extend(Ext.util.Observable, {
        closeButton: null

      , constructor: function(config) {
            config = config || {};
            if (config.tagName || typeof config === 'string') { // element object
                config = {id: config.id || config};
            }
            if (config.dom) {
                config = {id: Ext.id(config.dom)};
            }

            Ext.applyIf(config, api.defaultConfig);
            Ext.apply(this, config);


            this.el = Ext.get(this.id);

            if (config.closeButton = getEl(config.closeButton)) {
                config.closeButton.on('click', this.close, this).dom.onclick = fnFalse;
            }
            if (config.trigger = getEl(config.trigger)) {
                config.trigger.on('click', this.toggle, this).dom.onclick = fnFalse;
            }

            Ext.ux.Menu.superclass.constructor.call(this, config);

            this.addEvents(
                'beforeOpen'
              , 'afterOpen'
              , 'startOpen'
              , 'beforeClose'
              , 'afterClose'
              , 'startClose'
            );
        }

      , el: null

      , open: function() {
            if (this.isOpen == true) {
                return false;
            }

            privateHandles.beforeOpen(this);
            this.fireEvent('beforeOpen', this.el, this);

//            this.el.slideIn('l', {easing: 'slideIn', duration: 0.5, concurrent: true}).fadeIn({concurrent: true, duration: 0.75});
//            this.el.slideIn(this.anchor, {easing: this.easingIn, duration: this.durationIn, concurrent: true, callback: function(e) { 
//            this.el.slideIn(this.anchor, {opacity:{to: 1, from: 0}, easing: this.easingIn, duration: this.durationIn, concurrent: true, callback: function(e) { 
            this.el.slideIn(this.anchor, {opacity:{to: 100, from: 0}, easing: this.easingIn, duration: this.durationIn, concurrent: true, callback: function(e) { 
                var _this = Ext.ux.PopupManager.get(e.id);
                _this.fireEvent('afterOpen', e, _this);
                _this.isOpen = true;
            }}).fadeIn({concurrent: true, duration: 0.75});;
             //ghost('r', {easing: 'easeIn', duration: 0.5});

            this.fireEvent('startOpen', this.el, this);

            return this;
        }

      , close: function() {
            if (this.isOpen == false) {
                return false;
            }

            this.fireEvent('beforeClose', this.el, this);

            this.el.ghost(this.anchor, {duration: this.durationOut, callback: function(e) {
                var _this = Ext.ux.PopupManager.get(e.id);

                _this.fireEvent('afterClose', e, _this);
                _this.isOpen = false;
            }});

            this.fireEvent('startClose', this.el, this);

            return this;
        }

      , isOpen: false

      , toggle: function() {
            if (this.isOpen == true) {
                return this.close();
            } else {
                return this.open();
            }
        }

      , triger: null
    });

    return api;
}();