var ContactForm=new Class({

	initialize: function(formElement){
		this.fields = [];
		this.form = $(formElement);
		$(formElement).addEvent('submit', (function(e){
			this.validate();
			if(!this.validateForm()){
				alert(unescape('Bitte f%FCllen Sie alle Felder korrekt aus'));
				e.preventDefault();
			}
			
		}).bind(this));
	},
	
	addField: function(element, regexp){
		element = $(element);
		var self = this;
		var field = {};
		field.element = element;
		field.regexp = regexp;
		this.fields.push(field);
		
		element.addEvent("keyup", this.validateField.pass(field, this));
		element.addEvent("blur", this.validateField.pass(field, this));
		this.validateForm();
		
		var help = field.help = {};
		help.general = element.getParent().getElement('.help .general');
		help.error = element.getParent().getElement('.help .error');
		
		element.addEvent('focus', function(){
			self.showHelp(field, 'general');
		});
		
		element.addEvent('blur', function(){
			self.hideHelp(field, 'general');
			self.hideHelp(field, 'error');
			field.edited = true;
		});
	},
	
	showHelp: function(field, type){
		var el = field.help[type];
		if(!el)
			return;
		
		if(el.retrieve('show'))
			return;
		
		
		el.setStyles({display:'block', overflow: 'hidden'});
		var h = el.getSize().y;
		el.setStyles({display:'block', marginTop:-h, opacity:0});
		var morph = new Fx.Morph(el);
		morph.addEvent('complete', function(){ el.setStyle('height', 'auto'); })
		morph.start({opacity: 1, marginTop: 0});
		el.store('show', true);
	},
	
	hideHelp: function(field, type){
		var el = field.help[type];
		if(!el)
			return;
		
		if(!el.retrieve('show'))
			return;
		
		var h = el.getSize().y;
		el.setStyles({display:'block', marginTop:0, opacity:1});
		var morph = new Fx.Morph(el);
		morph.addEvent('complete', function(){ el.setStyle('display', 'none'); })
		morph.start({opacity: 0, marginTop: -h});
		
		//el.setStyle('display', 'none');
		el.setStyle('height', 'auto');
		el.store('show', false);
	},
	
	validateField: function(field){
		if(field.element.value.match(field.regexp)){
			this.setValid(field);
		}else{
			this.setInvalid(field);
		}
		
		this.validateForm();
	},
	
	validateForm: function(){
		var count = 0;
		this.fields.each(function(field){
			if(field.valid)
				count++;
		});
		if(count >= this.fields.length){
			return true;
		}else{
			return false;
		}
	},
	
	validate: function(){
		this.fields.each(function(field){
			field.edited = true;
			this.validateField(field);
		}, this);
	},
	
	setValid: function(field){
		field.element.getParent().removeClass("invalid");
		field.element.getParent().addClass("valid");
		field.valid = true;
		
		this.hideHelp(field, 'error');
	},
	
	setInvalid: function(field){
		field.element.getParent().removeClass("valid");
		if(field.edited)
			field.element.getParent().addClass("invalid");
		field.valid = false;
		
		this.showHelp(field, 'error');
	}
	
});