Ext.onReady(function(){ 
  
  // Create grid view to highlight rows  
  var gridView = new Ext.grid.GridView({ 
     //forceFit: true, 
     enableRowBody: false,
     
      getRowClass : function (row, index) { 
        var cls = ''; 
        var data = row.data; 
        if(data.lastpass) {
          cls = 'lastpass';
        }        
        return cls; 
     } 
  });

  function diffcolor(val){
      if(val > 0) {
          return '<font color="green">' + val + '</font>';
      } else if(val < 0) {
          return '<font color="red">' + val + '</font>';
      }
      return val;
  }

  function autoRefresh() {
    ds.reload();
    autoRefresh.defer(autoRefreshTimer * 1000, ds);
  }
  

  var ds = new Ext.data.Store({

      proxy: new Ext.data.HttpProxy({url: data_url, method: 'get'}),

      reader: new Ext.data.JsonReader({
          root: 'results',
          totalProperty: 'total',
          id: 'id'
      }, [
          {name: 'car', mapping: 'cnum'},
          {name: 'driver'},
          {name: 'sponsor'},
          {name: 'pos', type: 'int'},
          {name: 'laps', type: 'int'},
          {name: 'lapdiff'},
          {name: 'racediff'},
          {name: 'lastlaptime', type: 'float'},
          {name: 'lastlapspeed', type: 'float'},
          {name: 'time', type: 'float', mapping: 'ltime'},
          {name: 'speed', type: 'float', mapping: 'lspeed'},
          {name: 'bestlap', type: 'int'},
          {name: 'lastpass', type: 'boolean'},
          {name: 'points', type: 'int'}          
      ])
  });

  var colModel = new Ext.grid.ColumnModel([  
      {header: "Pos", width: 35, dataIndex: 'pos', sortable: true, css: 'text-align: center;'},
      {header: "Car", width: 45, dataIndex: 'car', sortable: true, css: 'text-align: center;'},
      {header: "Driver", width: 120, dataIndex: 'driver', sortable: true},
      {header: "Sponsor", width: 130, dataIndex: 'sponsor', sortable: true},
      {header: "Laps", width: 40, dataIndex: 'laps', sortable: true, css: 'text-align: center;'},
      {header: "Race Diff", width: 60, dataIndex: 'racediff', renderer: diffcolor, sortable: false, css: 'text-align: center;'},
      {header: "Lap Diff", width: 60, dataIndex: 'lapdiff', renderer: diffcolor, sortable: false, css: 'text-align: center;'},
      {header: "Last Time", width: 65, dataIndex: 'lastlaptime', sortable: true, css: 'text-align: center;'},
      {header: "Last Speed", width: 70, dataIndex: 'lastlapspeed', sortable: true, css: 'text-align: center;'},
      {header: "Best Time", width: 65, dataIndex: 'time', sortable: true, css: 'text-align: center;'},
      {header: "Best Speed", width: 70, dataIndex: 'speed', sortable: true, css: 'text-align: center;'},
      {header: "BL", width: 40, dataIndex: 'bestlap', sortable: true, hidden: true, css: 'text-align: center;'},
      {header: "Points", width: 50, dataIndex: 'points', sortable: true, css: 'text-align: center;'}
  ]);

  var grid = new Ext.grid.GridPanel({ 
      el:'tsgrid',
      store: ds,
      cm: colModel,
      width: 810,
      autoHeight: true,
      sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
      stripeRows: true,
      view: gridView,
      bbar: ''
  });

  
  grid.render();
  ds.load();
  autoRefresh();

});