if (!Ext.ww) Ext.ww = {}
Ext.ww.DateSelector = function (config) {
  Ext.ww.DateSelector.superclass.constructor.call(this, config);

  this.addEvents({
    select: true,
    change: true,
    controlsHandler: true,
    itemshow: true,
    itemhide: true
  });

  if(this.handler) this.on('select', this.handler,  this.scope || this);
  if(this.onchange) this.on('change', this.onchange,  this.scope || this);
  if(this.onControlHandler) this.on('controlsHandler', this.onControlHandler,  this.scope || this);
  this.on('itemshow', this.onItemShow,  this.scope || this);
  this.on('itemhide', this.onItemHide,  this.scope || this);

  if(!this.disabledDatesRE && this.disabledDates){
    var dd = this.disabledDates;
    var re = '(?:';
    for(var i = 0; i < dd.length; i++){
      re += dd[i];
      if(i != dd.length-1) re += "|";
    }
    this.disabledDatesRE = new RegExp(re + ")");
  }
  if (this.renderTo) this.render(this.renderTo);
}

Ext.extend(Ext.ww.DateSelector, Ext.Component, {
  activeDate: new Date(),
  minDate: new Date(1940,1,1),
  maxDate: (new Date()).add('y', 5),
  format: 'd M Y',
  formatMonth: 'M Y',
  disabledDays: null,
  disabledDatesRE: null,
  monthNames : Date.monthNames,
  dayNames : Date.dayNames,
  nextText: 'Next Month (Control+Right)',
  prevText: 'Previous Month (Control+Left)',
  highlight: [],
  startDay: 0,
  renderTo: null,
  isDateSelected: false, 
  setValue: function(newdt, isDateSelected){
    var old = this.activeDate;
    this.activeDate = newdt.clearTime(true);
    this.value = newdt.format(this.format);
    this.isDateSelected = isDateSelected||false;
    if(this.el)this.update(this.activeDate);
    this.fireEvent("change", this, this.activeDate);
  },
  getValue: function(isDateReturn){
    return (isDateReturn)?this.activeDate:this.value;
  },
  focus: function(){ if(this.el) this.update(this.activeDate); },
  showPrevMonth: function(e){
    var newdt = this.activeDate.add("mo", -1);
    if ((newdt.format('%Y%m')>=this.minDate.format('%Y%m')) && (newdt.format('%Y%m')<=this.maxDate.format('%Y%m'))) {
      this.cbMonth.setValue(newdt.getMonth()+1);
      this.cbYear.setValue(newdt.getFullYear());
      this.setValue(newdt);
      this.fireEvent("controlsHandler", this, this.activeDate);
    }
  },
  showNextMonth: function(e){
    var newdt = this.activeDate.add("mo", 1);
    if ((newdt.format('%Y')>=this.minDate.format('%Y')) && (newdt.format('%Y')<=this.maxDate.format('%Y'))) {
      this.cbMonth.setValue(newdt.getMonth()+1);
      this.cbYear.setValue(newdt.getFullYear());
      this.setValue(newdt);
      this.fireEvent("controlsHandler", this, this.activeDate);
    }
  },
  clearSelectedDate: function () {
    for (var i=0; i<this.days.length; i++) {
      if (this.days[i].className.indexOf('selected') > 0) {
        this.days[i].className = this.days[i].getAttribute('originClass');
      }
    }
  },
  handleDateClick : function(el){
    if ((el.className.indexOf('enable')>0) || (el.className.indexOf('highlight')>0)) {
      var old = this.activeDate; 
      var newdt = new Date(el.getAttribute('yr'), el.getAttribute('mth'), el.getAttribute('dt'));
      this.setValue(newdt, true);
      this.clearSelectedDate();
      el.className = 'x-dtselector-day-' + el.getAttribute('dt') + '-selected';
      this.fireEvent("select", this, this.value);
    }
  },
  onItemHide: function (callback, scope) {
    this.elItem.hide({duration: 2});
    this.elLoading.show({duration: 2, callback:callback||Ext.emptyFn, scope:scope||this})
  },
  onItemShow: function (callback, scope) {
    this.elLoading.hide({duration: 2})
    this.elItem.show({duration: 2, callback:callback||Ext.emptyFn, scope:scope||this});
  },
  update : function(dt){
    var index=0;
    var dtoffset = new Date(dt.getFullYear(), dt.getMonth(), 1);
    dtoffset.setDate(dtoffset.getDate()-dt.getFirstDayOfMonth());
    dtoffset.addDay = function () { this.setDate(this.getDate() + 1); }

    var disableClass = false;
    for (var i=0; i<this.days.length; i++) {
      index = (index>30)?1:index+1;
      var defClass = 'x-dtselector-day x-dtselector-day-' + dtoffset.getDate() + '-';
      var clsName = '';
      if (dtoffset.getMonth()==dt.getMonth()) clsName = defClass + 'enable';
        else clsName = defClass + 'disable';
      if ((parseFloat(dtoffset.format('Ym'))>parseFloat(dt.format('Ym'))) && (dtoffset.getDay()==0)) disableClass = true;
      if (clsName.indexOf('enable') > 0) {
        for (var j in this.highlight) {
          if (typeof(this.highlight[j])=='string') {
            var arr = this.highlight[j].split('-');
            if (arr.length<2) arr[1]=arr[0];
            if ((dtoffset.format('Ymd')>=arr[0]) && (dtoffset.format('Ymd')<=arr[1])) {
              clsName = defClass + 'highlight';
            }
          }
        }
      }
      
      this.days[i].className = (disableClass)?'x-dtselector-day':clsName;
      this.days[i].setAttribute('originClass', this.days[i].className);
      this.days[i].setAttribute('index', i);
      this.days[i].setAttribute('dt', dtoffset.getDate());
      this.days[i].setAttribute('mth', dtoffset.getMonth());
      this.days[i].setAttribute('yr', dtoffset.getFullYear());
      this.days[i].setAttribute('value', dtoffset.format(this.format));
      dtoffset.addDay();
    }
    if (!this.elItem.isVisible()) this.onItemShow();
  },
  onRender: function (container, position){
    var tmp = [
      '<img src="/admin/img/ext/s.gif" class="x-dtselector-dayhead-{index}" width="24" height="18"/><img src="/admin/img/ext/s.gif" width="1px"/>',
      '<img src="/admin/img/ext/s.gif" class="x-dtselector-day" width="24" height="18" onclick="Ext.getCmp(\'' + this.id + '\').handleDateClick(this);"/><img src="/admin/img/ext/s.gif" width="1px"/>',
    ]
    var wr_head = ''; var wr_item = '';
    for (var i=0;i<7;i++) {
      wr_item+=tmp[1];
      wr_head+=tmp[0];
      wr_head = wr_head.replace('{index}', i);
    }

    var m = [
      '<div class="x-dtselector"/>',
        '<div class="x-dtselector-control">',
          '<table width="180px" border="0" cellpadding="2" cellspacing="">',
            '<tr>',
              '<td>',
                '<img src="/admin/img/ext/s.gif" class="x-dtselector-left" />',
              '</td>',
              '<td class="x-dtselector-month" style="padding-left:5px;"></td>',
              '<td class="x-dtselector-year"></td>',
              '<td>',
                '<img src="/admin/img/ext/s.gif" class="x-dtselector-right" />',
              '</td>',
            '</tr>',
          '</table>',
        '</div>',
        '<div class="x-dtselector-header">' + wr_head + '</div>',
        '<div>', 
          '<div class="x-dtselector-loading"><br><br><img src="/admin/img/ext/grid/wait.gif" /></div>',
          '<div class="x-dtselector-item">',
            '<div>' + wr_item + '</div>',
            '<div>' + wr_item + '</div>',
            '<div>' + wr_item + '</div>',
            '<div>' + wr_item + '</div>',
            '<div>' + wr_item + '</div>',
            '<div>' + wr_item + '</div>',
          '</div>',
        '<div>',
      '</div>'
    ];

    var el = document.createElement('div');
    el.className = 'x-date-selector';
    el.innerHTML = m.join("");
    container.dom.insertBefore(el, position);
    this.el = Ext.get(el);
    this.elItem = this.el.child('div.x-dtselector-item');
    this.elLoading = this.el.child('div.x-dtselector-loading');
    this.days = this.el.select('img.x-dtselector-day').elements;
    this.elItem.hide();

    this.el.child('img.x-dtselector-left').on('click', this.showPrevMonth, this)
    this.el.child('img.x-dtselector-right').on('click', this.showNextMonth, this);
    
    var arrMth = [];
    for (var i=0;i<this.monthNames.length;i++) arrMth.push([(i+1), this.monthNames[i]]);
    this.cbMonth = new Ext.form.ComboBox({
      ownerCt: this, store: arrMth,
      mode: 'local', triggerAction: 'all', width: 90, editable: false, 
      value: this.monthNames[this.activeDate.getMonth()], 
      renderTo: this.el.child('td.x-dtselector-month', true)
    });
    this.cbMonth.on('select', function () {
      var old = this.ownerCt.activeDate; 
      var newdt = new Date(old.getFullYear(), (this.value-1), old.getDate());
      this.ownerCt.setValue(newdt);
      this.ownerCt.fireEvent("controlsHandler", this, this.activeDate);
    });
    
    this.years = [];
    for (var i=this.minDate.getFullYear(); i<=this.maxDate.getFullYear(); i++) this.years.push(i);
    this.cbYear = new Ext.form.ComboBox({
        ownerCt: this, store: this.years,
        mode: 'local', triggerAction: 'all', width: 60, editable: false, value: this.activeDate.getFullYear(), 
        renderTo: this.el.child('td.x-dtselector-year', true)
    });
    this.cbYear.on('select', function () {
      var old = this.ownerCt.activeDate; 
      var newdt = new Date(this.value, old.getMonth(), old.getDate());
      this.ownerCt.setValue(newdt);
      this.ownerCt.fireEvent("controlsHandler", this, this.activeDate);
    });

    this.setValue(this.activeDate);
  }
});