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"],
					["Class attendance by period", "students"],
					["All attendance by period", "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: [{
			xtype: 'tbfill'
		},
		{
			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);