SD.timeClock.addPopup('timeZone', new Ext.Window({
	layout: 'fit',
	title: 'School Time Zone Setup',
	width: 400,
	height: 190,
	closeAction: 'hide',
	modal: true,
	plain: true,
	items: [{
		xtype: 'form',
		id: 'tcTzForm',
		cls: 'formpadding',
		border: false,
		defaults: {
			style: {
				marginBottom: '5px'
			}
		},
		items: [{
			html: '<p style="font-size: 12; width: 100%; font-weight: bold">Choose your time zone:</p>',
			border: false
		},
		{
			xtype: 'combo',
			fieldLabel: 'Select a region',
			mode: 'local',
			typeAhead: false,
			name: 'region',
			id: 'tcTzRegionCombo',
			anchor: '100%',
			triggerAction: 'all',
			displayField: 'region',
			store: new Ext.data.ArrayStore({
				fields: ['region'],
				data: [
					['Africa'],
					['America'],
					['Antarctica'],
					['Arctic'],
					['Asia'],
					['Atlantic'],
					['Australia'],
					['Europe'],
					['Indian'],
					['Pacific']
				]
			}),
			listeners: {
				select: function(c, r, i) {
					tcTz = Ext.getCmp('tcTzLocCombo');
					tcTz.store.baseParams.region = r.data.region;
					tcTz.store.load();
				}
			}
		},
		{
			xtype: 'combo',
			id: 'tcTzLocCombo',
			name: 'location',
			anchor: '100%',
			fieldLabel: 'Select a location',
			valueField: 'location',
			displayField: 'locationDisplay',
			typeAhead: false,
			triggerAction: 'all',
			store: new Ext.data.Store({
				url: 'main_menu/timeclock_data.json.php',
				baseParams: {
					command: 'getLocations'
				},
				autoLoad: false,
				reader: new Ext.data.JsonReader({
					root: 'locations'
				}, ['location', 'locationDisplay'])
			})
		}]
	}],
	buttons: [{
		text: 'Submit',
		handler: function() {
			if (TimeZone.setTimeZone(Ext.getCmp('tcTzLocCombo').getValue())) {
				treePanel = Ext.getCmp('tree-panel');
				treenode = treePanel.getRootNode().findDescendant('id', 'timeclock');
				treePanel.fireEvent('click', treenode, null, null, true);
				this.ownerCt.ownerCt.hide();
			}
		}
	},
	{
		text: 'Close',
		handler: function(btn) {
			this.ownerCt.ownerCt.hide();
		}
	}],
	listeners: {
		show: function(panel) {
			var location = TimeZone.getTimeZone();
			if (location != null) {
				var region = location.split("/")[0];
				Ext.getCmp('tcTzRegionCombo').setValue(region);
				Ext.getCmp('tcTzLocCombo').setValue(location);
			}
		}
	}
})
);