var wc = {
  items: [],
  invalidText: 'Please enter at most {0} words in the "{1}" field.\n',
  manipulate: function () {
    var doms = Ext.query('textarea[wordcount]');
    this.items = [];
    for (var i=0;i<doms.length;i++) {
      var el = Ext.get(doms[i]);
      this._initCoponent.call(el);
      this.items.push(el);
    }
  },
  validate: function (fieldname) {
    var el = this.getItems(fieldname);
    var invalidText = String.format(this.invalidText, el.maxWords, el.fieldLabel);
    if (this.getWordsCount(el.getValue())>el.maxWords) {
      alert(invalidText);
      return false;
    }
    return true;
  },
  getItems: function (field) {
    if (typeof(field)=='number') {
      if (field < this.items.length-1) return this.items[field];
        else return null;
    }
    var r = null;
    for (var i=0;i<this.items.length;i++) {
      if (this.items[i].fieldname==field) {
        return this.items[i];
      }
    }
    return r;
  },
  getWordsCount: function (txt) {
    var arr = [];
    if (txt.indexOf(' ')>0) arr = txt.split(' ');
    return arr.length;
  }, 
  _doCount: function () {
    var txt = this.getValue();
    txt = txt.replace(/\s+/g, ' ');
    
    var arr = [];
    if (txt.indexOf(' ')>0) arr = txt.split(' ');
    if(arr[arr.length-1]=='') arr.pop();
    var r=true;
    var upt = arr.length;
    if (this.maxWords) {
      if (upt>this.maxWords) {
        upt = this.maxWords;
        r=false;
        arr.pop();
        arr.push('');
        txt = arr.join(' ');
      }
    }
    this.dom.value = txt;
    this.countEl.update(upt);
    return r;
  },
  _initCoponent: function () {
    var max = parseFloat(this.dom.getAttribute('wordcount'));
    var maxWords = (isNaN(max))?false:max;
    var ct = Ext.get(this.dom.name + '_info');
    var msgCt = (!ct)?null:ct.createChild({ tag: 'div', style: {position: 'relative', 'margin-left': 35} });
    Ext.apply(this, {
      fieldname: this.dom.name,
      maxWords: maxWords,
      fieldLabel: this.dom.getAttribute('fieldLabel')||this.dom.name,
      infoCt: ct,
      countEl: (!ct)?null:ct.insertFirst({
        tag: 'div', html: '0', 
        style: {
          position: 'relative', 'text-align': 'right', width: 40, 
          padding: '0px 5px 0px', border: '1px solid #7EADD9', float: 'left'
        }
      }),
      labelEl: (!msgCt)?null:msgCt.createChild({ 
        tag: 'span', html: 'word(s)', style: 'margin-left: 5px;'
      }),
      msgEl: ((maxWords<1)||(!msgCt))?null:msgCt.createChild({
        tag: 'span', html: '<i>(Not more than ' + maxWords + ' words)</i>', 
        style: 'margin-left: 10px;'
      })
    });
    this.on('keyup', function (E) {
      wc._doCount.call(this);
    });
    this.on('blur', function () {
      var txt = this.getValue();
      this.dom.value = trim(txt);
      wc._doCount.call(this);
    });
  }
}

Ext.onReady(function () { 
  wc.manipulate();
});