window.addEvent('domready', loadPage);

var validator;

function loadPage()
{
	if('submit'){
	$('submit').addEvent('click', validateAll);
	
	validator = new Validator('myValidator');	
	validator.addField(new RequiredTextbox($('first_name'), 'Vul hier uw voornaam in', 'Gelieve uw voornaam in te vullen'));
	validator.addField(new RequiredTextbox($('last_name'), 'Vul hier familienaam in', 'Gelieve uw familienaam in te vullen'));
	validator.addField(new RequiredEmail($('email_address'), 'Vul hier uw e-mail adres in', 'Gelieve een geldig e-mail adres in te vullen'));
	validator.addField(new RequiredTextbox($('username'), 'Vul hier uw gebruikersnaam in', 'Gelieve uw gebruikersnaam in te vullen'));
	validator.addField(new RequiredTextbox($('straat'), 'Vul hier uw straat in', 'Gelieve uw straat in te vullen'));
	validator.addField(new RequiredTextbox($('postcode'), 'Vul hier uw postcode in', 'Gelieve uw postcode in te vullen'));
	validator.addField(new RequiredTextbox($('gemeente'), 'Vul hier uw gemeente in', 'Gelieve uw gemeente in te vullen'));
	validator.addField(new RequiredTextbox($('geboortedatum'), 'Vul hier uw geboortedatum in', 'Gelieve uw geboortedatum in te vullen'));
	}
	
}

function validateAll()
{					   
	validator.validateFields();
	
	if(errormessages.length > 0)
	{
		var errlist = '<ul>';
		errormessages.each(function(item){
			errlist += '<li>' + item + '</li>';
		});
		errlist += '</ul>';
		$('validationSummary').set('html', errlist);		
		
		return false;
		
	}else{
		$('validationSummary').empty();
	}
	
	
	
	
	//alert(parent.get('html'));
	/*
	
	
	validator.addField($('firstName', 'enter first name here', 'enter your first name'));
	
	
	validator.addField($('email'));
	
	
	alert(validator.validatorFields.length);
	
	*/
	/*
	var validatortextField = new RequiredTextbox(1,2,3);
	validatortextField.validate();
	
	var validatorEmailField = new RequiredEmail(1,2,3);
	validatorEmailField.validate();
	*/
	// create validation class
	
	// fire validation
	
	
	/*	
	// select the element vname
	var vname =	$('vname');
	alert(vname.value);
	
	// select all input fields
	//var inputfields = $$('input');
	//alert(inputfields);
	
	//var inputfields = $E('input[type=text]');
	
	// loop all fields
	inputfields.each(function(item, index){
		alert(index + " = " + item.value);
	});
*/	
}

function validateField(e){
   var validatorField = validator.findField(e.target.id);
   validatorField.validate();
}

function activateField(e)
{
	var validatorField = validator.findField(e.target.id);
    validatorField.activate();
}

function deactivateField(e)
{
	var validatorField = validator.findField(e.target.id);
    validatorField = validatorField.deactivate();
}

var errormessages = new Array();

var Validator = new Class({
						  
	initialize:function(id)
	{
		this.validatorFields = new Array();		
	},
	
	addField:function(validatorField)
	{		
		validatorField.addTooltip();
		validatorField.element.addEvent('change', validateField);
		this.validatorFields.include(validatorField);
		//alert(validatorField.element);	
	},
	
	findField:function(id){
		var field = null;
		this.validatorFields.each(function(item)
		{
			if(item.element.id==id)
				field = item;
		});
		return field;
	},
	
	validateField:function(validatorField, index)
	{		
		if(!validatorField.validate())
		{
			errormessages.include(validatorField.errmsg);
			//errmsg += validatorField.errmsg;
		}		
	},
	
	validateFields:function()
	{
		errormessages = new Array();
		this.validatorFields.each(this.validateField);
	}	
	
});

// Base class

