Ext.define('amdaUI.ResourcesMgrUI', {
	extend: 'Ext.container.Container',
	alias: 'widget.panelResrcMgr',
	
	requires: [
    ],
	
    constructor: function(config) {
	    
	    this.init(config);
	    this.callParent(arguments);
    },
    
    /**
     * save method called by Save button
     */
    saveProcess : function(renamed){
        
    },

    /**
     * overwrite method called by Save button
     */
    overwriteProcess : function(btn){
         if (btn == 'cancel') {
             return;
         }
         this.saveProcess(true);        
    },
    
	init: function(config) {
	    
	    // The data store containing the list of states
	    var categories = Ext.create('Ext.data.Store', {
	        fields: ['abbr', 'name'],
	        data : [
                {"abbr":"AR", "name":"All Resources"},
	            {"abbr":"LD", "name":"Local Data"},
	            {"abbr":"RD", "name":"Remote Data"},
	            {"abbr":"DP", "name":"Derived Parameters"},
	            {"abbr":"TT", "name":"Time Tables"},
	            {"abbr":"SC", "name":"Search Conditions"},
	            {"abbr":"RQ", "name":"Requests"},
	            {"abbr":"CA", "name":"Catalogs"}
	            //...
	        ]
	    });
	    
	  //we want to setup a model and store instead of using dataUrl
//	    Ext.define('Task', {
//	        extend: 'Ext.data.Model',
//	        fields: [
//	            {name: 'task',     type: 'string'},
//	            {name: 'user',     type: 'string'},
//	            {name: 'duration', type: 'string'}
//	        ]
//	    });

//	    var store = Ext.create('Ext.data.TreeStore', {
//	        model: 'Task',
//	        proxy: {
//	            type: 'ajax',
//	            //the store will get the content from the .json file
//	            url: 'treegrid.json'
//	        },
//	        folderSort: true
//	    });
	    
	    var storeMyWs = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                nodeType : 'resources'             
             },
            model: 'amdaModel.AmdaNode',
            listeners: {
                beforeload: function(store, operation){
                    store.proxy.extraParams = {
                        nodeType: operation.node.data.nodeType
                    };
                }
            }

        });
	    
	    var storeResrc = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                nodeType : 'resources'
             },
            model: 'amdaModel.AmdaNode',
            listeners: {
                beforeload: function(store, operation){
                    store.proxy.extraParams = {
                        nodeType: operation.node.data.nodeType
                    };
                }
            }

        });

	    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
	    var resrcTree = Ext.create('Ext.tree.Panel', {
	        height: '90%',
            hideHeaders: true,
	        useArrows: true,
	        rootVisible: false,
	        store: storeResrc,
	        multiSelect: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                layout: 'fit',
                padding : '0 5 0 0',
                items: [{
                    xtype: 'textfield',
                    labelWidth: 50,
                    fieldLabel: 'filter'
                }]
            }],
            headerHidden: true,
//	        singleExpand: true,
	        //the 'columns' property is now 'headers'
	        columns: [{
	            xtype: 'treecolumn', //this is so we know which column will show the tree
	            text: 'All Resources',
	            flex: 2,
	            sortable: false,
	            menuDisabled: true,
	            dataIndex: 'text',
	            heigth:2
	        },{
//	            text: 'Assigned To',
	            flex: 1,
	            hidden: true,
	            dataIndex: 'user',
                sortable: false,
                menuDisabled: true
	        }]
	    });
	    
	    var myTree = Ext.create('Ext.tree.Panel', {
//          title: 'Core Team Projects',
//          width: 500,
            height: '90%',
            hideHeaders: true,
            useArrows: true,
            rootVisible: false,
            store: storeMyWs,
            multiSelect: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                layout: 'fit',
                padding : '0 5 0 0',
                items: [{
                    xtype: 'textfield',
                    labelWidth: 50,
                    fieldLabel: 'filter'
                }]
            }],
//          singleExpand: true,
            //the 'columns' property is now 'headers'
            columns: [{
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'All Resources',
                flex: 2,
                sortable: false,
                menuDisabled: true,
                dataIndex: 'text',
                heigth:2
            },{
                text: 'Assigned To',
                flex: 1,
                hidden: true,
                dataIndex: 'user',
                sortable: false,
                menuDisabled: true
            }]
        });
	    
