var gf = {
  iCount: 0, iTotal: 0,
  storeConfig: [
    {name:'EvID', type: 'float'}, 
    'OpenEventSession', 'EvTitle', 'EventIcon', 'EvSummary', 'EvThumbnailFilename', 'EvCategoryName', 'store_type', 
    {name:'dtStart', type:'date'}, {name:'dtEnd', type:'date'}
  ],
  manipulate_storage: function (obj) {
    //ww.el.alertDetails(obj.json);
    gf.iCount++;
    var id = obj.json.store_type + '_' + obj.json.EvID;
    if (typeof(obj.json.EventIcon)=='string') {
      obj.json.EventIcon = obj.json.EventIcon.replace(' ', '_');
    }
    var thumb = (obj.json.EvThumbnailFileName=='')?'/img/events_icons/' + obj.json.EventIcon + '.jpg':
                '/resize_image.aspx?FilePath=' + '/resources/whatsup' + obj.json.EvThumbnailFileName +
                '&width=84';
    Ext.fly('img_evthumb_'+id).dom.src = thumb;
    
    var dtDisplay = {
      start: (obj.json.EvIsHideDayStartDate==1)?obj.json.dtStart.format('M Y'):obj.json.dtStart.format('j M Y'),
      end: (obj.json.EvIsHideDayEndDate==1)?obj.json.dtEnd.format('M Y'):obj.json.dtEnd.format('j M Y')
    }
    Ext.fly('evDate_' + id).dom.innerHTML = (dtDisplay.start==dtDisplay.end)?dtDisplay.start:dtDisplay.start + ' - ' + dtDisplay.end;
    if (gf.iCount==gf.iTotal) {
      
    }
  },
  btnFilterGo_onClick: function (value) {
    if (value=='0') {
      gv.cal.clearSelectedDate();
      gf.retrieveEvent();
    } else {
      gf.retrieveEvent(true);
    }
  },
  retrieveEvent: function (isFilter) {
    var dt = gv.cal.getValue(true);
    var params = {
      fl: Ext.fly('fl').dom.value,
      d: dt.getDate(),
      m: dt.getMonth()+1,
      y: dt.getFullYear()
    }
    this.isFilter = isFilter;
    if (isFilter) Ext.apply(params, {isFilter: 1});
    if (params.d < 10) params.d = '0' + params.d.toString();
    if (params.m < 10) params.m = '0' + params.m.toString();
    gv.store.load({params: params, scope: this,
      callback: function () {
        if (this.isFilter) this.hideHighlight();
          else this.showHighlight();
      }
    });
  },
  hideHighlight: function () {
    Ext.fly('ev_highLightTitle').hide();
    Ext.fly('eventsListHighlight').hide();
  },
  showHighlight: function () {
    gv.storeHL.filterBy(function (rc, id) {
      var arr = gf.EventIds();
      for (var i=0;i<arr.length;i++) {
        if (rc.json.EvID==arr[i]) return false;
      }
      return true;
    });
    if (gv.storeHL.data.length<0) Ext.fly('ev_highLightTitle').dom.innerHTML = '';
      else Ext.fly('ev_highLightTitle').dom.innerHTML = '<div class="listingHighlight">Highlighted Events</div>';
    gf.iCount=0;
    gf.iTotal=gv.storeHL.data.length;
    gv.storeHL.each(gf.manipulate_storage);

    Ext.fly('ev_highLightTitle').show();
    Ext.fly('eventsListHighlight').show();
  },
  EventIds: function () {
    var objs = gv.plev.el.select('div.listingItem');
    var oReturn = [];
    objs.each(function (obj) {
      oReturn.push(obj.dom.getAttribute('value'));
    }, oReturn);
    return oReturn;
  }
}

Ext.onReady(function () {
  gv.cal = new Ext.ww.DateSelector(
    Ext.apply(gv.config, {
      renderTo: 'calendarPicker',
      onControlHandler: function (el, dt) {
        Ext.fly('fl').dom.selectedIndex = 0;
        gf.retrieveEvent();
      },
      handler: function () {
        iLength = Ext.fly('fl').dom.options.length - 1;
        Ext.fly('fl').dom.selectedIndex = iLength;
        gf.retrieveEvent();
      }
    })
  );

  var tplListing = new Ext.XTemplate(
    '<tpl for=".">',
      '<div id="ev_{store_type}_{EvID}" class="listingItem" value="{EvID}">',
        '<div class="panelLeft">',
          '<img id="img_evthumb_{store_type}_{EvID}" src="/admin/img/ext/s.gif" /><br/>',
          '<img src="/admin/img/ext/s.gif" height="5px"/><br/>',
          '<b>{EvCategoryName}</b>',
        '</div>',
        '<div id="evCont_{store_type}_{EvID}" class="panelRight">',
          '<div style="font-weight: bold;">{EvTitle}</div>',
          '<div>{EvSummary}</div>',
          '<div id="evDate_{store_type}_{EvID}" style="font-weight: bold; padding-top: 2px;"></div>',
        '</div>',
        '<div class="viewMore" id="rcMoreCont_{store_type}_{EvID}">',
          '<a id="rcBook_{store_type}_{EvID}" style="cursor: pointer;" href="https://' + ww.location.domainname() + '/eventsbooking/booking.asp?eventID={EvID}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(\'Image_book_{store_type}_{EvID}\',\'\',\'../img/common/register_on.gif\',1)">',
            '<img id="Image_book_{store_type}_{EvID}" src="/img/common/register_off.gif" style="display: {OpenEventSession};"/>', 
          '</a>&nbsp;&nbsp;',
          '<a id="rcViewMore_{store_type}_{EvID}" style="cursor: pointer;" href="/exhibitions/eventdetail.asp?eventid={EvID}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(\'Image_more_{store_type}_{EvID}\',\'\',\'../img/common/more_on.gif\',1)">',
            '<img id="Image_more_{store_type}_{EvID}" src="/img/common/more_off.gif" />',
          '</a>',
        '</div>',
      '</div>',
    '</tpl>'
  );
  
  gv.store = ww.dbStore.JSON(gv.evkey, gf.storeConfig, {}, '/CMSControl/storeEvents.asp');
  gv.storeHL = ww.dbStore.JSON(gv.hlkey, gf.storeConfig);
  gv.store.on('load', function() {
    gf.iCount=0;
    gf.iTotal=gv.store.data.length;
    gv.store.each(gf.manipulate_storage);
  });  
  gv.store.load({params: gv.evparam, 
    callback: function () {
      gv.storeHL.load({
        callback: function () {
          gf.showHighlight();
        }
      });
    }
  });

  gv.plev = new Ext.Panel({
    renderTo: 'eventsList',
    autoHeight:true,
    autoWidth: true,
    border: false,
    items: new Ext.DataView({
      tpl: tplListing,
      store: gv.store,
      loadingText: 'Loading. . .',
      emptyText: '<div style="height: 30px;">No event on selected filter.</div>',
      itemSelector: 'div.listingItem'
    })
  });

  gv.plhl = new Ext.Panel({
    renderTo: 'eventsListHighlight',
    autoHeight:true,
    autoWidth: true,
    border: false,
    items: new Ext.DataView({
      tpl: tplListing,
      store: gv.storeHL,
      loadingText: 'Loading. . .',
      emptyText: '',
      itemSelector: 'div.listingItem'
    })
  });
});