/**
 * @author jjkirby
 */
Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   // var gridData = [
   //     ['KCOGOLDE23','Lakewood','APRSWXNET Coal Creek Canyon CO US','12/26 16:03:04',45,1.00,29.47,0.00,'East',5.5,29.68,0.00],
   //     ['KCOGOLDE22','Golden','Mt. Ridge. Foothills West of Golden','12/26 16:03:06',44.4,1.00,29.60,5.7,'SE',33,29.70,0.01],
  //      ['KCOARVAD17','Genesee, Jefferson County','INTERNET Solar Radiation Research Lab NREL','12/26 16:05:04',50.0,1.00,30.00,25.0,'WNW',35,29.59,0.00],
  //      ['KCOARVAD19','Eldorado Canyon State Park Visitor Center, Eldorado Springs','INTERNET Rocky Flats Nat Wind Tech Ctr NREL','12/26 15:03:04',45,1.00,30.00,0,'West',34.6,30.00,0.8],
  //      ['KCOARVAD177','Wheat Ridge','Green Mountain','12/26 16:03:07',43,1.00,30.00,11,'North',56.5,30.01,0.00]
 //       
 //   ];
	
	
	
	function loadGridData(){
		for (var i = 1; i < 37; i++){
			
		}
	}

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'station'},
           {name: 'city'},
           {name: 'neighborhood'},
           {name: 'lastUpdate'},
          // {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
		   {name: 'temperature', type: 'float'},
		   {name: 'dewPoint', type: 'float'},
		   {name: 'humidity', type: 'float'},
		   {name: 'wind', type: 'float'},
		   {name: 'direction'},
		   {name: 'gust',type: 'float'},
		   {name: 'pressure',type: 'float'},
		   {name: 'rain',type: 'float'}
        ]
    });
	loadGridArray();
    store.loadData(gridData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'station',header: "Station ID", width: 150, sortable: true, dataIndex: 'station'},
            {id: 'city',header: "City", width: 180, sortable: true,  dataIndex: 'city'},
            {header: "Neighborhood", width: 200, sortable: true, renderer: change, dataIndex: 'neighborhood'},
            {header: "Last Update", width: 85, sortable: true,  dataIndex: 'lastUpdate'},
			{header: "Temperature <br> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(&#176 F)", width: 85, sortable: true, dataIndex: 'temperature'},
            //{header: "Temperature <br> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(&#176 F)", width: 65, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
			{header: "Dew Point (&#176)", width: 85, sortable: true, dataIndex: 'dewPoint'},
			{header: "Humidity (%)", width: 85, sortable: true, dataIndex: 'humidity'},
			{header: "Wind (mph)", width: 85, sortable: true, dataIndex: 'wind'},
			{header: "Direction", width: 85, sortable: true, dataIndex: 'direction'},
			{header: "Wind Gust <br> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (mph)", width: 65, sortable: true, dataIndex: 'gust'},
			{header: "Pressure (in)", width: 85, sortable: true, dataIndex: 'pressure'},
			{header: "Hourly Rain (in)", width: 85, sortable: true, dataIndex: 'rain'}
        ],
        stripeRows: true,
        //autoExpandColumn: 'city',
        height:650,
        width:1360
        //title:'Array Grid'
    });

    grid.render('weather-grid');

    grid.getSelectionModel().selectFirstRow();
});