Ext.namespace("Ext.ux.grid");

/**
 * @class Ext.ux.grid.GridHeaderFilters
 * @extends Ext.util.Observable
 * 
 * Plugin that enables filters in columns headers.
 * 
 * To add a grid header filter, put the "filter" attribute in column configuration of the grid column model.
 * This attribute is the configuration of the Ext.form.Field to use as filter in the header:<br>
 * 
 * The filter configuration object can include some attributes to manage filter configuration:
 * "filterName": to specify the name of the filter and the corresponding HTTP parameter used to send filter value to server. 
 *          If not specified column "dataIndex" attribute will be used.
 * "value": to specify default value for filter. If no value is provided for filter, this value will be used as default filter value
 * "filterEncoder": a function used to convert filter value returned by filter field "getValue" method to a string. Useful if the filter field getValue() method
 *            returns an object that is not a string
 * "filterDecoder": a function used to convert a string to a valid filter field value. Useful if the filter field setValue(obj) method
 *            needs an object that is not a string
 * "applyFilterEvent" (since 1.0.10): a string that specifies the event that starts filter application for this filter field. If not specified, the "applyMode" is used
 *
 * The GridHeaderFilter constructor accept a configuration object with these properties:
 * "stateful": Switch GridHeaderFilter plugin to attempt to save and restore filters values with the configured Ext.state.Provider. Default true.
 * "height": Height of filters header area. Default 26.
 * "padding": Padding of header filters cells. Default 4.
 * "highlightOnFilter": Enabled grid header highlight if at least one filter is set. Default true.
 * "highlightColor": Color to use when highlight header (see "highlightOnFilter"). Default "orange".
 * "applyMode": Sets how filters are applied. If equals to "auto" or "change" (default) the filter is applyed when filter field value changes (change, select, ENTER).
 *        If set to "enter" the filters are applied only when user push "ENTER" on filter field. See also "applyFilterEvent" in column filter configuration.
 * "filters": Initial values for grid filters. These values always override grid status saved filters.
 * "ensureFilteredVisible" (since 1.0.11): a boolean value that force filtered columns to be made visible if hidden. Default = true.
 *
 * This plugin fires "render" event when the filters are rendered after grid rendering:
 * render(GridHeaderFiltersPlugin)
 * 
 * This plugin enables "filterupdate" event for the grid:
 * filterupdate(filtername, filtervalue, field)
 * 
 * This plugin enables some new grid methods:
 * getHeaderFilter(name)
 * getHeaderFilterField(name) 
 * setHeaderFilter(name, value) 
 * setHeaderFilters(object, [bReset], [bReload])
 * resetHeaderFilters([bReload])
 * applyHeaderFilters([bReload])
 * 
 * The "name" is the dataIndex of the corresponding column or to the filterName (if specified in filter cfg)
 * 
 
 */
Ext.ux.grid.GridHeaderFilters = function(cfg){if(cfg) Ext.apply(this, cfg);};
  
