var timeclocktools = {
   regionTitle: 'Time Clock Tools',
   defaults: {autoHeight: true, cls: 'toolbox', frame: true},
   items:[
      {
         title: 'Time Zone Options',
         tools: [
            {
               id:'help',
               handler: function(btn){
                  ///////////////////////////////////////Finish///////
               }  
            }
         ],                   
         items: [
            {
               xtype: 'link',
               iconCls: 'clock',
               id: 'setTZBtn',
               text: 'Set Time Zone',
               handler: function(btn) {
                  timeclockTimezone.show();
               }
            }
         ]
      }
   ]
};

var timeclock = {
  id: 'timeclock-panel',
  layout: 'border',
  border: false,
  items: [
    {
      region: 'center',
      title: 'Time Clock',
      bodyStyle: 'text-align: center;',
      tools: [{
        id:'help',
        handler: function(btn){
          helppopup.loadHelpFile("time clock", 500, 455);
        }  
      }],
      tbar: [
        {
          text: 'View my hours',
          iconCls: 'clock',
          id: 'tcViewHoursBtn',
          style: 'margin-left: 5px;',
          disabled: true,
          handler: function(btn) {
            timeclockHoursPopup.show(btn);
          }
        },
        {
          text: 'Report an absence',
          iconCls: 'clock_red',
          id: 'tcAbsentBtn',
          style: 'margin-left: 5px;',
          disabled: true,          
          handler: function(btn){                      
            timeclockAbsencePopup.show(btn);
          }
        },
        {
          text: 'Request a time adjustment',
          iconCls: 'clock_error',
          id: 'tcAdjustBtn',
          style: 'margin-left: 5px;',
          disabled: true,          
          handler: function(btn){
            timeclockAdjustmentPopup.show(btn);
          }
        },
        {
            xtype: 'tbseparator',
            itemId: 'mng_seperator',
            style: 'margin-left: 5px;'
        },
        {
          text: 'Manage time clock',
          iconCls: 'clock_gear',
          itemId: 'mng_timeclock',
          style: 'margin-left: 5px;',
          id: 'tcManageBtn',
          handler: function(){
            timeclockManagement.show();
          }
        }
      ],
      items: [
        {
          xtype: 'form',
          id: 'tcForm',
          labelAlign: 'top',          
          bodyStyle: 'width:360px; margin-left: auto; margin-right: auto; text-align: left',
          style: {
            paddingTop: 15
          },
          border: false,
          items: [
            {
              border: false,
              html: "<div id='clockcontainer'><div id='innerclock'><div id='tdate'></div><div id='clock'></div></div></div>",
              width: 360
            },
            {
              xtype: 'combo',
              id: 'tcStaffMember',
              fieldLabel: 'Staff Member',
              width: 360,
              displayField: 'staffname',
              hiddenName: 'staffid',
              valueField: 'staffid',
              typeAhead: false, 
              triggerAction: 'all', 
              store: new Ext.data.Store({ url: 'main_menu/timeclock_data.json.php', baseParams: {command: 'getStaff'}, autoLoad: false, reader: new Ext.data.JsonReader({ root: 'staffNames' }, ['staffid', 'staffname']) }),
              listeners : {
               focus : function(field){    
                  Ext.getCmp('keyboard').target = field.id;
               },
               select : function(combo, record, index){
                 Ext.getCmp('tcPassword').reset();
                 Ext.getCmp('tcClassification').clearValue();
                 Ext.getCmp('tcClockInBtn').disable();
                 Ext.getCmp('tcClockOutBtn').disable();
                 Ext.getCmp('tcViewHoursBtn').enable();
                 Ext.getCmp('tcAbsentBtn').enable();
                 Ext.getCmp('tcAdjustBtn').enable();                 
                 classCombo = Ext.getCmp('tcClassification');
                 classCombo.store.baseParams.staffid = record.data.staffid;
                 classCombo.store.load();
                       Ext.Ajax.request({
                        url: 'main_menu/timeclock_data.json.php',
                        success: function(r){
                          if (r.responseText.trim() == 'true'){
                            Ext.getCmp('tcClockInBtn').enable();
                          } else {
                            Ext.getCmp('tcClockOutBtn').enable();
                          }    
                        },
                        params: { command: 'isClockedIn', staffid: record.data.staffid }
                      });
               }
              }
            },
            {
              xtype: 'textfield',
              inputType: 'password',
              fieldLabel: 'Password',
              id: 'tcPassword',
              width: 360,
              listeners : {
               focus : function(field){ 
                    Ext.getCmp('keyboard').target = field.id;
               }
              }
            },
            {
              xtype: 'combo',
              id: 'tcClassification',
              fieldLabel: 'Classification',
              hiddenId: 'tcClassId',
              hiddenName: 'classid',
              name: 'classid',
              width: 360,
              displayField: 'classification',
              valueField: 'classid',
              typeAhead: false, 
              triggerAction: 'all', 
              store: new Ext.data.Store({ url: 'main_menu/timeclock_data.json.php', baseParams: {command: 'getClassifications'}, autoLoad: false, reader: new Ext.data.JsonReader({ root: 'classifications' }, ['classid', 'classification']), 
              listeners: {
                load : function(str, records){
                   Ext.getCmp('tcClassification').setValue(records[0].data.classid);
                }
              }
              }),
              listeners : {
               focus : function(field){    
                  Ext.getCmp('keyboard').target = field.id;
               }
              }
            },
            {
              buttonAlign: 'center',
              border: false,
              buttons: [                              
                {
                  text: 'Clock in',
                  id: 'tcClockInBtn',
                  scale: 'large',
                  iconCls: 'clockin',
                  disabled: true,
                  handler: function(){
                    Ext.getCmp('tcForm').getForm().submit({
                      url: 'main_menu/timeclock_data.json.php',
                      params: {
                          command: 'clockin'
                      },
                      success: function(form) {
                         Ext.Msg.alert('Success', 'You have successfully clocked in');
                         if (SchoolDynamics.TeacherID == 'KIOSK') {
                          Ext.getCmp('timeclock-panel').resetAll();
                         } else {
                            Ext.getCmp('tcClockInBtn').disable();
                            Ext.getCmp('tcClockOutBtn').enable();
                         }
                         
                      },
                      failure: function(form, response) {
                          Ext.Msg.alert('ERROR',response.result.errors.reason);
                      }                  
                    });
                  }
                },
                {
                  text: 'Clock out',
                  disabled: true,
                  id: 'tcClockOutBtn',
                  scale: 'large',
                  iconCls: 'clockout',
                  handler: function(){
                    Ext.getCmp('tcForm').getForm().submit({
                      url: 'main_menu/timeclock_data.json.php',
                      params: {
                          command: 'clockout'
                      },
                      success: function(form) {
                         Ext.Msg.alert('Success', 'You have successfully clocked out');
                         if (SchoolDynamics.TeacherID == 'KIOSK') {
                          Ext.getCmp('timeclock-panel').resetAll();
                         } else {
                            Ext.getCmp('tcClockInBtn').enable();
                            Ext.getCmp('tcClockOutBtn').disable();
                         }
                      },
                      failure: function(form, response) {
                          Ext.Msg.alert('ERROR',response.result.errors.reason);
                      }                  
                    });
                  }                  
                }
              ]
            }
          ]
        }
      ]
          
    },
    {
      title: 'Keyboard',
      region: 'south',
      id: 'tcKeyboardRegion',
      bodyStyle: 'text-align: center; background: #e7edf8;',
      autoHeight: true,
      split: true,
      collapsible: true,
      collapsed: true,
      items: [
        {
          xtype: 'keyboard',
          id: 'keyboard',
          bodyStyle: 'background: #e7edf8;',
          border: false
        }
      ]
    }
  ],
  listeners: {
    show : function(panel){
      Ext.Ajax.request({
        url: 'main_menu/timeclock_data.json.php',
        success: function(r){
          datetime = r.responseText;
          Ext.getCmp('timeclock-panel').startClock(datetime);         
        },
        params: { command: 'getDateTime' }
      });
      
      staffCombo = Ext.getCmp('tcStaffMember');  
      if (SchoolDynamics.TeacherID == "KIOSK") {
        staffCombo.store.load();
        Ext.getCmp('tcKeyboardRegion').collapsed = false;
      } else {
        Ext.getCmp('tcViewHoursBtn').disabled = false;
        Ext.getCmp('tcAbsentBtn').disabled = false;
        Ext.getCmp('tcAdjustBtn').disabled = false;
        staffCombo.hide();
        Ext.getCmp('tcPassword').hide();
        Ext.getCmp('tcClassification').store.load();
        Ext.Ajax.request({
          url: 'main_menu/timeclock_data.json.php',
          success: function(r){
            if (r.responseText.trim() == 'true'){
              Ext.getCmp('tcClockInBtn').enable();
            } else {
              Ext.getCmp('tcClockOutBtn').enable();
            }    
          },
          params: { command: 'isClockedIn'}
        });        
        
      }
         
      allow = SchoolDynamics.isAccessible("TimeClock Editing Form");
      parentitem = panel.items.itemAt(0).getTopToolbar();
      parentitem.items.item('mng_timeclock')[allow?'show':'hide'](); 
      parentitem.items.item('mng_seperator')[allow?'show':'hide']();
      toolsPanel = Ext.getCmp('tools-panel');
      toolsPanel[allow?'expand':'collapse'](); 
      toolsPanel[allow?'show':'hide']();
      
      
      
    }
  },
  startClock : function(datetime) {
      time = new Date(datetime.trim());
      Ext.TaskMgr.start({
          run: function(){
                  time = new Date(time.getTime() + 1000);
                  Ext.fly('tdate').update(time.format('m/d/Y'));
                  Ext.fly('clock').update(time.format('g:i A'));
              },
          interval: 1000
      });    
  },
  resetAll : function(){
    Ext.getCmp('tcStaffMember').clearValue();
    Ext.getCmp('tcPassword').reset()
    Ext.getCmp('tcClockInBtn').disable();
    Ext.getCmp('tcClockOutBtn').disable();
    Ext.getCmp('tcClassification').clearValue();
    Ext.getCmp('tcViewHoursBtn').disable();
    Ext.getCmp('tcAbsentBtn').disable();
    Ext.getCmp('tcAdjustBtn').disable();

  }
}