SD.addPage('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) {
				jsLoader.load('main_menu/' + modulizerPath + '/timeclock_hours_module.js');
				jsLoader.loadedCall(
				function() {
					SD.timeClock.hours.display();
				});
			}
		},
		{
			text: 'Report an absence',
			iconCls: 'clock_red',
			id: 'tcAbsentBtn',
			style: 'margin-left: 5px;',
			disabled: true,
			handler: function(btn) {
				jsLoader.load('main_menu/' + modulizerPath + '/timeclock_absence_popup.js');
				jsLoader.loadedCall(
				function() {
					SD.timeClock.absence.display();
				});
			}
		},
		{
			text: 'Request a time adjustment',
			iconCls: 'clock_error',
			id: 'tcAdjustBtn',
			style: 'margin-left: 5px;',
			disabled: true,
			handler: function(btn) {
				jsLoader.load('main_menu/' + modulizerPath + '/timeclock_adjustment_module.js');
				jsLoader.loadedCall(
				function() {
					SD.timeClock.adjustment.display();
				});
			}
		},
		{
			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() {
				jsLoader.load('main_menu/' + modulizerPath + '/timeclock_management_module.js');
				jsLoader.loadedCall(
				function() {
					SD.timeClock.manage.display();
				});
			}
		}],
		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,
		hidden: (Ext.isSafariMobile != undefined ? Ext.isSafariMobile : false),
		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_management');
			parentitem = panel.items.itemAt(0).getTopToolbar();
			parentitem.items.item('mng_timeclock')[allow ? 'show' : 'hide']();
			parentitem.items.item('mng_seperator')[allow ? 'show' : 'hide']();
			toolsPanel = SD.viewport.items.items[3];
			toolsPanel[allow ? 'show' : 'hide']();
			SD.viewport.doLayout();
		}
	},
	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();
	}
},
{
	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) {
				jsLoader.load('main_menu/' + modulizerPath + '/timeclock_timezone.js');
				jsLoader.loadedCall(
				function() {
					SD.timeClock.timeZone.display();
				});
			}
		}]
	}]
});