Ext.extend(Ext.ux.grid.GridHeaderFilters, Ext.util.Observable, 
{
  /**
   * @cfg {Number} height
   * Height of filter area in grid header. Default: 32px
   */
  height: 26,
  
  /**
   * @cfg {Number} padding
   * Padding for filter header cells. Default: 2
   */
  padding: 2,
  
  /**
   * @cfg {Boolean} highlightOnFilter
   * Enable grid header highlight if active filters 
   */
  highlightOnFilter: true,
  
  /**
   * @cfg {String} highlightColor
   * Color for highlighted grid header
   */
  highlightColor: 'blue',
  
  /**
   * @cfg {Boolean} stateful
   * Enable or disable filters save and restore through enabled Ext.state.Provider
   */
  stateful: true,
  
  /**
   * @cfg {String} applyMode
   * Sets how filters are applied. If equals to "auto" (default) the filter is applyed when filter field value changes (change, select, ENTER).
   * If set to "button" an apply button is rendered near each filter. When user push this button all filters are applied at the same time. This
   * could be useful if you want to set more than one filter before reload the store.
   * @since Ext.ux.grid.GridHeaderFilters 1.0.6
   */
  applyMode: "auto",
  
  /**
   * @cfg {Object} filters
   * Initial values for filters. Overrides values loaded from grid status.
   * @since Ext.ux.grid.GridHeaderFilters 1.0.9
   */
  filters: null,
  
  /**
   * @cfg {Boolean} ensureFilteredVisible
   * If true, forces hidden columns to be made visible if relative filter is set. Default = true.
   * @type Boolean
   */
  ensureFilteredVisible: true,
  
  applyFiltersText: "Apply filters",
  
  init:function(grid) 
  {
    this.grid = grid;
    this.gridView = null;
    this.panels = [];
    //I TD corrispondenti ai vari headers
    this.headerCells = null;
    this.grid.on("render", this.onRender, this);
    this.grid.on("columnmove", this.renderFilters.createDelegate(this, [false]), this);
    this.grid.on("columnresize", this.onColResize, this);
    if(this.stateful)
    {
      this.grid.on("beforestatesave", this.saveFilters, this);
      this.grid.on("beforestaterestore", this.loadFilters, this);
    }
    
    this.grid.getColumnModel().on("hiddenchange", this.onColHidden, this);
    
    this.grid.addEvents({"filterupdate": true});
    this.addEvents({'render': true});
    Ext.ux.grid.GridHeaderFilters.superclass.constructor.call(this);
    
    this.grid.stateEvents[this.grid.stateEvents.length] = "filterupdate";
    
    this.grid.headerFilters = this;
    
    this.grid.getHeaderFilter = function(sName){
      if(!this.headerFilters)
        return null;
      if(this.headerFilters.filterFields[sName])
        return this.headerFilters.getFieldValue(this.headerFilters.filterFields[sName]);
      else
        return null;  
    };
    
    this.grid.setHeaderFilter = function(sName, sValue){
      if(!this.headerFilters)
        return;
      var fd = {};
      fd[sName] = sValue;
      this.setHeaderFilters(fd);
    };
    
    this.grid.setHeaderFilters = function(obj, bReset, bReload)
    {
      if(!this.headerFilters)
        return;
      if(bReset)
        this.resetHeaderFilters(false);
      if(arguments.length < 3)
        var bReload = true;
      var bOne = false;
      for(var fn in obj)
      {
        if(this.headerFilters.filterFields[fn])
        {
          var el = this.headerFilters.filterFields[fn];
          this.headerFilters.setFieldValue(el,obj[fn]);
          this.headerFilters.applyFilter(el, false);
          bOne = true;
        }
      }
      if(bOne && bReload)
        this.headerFilters.storeReload();
    };
    
    this.grid.getHeaderFilterField = function(fn)
    {
      if(!this.headerFilters)
        return;
      if(this.headerFilters.filterFields[fn])
        return this.headerFilters.filterFields[fn];
      else
        return null;
    };
    
    this.grid.resetHeaderFilters = function(bReload)
    {
      if(!this.headerFilters)
        return;
      if(arguments.length == 0)
        var bReload = true; 
      for(var fn in this.headerFilters.filterFields)
      {
        var el = this.headerFilters.filterFields[fn];
        if(Ext.isFunction(el.clearValue)) 
        {
          el.clearValue();
        } 
        else 
        {
          this.headerFilters.setFieldValue(el, "");
        }
        this.headerFilters.applyFilter(el, false);
      }
      if(bReload)
        this.headerFilters.storeReload();
    };
    
    this.grid.applyHeaderFilters = function(bReload)
    {
      if(arguments.length == 0)
        var bReload = true;
      this.headerFilters.applyFilters(bReload);
    };
  },
  
  renderFilters: function(bReload)
  {
    //Eliminazione Fields di filtro esistenti
    this.filterFields = {};
    
    //Elimino pannelli esistenti
    for(var pId in this.panels)
    {
      if((this.panels[pId] != null) && (Ext.type(this.panels[pId].destroy) == "function"))
        this.panels[pId].destroy();
    }
    this.panels = [];
    
    this.cm = this.grid.getColumnModel();
    this.gridView = this.grid.view;
    this.headTr = Ext.DomQuery.selectNode("tr",this.gridView.mainHd.dom);
    this.headerCells = Ext.query("td",this.headTr);
    
    var cols = this.cm.getColumnsBy(function(){return true;});
    for ( var i = 0; i < cols.length; i++) 
    {
      var co = cols[i];
      this.panels[co.dataIndex] = this.createFilterPanel(co, this.grid);
    }
    //Cleaning this.filters
    
    //Check if some filter is already active
    if(this.isFiltered())
    {
      //Apply filters
      if(bReload)
        this.storeReload();
      //Highlight header
      this.highlightFilters(true);
    }
  },
  
  onRender: function()
  {
    if(!this.filters)
      this.filters = {};
    this.renderFilters(true);
    this.fireEvent("render", this);
  },
  
  onRefresh: function(){
    this.renderFilters(false);
  },
  
  onColResize: function(index, iWidth){
    var colId = this.cm.getDataIndex(index);
    var panel = this.panels[colId];
    if(panel && (panel != null))
    {
      if(isNaN(iWidth))
        iWidth = 0;
      var filterW = (iWidth < 2) ? 0 : (iWidth - 2);
      panel.setWidth(filterW);
      //Thanks to ob1
      panel.doLayout(false,true);
    }
  },
  
  onColHidden: function(cm, index, bHidden){
    if(bHidden)
      return;
    var colId = cm.getDataIndex(index);
    var panel = this.panels[colId];
    if(panel && (panel != null))
    {
      var iWidth = cm.getColumnWidth(index);
      var filterW = (iWidth < 2) ? 0 : (iWidth - 2);
      panel.setWidth(filterW);
      //Thanks to ob1
      panel.doLayout(false,true);
    }
  },
  
  saveFilters: function(grid, status)
  {
    var vals = {};
    for(var name in this.filters)
    {
      vals[name] = this.filters[name];
    }
    status["gridHeaderFilters"] = vals;
    return true;
  },
    
  loadFilters: function(grid, status)
  {
    var vals = status.gridHeaderFilters;
    if(vals)
    {
      if(!this.filters)
        this.filters = {};
      
      Ext.applyIf(this.filters, vals);
      /*var bOne = false;
      for(var name in vals)
      {
        this.filters[name] = vals[name];
        this.grid.store.baseParams[name] = vals[name];
        bOne = true;
      }
      /*if(bOne)
        this.grid.store.reload();*/
    }
    
  },
  
  isFiltered: function()
  {
    for(var k in this.filters)
    {
      if(this.filterFields[k] && !Ext.isEmpty(this.filters[k]))
        return true;
    }
    return false;
  },
  
  highlightFilters: function(enable)
  {
    if(!this.highlightOnFilter)
      return;
    var color = enable ? this.highlightColor : "transparent";
    for(var fn in this.filterFields)
    {
      this.filterFields[fn].ownerCt.getEl().dom.style.backgroundColor = color;
    }
  },
  
  getFieldValue: function(eField)
  {
    if(Ext.type(eField.filterEncoder) == "function")
      return eField.filterEncoder.call(eField, eField.getValue());
    else
      return eField.getValue();
  },
  
  setFieldValue: function(eField, value)
  {
    if(Ext.type(eField.filterDecoder) == "function")
      value = eField.filterDecoder.call(eField, value);
    eField.setValue(value);
  },
  
  applyFilter: function(el, bLoad)
  {
    if(arguments.length < 2)
      bLoad = true;
    if(!el)
      return;
      
    if(!el.isValid())
      return;
    
    var sValue = this.getFieldValue(el);
    
    
    if(Ext.isEmpty(sValue))
    {
      delete this.grid.store.baseParams[el.filterName];
      delete this.filters[el.filterName];
    }
    else  
    {
      this.grid.store.baseParams[el.filterName] = sValue;
      this.filters[el.filterName] = sValue;
      
      if(this.ensureFilteredVisible)
      {
        //Controllo che la colonna del filtro applicato sia visibile
        var ci = this.grid.getColumnModel().findColumnIndex(el.dataIndex);
        if((ci >= 0) && (this.grid.getColumnModel().isHidden(ci)))
            this.grid.getColumnModel().setHidden(ci, false);
      }
    }
    
    //Evidenza filtri se almeno uno attivo
    this.highlightFilters(this.isFiltered());
    
    this.grid.fireEvent("filterupdate",el.filterName,sValue,el);
    
    if(bLoad)
      this.storeReload();
  },
  
  applyFilters: function(bLoad)
  {
    if(arguments.length < 1)
      bLoad = true;
    for(var fn in this.filterFields)
    {
      this.applyFilter(this.filterFields[fn], false);
    }
    if(bLoad)
      this.storeReload();
  },
  
  storeReload: function()
  {
    if(!this.grid.store.lastOptions)
      return;
    var slp = {start: 0};
    if(this.grid.store.lastOptions.params && this.grid.store.lastOptions.params.limit)
      slp.limit = this.grid.store.lastOptions.params.limit;
    this.grid.store.load({params: slp});
  },
  
  createFilterPanel: function(colCfg, grid)
  {
    // = this.cm.findColumnIndex(colCfg.dataIndex);
    //Thanks to dzj
    var iColIndex = this.cm.getIndexById(colCfg.id);
      //var headerTd = Ext.get(this.gridView.getHeaderCell(iColIndex));
    var headerTd = Ext.get(this.headerCells[iColIndex]);
    //Patch for field text selection on Mozilla
    if(Ext.isGecko)
      headerTd.dom.style.MozUserSelect = "text";
    var filterPanel = null;
      
    if(colCfg.filter)
      {
        var iColWidth = this.cm.getColumnWidth(iColIndex);
        var iPanelWidth = iColWidth - 2;
        
        //Pannello filtri
        var panelConfig = {
            /*id: "filter-panel-"+colCfg.id,*/
            width: iPanelWidth,
            height: this.height,
            border: false,
            bodyStyle: "background-color: transparent; padding: "+this.padding+"px",
            bodyBorder: false,
            layout: "fit",
            items: [],
            stateful: false
          };
        
        //Configurazione widget filtro
        var filterConfig = {};
        Ext.apply(filterConfig, colCfg.filter);
        Ext.apply(filterConfig, {
          dataIndex: colCfg.dataIndex,
          margins: {
              top: 2,
              right: 2,
              bottom: 2,
              left: 2
          },
          stateful: false
        });
        
        var filterName = filterConfig.filterName ? filterConfig.filterName : colCfg.dataIndex;
        filterConfig.filterName = filterName;
        panelConfig.items.push(filterConfig);
        
        /*
         * Se la configurazione del field di filtro specifica l'attributo applyFilterEvent, il filtro verrà applicato
         * in corrispondenza di quest'evento specifico
         */
        if(filterConfig.applyFilterEvent)
        {
          filterConfig.listeners = {scope: this};
          filterConfig.listeners[filterConfig.applyFilterEvent] = function(field){this.applyFilter(field);};
        }
        else
        {
          //applyMode: auto o enter
          if(this.applyMode == "auto" || this.applyMode == "change" || Ext.isEmpty(this.applyMode))
          {
            //Legacy mode and deprecated. Use applyMode = "enter" or applyFilterEvent
            filterConfig.listeners = 
            {
              change: function(field){
                var t = field.getXType();
                if(t=='combo' || t=='datefield'){ //avoid refresh twice for combo select 
                return;
                }else{
                this.applyFilter(field);
                }
              },
              specialkey: function(el,ev)
              {
                ev.stopPropagation();
                if(ev.getKey() == ev.ENTER) 
                  el.el.dom.blur();
              },
              select: function(field){this.applyFilter(field);},
              scope: this 
            };
          }
          else if(this.applyMode == "enter")
          {
            filterConfig.listeners = 
            {
              specialkey: function(el,ev)
              {
                ev.stopPropagation();
                if(ev.getKey() == ev.ENTER) 
                {
                  this.applyFilters();
                }
              },
              scope: this
            };
          }
        }
        
        filterPanel = new Ext.Panel(panelConfig);
        filterPanel.render(headerTd);
        var filterField = filterPanel.items.first();
        this.filterFields[filterName] = filterField;
        if(!Ext.isEmpty(this.filters[filterName]))
        {
          this.setFieldValue(filterField,this.filters[filterName]);
          
          this.applyFilter(filterField, false);
          
        }
        else if(filterConfig.value)
        {
          filterField.setValue(filterConfig.value);
          this.applyFilter(filterField, false);
        }
      }
      
    return filterPanel;
    }
});





