var reader = new Ext.data.JsonReader({
		idProperty: 'fid',
		root: 'fitevent',
		fields: ['event','eventdate','pic','city','state','weburl','swim_dist',
				 'swim_time','t1_time','bike_dist','bike_time','t2_time',
				 'run_dist','run_time','race_time','weburl_text','fundraiseUrl',
				 'fundraiseUrl_text','completed'
				 ]
	});

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

	// create the data store
    var fitGroupingStore = new Ext.data.GroupingStore({
		url: 'fitevents_json.php',
		reader: reader,
		sortInfo: { field: 'completed', direction: "asc" },
		groupField: 'completed'
	});							
	
	var months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	
	function fmt_event_description(val, x, store) {
		//var fmtd_date = '';
		var dayOfMonth = Ext.util.Format.substr(store.data.eventdate,8,2);
		//Ext.Msg.alert( 'dayOfMonth = ' + dayOfMonth);
		if (Ext.util.Format.substr(dayOfMonth,0,1) == '0') {
			dayOfMonth = Ext.util.Format.substr(dayOfMonth,1,1);
		}
		var fmtd_date = months[Ext.util.Format.substr(store.data.eventdate, 5, 2)-1] +
			//			' ' + Ext.util.Format.substr(store.data.eventdate, 8, 2) +
						' ' + dayOfMonth +
						', '+ Ext.util.Format.substr(store.data.eventdate, 0, 4);
		return '<span style="font-size:1.4em;font-weight:bold;">'+
				val+'</span><br />'+fmtd_date+'<br />'+
				store.data.city+', '+store.data.state+'<br />'+
				'<a href="'+store.data.weburl+'" target="_blank">'+
				store.data.weburl_text+'</a><br />'+
				'<a href="'+store.data.fundraiseUrl+'" target="_blank">'+
				store.data.fundraiseUrl_text+'</a>';
	}

	function fmt_stats(val, x, store) {
		return '<table width="98%" border="1" style="font-size:.7em;">'+
				'<tr align="center" style="font-weight:bold">'+
					'<td colspan="2">Swim</td>'+
					'<td>T1</td>'+
					'<td colspan="2">Bike</td>'+
					'<td>T2</td>'+
					'<td colspan="2">Run</td>'+
					'<td>Race</td>'+
				'</tr>'+
				'<tr align="center" style="font-weight:bold">'+
					'<td>Dist</td>'+
					'<td>Time</td>'+
					'<td>Time</td>'+
					'<td>Dist</td>'+
					'<td>Time</td>'+
					'<td>Time</td>'+
					'<td>Dist</td>'+
					'<td>Time</td>'+
					'<td>Time</td>'+
				'</tr>'+
				'<tr align="center">'+
					'<td>'+store.data.swim_dist+'</td>'+
					'<td>'+store.data.swim_time+'&nbsp;</td>'+
					'<td>'+store.data.t1_time+'&nbsp;</td>'+
					'<td>'+store.data.bike_dist+'</td>'+
					'<td>'+store.data.bike_time+'&nbsp;</td>'+
					'<td>'+store.data.t2_time+'&nbsp;</td>'+
					'<td>'+store.data.run_dist+'</td>'+
					'<td>'+store.data.run_time+'&nbsp;</td>'+
					'<td>'+store.data.race_time+'&nbsp;</td>'+
				'</tr>'+
			'</table>'
	}

	function fmt_pic(val, x, store) {
		return '<a href="'+store.data.weburl+'" target="_blank"><img src="'+val+'"></a>';
	}

	function fmt_group_heading(groupVal) {
		if (groupVal === 'Y') {
			return 'Past';
		} else {
			return 'Upcoming';
		}
	}
	
    // create the Grid
    var fitGrid = new Ext.grid.GridPanel({
        //title: 'Resume',
        //store: myStore,
        store: fitGroupingStore,
        columns: [
		    {header: "ID", dataIndex: 'id', hidden: true },
            {header: 'Event', width:320, dataIndex: 'event', renderer:fmt_event_description},
            {header: 'Date',             dataIndex: 'eventdate', hidden: true},
            {header: ' ',     width:250, dataIndex: 'pic', align: 'center', renderer:fmt_pic},
            {header: 'city',             dataIndex: 'city', hidden: true},
            {header: 'state',            dataIndex: 'state', hidden: true},
            {header: 'weburl',           dataIndex: 'weburl', hidden: true},
            {header: 'Distance/Results', width:800, dataIndex: 'swim_dist', renderer:fmt_stats},
            {header: 'swim_time', dataIndex: 'swim_time', hidden: true},
            {header: 't1_time',   dataIndex: 't1_time',   hidden: true},
            {header: 'bike_dist', dataIndex: 'bike_dist', hidden: true},
            {header: 'bike_time', dataIndex: 'bike_time', hidden: true},
            {header: 't2_time',   dataIndex: 't2_time',   hidden: true},
            {header: 'run_dist',  dataIndex: 'run_dist',  hidden: true},
            {header: 'run_time',  dataIndex: 'run_time',  hidden: true},
            {header: 'weburl_text',  dataIndex: 'weburl_text',  hidden: true},
            {header: 'fundraiseUrl',  dataIndex: 'fundraiseUrl',  hidden: true},
            {header: 'fundraiseUrl_text',  dataIndex: 'fundraiseUrl_text',  hidden: true},
            {header: 'Events',  dataIndex: 'completed',  hidden: true, renderer: fmt_group_heading }

        ],
        stripeRows: true,
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid',
		//hideHeaders: true,
		//view: new Ext.grid.GridView({
		//	forceFit: true
		//})
		hideHeaders: true,
		view: new Ext.grid.GroupingView({
			// display section description, not section number										
			//groupTextTpl: '{[ values.rs[0].data["sectiondesc"] ]}',
			//groupRenderer: fmt_group_heading(values.rs[0].data["completed"]),
			//startCollapsed: true,

			groupRenderer: 'completed',
		//groupRenderer: function() {
		//					if (values.rs[0].data["completed"] === 'Y') {
		//						return 'Past Events';
		//					} else {
		//						return 'Upcoming Events';
		//					}
		//				},

			forceFit: true
			//groupTextTpl: '{gvalue}'
		})		
    });
	//myStore.load();
	fitGroupingStore.load();
	
    // render the grid to the specified div in the page
    //grid.render('grid-example');
	fitGrid.show();