//	    this.MyWsTree = null;//new Ext.form.FieldSet({});
//	    
//	    this.RsrcTree = null;//FieldSet = new Ext.form.FieldSet({});
//	    
//		this.formPanel = new Ext.form.Panel({});
				
		var myConf = {
//				id : config.id,
				border: false,
				layout: {
                    type:'vbox',
                    padding:'5',
                    align:'center'
                },
                defaults:{margins:'0 0 5 0'},
				items: [
			        // category selection
			        {
			            layout: {
                            type: 'hbox',
                            padding:'5',
                            align:'top'
                        },
                        defaults:{margins:'0 5 0 0'},
                        xtype: 'container',
			            plain: true,
				        flex: 1,
				        width: '95%',
				        items:[
			               {
			                   xtype: 'container',
			                   flex: 1
		                   },{
		                       xtype: 'combo',
		                       fieldLabel: 'Resources Categories',
		                       labelWidth: 130,
		                       width: 280,
		                       store: categories,
		                       queryMode: 'local',
		                       displayField: 'name',
		                       valueField: 'abbr'
		                   },{
		                       xtype: 'container',
	                           flex: 1
		                   }
	                   ]
			        },
			        // selection panel
			        {
			            xtype: 'container',
			            flex: 5,
			            width: '95%',
			            layout: {
                            type: 'hbox',
                            padding:'5',
                            align:'stretch'
                        },
                        defaults:{margins:'0 5 0 0'},
			            items: [
		                    { // fieldset Resources
		                        xtype: 'fieldset',
		                        flex: 3,
                                title: 'Resources',
                                items:[
//                                    resrcTree
                                    {

                                        layout: 'border',
                                        title: 'resources',
                                        defaults: {layout: 'fit'},
                                        split: true,
                                        items: [
                                            {
                                                region: 'north',
                                                xtype: 'form',
                                                title : 'filtering parameters',
                                                collapsible: true,
                                                collapsed: true,
//                                                layout: 'fit',
//                                                  padding : '0 5 0 0',
                                                items: [{
                                                    xtype: 'textfield',
                                                    labelWidth: 50,
                                                    fieldLabel: 'filter'
                                                }]//,
//                                                listeners: {
//                                                    expand: function(a,b,c,d){
//                                                        alert('expand');
//                                                        a.ownerCt.doLayout();
//                                                    },
////                                                      beforecollapse: function(a,b,c,d){
////                                                      alert('beforecollapse');
////                                                      },
//                                                    collapse: function(a,b,c,d){
//                                                        alert('collapse');
//                                                    }
//                                                }
                                            },
                                            {
                                                region: 'center',
                                                title:'resources',
                                                items: [
                                                    resrcTree
                                                ]
                                            }
                                        ]
                                    }
                                ]
		                    },
		                    { // container of action buttons
		                        xtype: 'container',
//                                flex: 1,
		                        width: 42,
		                        layout: {
		                            type:'vbox',
		                            padding:'5',
		                            align:'center'
		                        },
                                defaults:{margins:'0 0 5 0'},
		                        items: [
	                                { 
	                                    xtype: 'container',
	                                    flex: 1
                                    },
	                                {// add to my Ws
	                                    xtype: 'button',
//	                                    text: 'Droite',
//	                                    iconCls: 'icon-addRsrc',
	                                    icon: 'js/resources/images/32x32/1309360076_misc_22.png',
	                                    width: 32,
	                                    heigth: 32,
	                                    tooltip: 'Add to my Ws',
//	                                    width: 50
		                            },{// remove from my Ws
		                                xtype: 'button',
                                        width: 32,
                                        heigth: 32,
//		                                text: 'Gauche',
//		                                iconCls: 'icon-removeRsrc',
                                        icon: 'js/resources/images/32x32/1309360153_misc_21.png',
                                        tooltip: 'remove from my Ws',
//                                        width: 50
		                            },
                                    { 
                                        xtype: 'container',
                                        flex: 1
                                    }
	                            ]
		                    },
		                    { // fieldset My Workspace
                                xtype: 'fieldset',
                                flex: 3,
                                title: 'My Workspace',
                                items:[myTree]
		                    }
	                    ]
			        }
		        ]
			};
	              
			Ext.apply (this , Ext.apply (arguments, myConf));
	}
});