Ext.ux.Report = Ext.extend(Ext.Component, {
    autoEl: {tag: 'iframe', cls: 'x-hidden', src: Ext.SSL_SECURE_URL},
    load: function(config){
        this.getEl().dom.src = config.url + (config.params ? '?' + Ext.urlEncode(config.params) : '');
    }
});
Ext.reg('ux.report', Ext.ux.Report);

var r = new Ext.ux.Report ({
    id: 'report', renderTo: Ext.getBody()

});

        
FOS.Organiser.Event.Participant.storeConfig = {
    url: 'action.php',
    baseParams: {
        module: 'participants',
        action: 'listread',
        eventId: eid
    },
    root: 'data',
    id: 'epId',
    totalProperty: 'count',
    writer: new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: true // write all fields, not just those that changed
    }),
    autoSave: true,
    fields: [ 'eventId'  ,'event_id' , 'memberId', 'epId', {
        name: 'raceNo',
        type: 'int'
    }, 'firstname', 'lastname', {
        name: 'dob'
    }, 'club_id', 'entryPaid', 'email', 'gender', 'age', 'swimTime', 'bikeTime', 'runTime', {
        name: 'waveNumber',
        type: 'int'
    }, {
        name: 'laneNumber',
        type: 'int'
    }, {
        name: 'positionNumber',
        type: 'int'
    }, 'actualWaveStartTime', 'positionStartTime', 'address1', 'address2', 'address3', 'region', 'city', 'postcode', 'emergencyContactNo', 'emergencyContactName', 'btfNo']

};



           



