SD.timeClock.addPopup('manage', new Ext.Window({
	title: 'Time Clock Management',
	width: 750,
	height: 497,
	autoScroll: false,
	bodyStyle: 'background-color: white;',
	modal: true,
	resizable: false,
	closeAction: 'hide',
	items: [{
		xtype: 'tabpanel',
		activeTab: 2,
		border: false,
		autoHeight: true,
		autoScroll: false,
		items: [{
			xtype: 'panel',
			title: 'Time Sheet',
			id: 'timeSheet',
			autoScroll: false,
			autoHeight: true,
			tbar: {
				xtype: 'toolbar',
				style: 'padding-left: 5px; padding-right: 5px;',
				id: 'timeSheetTB',
				items: [{
					xtype: 'label',
					text: 'Filter by date:',
					style: 'margin-left: 5px;'
				},
				{
					xtype: 'datefield',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;',
					id: 'timeSheetFilterFrom',
					listeners: {
						select: function() {
							this.blur();
						},
						blur: function() {
							dateTo = Ext.getCmp('timeSheetFilterTo');
							if (typeof dateTo.getValue() == 'string' || this.getValue() > dateTo.getValue()) {
								dateTo.setValue(this.getValue());
							}
							Ext.getCmp('timeSheetGrid').doFilter(this.getValue(), dateTo.getValue(), Ext.getCmp('timeSheetSearch').getValue());
						}
					}
				},
				{
					xtype: 'tbspacer',
					style: 'margin-right: 10px;'
				},
				{
					xtype: 'label',
					text: 'to'
				},
				{
					xtype: 'datefield',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;',
					id: 'timeSheetFilterTo',
					listeners: {
						select: function() {
							this.blur();
						},
						blur: function() {
							dateFrom = Ext.getCmp('timeSheetFilterFrom');
							Ext.getCmp('timeSheetGrid').doFilter(dateFrom.getValue(), this.getValue(), Ext.getCmp('timeSheetSearch').getValue());
						}
					}
				},
				{
					xtype: 'tbseparator',
					style: 'margin-left: 5px;'
				},
				{
					xtype: 'button',
					text: 'Delete record',
					iconCls: 'delete',
					style: 'margin-left: 5px;',
					id: 'deleteRecord',
					handler: function() {
						timeSheetGrid = Ext.getCmp('timeSheetGrid');
						sm = timeSheetGrid.getSelectionModel();
						recsToDelete = sm.getSelections();
						timeSheetGrid.store.remove(recsToDelete);
						timeSheetGrid.store.save();
						timeSheetGrid.store.reload();
					}
				},
				{
					xtype: 'tbfill'
				},
				{
					xtype: 'tbtext',
					text: 'Search:'
				},
				new Ext.app.SearchField({
					width: 150,
					id: 'timeSheetSearch'
				})]
			},
			items: [
			new timeclockManagementTimesheetGrid()],
			bbar: {
				xtype: 'paging',
				id: 'timesheetPageTB',
				pageSize: 15
			},
			listeners: {
				show: function() {
					Ext.getCmp('timeSheetGrid').store.load();
				},
				render: function() {
					Ext.getCmp('timesheetPageTB').bindStore(Ext.getCmp('timeSheetGrid').store)
					Ext.getCmp('timeSheetSearch').store = Ext.getCmp('timeSheetGrid').store;
				},
				hide: function() {
					Ext.getCmp('timeSheetGrid').store.save();
				}
			}
		},
		{
			xtype: 'panel',
			title: 'Absences',
			autoHeight: true,
			autoScroll: true,
			id: 'absences',
			tbar: {
				xtype: 'toolbar',
				style: 'padding-left: 5px; padding-right: 5px;',
				id: 'absenceTB',
				items: [{
					xtype: 'label',
					text: 'Filter by date:',
					style: 'margin-left: 5px;'
				},
				{
					xtype: 'datefield',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;',
					id: 'absencesFilterFrom',
					listeners: {
						select: function() {
							this.blur();
						},
						blur: function() {
							dateTo = Ext.getCmp('absencesFilterTo');
							if (typeof dateTo.getValue() == 'string' || this.getValue() > dateTo.getValue()) {
								dateTo.setValue(this.getValue());
							}
							Ext.getCmp('absencesGrid').doFilter(this.getValue(), dateTo.getValue(), Ext.getCmp('absenceSearch').getValue());
						}
					}
				},
				{
					xtype: 'tbspacer',
					style: 'margin-right: 10px;'
				},
				{
					xtype: 'label',
					text: 'to'
				},
				{
					xtype: 'datefield',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;',
					id: 'absencesFilterTo',
					listeners: {
						select: function() {
							this.blur();
						},
						blur: function() {
							dateFrom = Ext.getCmp('absencesFilterFrom');
							Ext.getCmp('absencesGrid').doFilter(dateFrom.getValue(), this.getValue(), Ext.getCmp('absenceSearch').getValue());
						}
					}
				},
				{
					xtype: 'tbfill'
				},
				{
					xtype: 'tbtext',
					text: 'Search:'
				},
				new Ext.app.SearchField({
					width: 150,
					id: 'absenceSearch'
				})]
			},
			items: [{
				xtype: 'grid',
				height: 354,
				border: false,
				header: false,
				titleCollapse: true,
				enableColumnHide: false,
				enableColumnMove: false,
				stripeRows: true,
				autoExpandColumn: 'absenceReason',
				id: 'absencesGrid',
				columns: [{
					xtype: 'gridcolumn',
					header: 'Date of absence',
					sortable: true,
					resizable: true,
					width: 100,
					dataIndex: 'date',
					fixed: true,
					id: 'absenceDate'
				},
				{
					xtype: 'gridcolumn',
					header: 'Staff ID',
					sortable: true,
					resizable: true,
					width: 70,
					dataIndex: 'staffID',
					fixed: true,
					id: 'absenceStaffID'
				},
				{
					xtype: 'gridcolumn',
					header: 'Staff Name',
					sortable: true,
					resizable: true,
					width: 160,
					dataIndex: 'name',
					id: 'absenceStaffName'
				},
				{
					xtype: 'gridcolumn',
					header: 'Reason',
					sortable: true,
					resizable: true,
					dataIndex: 'reason',
					id: 'absenceReason'
				}],
				store: new Ext.data.Store({
					url: 'main_menu/timeclock_data.json.php',
					baseParams: {
						command: 'getAbsences',
						start: 0,
						limit: 15
					},
					reader: new Ext.data.JsonReader({
						root: 'absences'
					}, [{
						name: 'date'
					},
					{
						name: 'staffID'
					},
					{
						name: 'name'
					},
					{
						name: 'reason'
					}]),
					autoLoad: false,
					xtype: 'store'
				}),
				doFilter: function(dateFrom, dateTo, searchCriteria) {
					abStore = Ext.getCmp('absencesGrid').store;
					params = {
						command: 'getAbsences',
						start: 0,
						limit: 15,
						beginDate: (typeof dateFrom != 'string') ? dateFrom.format("m/d/Y") : '',
						endDate: (typeof dateTo != 'string') ? dateTo.format("m/d/Y") : '',
						searchcriteria: searchCriteria
					};
					filtersChanged = (abStore.baseParams.beginDate != params.beginDate || abStore.baseParams.endDate != params.endDate || abStore.baseParams.searchcriteria != params.searchcriteria);
					if ((dateTo >= dateFrom && filtersChanged) || ((typeof dateTo == 'string' || typeof dateFrom == 'string') && filtersChanged)) {
						abStore.baseParams = params;
						abStore.load();
					}
				}
			}],
			bbar: {
				xtype: 'paging',
				id: 'absencePageTB',
				pageSize: 15
			},
			listeners: {
				show: function() {
					Ext.getCmp('absencesGrid').store.load();
				},
				render: function() {
					Ext.getCmp('absencePageTB').bindStore(Ext.getCmp('absencesGrid').store)
					Ext.getCmp('absenceSearch').store = Ext.getCmp('absencesGrid').store;
				}
			}
		},
		{
			xtype: 'panel',
			title: 'Approvals',
			autoHeight: true,
			autoScroll: true,
			tbar: {
				xtype: 'toolbar',
				style: 'padding-left: 5px; padding-right: 5px;',
				defaults: {
					style: 'margin-left: 5px;'
				},
				items: [{
					xtype: 'splitbutton',
					text: 'Approve',
					iconCls: 'check',
					menu: {
						xtype: 'menu',
						items: [{
							xtype: 'menuitem',
							text: 'Approve and reply',
							iconCls: 'check_mail'
						}]
					},
					handler: function() {
						approvalGrid = Ext.getCmp('approvalGrid');
						sm = approvalGrid.getSelectionModel();
						recs = sm.getSelections();
						adjustmentRecs = [];
						absentRecs = [];
						for (i = 0; i < recs.length; i++) {
							if (recs[i].data.type == 'time adjustment') {
								adjustmentRecs.push(recs[i].data);
							} else {
								absentRecs.push(recs[i].data);
							}
						}
						if (adjustmentRecs.length != 0) {
							Ext.Ajax.request({
								url: 'main_menu/timeclock_data.json.php',
								success: function() {},
								failure: function() {},
								params: {
									command: 'approveAdjustments',
									records: Ext.encode(adjustmentRecs)
								}
							});
						}
						if (absentRecs.length != 0) {
							Ext.Ajax.request({
								url: 'main_menu/timeclock_data.json.php',
								success: function() {},
								failure: function() {},
								params: {
									command: 'approveAbsences',
									records: Ext.encode(absentRecs)
								}
							});
						}
						approvalGrid.store.remove(recs);
					}
				},
				{
					xtype: 'splitbutton',
					text: 'Reject',
					iconCls: 'cross',
					menu: {
						xtype: 'menu',
						items: [{
							xtype: 'menuitem',
							text: 'Reject and reply',
							iconCls: 'cross_mail'
						}]
					},
					handler: function() {
						approvalGrid = Ext.getCmp('approvalGrid');
						sm = approvalGrid.getSelectionModel();
						recs = sm.getSelections();
						adjustmentRecs = [];
						absentRecs = [];
						for (i = 0; i < recs.length; i++) {
							if (recs[i].data.type == 'time adjustment') {
								adjustmentRecs.push(recs[i].data);
							} else {
								absentRecs.push(recs[i].data);
							}
						}
						if (adjustmentRecs.length != 0) {
							Ext.Ajax.request({
								url: 'main_menu/timeclock_data.json.php',
								success: function() {},
								failure: function() {},
								params: {
									command: 'rejectAdjustments',
									records: Ext.encode(adjustmentRecs)
								}
							});
						}
						if (absentRecs.length != 0) {
							Ext.Ajax.request({
								url: 'main_menu/timeclock_data.json.php',
								success: function() {},
								failure: function() {},
								params: {
									command: 'rejectAbsences',
									records: Ext.encode(absentRecs)
								}
							});
						}
						approvalGrid.store.remove(recs);
					}
				}]
			},
			items: [
			new timeclockManagementApprovalsGrid()],
			listeners: {
				show: function() {
					Ext.getCmp('approvalGrid').store.load();
				}
			}
		},
		{
			xtype: 'panel',
			title: 'Log',
			autoScroll: true,
			autoHeight: true,
			border: false,
			id: 'adminLog',
			tbar: {
				xtype: 'toolbar',
				style: 'padding-left: 5px; padding-right: 5px;',
				id: 'logTB',
				items: [{
					xtype: 'label',
					text: 'Filter by date:',
					style: 'margin-left: 5px;'
				},
				{
					xtype: 'datefield',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;',
					id: 'logDateFilter',
					listeners: {
						select: function() {
							this.blur();
						},
						blur: function() {
							logStore = Ext.getCmp('logGrid').store;
							if (typeof this.getValue() != 'string') {
								logStore.baseParams.date = this.getValue().format("m/d/Y");
								logStore.load();
							} else if (typeof this.getValue() == 'string' && this.getValue() == '') {
								logStore.baseParams.date = '';
								logStore.load();
							}
						}
					}
				}]
			},
			items: new timeclockManagementLogGrid(),
			bbar: {
				xtype: 'paging',
				id: 'logPageTB',
				pageSize: 15
			},
			listeners: {
				render: function() {
					Ext.getCmp('logPageTB').bindStore(Ext.getCmp('logGrid').store)
				},
				show: function() {
					Ext.getCmp('logGrid').store.load();
				}
			}
		}]
	}],
	fbar: {
		xtype: 'toolbar',
		items: [{
			xtype: 'button',
			text: 'Close',
			handler: function() {
				Ext.getCmp('timeSheetGrid').store.save();
				this.ownerCt.ownerCt.hide();
			}
		}]
	}
})
);