var TaLimitBar = new Class({
	options:{
		'taelem' : null,
		'counterelem' : null,
		'limit':20,
		'barcolors':[
			{'p':50,'c':'#777777'},
			{'p':70,'c':'#997777'},
			{'p':80,'c':'#cc7777'},
			{'p':90,'c':'#ff7777'},
			{'p':95,'c':'#ff5555'},
			{'p':97,'c':'#ff4444'},
			{'p':100,'c':'#ff0000'}
		],
		'barheight':5,
		'scrollwidth':18,
		'showmeter':false
	},
	initialize:function(options){
		
		var self = this;
		this.setOptions(options);

		// add padding tothe bottom
		
		if(this.options.showmeter){
		
			this.options.taelem.setStyle('padding-bottom',this.options.barheight * 2);
	
			// add some margin to the bottom of the ta
			var tabottommargin = this.options.taelem.getStyle('margin-bottom').toInt();
			this.options.taelem.setStyle('margin-bottom',tabottommargin+8);
	
			// draw the bar
			var tacoords = this.options.taelem.getCoordinates();
			
			this.barcontainer = new Element('div');
			this.barcontainer.setStyles({
					'position':'absolute',
					'top':tacoords['bottom'],
					'left':tacoords['left'],
					'height':'5px',
					'width':tacoords['width'],
					'background':'#eee',
					'overflow':'hidden',
					'border':'1px solid #ccc',
					'line-height':0,
					'margin':0
			});
			this.barcontainer.inject(document.body,'top');
			
			this.barbar = new Element('div',{
				styles:{
					'position':'absolute',
					'top':0,
					'left':0,
					'width':0,
					'height':'5px',
					'background':'orange'
				}
			}).inject(this.barcontainer,'top');
			this.getbarwidth();
			
		}
		
		this.putcounter();
		this.trim();
		
		this.options.taelem.addEvent('keypress',function(){
			if(self.options.showmeter){
				self.getbarwidth();
			}
			var charsleft = self.putcounter();
			if(charsleft < 0){
				self.trim();
			}
		});
		this.options.taelem.addEvent('keyup',function(){
			if(self.options.showmeter){
				self.getbarwidth();
			}
			var charsleft = self.putcounter();
			if(charsleft < 0){
				self.trim();
			}
		});
		window.addEvent('resize',function(){
			if(self.options.showmeter){
				self.reposition();
			}
		});
	},
	reposition:function(){
		var tacoords = this.options.taelem.getCoordinates();
		this.barcontainer.setStyles({
			'top':tacoords['bottom'],
			'left':tacoords['left'],
			'width':tacoords['width']
		});
	},
	getbarwidth:function(){
		var textlength = this.options.taelem.value.length;
		if(this.options.limit > 0){
			var perc = textlength / this.options.limit;
		}else{
			var perc = 0;
		}
		var cw = this.barcontainer.getCoordinates().width;
		this.barbar.setStyle('width',Math.floor(cw * perc));
		var bg = this.options.barcolors[0].c;
		this.options.barcolors.each(function(ob){
			if(perc >= (ob.p / 100)){
				bg = ob.c;
			}
		});
		this.barbar.setStyle('background-color',bg);
	},
	putcounter:function(){
		var textlength = this.options.taelem.value.length;
		var charsleft = this.options.limit - textlength;
		this.options.counterelem.set('html',charsleft);
		return charsleft;
	},
	trim:function(){
		this.options.taelem.value = this.options.taelem.value.substring(0,this.options.limit);
		this.putcounter();
	},
	hide:function(){
		this.barcontainer.addClass('hide');
	},
	show:function(){
		this.barcontainer.removeClass('hide');
		this.reposition();
	}
});
TaLimitBar.implement(new Events, new Options);