FOS.Organiser.Event.Participant.toolbarConfig = {


    items: [  {
        text: 'Add Participant',
        icon: 'resources/icons/user_add.png',
        handler: function(){
         location.href = "?module=organiser&action=add_participant"  ;   
            
            
        }
    }, {
        text: 'Edit',
        icon: 'resources/icons/user_edit.png',
        handler: function(){
             
            var rows = Ext.getCmp('eventParticipants').getSelectionModel().getSelections();
            
            if (rows.length != 1)
              Ext.MessageBox.alert ('You can only edit one participant at a time');
            else
              location.href = "?module=organiser&action=edit_participant&epId=" + rows[0].data.epId  ; 
               
        }
    }, {
        text: 'Delete',
        hidden: false,
        icon: 'resources/icons/user_delete.png',
        handler: function(){
            Ext.Msg.show({
                title: 'Delete Participants?',
                msg: 'WARNING: Are you sure you want to delete the selected participants from this event. This change cannot be undone.',
                buttons: Ext.Msg.YESNO,
                fn: function(btn){
                    if (btn == 'yes') {
                        
                      var rows = Ext.getCmp('eventParticipants').getSelectionModel().getSelections();
                        
                        if (rows.length != 1)
                          Ext.MessageBox.alert ('You can only edit one participant at a time');
                        else {
                          mid = rows[0].data.memberId;
                          eid = rows[0].data.eventId;
                        
                          FOS.Organiser.Event.Participant.Detail.destroy(eid, mid);
                        }
                        
                        FOS.Organiser.Event.Participant.refresh(true);
                    }
                },
                animEl: 'elId',
                icon: Ext.MessageBox.QUESTION
            });
            
        }
    }, '-', {
        text: 'Email',
        icon: 'resources/icons/email.png',
        disabled: false,
        handler: function(){
        
            try {
              
              var rows = Ext.getCmp('eventParticipants').getSelectionModel().getSelections();
         
        var emailTo = '';
        
        for (i=0; i < rows.length; i++) {
          if (i == 0)
            emailTo =   rows[i].data.email;
          else
            emailTo = emailTo +  ', ' + rows[i].data.email;
        }
         
                 
                FOS.Mail.show(FOS.viewingEventId, emailTo);
            } 
            catch (e) {
                Ext.MessageBox.alert('Full On Sport', 'No participant selected');
                
            }
        }
        
    }, {
        text: 'Email all',
        icon: 'resources/icons/email_add.png',
        disabled: false,
        handler: function(){
        
            var count = FOS.Organiser.Event.Participant.store.getCount();
            var to = '';
            
            for (i = 0; i < count; i++) {
                to = to + FOS.Organiser.Event.Participant.store.getAt(i).data.email;
                
                if (i < count - 1) 
                    to = to + ',';
                
            }
            
            
            FOS.Mail.show(FOS.viewingEventId, to);
        }
        
    }, {
        text: 'Download',
        icon: 'resources/icons/page_save.png',
        handler: function(){
        r.load({
          url: 'data.php', 
          params: {
            action : 'download', 
            set : 'participants', 
            eventId : FOS.Organiser.Event.Participant.eventId
          }
        });
      
       
        
      }
        
    },'-', {
        text: 'Refresh',
        icon: 'resources/icons/arrow_refresh.png',
        handler: function(){
            FOS.Organiser.Event.Participant.refresh(true);
            
        }
        
    }, {
    
        text: 'Toggle Auto Refresh OFF',
        xtype: 'button',
        id: 'autoRefresh',
        hidden: true,
        enableToggle: true,
        pressed: false,
        toggleHandler: function(btn, pressed){
        
            if (pressed) 
                btn.setText('Toggle Auto Refresh ON');
            else 
                btn.setText('Toggle Auto Refresh OFF');
            
        }
    }  ]
};

