var Field = Class.create();
Field.prototype = {
	
	field:null,
	ispassword:false,
	mask:null,
	focusListener:null,
	blurListener:null,
	submitListener:null,
	
	initialize: function (element) {
		
		Element.extend(element);
		this.field = element;	
		this.isPassword = (Element.readAttribute(this.field,'type')=='password');
		
		if(Element.readAttribute(this.field,'alt')) {
			this.focusListener = this.activate.bind(this);
			this.blurListener = this.desactivate.bind(this);
			this.submitListener = this.submit.bind(this);
			if(this.isPassword) {
				Element.hide(this.field);
				this.mask = new Element('input',{'type':'text', 'value':Element.readAttribute(element,'alt')});
				this.field.parentNode.insertBefore(this.mask, this.field);
				if(this.field.value!="") Element.hide(this.mask);
				Event.observe(this.mask, "focus", this.focusListener);
			} else {
				if(this.field.value=="") {
					this.field.value = Element.readAttribute(element,'alt');
					this.field.addClassName("empty");
				}
				Event.observe(this.field, "focus", this.focusListener);
			}
			Event.observe(this.field.up('form'), "submit", this.submitListener);
		}
		
	},
	
	activate: function (e) {
		Event.observe(this.field, "blur", this.blurListener);
		Event.stopObserving(this.field, "focus", this.focusListener, false);
		this.field.removeClassName("empty");
		if(this.isPassword) {
			Element.show(this.field);
			Element.hide(this.mask);
			this.field.focus();
		}
		if(this.field.value==Element.readAttribute(this.field,'alt')) this.field.value = "";
	},
	
	desactivate: function (e) {
		Event.stopObserving(this.field, "blur", this.blurListener, false);
		if(this.field.value=="") {
			if(this.isPassword) {
				Element.show(this.mask);
				Element.hide(this.field);
			} else {
				this.field.value = Element.readAttribute(this.field,'alt');
				this.field.addClassName("empty");
			}
		}
		if(this.isPassword) {
			Event.observe(this.mask, "focus", this.focusListener, false);
		} else {
			Event.observe(this.field, "focus", this.focusListener, false);
		}
	},
	
	submit: function (e) {
		Event.stopObserving(this.field.up('form'), "submit", this.submitListener);
		if(this.field.value==Element.readAttribute(this.field,'alt')) this.field.value="";
	}
	
}


var FieldRadio = Class.create();
FieldRadio.prototype = {
	
	radio:null,
	span:null,
	elementHeight:25,
	
	initialize: function(element) {
		
		Element.extend(element);
		this.radio = element;
		this.span = new Element("span");
		this.span.className = this.radio.className;
		this.radio.className = null;
		Element.hide(this.radio);
		this.radio.parentNode.insertBefore(this.span, this.radio);
		if(this.radio.up('.disabled')) {
			this.pushed();
		} else {	
			$$('label[for='+Element.readAttribute(this.radio,'id')+']').each(function(label) {
				Event.observe(label, "mousedown", function(e) {this.check(e)}.bind(this), false);
				Element.writeAttribute(label,"for",null);
			}.bind(this));
			Event.observe(this.span, "mousedown", function(e) {this.pushed(e)}.bind(this), false);
			Event.observe(this.span, "mouseup", function(e) {this.check(e)}.bind(this), false);
			this.clear();
		}
	},

	pushed: function(e) {
		if(this.radio.checked) {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*3)+"px";
		} else {
			this.span.style.backgroundPosition = "0 -"+this.elementHeight+"px";
		}
	},
	
	check: function(e) {
		this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
		this.radio.checked = true;
		$$('input[type=radio][name='+this.radio.name+']').each(function(el) {
			if(el != this.radio) {
				el.checked = false;
				Element.previous(el,'span').style.backgroundPosition = "0 0";
			}
		}.bind(this));
	},
	
	clear: function(e) {
		if(this.radio.checked) {
			this.span.style.backgroundPosition = "0 -"+(this.elementHeight*2)+"px";
		} else {
			this.span.style.backgroundPosition = "0 0";
		}
	}
}
function initFields() {
	$$('input[type=text]').each(function (field, index) {var myField = new Field(field);}.bind(this));
	$$('input[type=radio]').each(function (field, index) {if(Element.hasClassName(field,"fieldRadio")) var myField = new FieldRadio(field);}.bind(this));
}
Event.observe(document, 'dom:loaded', initFields, false);