/**
 * This class is used to wrap content items in the `Dashboard`. It uses an
 * `anchor` layout by default and provides resizing on the bottom edge only.
 * @protected
 */
Ext.define('Ext.dashboard.Panel', {
    extend: 'Ext.panel.Panel',
 
    xtype: 'dashboard-panel',
 
    cls: Ext.baseCSSPrefix + 'dashboard-panel',
 
    anchor: '100%',
 
    layout: 'fit',
 
    frame: true,
    closable: true,
    collapsible: true,
    animCollapse: true,
    titleCollapse: true,
 
    stateful: true,
 
    draggable: {
        moveOnDrag: false
    },
 
    animateClose: true,
 
    loadMask: true,
    loadMessage: 'Loading...',
 
    minHeight: 90,
 
    resizable: true,
    resizeHandles: 's',
 
    // Override Panel's default doClose to provide a custom fade out effect
    // when a portlet is removed from the portal
    doClose: function() {
        var me = this;
 
        if (me.animateClose) {
            if (!me.closing) {
                me.closing = true;
                me.el.animate({
                    opacity: 0,
                    callback: me.finishClose,
                    scope: me
                });
            }
        }
        else {
            me.finishClose();
        }
    },
 
    finishClose: function() {
        var me = this,
            closeAction = me.closeAction;
 
        me.closing = false;
        me.fireEvent('close', me);
 
        // The close of the last portlet within a column results in removal of both the column
        // and its splitter.
        // So coalesce any layouts resulting from this operation.
        Ext.suspendLayouts();
        me[closeAction]();
        Ext.resumeLayouts(true);
 
        if (closeAction === 'hide') {
            // Restore the opacity from doClose
            me.el.setOpacity(1);
        }
    },
 
    afterRender: function() {
        this.callParent();
 
        if (this.loading) {
            this.onViewBeforeLoad();
        }
    },
 
    doCollapseExpand: function(flags) {
        // Ensure the layout caused by expand or collapse does not propagate
        // to the whole dashboard. The dashboard layout is automatically
        // updated after the operation.
        this._expandCollapseRoot = this._isLayoutRoot;
        this._isLayoutRoot = true;
        this.callParent(arguments);
    },
 
    afterExpand: function() {
        this._isLayoutRoot = this._expandCollapseRoot;
        this.callParent(arguments);
    },
 
    afterCollapse: function() {
        this._isLayoutRoot = this._expandCollapseRoot;
        this.callParent(arguments);
    },
 
    getLoadMask: function() {
        var me = this,
            loadMask = me.rendered && me.loadMask,
            config;
 
        if (loadMask && !loadMask.isComponent) {
            config = {
                target: me
            };
 
            if (loadMask === true) {
                loadMask = config;
            }
            else {
                Ext.apply(config, loadMask);
            }
 
            me.loadMask = loadMask = Ext.ComponentManager.create(config, 'loadmask');
        }
 
        return loadMask || null;
    },
 
    onAdd: function(view) {
        this.callParent(arguments);
 
        view.on({
            beforeload: 'onViewBeforeLoad',
            load: 'onViewLoaded',
            scope: this
        });
    },
 
    onViewBeforeLoad: function() {
        var loadMask;
 
        this.loading = true;
        loadMask = this.getLoadMask();
 
        if (loadMask) {
            loadMask.show();
        }
    },
 
    onViewLoaded: function() {
        var loadMask, view, title;
 
        this.loading = false;
        loadMask = this.getLoadMask();
 
        if (loadMask) {
            loadMask.hide();
        }
 
        view = this.items.getAt(0);
 
        if (view.getTitle) {
            title = view.getTitle();
 
            if (title) {
                this.setTitle(title);
            }
        }
    },
 
    /**
     * @private
     */
    setBox: function(box) {
        // The resizer calls setBox which would set our left/top coordinates but
        // that is a BAD thing in a column layout which relies on flow!
        this.setSize(box.width, box.height);
    },
 
    /**
     * @private
     */
    getState: function() {
        var me = this,
            state = me.callParent() || {};
 
        if (!state.collapsed) {
            me.addPropertyToState(
                state, 'height', me.rendered ? me.getHeight() : me.height || me.minHeight || 100
            );
        }
 
        return state;
 
    }
});