FOS.Organiser.Event.Participant.store = new Ext.data.JsonStore(FOS.Organiser.Event.Participant.storeConfig);

// create reusable renderer
FOS.Organiser.Event.Participant.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}

FOS.clubStore = new Ext.data.JsonStore({
    url: 'php/getClubs.php',
    root: 'data',
  id: 'club_id',
  idProperty: 'club_id',
    fields: ['club_id', 'name']
});

var clubCombo = '';




function renderClubName (id) {
    try {
    return clubStore2.getById(id).data.name;
    
  }
  catch (e) {} 
       
}

var clubStore2 = new Ext.data.JsonStore({
                url: 'php/getClubs.php',
                root: 'data',
        idProperty: 'club_id',
                fields: ['club_id', 'name'],
                listeners:
                	{
                	'load' : function (){
                		FOS.Organiser.Event.Participant.getView().refresh();
                	}
                	}
            });
    
    clubStore2.load();
    
var clubStore = new Ext.data.JsonStore({
                url: 'php/getClubs.php',
                root: 'data',
        idProperty: 'club_id',

                fields: ['club_id', 'name'],
                listeners:
            	{
            	'load' : function (){
            		FOS.Organiser.Event.Participant.getView().refresh();
            	}
            	}
            });
    
    clubStore.load();
    
