var dt = null;
	var dt2 = null;
	
	Date.patterns = {
		ISO8601Long:"Y-m-d H:i:s",
		ISO8601Short:"Y-m-d",
		ShortDate: "n/j/Y",
		LongDate: "l, F d, Y",
		FullDateTime: "l, F d, Y g:i:s A",
		MonthDay: "F d",
		ShortTime: "g:i A",
		LongTime: "g:i:s A",
		SortableDateTime: "Y-m-d\\TH:i:s",
		UniversalSortableDateTime: "Y-m-d H:i:sO",
		YearMonth: "F, Y"
	};

	var current_action = null;

	var workoutDetailsForm = new Ext.FormPanel({
		id: 'workoutDetailsForm',
		layout: 'form',
		frame: true,
		items: [{
					xtype: 'datefield',
					name: 'workdate',
					id: 'workdate',
					fieldLabel: 'Work Date',
					value: ''
				},
				{
					xtype: 'textfield',
					name: 'swim',
					id: 'swim',
					fieldLabel: 'Swim distance',
					value: ''
				},
				{
					xtype: 'textfield',
					name: 'bike',
					id: 'bike',
					fieldLabel: 'Bike distance',
					value: ''
				},
				{
					xtype: 'textfield',
					name: 'run',
					id: 'run',
					fieldLabel: 'Run distance',
					value: ''
				},
				{
					xtype: 'numberfield',
					name: 'id',
					id: 'id',
					hidden: true
				}
		]
	});
	
	var workoutDetailsWindow = new Ext.Window({
		id: 'workoutDetailsWindow',
		title:'Workout Details',
		//height: 300,
		width:300,
		closable: true,
		closeAction: 'hide',
		animateTarget: 'tl_Grid',
		items: [workoutDetailsForm],
		bbar: {
			items: [
					{
					//	text: 'Add New Workout',
					//	handler: function() {
					//		workoutDetailsForm.getForm().reset();
					//		workoutDetailsWindow.hide();
					//	}
					//},
					//'-',
					//{
						text: 'Save',
						handler: function() {
					//alert( Ext.getCmp('curraction').value );
							workoutDetailsForm.getForm().submit({
								url: 'traininglog_updWorkout.php?current_action='+current_action,
								clientValidation: true,
								waitMsg: 'Saving changes',
								success: function(form, action) {
									tl_Store.reload();
								//   Ext.Msg.alert('Success', action.result.msg);
								},
								failure: function(form, action) {
								/*
									switch (action.failureType) {
										case Ext.form.Action.CLIENT_INVALID:
											Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
											break;
										case Ext.form.Action.CONNECT_FAILURE:
											Ext.Msg.alert('Failure', 'Ajax communication failed');
											break;
										case Ext.form.Action.SERVER_INVALID:
										   Ext.Msg.alert('Failure', action.result.msg);
								   }
								*/
								}
							});
							workoutDetailsWindow.hide();
						}
					},
					'-',
					{
						text: 'Cancel',
						handler: function() {
							workoutDetailsWindow.hide();
						}
					}
			]
		}
	});


	var tl_reader = new Ext.data.JsonReader({
		idProperty: 'fid',
		root: 'traininglog',
		fields: ['id','workdate','swim','bike','run','eventdate','event']
	});

	// create the data store
	var tl_Store = new Ext.data.Store({
		url: 'traininglog_getList.php',
		reader: tl_reader,
		idIndex: 0 // id for each record will be the first element
	});

	var tl_Bbar = new Ext.Toolbar({
		//disabled: true,
		items: [
			'->', // right-justify remaining components 
			{
				text: 'New',
				id: 'tl_Bbar_New',
				icon: 'images/famfam/icons/add.png',
				tooltip: 'Create a new log item',
				handler: function() {
					workoutDetailsWindow.setTitle('New Workout Details Record');
					workoutDetailsForm.getForm().reset();
					current_action = 'insert';
					//current_action = 'insert';
					workoutDetailsWindow.show();
					//Ext.Msg.alert(' ','New button clicked');
					
				},
				disabled: true
			},
			'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
			{
				text: 'Delete',
				id: 'tl_Bbar_Delete',
				icon: 'images/famfam/icons/delete.png',
				tooltip: 'Delete highlighted log item',
				handler: function() {
					Ext.Msg.alert(' ','Delete button clicked');
					current_action = 'delete';
				},
				disabled: true
			}
		]
	});

	function deriveDayName(val, x, store) {
		dt = Date.parseDate(val, "Y-m-d");
		return dt.format('D');	
	};
	function fmt_date(val, x, store) {
		dt2 = Date.parseDate(val, "Y-m-d");
		return dt2.format('m.j.Y');	
		//return dt.format('D, M j, Y');	
	};

    // create the Grid
    var tl_Grid = new Ext.grid.GridPanel({
		id : 'tl_Grid',
        //title: 'Training Log',
		//renderTo: document.body,
		height:175,
		width:293,
        store: tl_Store,
        columns: [
		    {header: "ID", dataIndex: 'id', hidden: true },
            //{header: 'Date', width:80, dataIndex: 'workdate', align: 'center', renderer: fmt_date},
            //{header: 'Date', width:105, dataIndex: 'workdate', renderer: applyFormat},
            {header: 'Day', width:40, dataIndex: 'workdate', renderer: deriveDayName, align: 'center'},
            {header: 'Date', width:65, dataIndex: 'workdate', renderer: fmt_date, align: 'center'},
            {header: 'Swim', width:60, dataIndex: 'swim', align: 'center'},
            {header: 'Bike', width:60, dataIndex: 'bike', align: 'center'},
            {header: 'Run',  width:60, dataIndex: 'run',  align: 'center'}

        ],
        stripeRows: true,
        // config options for stateful behavior
        //stateful: true,
        stateId: 'grid',
		//hideHeaders: true,
		forceFit: true,
		bbar: tl_Bbar,
		viewConfig: {
			forceFit: true,
			//showPreview: false, // custom property
			enableRowBody: true, // required to create a second, full-width row to show expanded Record data
			getRowClass: function(record, rowIndex, rowParams, dataStore) {
				if (record.data.workdate == record.data.eventdate) {
					 rowParams.body = '<span class="grid_highlight_rowbody" style="padding:0 0 0 20px">'+record.data.event+'</span>';
					//rowParams.body = '<span class="orange" style="padding:0 0 0 20px">'+record.data.event+'</span>';
					return 'grc_class'; 
				} else {
					if (record.data.workdate === '2010-01-24') {
						rowParams.body = '<span class="grid_highlight_rowbody" style="padding:0 0 0 20px">USMS One-Hour Postal Swim</span>';
						return 'grc_class'; 
					} else {
						rowParams.body = '';
						return '';
					}
				}
				/*
				if (record.data.workdate === '2010-05-23') {
					rowParams.body = '<span class="grid_highlight_rowbody" style="padding:0 0 0 20px">Columbia Triathlon</span>';
					return 'grc_class'; 
				} else {
					if (record.data.workdate === '2010-06-20') {
						rowParams.body = '<span class="grid_highlight_rowbody" style="padding:0 0 0 20px">Tri-To-Win Triathlon</span>';
						return 'grc_class'; 
					} else {
						if (record.data.workdate === '2010-01-24') {
							rowParams.body = '<span class="grid_highlight_rowbody" style="padding:0 0 0 20px">USMS One-Hour Postal Swim</span>';
							return 'grc_class'; 
						} else {
							rowParams.body = '';
							return '';
						}
					}
				}
				*/
			}
		},
		sm: new Ext.grid.RowSelectionModel({
			singleSelect: true,
			listeners: {
				rowselect: function(sm, row, rec) {
					if (buzzwashere.allow_grid_selection) {
						var win = Ext.getCmp('workoutDetailsWindow');
						win.setTitle('Workout Details');
						if (win.hidden) {
							win.show();
						}
						//var form = Ext.getCmp('workoutDetailsForm');
						//form.getForm().load({
						workoutDetailsForm.getForm().load({
							url: 'traininglog_getWorkout.php',
							params: {id:rec.data.id}
							//params: {id:4},
							//waitMsg: 'Loading'
							//method: 'GET'
						});
						//Ext.getCmp('curraction').value = 'update';
						current_action = 'update';
					}					
				//	alert( Ext.getCmp('curraction').value );
				}
			}
		})
    });

	tl_Store.load();

    // render the grid to the specified div in the page
    //grid.render('grid-example');
	tl_Grid.show();