var ValidatorField = new Class({
	initialize:function(element, tooltip, errmsg)
	{
		this.element = element;		
		this.tooltip = tooltip;
		this.errmsg = errmsg;
		this.setFieldValid();
	},
	
	setFieldInvalid:function(){
		this.element.addClass('requiredfield');
		
		if(!$(this.element.id + '_required')){
			var required  = new Element('span', {id: this.element.id + '_required'});
			required.set('html', '*');
			required.addClass('required');
			var parent = this.element.getParent();
			parent.grab(required);
		}
	},
	setFieldValid:function(){
		this.element.removeClass('requiredfield');
		var required = $(this.element.id + '_required');
		if(required)
		required.destroy();
	},
	activate:function(){
		var tooltip = $(this.element.id + '_hint');
		//alert(tooltip);
		tooltip.setStyle('display','inline');
	},
	deactivate:function(){
		var tooltip = $(this.element.id + '_hint');
		//alert(tooltip);
		tooltip.setStyle('display','none');
	},
	addTooltip:function(){
		
		var hint = new Element('span', {id: this.element.id + '_hint'});
		hint.set('html', this.tooltip);
		hint.addClass('hint');
		
		var pointer = new Element('span');
		pointer.addClass('hint-pointer');
		hint.grab(pointer);
		
		var parent = this.element.getParent();
		parent.grab(hint);
		
		//alert(hint.get('html'));
		
		this.element.addEvent('blur', deactivateField);
		this.element.addEvent('focus', activateField);
	}
});

// Validator Classes

var RequiredTextbox = new Class({
	Extends: ValidatorField,
	initialize:function(element, tooltip, errmsg)
	{
		this.parent(element, tooltip, errmsg);
	},
	validate:function()
	{		
		if(ValidRequired(this.element))
		{
			this.setFieldValid();
			return true;
		}else{
			this.setFieldInvalid();
		}
		return false;
	}
});

var RequiredNumber = new Class({
	Extends: ValidatorField,
	initialize:function(element, tooltip, errmsg)
	{
		this.parent(element, tooltip, errmsg);
	},
	validate:function()
	{		
		if(ValidNumber(this.element))
		{
			this.setFieldValid();
			return true;
		}else{
			this.setFieldInvalid();
		}
		return false;
	}
});

var RequiredEmail = new Class({
	Extends: ValidatorField,
	initialize:function(element, tooltip, errmsg)
	{
		this.parent(element, tooltip, errmsg);
	},
	validate:function()
	{		
		if(ValidEmail(this.element))
		{
			this.setFieldValid();
			return true;
		}else{
			this.setFieldInvalid();
		}
		return false;
	}
});

var RequiredDate = new Class({
	Extends: ValidatorField,
	initialize:function(element, tooltip, errmsg)
	{
		this.parent(element, tooltip, errmsg);
	},
	validate:function()
	{	
		if(ValidDate(this.element))
		{
			this.setFieldValid();
			return true;
		}else{
			this.setFieldInvalid();
		}
		return false;
	}
});


// validation functions

function ValidRequired(obj)
{
	return obj.value != '';
}

function ValidEmail(obj)
{
	var re = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
	return obj.value.match(re) != null;
}

function ValidNumber(obj)
{
		return ValidRequired(obj) && allDigits(obj.value);
}

function ValidDate(obj)
{
	var result = true;
  
 	if (result)
 	{
 		var elems = obj.value.split("-");
 		
 		result = (elems.length == 3); // should be three components
 		
 		if (result)
 		{
 			var day = parseInt(elems[0],10);
  			var month = parseInt(elems[1],10);
 			var year = parseInt(elems[2],10);
			result = allDigits(elems[1]) && (day > 0) && (day < 32) &&
					 allDigits(elems[0]) && (month > 0) && (month < 13) &&
					 allDigits(elems[2]) && ((elems[2].length == 2) || (elems[2].length == 4));
 		}
	} 
	
	return result;
}

function allDigits(str)
{
	return inValidCharSet(str,"0123456789");
}

function inValidCharSet(str,charset)
{
	var result = true;

	// Note: doesn't use regular expressions to avoid early Mac browser bugs	
	for (var i=0;i<str.length;i++)
		if (charset.indexOf(str.substr(i,1))<0)
		{
			result = false;
			break;
		}
	
	return result;
}