var timeclockTimezone = new Ext.Window({
  layout: 'fit',
  title: 'School Time Zone Setup',
  width: 400,
  height: 190,
  closeAction: 'hide',
  modal: true,
  plain: true,
  items:[
    {
      xtype: 'form',
      id: 'tcTzForm',
      cls: 'formpadding',
      border: false,
      defaults: {style: {marginBottom: '5px'}},
      items: [
      { 
        html: '<p style="font-size: 12; width: 100%; font-weight: bold">Choose your time zone:</p>',
        border: false
      },
        {
            xtype: 'combo',
            fieldLabel:'Select a region',
            mode: 'local',
            typeAhead: false,
            name: 'region',
            id: 'tcTzRegionCombo',
            anchor: '100%',
            triggerAction: 'all',           
            displayField: 'region',
            store: new Ext.data.ArrayStore({
               fields: ['region'],
               data: [['Africa'], ['America'], ['Antarctica'], ['Arctic'], ['Asia'], ['Atlantic'], ['Australia'], ['Europe'], ['Indian'], ['Pacific']]
            }),
            listeners: {
               select: function(c,r,i){
                  tcTz = Ext.getCmp('tcTzLocCombo');
                  tcTz.store.baseParams.region = r.data.region; 
                  tcTz.store.load();
               }
            } 
        },
        {
          xtype: 'combo',
          id: 'tcTzLocCombo',
          name: 'location',
          anchor: '100%',
          fieldLabel: 'Select a location',
          displayField: 'location',
          typeAhead: false,
          triggerAction: 'all',
          store: new Ext.data.Store({ url: 'main_menu/timeclock_data.json.php', baseParams: {command: 'getLocations'}, autoLoad: false, reader: new Ext.data.JsonReader({ root: 'locations' }, ['location']) })
        }        
        
      ]
    }
  ],
  buttons: [
    {
      text: 'Submit',
      handler: function(){
         if (TimeZone.setTimeZone(Ext.getCmp('tcTzLocCombo').getValue())) {
             treePanel = Ext.getCmp('tree-panel');
             treenode = treePanel.getRootNode().findDescendant('id','timeclock');
             treePanel.fireEvent('click',treenode, null, null, true);
             this.ownerCt.ownerCt.hide();
         }
      }
    },
    {
      text: 'Close',
      handler: function(btn){ 
         this.ownerCt.ownerCt.hide();
      }  
    }
  ],
  listeners: {
      show: function(panel) {
         var location = TimeZone.getTimeZone();
         if (location != null) {
            var region = location.split("/")[0];
            Ext.getCmp('tcTzRegionCombo').setValue(region);
            Ext.getCmp('tcTzLocCombo').setValue(location);
         }
      }
  }
})
