Ext.define('uas.panel.Floating', {
    extend: 'Ext.panel.Panel',
    xtype: 'floatingpanel',

    /**
     * left or right
     */
    align: 'left',
    /**
     * component such as a button
     */
    scope: null,
    minWidth: 100,
    layout: 'fit',

    constructor: function (config) {
        var me = this, conf = Ext.apply(config || {}, {
            floating: true,
            hidden: true
        });
        me.align = conf.align || 'left';

        var scope = conf.scope, 
            width = (conf.width || conf.minWidth || 100),
            x = (me.align == 'left' ? -1 * width : (Ext.getViewportWidth() + width)), y, height;
        if (scope) {
            y = scope.getY() + scope.getHeight();
            height = Ext.getViewportHeight() - y;
        } else {
            y = 0;
            height = Ext.getViewportHeight();
        }

        conf = Ext.apply(conf, {
            x: x,
            y: y,
            height: height
        });

        me.callParent([
            conf
        ]);

    },

    expand: function () {
        var me = this, doc = Ext.getDoc();
        me.show();
        me.isExpanded = true;

        var x = me.align == 'left' ? 0 : (Ext.getViewportWidth() - me.getWidth());

        me.el.animate({
            duration: 300,
            to: {
                x: x
            }
        });

        me.mouseListeners = doc.on({
            translate: false,
            mousedown: me.collapseIf,
            scope: me,
            delegated: false,
            destroyable: true
        });
    },

    collapse: function () {
        var me = this, width = me.getWidth(),
            x = me.align == 'left' ? -1 * width : (Ext.getViewportWidth() + width);
        me.setX(x);
        me.mouseListeners.destroy();
        me.hide();
        me.isExpanded = false;
    },

    collapseIf: function(e) {
        var me = this;
        if (!me.destroyed && !e.within(me.bodyEl, false, true) && !me.owns(e.target) && !me.scope.owns(e.target)) {
            me.collapse();
        }
    },

    close: function() {
        this.collapse();
    }
});