SD.teacherTools.addPage('attendance', {
	id: 'attendance-panel',
	layout: "border",
	border: false,
	items: [{
		region: "north",
		title: "Attendance",
		border: true,
		xtype: 'form',
		id: 'takeAttendance',
		layout: 'fit',
		height: 300,
		split: true,
		tbar: {
			xtype: 'toolbar',
			id: 'takeAttendanceOptions',
			items: [{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'label',
				text: 'Time period:'
			},
			{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'combo',
				width: 80,
				mode: 'local',
				typeAhead: false,
				triggerAction: 'all',
				id: 'attendanceby',
				store: new Ext.data.ArrayStore({
					fields: ['Attendancetype']
				}),
				displayField: 'Attendancetype',
				listeners: {
					select: function(combobox, record, index) {
						var courseCombo = Ext.getCmp('attendancecourse');
						var attendanceCard = Ext.getCmp('attendanceCard');
						var attendanceGrid = Ext.getCmp('takeAttendanceGrid');
						var gridstore = attendanceGrid.store;
						var cardLayout = attendanceCard.getLayout();
						if (record.data.Attendancetype == "Daily") {
							courseCombo.hide();
							gridstore.baseParams.command = 'takeDailyAttendance';
							if (typeof cardLayout != 'string') cardLayout.setActiveItem(0);
						} else {
							courseCombo.show();
							gridstore.baseParams.command = 'takePeriodAttendance';
							gridstore.baseParams.courseid = courseCombo.getValue();
							Ext.getCmp('periodAttendanceGrid').store.baseParams.date = Ext.getCmp('todaydate').value;
							if (typeof cardLayout != 'string') cardLayout.setActiveItem(1);
						}
						gridstore.removeAll();
						gridstore.load();
					}
				}
			},
			{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'tbseparator'
			},
			{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'label',
				text: 'Date:'
			},
			{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'datefield',
				width: 100,
				id: 'todaydate',
				listeners: {
					setValue: function(datefield, newvalue, oldvalue) {
						Ext.getCmp('takeAttendanceGrid').store.baseParams.date = datefield.value;
					}
				}
			},
			{
				xtype: 'tbspacer',
				width: 5
			},
			{
				xtype: 'tbseparator',
				id: 'attendancecourseseperator',
				hidden: true
			},
			{
				xtype: 'tbspacer',
				width: 5,
				id: 'attendancecoursespacer1'
			},
			{
				xtype: 'label',
				text: 'Course:',
				id: 'attendancecourselabel',
				hidden: true
			},
			{
				xtype: 'tbspacer',
				width: 5,
				id: 'attendancecoursespacer2'
			},
			new SchoolDynamics.coursesCombo({
				id: 'attendancecourse',
				hidden: true,
				listeners: {
					select: function(combo, record, index) {
						var gridstore = Ext.getCmp('takeAttendanceGrid').store;
						var periodAttendanceGrid = Ext.getCmp('periodAttendanceGrid');
						gridstore.baseParams.command = 'takePeriodAttendance';
						gridstore.baseParams.courseid = Ext.getCmp('attendancecourse').getValue();
						periodAttendanceGrid.store.baseParams.courseid = this.getValue();
						gridstore.load();
						periodAttendanceGrid.store.load();
					},
					hide: function(combo) {
						Ext.getCmp('attendancecourseseperator').hide();
						Ext.getCmp('attendancecoursespacer1').hide();
						Ext.getCmp('attendancecourselabel').hide();
						Ext.getCmp('attendancecoursespacer2').hide();
					},
					show: function(combo) {
						Ext.getCmp('attendancecourseseperator').show();
						Ext.getCmp('attendancecoursespacer1').show();
						Ext.getCmp('attendancecourselabel').show();
						Ext.getCmp('attendancecoursespacer2').show();
					}
				}
			})]
		},
		items: new takeAttendanceGrid(),
		markStudent: function(periodCommand, dailyCommand) {
			var isPeriod = Ext.getCmp('attendanceby').getValue() == "Period";
			var courseID = '';
			if (isPeriod) {
				var courseCombo = Ext.getCmp('attendancecourse');
				var courseComboRec = courseCombo.store.getAt(courseCombo.store.findExact("courseid", courseCombo.getValue()));
				courseID = courseComboRec.data.courseid;
			}
			var takeAttendanceGrid = Ext.getCmp('takeAttendanceGrid');
			var periodAttendance = Ext.getCmp('periodAttendanceGrid');
			var selections = takeAttendanceGrid.selModel.selections.items;
			var stuIDs = [];
			for (i = 0; i < selections.length; i++) {
				stuIDs.push(selections[i].data.studentid);
			}
			Ext.Ajax.request({
				url: 'teacher_tools/attendance_data.json.php',
				method: 'POST',
				params: {
					command: ((isPeriod) ? periodCommand : dailyCommand),
					stuids: Ext.encode(stuIDs),
					date: Ext.getCmp('todaydate').value,
					courseid: courseID
				},
				success: function() {},
				failure: function() {
					Ext.Msg.alert('Error', 'Unable to mark student.');
				}
			});
			takeAttendanceGrid.selModel.clearSelections(true);
			takeAttendanceGrid.getView().refresh();
			//Ext.getCmp('dailyAttendanceGrid').store.load();
			if (isPeriod) {
				periodAttendance.store.load();
			} else {
				Ext.getCmp('dailyAttendanceGrid').store.load();
			}
		},
		bbar: [{
			xtype: 'tbfill'
		},
		{
			text: 'Absent',
			iconCls: 'status_busy',
			listeners: {
				click: function(button) {
					this.ownerCt.ownerCt.markStudent('markperiodabsent', 'markabsent');
				}
			}
		},
		{
			text: 'Tardy',
			iconCls: 'status_away',
			listeners: {
				click: function(button) {
					this.ownerCt.ownerCt.markStudent('markperiodtardy', 'marktardy');
				}
			}
		},
		{
			text: 'Check Out',
			iconCls: 'status_out',
			listeners: {
				click: function(button) {
					this.ownerCt.ownerCt.markStudent('markperiodcheckout', 'markcheckout');
				}
			}
		}]
	},
	{
		region: "center",
		border: true,
		id: 'attendanceCard',
		layout: 'card',
		deferredRender: false,
		layoutOnCardChange: true,
		activeItem: 0,
		items: [
		new dailyAttendanceGrid(), new periodAttendanceGrid()],
		listeners: {
			afterrender: function(card) {
				if (Ext.getCmp('attendanceby').getValue() == "Daily") {
					card.getLayout().setActiveItem(0);
				} else {
					card.getLayout().setActiveItem(1);
				}
			}
		}
	}],
	listeners: {
		render: function(panel) {},
		show: function(panel) {
			var timePeriodCombo = Ext.getCmp('attendanceby');
			if (SchoolDynamics.isAccessible('attendance_editDaily') || SchoolDynamics.isAccessible('attendance_takeDaily')) {
				if (timePeriodCombo.store.find('Attendancetype', 'Daily') == -1) {
					timePeriodCombo.store.add(new Ext.data.Record({
						Attendancetype: 'Daily'
					}));
				}
			}
			if (SchoolDynamics.isAccessible('attendance_editPeriod') || SchoolDynamics.isAccessible('attendance_takePeriod')) {
				if (timePeriodCombo.store.find('Attendancetype', 'Period') == -1) {
					timePeriodCombo.store.add(new Ext.data.Record({
						Attendancetype: 'Period'
					}));
				}
			}
			if (timePeriodCombo.store.data.items.length > 0) {
				timePeriodCombo.setValue(timePeriodCombo.store.data.items[0].data.Attendancetype);
			}
			var dailyPicker = Ext.getCmp('todaydate');
			var selDate = dailyPicker.getValue();
			var periodGrid = Ext.getCmp('periodAttendanceGrid');
			var takeGrid = Ext.getCmp('takeAttendanceGrid');
			if (selDate == '' || (selDate.format('m/d/Y') != new Date().format('m/d/Y'))) {
				dailyPicker.setValue(new Date());
				Ext.getCmp('periodDate').setValue(new Date());
				takeGrid.store.load();
			}
			var courseCombo = Ext.getCmp('attendancecourse');
			if (courseCombo.store.find('courseid', courseCombo.getValue()) == -1 && courseCombo.getValue() != '') {
				var isPeriod = timePeriodCombo.getValue() == "Period";
				courseCombo.clearValue();
				if (isPeriod) {
					takeGrid.store.removeAll(true);
					takeGrid.store.fireEvent('datachanged', takeGrid);
					periodGrid.store.removeAll(true);
					periodGrid.store.fireEvent('datachanged', periodGrid);
				} else {
					takeGrid.store.load();
				}
			}
			timePeriodCombo.fireEvent('select', timePeriodCombo, timePeriodCombo.store.data.items[0], 0);
		}
	}
},
{
	regionTitle: 'Seating Chart Tools',
	defaults: {
		autoHeight: true,
		cls: 'toolbox',
		frame: true
	},
	items: [{
		title: 'Extended Access',
		tools: [{
			id: 'help',
			handler: function(btn) {
				helppopup.loadHelpFile("Supervise", 500, 455);
			}
		}],
		items: [{
			xtype: 'toolboxtext',
			iconCls: 'magnifier',
			text: 'View the following teacher:'
		},
		new SchoolDynamics.extendedAccessCombo({
			reshowPage: 'attendance-panel'
		})]
	}]
}
)