a porra toda

var WIDTH = 350;
var FOCUSOUT = 0.2;
var FOCUSIN = 1;
var IMG_HIDE2LEFT  = "resource/cli/icon_hide2left_16px.png";
var IMG_SHOW2RIGHT = "resource/cli/icon_show2right_16px.png";

qx.Class.define("cli.TreeMenu", {
    extend: qx.ui.container.Composite,

    events : {
        "executed" : "qx.event.type.Data"
    },

    construct: function(menu) {
        this.base(arguments);
        this.setLayout(new qx.ui.layout.Canvas());
        this.setWidth(WIDTH);

        var decorator = new qx.ui.decoration.Decorator().set({
            backgroundColor: "#F2F2F2",
            color: "#dddddd",
            styleRight: "solid",
            widthRight: 3
        });
        this.setDecorator(decorator);

        this.progs = [];
        this.nodes = this.create_nodes(menu);
        this.create_tree(this.nodes);

        var that = this;

        this.tree.addListener('focus', function() {
            this.has_focus = true;
            this.animate_fadein();
        }, this);
        this.tree.addListener('blur',  function() {
            this.has_focus = false;
            this.animate_fadeout();
        }, this);
        var timer = null;
        this.addListener('mouseover', function() {
            //console.log('mouseover');
            if (timer) {
                clearTimeout(timer);
                timer = null
            }
            this.animate_fadein();
        }, this);
        this.addListener('mouseout', function() {
            //console.log('mouseout');
            timer = setTimeout(function() {
                that.animate_fadeout()
            }, 3000);
        }, this);
        this.setOpacity(FOCUSOUT);

        this.create_btn_close();
        this.addListenerOnce('appear', function() {
            var state = window.localStorage.getItem('menu-tree') || 'opened';
            if (state == 'closed') {
                setTimeout(this.hide_me.bind(this), 2000);
            }
        }, this);
    },

    members: {
        nodes : null,
        progs : null,
        tree  : null,
        close_btn : null,
        is_visible : true,

        EVENT_ENABLED : true,

        create_btn_close : function() {
            var decorator = new qx.ui.decoration.Decorator();
            var btn = new qx.ui.form.Button(null, IMG_HIDE2LEFT).set({
                show: "icon",
                margin : 0,
                padding: 0,
                decorator: decorator
            });
            this.add(btn, {top:5, right:5});

            btn.addListener('execute', function() {
                if (this.is_visible) {
                    this.hide_me();
                } else {
                    this.show_me();
                }
            }, this);
            this.close_btn = btn;
            this.tree.getChildControl('scrollbar-y').set({
                marginTop: 22,
                opacity: 0.5
            });
        },

        hide_me : function() {
            this.is_visible = false;
            var desc = {
                duration: 300,
                timing: "ease-out",
                keyFrames : {
                    0   : { width: WIDTH+'px' },
                    100 : { width: '30px' }
                }
            };
            var box = this.getContentElement().getDomElement();
            var handle = qx.bom.element.Animation.animate(box, desc);
            handle.addListener("end", function(){
                this.setWidth(28);
                this.setMaxHeight(28);
                this.tree.setVisibility('excluded');
                this.close_btn.setIcon(IMG_SHOW2RIGHT);
            }, this);
            window.localStorage.setItem('menu-tree', 'closed');
        },

        show_me : function() {
            this.is_visible = true;
            var that = this;
            this.setMaxHeight(9999);
            this.tree.setVisibility('visible');
            setTimeout(function() {
                var desc = {
                    duration: 300,
                    timing: "ease-in",
                    keyFrames : {
                        0     : { width: '30px' },
                        100   : { width: WIDTH+'px' }
                    }
                };
                var box = that.getContentElement().getDomElement();
                var handle = qx.bom.element.Animation.animate(box, desc);
                handle.addListener("end", function(){
                    that.setWidth(WIDTH);
                    that.close_btn.setIcon(IMG_HIDE2LEFT);
                });
            }, 10);
            window.localStorage.setItem('menu-tree', 'opened');
        },

        animate_fadein : function() {
            if (this.getOpacity() == FOCUSIN) return;
            var desc = {
                duration: 300,
                timing: "ease-out",
                keyFrames : {
                    0   : { opacity: FOCUSOUT },
                    100 : { opacity: FOCUSIN  }
                }
            };
            var box = this.getContentElement().getDomElement();
            var handle = qx.bom.element.Animation.animate(box, desc);
            handle.addListener("end", function(){
                this.setOpacity(FOCUSIN);
            }, this);
        },
        animate_fadeout : function() {
            if (this.getOpacity() != FOCUSIN) return;
            if (this.has_focus) return;
            var desc = {
                duration: 300,
                timing: "ease-in",
                keyFrames : {
                    0   : { opacity: FOCUSIN  },
                    100 : { opacity: FOCUSOUT }
                }
            };
            var box = this.getContentElement().getDomElement();
            var handle = qx.bom.element.Animation.animate(box, desc);
            handle.addListener("end", function(){
                this.setOpacity(FOCUSOUT);
            }, this);
        },

        select_from_hash : function(hash) {
            console.log('select_from_hash:', hash);
            var that = this;
            var find = function(sub, hash) {
                //console.log('sub', sub);
                var ar = sub.toArray();
                //console.log(ar.length);
                for(var i=0; i<ar.length; i++) {
                    var index = ar[i].getProgIndex();
                    //console.log(i, ar[i], index);
                    var o = that.progs[index];
                    if (o && o.progs && o.progs[0].hashpath==hash) {
                        return ar[i];
                    }
                    if (ar[i].getChildren) {
                        var ch = ar[i].getChildren();
                        //console.log(ch);
                        if (ch) {
                            var r = find(ch, hash);
                            if (r) return r;
                        }
                    }
                }
            }
            //console.log('this.nodes:', this.nodes);//, this.nodes.getSize(), this.nodes.getItem(0));
            var elem = find(this.nodes.getItem(0).getChildren(), hash);
            if (elem) {
                //console.log('elem:', elem);
                this.nodes.getItem(0).getChildren().forEach(function(i) {
                    that.tree.closeNode(i);
                });
                this.tree.openNodeAndParents(elem);
                this.tree.getSelection().removeAll();
                this.EVENT_ENABLED = false;
                this.tree.getSelection().push(elem);
                this.tree.refresh();
            }
        },

        create_nodes : function(menu) {
            var that = this;
            //console.log(menu);
            var process_sub = function(sub) {
                var r = [];
                for(var i=0; i<sub.length; i++) {
                    var t = sub[i];
                    that.progs.push(t.prog);
                    var prog_index = that.progs.length-1;
                    var e = {
                        label:     t.label,
                        color:     (!t.enabled ? "#ddd" : (t.color ? t.color : "#75889C")),
                        icon:      (t.icon ? t.icon : "resource/cli/"+(t.sub && t.sub.length>0 ? "icon_arrowgray_right_16px.png" : "icon_dotgray_16px.png")),
                        enabled:   t.enabled,
                        progIndex: prog_index,
                        iconOpened: "resource/cli/icon_arrowgray_down_16px.png"
                    };
                    if (t.sub && t.sub.length>0) {
                        e.children = process_sub(t.sub);
                    }
                    r.push(e);
                }
                return r;
            }
            var nodes = process_sub( [{ label:"root", sub:menu, enabled:true, prog: null }] );
            return qx.data.marshal.Json.createModel(nodes);
        },

        create_tree : function(nodes) {
            //console.log(nodes.toArray());
            var tree = new qx.ui.tree.VirtualTree(nodes.getItem(0), "label", "children").set({
                hideRoot: true,
                openMode: "tap",
                showTopLevelOpenCloseIcons: true
            });
            tree.setDelegate({
                bindItem : function(controller, item, id) {
                    controller.bindProperty("label",      "label",      null, item, id);
                    controller.bindProperty("color",      "textColor",  null, item, id);
                    controller.bindProperty("icon",       "icon",       null, item, id);
                    controller.bindProperty("iconOpened", "iconOpened", null, item, id);
                    controller.bindProperty("enabled",    "enabled",    null, item, id);
                },
                configureItem : function(item) {
                    item.addListener('changeOpen', function() {
                        var opened = item.getOpen();
                        var font = new qx.bom.Font(12, ["Lucida Grande", "DejaVu Sans", 'Verdana', 'sans-serif']);
                        if (opened) font.setBold(true);
                        var textColor = opened ? '#55606B' : item.getTextColor(); // #590 para verde
                        item.getChildControl('label').set({
                            font: font,
                            textColor: textColor
                        });
                        //console.log(item.getLabel(), item);
                    });
                    item.addListener('changeTextColor', function() {
                        //var textColor = item.getTextColor();
                        //item.getChildControl('label').setTextColor(textColor);
                    });
                },
                onPool : function(item) {
                    item.resetIcon();
                    item.resetIconOpened();
                    item.resetOpen();
                    item.resetModel();
                    item.resetLabel();
                    item.resetEnabled();
                    item.resetTextColor();
                    //item.setIcon("resource/cli/icon_dotgray_16px.png");
                    item.getChildControl('icon').resetSource();
                }
            });

            var run_selection = function() {
                var item = tree.getSelection().getItem(0);
                console.log('run_selection item:', item);
                if (item) {
                    var o = this.progs[item.getProgIndex()];
                    console.log("Selection: ", item, o);
                    if (o) {
                        if (this.EVENT_ENABLED) this.fireEvent('executed', qx.event.type.Data, [o]);
                        item.setColor("#22f");
                    }
                }
                //tree.getSelection().removeAll();
                this.EVENT_ENABLED = true;
            };

            tree.getSelection().addListener("change", run_selection, this);
            tree.addListener("dblclick", run_selection, this);

            this.add(tree, {edge:0});
            this.tree = tree;
        }

    }
});