/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
function recordOutboundLink(link, category, action) 
{
  try {
    var pageTracker=_gat._getTracker("UA-3867608-4");
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
  }
  catch(err)
  {
  }
} 
dataGrid = Ext.extend(Ext.grid.GridPanel,
{
  constructor: function(config, jsonDataFile) {
    var jsonReader = new Ext.data.JsonReader({
                        idProperty: "id",
                        root: "dataList",
                        successProperty : "success",
                        fields:
                        [
                          {"name": "url", "mapping": "url"},
                          {"name": "dataFormat", "mapping": "dataFormat"},
                          {"name": "tags", "mapping": "tags"},
                          {"name": "name", "mapping": "name"}
                        ]
                      });

    var groupStore = new Ext.data.GroupingStore({
            reader: jsonReader,
            url: jsonDataFile,
            sortInfo:{field: 'name', direction: "ASC"},
            groupField:'name'
        });
    config.store = groupStore;
    config.fbar = ['->', 
                  {
                    text:'Clear Grouping',
                    iconCls: 'icon-clear-group',
                    handler : function()
                    {
                      config.store.clearGrouping();
                    }
                }];

    config.listeners = {
      render : function()
      {
        this.getStore().load();
      }
    };
    Ext.grid.GridPanel.superclass.constructor.call(this, config);
   
  }
});

Ext.onReady(function(){
    var recGrid = new dataGrid(
        {
          title: 'Recreational Data Files',
          headerCfg: {
              cls: 'x-panel-header-dl'
          },
          
          columns: [
              {header: "Type", width: 60, sortable: true, dataIndex: 'name', id: 'dlObs'},
              {header: "File Type", width: 20, sortable: true, dataIndex: 'dataFormat',id: 'dlFormat',
              groupRenderer: function(v, metaData, dataRec, rowIndex, colIndex, dataStore)
              {
                return(dataRec.data.dataFormat);
              },
              renderer: function(v, metaData, dataRec, rowIndex, colIndex, dataStore)
              {
                return(dataRec.data.url);
              }
              }
          ],

          view: new Ext.grid.GroupingView({
              forceFit:true,
              groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'              
          }),

          frame: false,
          width: 'auto',
          height: '600',
          collapsible: false,
          animCollapse: false,
          iconCls: 'icon-grid'
      },
      'data/json/recreationalDataLinks.json');

    var obsGrid = new dataGrid(
        {
          title: 'Observation Data Files',
        
          headerCfg: {
              cls: 'x-panel-header-dl'
          },
          
          columns: [
              {header: "Observation", width: 60, sortable: true, dataIndex: 'name', id: 'dlObs'},
              {header: "File Type", width: 20, sortable: true, dataIndex: 'dataFormat',id: 'dlFormat',
              groupRenderer: function(v, metaData, dataRec, rowIndex, colIndex, dataStore)
              {
                return(dataRec.data.dataFormat);
              },
              renderer: function(v, metaData, dataRec, rowIndex, colIndex, dataStore)
              {
                return(dataRec.data.url);
              }
              }
          ],

          view: new Ext.grid.GroupingView({
              forceFit:true,
              groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'              
          }),

          frame:false,
          width: 'auto',
          height: '600',
          collapsible: false,
          animCollapse: false,
          iconCls: 'icon-grid'
      },
      'data/json/dataLinks.json');
    
    
    
    var mapTabs = new Ext.TabPanel({
        region: 'center',
        activeTab: 0,
        items:[recGrid,obsGrid]
    });
    
    viewport = new Ext.Viewport({
        layout:'border',
        cls: 'dataLinks',
        items:[
          new Ext.BoxComponent({ // raw
              region: 'north',
              el: "header"
              //html: '<a href="http://carolinasrcoos.org"><img src="images/rcoos_hdr.gif" alt="Carolinas RCOOS" /></a>',
          }),                         
          {
            region: 'center',
            layout: 'border',
            items:[mapTabs]
          }
        ]
    });
});