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"><img src="." 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
        });

var addressbookPopup = 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){
        addressbookPopup.hide();
      }
    }
  ]
});