ListTree = function(config){
       
ListTree.superclass.constructor.call(this, Ext.apply({
                id
:'list-tree',
                animate
:false,
               
//rootVisible:false,
                region
:'west',
                width
:200,
                split
:true,
                title
:'My Lists',
                autoScroll
:true,
                margins
: '3 0 3 3',
                cmargins
: '3 3 3 3',
                useArrows
:true,
                collapsible
:true,
                minWidth
:120
       
}, config));
       
       
this.on('contextmenu', this.onContextMenu, this);
}
Ext.extend(ListTree, Ext.tree.TreePanel, {
       
        initComponent
: function(){
               
this.bbar = [
                        tx
.actions.newList,
                        tx
.actions.deleteList,
                       
'-',
                        tx
.actions.newFolder,
                        tx
.actions.deleteFolder
               
];
               
               
this.loader = new ListLoader({
                        store
: tx.data.lists
               
});
               
ListTree.superclass.initComponent.call(this);
               
               
var root = new Ext.tree.AsyncTreeNode({
                text
: 'All Lists',
                        id
: 'root',
                        leaf
: false,
                        iconCls
: 'icon-folder',
                        expanded
: true,
                        isFolder
: true,
                        editable
: false
           
});
           
this.setRootNode(root);
                               
               
this.editor = new Ext.tree.TreeEditor(this, {
                allowBlank
:false,
                blankText
:'A name is required',
                selectOnFocus
:true
           
});
       
this.editor.shadow = false;

       
this.editor.on('beforecomplete', function(ed, value, startValue){
                       
var node = ed.editNode;
                        value
= Ext.util.Format.htmlEncode(value);
                       
var r = this.store.getById(node.id);
                        r
.set('listName', value);
                       
//ed.editing = false;
           
//ed.hide();
                       
//return false;
               
}, this);
               
               
this.sorter = new Ext.tree.TreeSorter(this, {
                        folderSort
: true
               
});
       
},
       
        getActiveFolderId
: function(){
               
var sm = this.selModel;
               
var n = sm.getSelectedNode();
               
if(n){
                       
return n.attributes.isFolder ? n.id : n.attributes.parentId;
               
}
               
return 'root';
       
},
       
        onContextMenu
: function(node, e){
       
if(!this.menu){ // create context menu on first right click
           
this.menu = new Ext.menu.Menu({
                id
:'lists-ctx',
                                listWidth
: 200,
                items
: [{
                    iconCls
:'icon-edit',
                    text
:'New Task',
                    scope
: this,
                    handler
:function(){
                                               
this.ctxNode.select();
                                                tx
.actions.newTask.execute();
                   
}
               
},{
                    iconCls
:'icon-list-new',
                    text
:'New List',
                    scope
: this,
                    handler
:function(){
                                               
this.ctxNode.select();
                                                tx
.actions.newList.execute();
                   
}
               
},{
                    iconCls
:'icon-folder-new',
                    text
:'New Folder',
                    scope
: this,
                    handler
:function(){
                                               
this.ctxNode.select();
                                                tx
.actions.newFolder.execute();
                   
}
               
},'-',{
                                        text
:'Delete',
                    iconCls
:'icon-list-delete',
                    scope
: this,
                    handler
:function(){
                       
this.removeList(this.ctxNode);
                   
}
               
}]
           
});
           
this.menu.on('hide', this.onContextHide, this);
       
}
       
if(this.ctxNode){
           
this.ctxNode.ui.removeClass('x-node-ctx');
           
this.ctxNode = null;
       
}
       
this.ctxNode = node;
       
this.ctxNode.ui.addClass('x-node-ctx');
               
               
this.menu.items.get(1).setVisible(!!node.attributes.isFolder);
               
this.menu.items.get(2).setVisible(!!node.attributes.isFolder);
               
this.menu.items.get(0).setVisible(!node.attributes.isFolder);
               
               
this.menu.showAt(e.getXY());
   
},

    onContextHide
: function(){
       
if(this.ctxNode){
           
this.ctxNode.ui.removeClass('x-node-ctx');
           
this.ctxNode = null;
       
}
   
},
       
        startEdit
: function(node, select){
               
if(typeof node == 'string'){
                        node
= this.getNodeById(node);
               
}
               
if(select === true){
                        node
.select();
               
}
               
var ed = this.editor;
                setTimeout
(function(){
                        ed
.editNode = node;
                        ed
.startEdit(node.ui.textNode);
               
}, 10);
       
},
       
        removeList
: function(s){
               
if (s && s.attributes.editable) {
                       
Ext.Msg.confirm('Confirm', 'Are you sure you want to delete "' + Ext.util.Format.htmlEncode(s.text) + '"?', function(btn){
                               
if (btn == 'yes') {
                                       
if (s.nextSibling) {
                                                s
.nextSibling.select();
                                       
}
                                       
else
                                               
if (s.previousSibling) {
                                                        s
.previousSibling.select();
                                               
}
                                        s
.parentNode.removeChild(s);
                                        tx
.data.lists.remove(this.store.getById(s.id));
                                        tx
.data.tasks.removeList(s.id);
                               
}
                       
}, this);
               
}
       
}
});