var InputHinter = new Class({
	Implements: [Options],
	options:{
		hintcolor: '#aaa',
		leftpadding: -5,
		isrelative: false
	},
	
	initialize:function(element,hint,options){
		var self = this;
		this.setOptions(options);
		this.element = $(element);
		this.hint = hint;
		this.hidden = false;
		var elemcoords = this.element.getCoordinates();
		
		this.hintdiv = new Element('div',{
		}).set('html',this.hint)
		.addClass('InputHint')
		.inject(document.body,'bottom')
		.setStyles({
			'display':'block',
			'position':'absolute'
		})
		.addEvents({
			'click':function(){
				self.hidehint();
				self.element.disabled = false;
				self.element.focus();
			},
			'mouseup':function(){
				self.hidehint();
				self.element.disabled = false;
				self.element.focus();
			}
		});
		
		this.restyle();
		this.reposition();
		this.hintify();
		
		this.element.addEvent('focus',function(){
			self.element.disabled = false;
			self.hidehint();
		});

		this.element.addEvent('blur',function(){
			self.hintify();
		});
		
		document.addEvent('DOMNodeRemoved',function(){
			// alert('dom changed');
		});
		document.addEvent('DOMNodeInserted',function(){
			// alert('dom changed');
		});
		
		window.addEvent('resize',function(){
			self.reposition();
		});

	},
	restyle:function(){
		this.hintdiv.setStyles({
			'color':this.options.hintcolor,
			'font-size':this.element.getStyle('font-size'),
			'font-family':this.element.getStyle('font-family'),
			'padding-top':this.element.getStyle('padding-top').toInt(),
			'padding-right':this.element.getStyle('padding-right').toInt(),
			'padding-bottom':this.element.getStyle('padding-bottom').toInt(),
			'padding-left':this.element.getStyle('padding-left').toInt()+5,
			'margin':this.element.getStyle('margin'),
			'text-align':this.element.getStyle('text-align'),
			'line-height':this.element.getStyle('line-height')
		});
	},
	reposition:function(){
		var elemcoords = this.element.getCoordinates();
		this.hintdiv.setStyles({
			'width':elemcoords.width - this.options.leftpadding,
			'height':elemcoords.height,
			'top':elemcoords.top,
			'left':elemcoords.left + this.options.leftpadding
		});
	},
	hintify:function(){
		if(this.element.value.length < 1){
			this.showhint();
		}else{
			this.hidehint();
		}
		this.reposition();
	},
	hidehint:function(){
		this.hidden = true;
		this.hintdiv.setStyles({
			'display':'none'
		});
		// this.element.focus();
	},
	showhint:function(){
		this.hidden = false;
		this.hintdiv.setStyles({
			'display':'block'
		});
	}
	
});