var tpl = new Ext.XTemplate('<tpl for=".">', '<div id="abookTemplate">', ' <tpl if="values.studentselected.length &gt; 0">', '  <div id="abooktop">', '    <div id="abookstudent">', '       <div class="student_img"><span width=50 height=50 alt=""/></div>', '       <h2>{name}</h2>', '       <span> Grade {grade}</span>', '    </div>  <!-- abookstudent -->', '    <tpl if="values.mobilephone.length &gt; 0">', '     <p>', '      <label class="abookLabel">Mobile:</label>', '      {mobilephone}<br/>', '     </p>', '    </tpl>', '    <tpl if="values.email.length &gt; 0">', '     <p>', '      <label class="abookLabel">Email:</label>', '      	{email}<br/>', '     </p>', '    </tpl>', '  </div> <!-- abookTop -->', ' </tpl>', ' <tpl if="values.studentselected.length &lt; 1">', ' <tpl if="values.done.length &lt; 1">', '  <hr/>', '  <div id="abookP">', '<tpl if="values.liveswith != 0">', '    <img src="images/silk_icons/house.png" width=16 height=16 alt="LW"/>', ' </tpl>', '<tpl if="values.liveswith == 0">', '   <div class="abookSpacer"></div>', ' </tpl>', '    <label class="abookPname">{name}</label>', '    <label class="abookRelationship">{relationship}</label>', '  </div> <!-- abookP -->', '  <tpl if="values.phone.length &gt; 0">', '     <p>', '        <label class="abookLabel">Home:</label>', '        {phone}<br/>', '     </p>', '  </tpl>', '  <tpl if="values.workphone.length &gt; 0">', '     <p>', '        <label class="abookLabel">Work:</label>', '        {workphone}<br/>', '     </p>', '  </tpl>', '  <tpl if="values.mobilephone.length &gt; 0">', '     <p>', '        <label class="abookLabel">Mobile:</label>', '        {mobilephone}<br/>', '     </p>', '  </tpl>', '  <tpl if="values.email.length &gt; 0">', '     <p>', '        <label class="abookLabel">Email:</label>', '        {email}<br/>', '     </p>', '  </tpl>', ' </tpl>', ' </tpl>', '</div> <!-- abookTemplate -->', '</tpl>');
var studentDataStore = new Ext.data.Store({
	url: 'main_menu/addressbook_data.json.php',
	baseParams: {
		command: 'getStudentInfo'
	},
	reader: new Ext.data.JsonReader({
		root: 'getStudentInfo'
	}, [{
		name: 'name'
	},
	{
		name: 'grade'
	},
	{
		name: 'mobilephone'
	},
	{
		name: 'email'
	},
	{
		name: 'liveswith'
	},
	{
		name: 'relationship'
	},
	{
		name: 'workphone'
	},
	{
		name: 'phone'
	},
	{
		name: 'liveswith'
	},
	{
		name: 'studentselected'
	},
	{
		name: 'done'
	}]),
	autoLoad: false
});
SD.addPopup('addressBook', new Ext.Window({
	layout: 'border',
	title: 'Address Book',
	width: 560,
	height: 400,
	closeAction: 'hide',
	modal: true,
	tools: [{
		id: 'help',
		handler: function(btn) {
			helppopup.loadHelpFile("Address Book", 500, 455);
		}
	}],
	tbar: ['Search: ',
	{
		xtype: 'searchfield',
		width: 150,
		id: 'treesearch',
		store: 'addressbookTree'
	},
	{
		xtype: 'tbspacer'
	},
	{
		xtype: 'tbseparator'
	}, 'List by: ',
	{
		xtype: 'combo',
		width: 150,
		displayField: 'description',
		typeAhead: true,
		triggerAction: 'all',
		mode: 'local',
		store: new Ext.data.SimpleStore({
			fields: ['description', 'value'],
			data: [
				['Alphabetical', 'text'],
				['Grade', 'Grade'],
				['Homeroom', 'Homeroom']
			]
		}),
		listeners: {
			select: function(combo, record, index) {
				myTree = Ext.getCmp('addressbookTree');
				var myTreeSorter = new Ext.tree.TreeSorter(myTree, {
					property: record.data.value
				});
				myTreeSorter.doSort(myTree.getRootNode());
			}
		}
	}],
	items: [{
		region: 'west',
		id: 'addressbookTree',
		xtype: 'treepanel',
		border: false,
		title: 'Students',
		width: 180,
		autoScroll: true,
		//anchor: 'none 100%',
		bodyStyle: 'float: left',
		rootVisible: false,
		root: new Ext.tree.AsyncTreeNode(),
		lines: false,
		loader: new Ext.tree.TreeLoader({
			baseParams: {
				command: 'getStudents'
			},
			dataUrl: 'main_menu/addressbook_data.json.php'
		}),
		listeners: {
			click: function(n) {
				var sn = this.selModel.selNode || {}; // selNode is null on initial selection
				if (n.leaf && n.id != sn.id) { // ignore clicks on folders and currently selected node 		
					Ext.getCmp('addressbookData').store.baseParams = {
						command: 'getStudentInfo',
						studentid: n.attributes.studentid,
						familyid: n.attributes.familyid
					};
					Ext.getCmp('addressbookData').store.load();
				}
			}
		}
	},
	{
		region: 'center',
		width: 350,
		border: false,
		bodyStyle: 'border-left: 1px solid lightgrey',
		autoScroll: true,
		items: [{
			id: 'addressbookData',
			xtype: 'dataview',
			store: studentDataStore,
			tpl: tpl,
			itemSelector: 'div.abookTemplate',
			emptyText: '<div class="emptyText">Choose a name from the Student List to view details.</div>',
			autoHeight: true
		}]
	}],
	buttons: [{
		text: 'Close',
		handler: function(btn) {
			this.ownerCt.ownerCt.hide();
		}
	}]
})
);