dt = {

  selectOnFocus: true,
  
  
  
  allowBlank: false,
  msgTarget: 'under',
  width: 80,
  regex: /^\d{2}\/\d{2}\/\d{4}$/,
  regexText: 'DOB must be in the format DD/MM/YYYY',
  listeners: {
  
    'blur': function(dob){
    
      var s = "";
      
      s = dob.getValue();
      
      if (s.length == 6) {
        var ns = s.substring(0, 2) + '/';
        ns += s.substring(2, 4) + '/19';
        ns += s.substring(4, 6);
        
        dob.setValue(ns);
      }
      
    }
  }
}
  
em = { vtype: 'email', selectOnFocus: true,
          typeAhead: false,
          typeAheadDelay: 1000,
          anchor: '100%',
          msgTarget: 'under',
          allowBlank: false}    
    
tt = {
  xtype: 'textfield',
  selectOnFocus: true,
  fieldLabel: 'Enter time (hh:mm:ss)',
  value: '00:00:00',
  width: 65,
  regex: /^[0-2][0-9]:[0-5][0-9]:[0-5][0-9]$/,
  regexText: 'Time must be entered in hh:mm:ss (hours:minutes:seconds). Please use leading 0s and : where necessary' 
 

}

tx = {selectOnFocus: true,
           
           selectOnFocus: true,
          msgTarget: 'under',
          allowBlank: false,
          regex: /^[a-zA-Z_\- ]+$/,
          regexText: 'Must be alphabetic a-zA-Z only',
          listeners: {
          
            'blur': function(t){
              var s = t.getValue();
              
              t.setValue(s.toTitleCase())
            }
          }};
          
          ta = {selectOnFocus: true,
           
           selectOnFocus: true,
          msgTarget: 'under',
          allowBlank: false,
          regex: /^[0-9.]+$/,
          regexText: 'Must be alphabetic a-zA-Z only',
          listeners: {
          
            'blur': function(t){
              var s = t.getValue();
              
              t.setValue(s.toTitleCase())
            }
          }};

