periodAttendanceGrid = function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
  
   var colReason = new Ext.form.ComboBox({ allowBlank: false, displayField:'reasons', valueField:'reasonid', typeAhead: true, triggerAction: 'all', editable: false,
          store: reasonstore
   });
   var colExcused = new Ext.form.ComboBox({ allowBlank: false, displayField:'excusable', mode: 'local', valueField:'excusable', typeAhead: true, triggerAction: 'all', 
      store: new Ext.data.SimpleStore({ fields: ['excusable'], data: [['Excused'], ['Unexcused']] })
   });
   var colStatus = new Ext.form.ComboBox({ allowBlank: false, displayField:'status', mode: 'local', valueField:'status', typeAhead: true, triggerAction: 'all', 
      store: new Ext.data.SimpleStore({ fields: ['status'], data: [['Absent'], ['Tardy'], ['Checkout']] })       
   });     
     
    var columns = [
        sm,
        {header: "Student Name", width: 120, sortable: true, menuDisabled: true, dataIndex: 'student', renderer: QTipRenderer},
        {header: "Period", width: 74, sortable: true, dataIndex: 'period'},
        {header: "Status", width: 300, sortable: true, menuDisabled: true, dataIndex: 'status', editor: colStatus, renderer: comboBoxRenderer(colStatus)},
        {header: "Excusable", width: 75, sortable: true, menuDisabled: true,  dataIndex: 'excusable', editor: colExcused, renderer: comboBoxRenderer(colExcused)},
        {header: "Reason", width: 75, id: 'periodReasonCol',sortable: false, menuDisabled: true, dataIndex: 'reasonid', editor: colReason, renderer: comboBoxRenderer(colReason)},
        {header: "Out", width: 100, sortable: false, menuDisabled: true, dataIndex: 'out', editor: new Ext.ux.TimeSpinner()},
        {header: "In", width: 100, sortable: false, menuDisabled: true, dataIndex: 'in', editor: new Ext.ux.TimeSpinner()}
        
    ];
      
    periodAttendanceGrid.superclass.constructor.call(this, {
        title:"Period Attendance Information",
        tbar: [
            {
                xtype: 'tbspacer',
                width: 5
            },             
            {
                xtype: 'label',
                text: 'Date:'
            },
            {
                xtype: 'tbspacer',
                width: 5
            },        
            { 
                xtype: 'datefield', 
                width:100, 
                id: 'periodDate',
                listeners: {
                    setValue: function(datefield, newvalue, oldvalue){
                        periodAttendanceGrid = Ext.getCmp('periodAttendanceGrid');
                        periodAttendanceGrid.store.baseParams.date = datefield.value;
                        if (Ext.getCmp('attendancecourse').getValue() != '') {
                          periodAttendanceGrid.store.load();
                        }
                    }
                }
            },
            {
                xtype: 'tbspacer',
                width: 5
            },     
            {
                xtype: 'label',
                text: 'Show: '
            },
            {
                xtype: 'tbspacer',
                width: 5
            },                    
            {
                xtype: 'combo',
                id : 'periodAttendanceChoice',
                mode: 'local',
                typeAhead: false,
                triggerAction: 'all',
                store: new Ext.data.ArrayStore({
                    fields: ['option', 'type'],
                    data: [["only my class", "class"],["course student attendance", "students"],["all attendance", "all"]]
                }),
                displayField: 'option',
                valueField: 'type',
                listeners: {
                    select: function(combobox, record, index){
                      periodAttendanceGrid = Ext.getCmp('periodAttendanceGrid');
                      periodAttendanceGrid.store.baseParams.type = this.getValue();
                      periodAttendanceGrid.store.load();
                    },
                    render: function(){
                      this.setValue("class");
                    }
                }
            }
        ],
        store: new Ext.data.GroupingStore({
            url : 'teacher_tools/attendance_data.json.php',
            baseParams: {command: 'periodAttendance', type: 'class', date: new Date().format("m/d/Y")},
            groupField:'period',
            sortInfo:{field: 'period', direction: "asc"},
            reader: new Ext.data.JsonReader({root: 'periodAttendance'}, [
                  {name: 'id'},
                  {name: 'select'}, 
               	  {name: 'student'},
               	  {name: 'period'},
                  {name: 'status'}, 
                  {name: 'excusable'}, 
                  {name: 'reasonid'},
                  {name: 'out'},
                  {name: 'in'}, 
                  {name: 'studentid'}
              ]),
              writer: new Ext.data.JsonWriter({writeAllFields: false }),
              batch: true,
              autoLoad : false,
              listeners: {
                beforeload: function(){
                  colReason.store.clearFilter();
                },
                load: function(){
                  periodAttView = Ext.getCmp('periodAttendanceGrid').getView();
                  periodAttView.collapseAllGroups();                
                  this.period = this.reader.jsonData.period;
                  courseRecords = this.query('period', this.period);
                  if (courseRecords.length > 0){
                    periodAttView.toggleGroup(courseRecords.items[0]._groupId, true)
                  }
                }
                
              }              
        }),
        view: new Ext.grid.GroupingView({startCollapsed: true, hideGroupedColumn: true}),
        columns: columns,
        autoExpandColumn: 'periodReasonCol',
        sm:sm,
        border: false,
        layout: 'fit',
        autoScroll: true,  
        id: 'periodAttendanceGrid',
        bbar: [
          { text: 'Delete',
            iconCls: 'delete',
            listeners: {
              click: function(button){    
                periodGrid = Ext.getCmp('periodAttendanceGrid');
                periodGrid.store.autoSave = false;
                periodGrid.store.remove(periodGrid.selModel.getSelections());
                periodGrid.store.autoSave = true;
                periodGrid.store.save();
              }
            }
          }
        ],        
        listeners: {
          beforeedit: function(e){
           if (Ext.getCmp('periodAttendanceChoice').getValue() == "class"){
              if (e.field == "reasonid") {  
                //Set the correct reasons in the dropdown
                if (e.record.data.status == "Absent" || e.record.data.status == "Checkout") {
                  colReason.store.filter('type','Absent');
                } else if (e.record.data.status == "Tardy"){
                  colReason.store.filter('type','Tardy');
                }                
              } else if ((e.field == "out" && (e.record.data.status == "Absent" || e.record.data.status == "Tardy")) || (e.field == "in" && e.record.data.status == "Absent")) {  
                return false;
              }
            } else {
              return false;
            }
          },
          afteredit: function(e){
            colReason.store.clearFilter();
          }
        }
    });
}

Ext.extend(periodAttendanceGrid, Ext.grid.EditorGridPanel);