var RVAdataStore = null;

Ext.onReady(function(){

    Ext.QuickTips.init();
    
	var reader = new Ext.data.JsonReader({
		 id:'resultID'
		,totalProperty:'totalCount'
		,root:'rows'
		,fields:[
			 {name:'resultID', type:'int'}
			,{name:'runner', type:'string'}
			,{name:'finish', type:'string'}	   // treat as string, will be handled by tmfield editor
			,{name:'overall', type:'int'}
			,{name:'division', type:'int'}
			,{name:'raceevent', type:'string'}
			,{name:'eventyear', type:'string'} // treat as string, stored as YEAR					
		]
	});


    RVAdataStore = new Ext.data.GroupingStore({
         reader: reader
		,groupField:'raceevent'
		,proxy:new Ext.data.HttpProxy({url:'/raceresultseditor/process-request.php'})
		,baseParams:{cmd:'getData', objName:'raceresults'}
		,sortInfo:{field:'raceevent', direction:'ASC'}
		,remoteSort:false
		,autoLoad:false	// true to force initial load			
    });


    var grid = new Ext.grid.GridPanel({
 
		store: RVAdataStore,
 
        columns: [
            {header: "Runner", width: 30, sortable: true, dataIndex: 'runner'},
            {header: "Finish", width: 15, sortable: true, dataIndex: 'finish'},
            {header: "Overall", width: 15, sortable: true, dataIndex: 'overall'},
            {header: "Division", width: 15, sortable: true, dataIndex: 'division'},      		
			{header: "Event", width: 50, sortable: true, dataIndex: 'raceevent'}
        ],

		view: new Ext.grid.GroupingView({
            forceFit: true,
			groupTextTpl: '{text}',
			emptyText: '<font color=darkred><b>No data found for that year</b></font>'
        }),

        frame:true,
        width: 640,
        height: 400,
        collapsible: false,
        animCollapse: false,
        //title: 'RVA Runners Race Results',
		header:false,
        iconCls: 'icon-grid',
		loadMask:true
		//renderTo: document.getElementById("rvaraceresults")
    });
    
	// show the grid
	grid.render('rvaraceresults');
	
    // load the grid with initial year=2008 
    loadYear(2010);

 });

function loadYear(year) { 
			
	// un-highlight all the years 
	document.getElementById("t2005").style.color='#aac';
	document.getElementById("t2005").style.fontWeight='normal';
	document.getElementById("t2006").style.color='#aac';
	document.getElementById("t2006").style.fontWeight='normal';
	document.getElementById("t2007").style.color='#aac';
	document.getElementById("t2007").style.fontWeight='normal';
	document.getElementById("t2008").style.color='#aac';
	document.getElementById("t2008").style.fontWeight='normal';
	document.getElementById("t2009").style.color='#aac';
	document.getElementById("t2009").style.fontWeight='normal';
	document.getElementById("t2010").style.color='#aac';
	document.getElementById("t2010").style.fontWeight='normal';
	
	// highlight the selected year
	document.getElementById('t' + year).style.color='#117';
	document.getElementById('t' + year).style.fontWeight='bold';

	// reload grid filtered on year
	var fields  = ["runner","finish","overall","division","raceevent","eventyear"];
	RVAdataStore.reload({params:{fields:Ext.encode(fields), query:year}});
}