////////////////////////////////////////////////////////////////////////////////
// form_utils.js Generic Form stuff
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// validateField
////////////////////////////////////////////////////////////////////////////////
function validateField(api, el){
	new Ajax.Request(api,{
		method: "get",
		parameters: { field:el.name, value: el.getValue() },
		onFailure: function(ajaxRequest){
			//console.log('There was an error with your request: '+ajaxRequest.responseText);
		},
		onSuccess: function(ajaxRequest) {
			var jsonObject = eval('(' + ajaxRequest.responseText + ')');
			if ( jsonObject.response.error ){
				// We have errors
				
				if(el.up().hasClassName('success')){
					el.up().removeClassName('success');
				}
				el.up().addClassName('error');
				// Add error message to label
				var error_message = "<span class='error_message error'>"+jsonObject.response.msg+"</span>";

				// Get either a Label or a span.required helper element
				// These are used to contain error/success messages
				// NOTE: label is not used... anymore..
				var the_label = el.up().down('label');
				var the_help_text_css = el.up().readAttribute('id') ? "#"+el.up().readAttribute('id')+" span.required" : "span.required";
				var the_help_text = $$(the_help_text_css);
				the_help_text ? helper_els = the_help_text : helper_els = the_label;

				if(helper_els){
					helper_el = helper_els[0];
					helper_el.update(error_message);
				}else{
					// console.log('test geen helper_el');
				}
			} else{
				// No errors found

				if(el.up().readAttribute('id') != 'p_submit'){
					el.up().removeClassName('error');
					el.up().addClassName('success');
				}
				if(el.up().hasClassName('error')){
					el.up().removeClassName('error');
				}

				// Get either a Label or a span.required helper element
				// These are used to contain error/success messages
				var the_label = el.up().down('label');
				var the_help_text_css = el.up().readAttribute('id') ? "#"+el.up().readAttribute('id')+" span.required" : "span.required";
				var the_help_text = $$(the_help_text_css);
				the_help_text ? helper_els = the_help_text : helper_els = the_label;

				// remove error_message, if present
				if(helper_els){
					helper_els.each(function(helper_el){
						if(helper_el.childElements()){
							helper_el.childElements().each(function(child){
								if(child.hasClassName('error_message')){
									child.remove();
								}
							});
						}
					});
				}

				// add success class and remove error message if present
				// Make an exception for email and url fields (if not required)
				if(!helper_els[0].hasClassName('emailfield') || !helper_els[0].hasClassName('urlfield')){
					el.up().addClassName('success');
					// remove 'Required'  of 'Verplicht' label... It is filled in correctly.
					helper_els[0].update();
				}else{
					// remove success class if emailfield is empty.
					// it is not required, but will be validated.
					// empty == ok, but no OK icon needed
					if(el.value == "" && el.up().hasClassName('success')){
						el.up().removeClassName('success');
					}
				}
			}
		},
		onComplete: function(ajaxRequest){
			// console.log('onComplete');
		}
	});
}