FOS.Organiser.Event.Participant.viewConfigTriathlon = {
    title : 'Participants',
    id: 'eventParticipants',
    plugins: [new Ext.ux.grid.GridHeaderFilters()],
    store: FOS.Organiser.Event.Participant.store,
    loadMask: true,
    viewConfig: {
        forceFit: true,
        autoFill: true
    },
    autoWidth: false,
    autoHeight: false,
    border: true,
    autoDestroy: true,
    
    selModel : new Ext.grid.RowSelectionModel(),

    clicksToEdit: 'auto',
    
    tbar: FOS.Organiser.Event.Participant.toolbarConfig,
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [ new Ext.grid.RowNumberer({width: 75, header: 'Row'}),{
        id: "epId",
        hidden: true,
        width: 50,
        sortable: true,
        editor: new Ext.form.TextField(),
        editable: false,
        dataIndex: 'epId'
    }, {
        id: "meberId",
        hidden: true,
        width: 25,
        sortable: true,
        editor: new Ext.form.TextField(),
        editable: false,
        dataIndex: 'memberId'
    }, {
        id: "raceNo",
        header: "Bib#",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField( ),
        editable: true,
        dataIndex: 'raceNo',
        filter: {xtype:"textfield"}
    }, {
        id: "firstname",
        header: "Firstname",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'firstname',
        filter: {xtype:"textfield"}
    }, {
        header: "Last name",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'lastname',
        filter: {xtype:"textfield"}
    }, {
        header: "DOB",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(dt),
        editable: true,
        dataIndex: 'dob'
    }, {
        header: "Email",
        width: 200,
        sortable: true,
        editor: new Ext.form.TextField(em),
        editable: true,
        dataIndex: 'email',
        filter: {xtype:"textfield"}
    }, {
        header: "Gender",
        width: 25,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'gender',
        filter: {xtype:"textfield"}
    }, {
        header: "Age",
        width: 25,
        hidden:true,
        sortable: true,
        editable: false,
        dataIndex: 'age'
    }, {
        header: "Club",
        width: 200,
        editor: new Ext.form.ComboBox({
            selectOnFocus: true,
            typeAhead: true,
            triggerAction: 'all',
            mode: 'local',
            store: clubStore,
            width: 200,
            valueNotFoundText: 'No club found',
            displayField: 'name',
            valueField: 'club_id'
        }),
        editable: true,
        sortable: true,
        renderer: renderClubName,
        dataIndex: 'club_id',
        filter: {xtype:"textfield"}
    }, {
        header: "Entry Paid",
        width: 100,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
        
        dataIndex: 'entryPaid',
        filter: {xtype:"textfield"}
    }, {
        header: "Wave",
        width: 40,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
        dataIndex: 'waveNumber',
        id: 'waveNumber'
    }, {
        header: "Lane",
        width: 40,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
        dataIndex: 'laneNumber',
        id: 'laneNumber'
    }, {
        header: "Lane Pos",
        width: 40,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
        dataIndex: 'positionNumber',
        id: 'positionNumber'
    }, {
        header: "Wave Start",
        width: 100,
        sortable: true,
        editable: false,
        dataIndex: 'actualWaveStartTime',
        id: 'actualWaveStartTime'
    }, {
        header: "Pos Start",
        width: 100,
        sortable: true,
        editable: false,
        dataIndex: 'positionStartTime',
        id: 'positionStartTime'
    }, {
        header: "Est. Swim",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'swimTime',
        id: 'swimTime'
    }, {
        header: "Est. Bike",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'bikeTime',
        id: 'bikeTime'
    }, {
        header: "Est. Run",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'runTime',
        id: 'runTime'
    }]}),
    stripeRows: true,
    autoScroll: true,
    frame: false,
    view: new Ext.ux.grid.BufferView({
        // custom row height
        rowHeight: 22,
        // render rows as they come into viewable area.
        scrollDelay: false
    }) 
        
       
      

};


