var currId;

var treePanelSuperAdmin = new Ext.tree.TreePanel({
	id: 'tree-panel_1',
	minSize: 150,
	autoScroll: true,
	border : false,
	// tree-specific configs:
	rootVisible: false,
	lines: false,
	singleExpand: false,
	useArrows: true,
	
	loader: new Ext.tree.TreeLoader({
		dataUrl:'tree-data-superAdmin.json'
	}),
	
	root: new Ext.tree.AsyncTreeNode(),
	changeLoader : function(){
		this.fileTree.loader = new Ext.tree.TreeLoader({dataUrl: "test.htm"});
		this.fileTree.root.reload();
	}
});
treePanelSuperAdmin.on('click', createTab);

var treePanelAdmin = new Ext.tree.TreePanel({
	id: 'tree-panel_2',
	minSize: 150,
	autoScroll: true,
	border : false,
	// tree-specific configs:
	rootVisible: false,
	lines: false,
	singleExpand: false,
	useArrows: true,
	
	
	loader: new Ext.tree.TreeLoader({
		dataUrl:'tree-data-admin.json'
	}),
	
	root: new Ext.tree.AsyncTreeNode()
});
treePanelAdmin.on('click',createTab);

var treePanelUser = new Ext.tree.TreePanel({
	id: 'tree-panel_3',
	minSize: 150,
	autoScroll: true,
	border : false,
	// tree-specific configs:
	rootVisible: false,
	lines: false,
	singleExpand: false,
	useArrows: true,
	containerScroll: true,

	
	loader: new Ext.tree.TreeLoader({
		dataUrl:'tree-data-user.json'
	}),
	
	root: new Ext.tree.AsyncTreeNode()
});
treePanelUser.on('click',createTab);

var treePanelClient = new Ext.tree.TreePanel({
	id: 'tree-panel_4',
	minSize: 150,
	autoScroll: true,
	border : false,
	// tree-specific configs:
	rootVisible: false,
	lines: false,
	singleExpand: false,
	useArrows: true,
	
	
	loader: new Ext.tree.TreeLoader({
		dataUrl:'tree-data-client.json'
	}),
	
	root: new Ext.tree.AsyncTreeNode()
});
treePanelClient.on('click',createTab);


var item11 = new Ext.Panel({
	title: 'SuperAdmin',
	id: 'AccordionPanel_1',
	items: [treePanelSuperAdmin],
	iconCls: 'silk-acc-sa',
	border: false

});

var item1 = new Ext.Panel({
	title: 'ABC Spa Admin',
	id: 'AccordionPanel_2',
	items: [treePanelAdmin],
	iconCls: 'silk-acc-a',
	border: false

});
var item2 = new Ext.Panel({
	title: 'ABC Spa User',
	id: 'AccordionPanel_3',
	items: [treePanelUser],
	iconCls: 'silk-acc-u',
	border: false

});
var item3 = new Ext.Panel({
	title: 'Client\'s View',
	id: 'AccordionPanel_4',
	items: [treePanelClient],
	iconCls: 'silk-user',
	border: false

});


var accordion = new Ext.Panel({
	region:'west',
	title:"Main Menu",
	margins:'5 0 0 5',
	cmargins: '5 0 0 5',
	id:"treePanel",
	//collapseMode:'mini',
	split:true,
	width: 200,
	minSize: 180,
	collapsible:true,
	layout:'accordion',
	autoScroll: true,
	layoutConfig:{animate:true},
	items: [item11, item1, item2, item3]
});

function createTab(n){
	var sn = this.selModel.selNode || {}; 
	//Ext.MessageBox.alert(n.iconCls);
	if(n.leaf && n.id != sn.id){
		var tbs = Ext.getCmp('card-tabs-panel');
		var tab = tbs.getItem(n.id);
		
		if(!tab)
		{
			tbs.add({
			title: n.text,
			id: n.id,
			closable: true,
			//layout:'fit',

			autoLoad: {
				url: n.attributes.url, scripts:true, callback:function(el, success) {
					if (!success) {
						Ext.MessageBox.alert('Message', 'Page load failed!  This error has been reported to Site Administrators!');
						Ext.get(n.id).load({
						url: 'test.htm',
						discardUrl: false,
						nocache: true,
						text: 'Loading Error Page...',
						timeout: 30,
						scripts:true
						});
					}
				}}
			}).show();
			tbs.doLayout(); 
		}
		tbs.setActiveTab(n.id);
		tbs.doLayout(); 
		
	}
	currId = n.attributes.id;
}