function CharCounter(elID,maxChars,showId)
{
    this.elID           =   elID;
    this.showId         =   showId;
    this.maxChars       =   maxChars || 140;    // 140 = Twitter
    this.targetElement  =   document.getElementById(this.elID);
    this.counterElement =   document.getElementById(this.showId);
    this.id             =   'keycounter';
    this.setup();
}
CharCounter.prototype   = {
    setup:function()
    {
        var me      =   this;
        var updater = function(){
            return me.update();
        }
        this.targetElement.onkeyup      =   updater;
        this.targetElement.onfocus      =   updater;
        this.targetElement.onblur       =   updater;
        //this.targetElement.onclick      =   updater;
        this.update();
    },
    update : function()
    {
        if(this.getLength() > this.maxChars){
            this.showWarning();
        }else{
            this.hideWarning();
        }
        this.updateCounter();
    },
    getLength : function()
    {
        this.charLength = this.targetElement.value.length;
        return this.charLength;
    },
    updateCounter : function()
    {
        this.counterElement.innerHTML = this.charLength;
    },
    showWarning :   function()
    {
        this.counterElement.setAttribute('class','warning');
        try
        {
           this.counterElement.className('warning');
        } catch (e) {}
    },
    hideWarning  :  function()
    {
        this.counterElement.setAttribute('class','');
        try
        {
           this.counterElement.className('');
        } catch (e) {}
    }
}