FOS.Organiser.Event.Participant.viewConfigRunning = {
    title: 'header',
     plugins: [new Ext.ux.grid.GridHeaderFilters()],

      id: 'eventParticipants',
    store: FOS.Organiser.Event.Participant.store,
    loadMask: true,
    viewConfig: {
        forceFit: true,
        autoFill: true
    },
    autoWidth: false,
    autoHeight: false,
    border: true,
    clicksToEdit: 2,
    selModel : new Ext.grid.RowSelectionModel(),
    
    tbar: FOS.Organiser.Event.Participant.toolbarConfig,
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [ new Ext.grid.RowNumberer({width: 75, header: 'Row'}), {
        id: "epId",
        hidden: true,
        width: 25,
        sortable: true,
        editor: new Ext.form.TextField(),
        editable: false,
        dataIndex: 'epId'
    }, {
        id: "meberId",
        hidden: true,
        width: 25,
        sortable: true,
        editor: new Ext.form.TextField(),
        editable: false,
        dataIndex: 'memberId'
    }, {
        id: "raceNo",
        header: "Bib#",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
        dataIndex: 'raceNo',
        filter: {xtype:"textfield"}

    }, {
        id: "firstname",
        header: "Firstname",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'firstname',
        filter: {xtype:"textfield"}

    }, {
        header: "Last name",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'lastname',
        filter: {xtype:"textfield"}

    }, {
        header: "DOB",
        width: 75,
        sortable: true,
        editor: new Ext.form.TextField(dt),
        editable: true,
        dataIndex: 'dob'
    }, {
        header: "Email",
        width: 200,
        sortable: true,
        editor: new Ext.form.TextField(em),
        editable: true,
        dataIndex: 'email',
        filter: {xtype:"textfield"}
    }, {
        header: "Gender",
        width: 25,
        sortable: true,
        editor: new Ext.form.TextField(tx),
        editable: true,
        dataIndex: 'gender',
        filter: {xtype:"textfield"}
    }, {
        header: "Age",
        width: 25,
        hidden:true,
        sortable: true,
        editable: false,
        dataIndex: 'age'
    }, {
        header: "Club",
        width: 200,
        editor: new Ext.form.ComboBox({
          selectOnFocus:true,
            typeAhead: true,
            triggerAction: 'all',
            mode: 'local',
            store: clubStore,
       width: 200,
            valueNotFoundText: 'No club found',
            displayField: 'name',
            valueField: 'club_id'
        }),
        editable: true,
        sortable: true,
    renderer: renderClubName,
        dataIndex: 'club_id',
        filter: {xtype:"textfield"}
    }, {
        header: "Entry Paid",
        width: 100,
        sortable: true,
        editor: new Ext.form.TextField(ta),
        editable: true,
       
        filter: {xtype:"textfield"},
        dataIndex: 'entryPaid'
    } ]}),
    view: new Ext.ux.grid.BufferView({
        // custom row height
        rowHeight: 22,
        // render rows as they come into viewable area.
        scrollDelay: false
    }),
    stripeRows: true,
    autoScroll: true,
    frame: false/*
         * , listeners: { rowdblclick: function(grid, i, e){
         * 
         * 
         * epId = grid.getStore().getAt(i).data.epId;
         * 
         * FOS.Organiser.Event.Participant.Detail.edit(epId);
         *  }
         *  }
         */

};


FOS.Organiser.Event.Participant.refresh = function(forceRefresh){

    if (Ext.getCmp('autoRefresh')) {
        if (forceRefresh == undefined) 
            forceRefresh = false;
        
        if (forceRefresh || Ext.getCmp('autoRefresh').pressed == true) {
            FOS.Organiser.Event.Participant.store.reload();
            Ext.getCmp('eventParticipants').getView().refresh();
        }
    }
}





FOS.Organiser.Event.Participant.show = function(eid, typeId, eventName){

    try {
    
    Ext.getCmp('organiserMainTab').doLayout();
    
        FOS.Organiser.Event.Participant.typeId = typeId;
        FOS.Organiser.Event.Participant.eventId = eid;
        FOS.Organiser.Event.Participant.store.load({
            params: {
                eventId: eid
            },
            callback: function(r, o, s){
            
            
                if (s == true) {
                  
                 
                      
                      Ext.getCmp('organiserMainTab').removeAll(true);
                      try {
                        Ext.getCmp('eventParticipants').destroy();
                      }
                      catch(e){};
                 
                  
                    if (FOS.Organiser.Event.Participant.typeId == 'TRI') 
                        Ext.getCmp('organiserMainTab').add(new Ext.grid.EditorGridPanel(FOS.Organiser.Event.Participant.viewConfigTriathlon));
                    else 
                        Ext.getCmp('organiserMainTab').add(new Ext.grid.EditorGridPanel(FOS.Organiser.Event.Participant.viewConfigRunning));
                    
                    Ext.getCmp('eventParticipants').setTitle(eventName);
                    
                    Ext.getCmp('organiserMainTab').doLayout();
                }
                
                
            }
            
        });
        
        
    } 
    catch (ex) {
        alert(ex.getMessage());
        
    };
    
    
    
    };