/**
 * This class observes textareas on a page and adds a counter to them
 * that keeps track of the number of characters entered. If the number
 * of entered characters exceeds the given limit, the counter gets
 * highlighted.
 *
 * Usage:
 *   <textarea rows="2" characterlimit="100"></textarea>
 * 
 * CSS:
 *   div.counter: the inserted counter
 *   div.counter span: the number of entered characters
 *   div.counter span.exceeded: whenever the limit is exceeded
 *
 * Note: requires mootools v1.11
 *
 * Copyright (C) 2008 by Tobias Brunner (tobias.brunner@agic.ch)
 */
var CharacterLimitObserver = new Class({
	initialize: function() {
		$$('textarea').each(function(field) {
			var limit = field.getProperty('characterlimit');
			if (!limit) { return; }
			
			var counter = new Element('div', { 'class': 'counter' });
			counter.setHTML('<span>0</span>/' + limit);
			counter.injectAfter(field);
			field.counter = counter.getElement('span');
			
			var check = this.checkLimit.bindAsEventListener(field);
			field.addEvent('change', check);
			field.addEvent('keyup', check);
			check();
		}.bind(this));
	},
	
	checkLimit: function() {
		var limit = this.getProperty('characterlimit');
		var value = this.value.replace(/\r\n?/g, "\n");
		var len = value.length;
		if (len > limit) {
			this.counter.addClass('exceeded');
		} else {
			this.counter.removeClass('exceeded');
		}
		this.counter.setText(len);
	}
});

window.addEvent('domready', function() {
	new CharacterLimitObserver();
});