/*

Text Counter

*/

function RT_TextCounter() {
    this.template = new Template('<span class="counter_remaining">#{remaining}</span> characters remaining');
    this.addCounter = function(element, maxlength)
    {
        var id = element.getAttribute('id') + '_counter';
        var counter = document.createElement('div');
        $(counter).setAttribute('id', id);
        $(counter).setAttribute('maxlength', maxlength);
        $(counter).addClassName('form-input-counter');
        var chars = $(element).value.length;
        var data = {remaining: maxlength - chars};
        $(counter).innerHTML = this.template.evaluate(data);
        
        $(element).insert({after: $(counter)});
        $(counter).style.width = ($(element).getWidth() - 6) + 'px';
        
        Element.observe($(element), 'focus', function(event)
        {
            var element = Event.element(event);
            var id = element.getAttribute('id') + '_counter';
            
            if (!$(id).hasClassName('form-input-counter-focused')) $(id).addClassName('form-input-counter-focused');
        });
        
        Element.observe($(element), 'blur', function(event)
        {
            var element = Event.element(event);
            var id = element.getAttribute('id') + '_counter';
            
            if ($(id).hasClassName('form-input-counter-focused')) $(id).removeClassName('form-input-counter-focused');
        });
        
        Element.observe($(element), 'keydown', this.handleKeyPress);
        Element.observe($(element), 'keyup', this.handleKeyPress);
        Element.observe($(element), 'change', this.handleKeyPress);
        Element.observe($(element), 'blur', this.handleKeyPress);
    }
    
    this.handleKeyPress = function(event)
    {
        var element = Event.element(event);
        var maxlength = element.getAttribute('maxlength');
        var chars = $(element).value.length;
        var counter = $(element.getAttribute('id') + '_counter');
        if (chars === false) $(counter).innerHTML = 'Error!';
        var remaining = maxlength - chars;
        var data = {remaining: remaining};
        if (remaining <= 0) {
            if (!$(counter).hasClassName('form-input-counter-error')) $(counter).addClassName('form-input-counter-error');
        } else {
            if ($(counter).hasClassName('form-input-counter-error')) $(counter).removeClassName('form-input-counter-error');
        }
        $(counter).innerHTML = RT.textCounter.getTemplate().evaluate(data);
    }
}

RT_TextCounter.prototype = {
    count: function(element, maxlength) 
    {
        if (!element) return;
        this.addCounter(element, maxlength);
    },
    
    countAll: function()
    {
        //var countable = $$('input[type=text]').concat($$('input[type=password]')).concat($$('textarea'));
        var countable = $$('input[maxlength]').concat($$('textarea'));
        countable.each(function(s) {
            var maxlength = s.getAttribute('maxlength');
            if (!maxlength || typeof(maxlength) == 'undefined') return;
            RT.textCounter.count(s, maxlength);
        });
    },
    
    getTemplate: function()
    {
        return this.template;
    }
}


if(!window.RT) { window['RT'] = {}; }
window['RT']['textCounter'] = new RT_TextCounter();

Event.observe(window, 'load', function()
{
    RT.textCounter.countAll();
});