Ext.define("Portfolio.util.Desktop", {

    mixins: ["Ext.mixin.Observable"],

    config: {
        manager: null,
        button: null,
        title: "Desktop",
        items: [],
        isActive: false
    },


    constructor: function(o_config) {

        var i_self = this;
        i_self.initConfig(o_config);

        i_self.mixins.observable.constructor.call(i_self, o_config);

        i_self.on({
            deactivate: {
                fn: function() {

                    var i_self = this;

                    if (!i_self.getIsActive()) {

                        var a_items = i_self.getItems();

                        Ext.suspendLayouts();

                        Ext.Array.each(a_items, function(i_window) {
                            i_window.hide();
                        });

                        Ext.resumeLayouts(true);
                    }
                }
            },
            preview: {
                fn: function() {

                    var i_self = this;

                    var a_items = i_self.getItems();

                    var i_manager = i_self.getManager();

                    Ext.suspendLayouts();

                    Ext.Array.each(a_items, function (i_window) {
                        i_window.show();
                        i_manager.bringToFront(i_window);
                    });

                    Ext.resumeLayouts(true);
                }
            },
            depreview: {
                fn: function () {

                    var i_self = this;

                    var a_items = i_self.getItems();

                    Ext.suspendLayouts();

                    Ext.Array.each(a_items, function (i_window) {
                        i_window.hide();
                    });

                    Ext.resumeLayouts(true);
                }
            }
        });

        i_self.initComponent();
    },

    initComponent: function() {

        var i_self = this;

        var a_items =  i_self.getItems();

        var i_manager = Ext.ZIndexManager.create();

        var i_closeItem = Ext.widget("component", {
            autoEl: {
                tag: "span"
            },
            cls: "pf-navigate_cross x-desktop-close",
            width: 10,
            height: 10,
        });

        var i_icon = Ext.widget("component", {
            autoEl: {
                tag: "span"
            },
            cls: "pf-element x-desktop-button",
            width: 32,
            height: 32,
            active: false,
            listeners: {
                click: {
                    element: "el",
                    fn: function () {

                        var b_active = i_icon.active = !i_icon.active;
                        i_self.fireEvent("activate", i_self, b_active);
                    }
                }
            }
        });

        var i_container = Ext.widget("container", {
            items: [
                i_icon,
                i_closeItem
            ],
            layout: "auto",
            height: 40,
            width: 40,
            cls: "x-desktop-container",
            listeners: {
                afterrender: {
                    fn: function (i_container) {
                        i_container.layout.innerCt.applyStyles({
                            "vertical-align": "middle"
                        });

                        i_container.el.slideIn("b");
                    }
                },
                mouseover: {
                    element: "el",
                    fn: function (i_event) {

                        if (i_event.within(i_container.el)) {

                            i_closeItem.el.applyStyles({
                                "display": "block"
                            });


                            i_self.fireEvent("preshift", i_self);
                        }
                    }
                },
                mouseout: {
                    element: "el",
                    fn: function (i_event) {

                        if (!i_container.el.contains(i_event.getRelatedTarget())) {

                            i_closeItem.el.applyStyles({
                                "display": "none"
                            });

                            i_self.fireEvent("deshift", i_self);
                        }
                    }
                }
            },
            onHide: function(target, f_callback) {

                i_container.el.slideOut("b", {
                    callback: function() {
                        i_container.destroy();
                    }
                });
            }
        });

        i_closeItem.on({
            click: {
                element: "el",
                fn: function () {
                    i_container.hide();
                }
            }
        });

        i_self.setButton(i_container);
        i_self.setManager(i_manager);

        i_container.on({
            destroy: {
                fn: function() {

                    i_self.fireEvent("deshift", i_self);

                    var a_items = i_self.getItems();

                    Ext.Array.each(a_items, function (i_window) {

                        if (i_window) {
                            var i_panel = i_window.down("panel");

                            if (i_panel) {
                                i_panel.setTitle(i_window.getTitle());
                                Portfolio.app.fireEvent("toTab", i_panel, i_window.stateData);
                                i_window.close();
                            }
                            else {
                                i_window.show();
                            }
                        }
                    });

                    i_self.setItems(null);
                    i_self.setManager(null);

                    i_self.fireEvent("destroy", i_self);
                }
            }
        });

        i_self.addItems(a_items);

        i_manager.hideAll();
    },

    updateIsActive: function(b_active) {

        var i_self = this;
        var i_button = i_self.getButton();
        if (i_button) {

            var s_addCls = b_active ? "x-desktop-container-active" : "x-desktop-container";
            var s_removeCls = b_active ? "x-desktop-container" : "x-desktop-container-active";

            i_button.removeCls(s_removeCls);
            i_button.addCls(s_addCls);
        }
    },

    addItems: function(a_items, b_front) {

        var i_self = this;

        a_items = Ext.Array.from(a_items);

        var i_manager = i_self.getManager();

        Ext.Array.each(a_items, function (i_window) {

            i_manager.register(i_window);

            i_window.on({
                beforedestroy: {
                    fn: function (i_window) {

                        i_manager.unregister(i_window);

                        Ext.WindowManager.register(i_window);

                        var a_items = i_self.getItems();

                        var i_container = i_self.getButton();

                        if (!i_container.isDestroying && !i_container.destroyed) {
                            Ext.Array.remove(a_items, i_window);

                            i_self.setItems(a_items);

                            if (a_items.length === 0) {
                                var i_button = i_self.getButton();
                                i_button.hide();
                            }
                        }
                    },
                    single: true
                }
            });

            if (b_front) {

                var i_topmost = i_manager.topMost;

                i_manager.bringToFront(i_window);

                if (i_topmost) {
                    var a_xy = i_topmost.getXY();

                    i_window.showAt(a_xy[0] + 100, a_xy[1] + 100);
                }
            }
        });
    }
});
