/* **********************************************
 * contact.js - All JS that's needed specifically on the contact page
 * ********************************************* */



///////////////////////////////////////////////////////////
// DJIR: init Django Image Replacement
///////////////////////////////////////////////////////////
function initDjir(){
	$$('.mainBlock h2').each(function(header){
		var d = new DJIR(header, {fontAlias: 'InterstateBoldCondensed', fontSize: 16, fontColor: '373737', maxlen: 50});
	});
}

////////////////////////////////////////////////////////////////////////////////
// init: Initialize contactform
////////////////////////////////////////////////////////////////////////////////
function init(){
	// Hijax contactform
	Event.observe($("contactForm"), 'submit', submitContactForm);
	
	// Add Live AJAX Validation for all fields...
	$('contactForm').getElements().each(function(el){
		new Form.Element.Observer(el, 0.3, function(form, value){
		  validateField('/ajax/contact/validate/', el);
		});
	});
	
	initDjir();
}
////////////////////////////////////////////////////////////////////////////////
// submitContactForm
////////////////////////////////////////////////////////////////////////////////
function submitContactForm(event){
	
	// Hijack contactform and submit to AJAX URL
	Event.stop(event);
	loaderIMG = "<img id='ajaxLoader' src='/static/img/ajax-loader.gif'>";
	submitHTML = $('p_submit').innerHTML;
	$('p_submit').update(loaderIMG);
	var contactform = $("contactForm");
	new Ajax.Request('/ajax/contact/',{
		method: "post",
		parameters: contactform.serialize(true),
		onFailure: function(ajaxRequest){displayAjaxMessages(ajaxRequest.responseText);},
		onSuccess: function(ajaxRequest) {
			displayAjaxMessages(ajaxRequest.responseText);
			init();
		},
		onComplete: function(ajaxRequest){
			$('ajaxLoader').remove();
			$('p_submit').update(submitHTML);
		}
	});
	
}


////////////////////////////////////////////////////////////////////////////////
// displayAjaxMessages
////////////////////////////////////////////////////////////////////////////////
function displayAjaxMessages(ajaxresponse){
	var messageContainer = $$('#formBlock .leftColumn')[0];
	messageContainer.update(ajaxresponse);
	// new Effect.Highlight($$('#contactform fieldset.form .messageBox')[0], {startcolor:'#362D25', endcolor:'#251E1A'})
}

/* **********************************************
 * EVENTS
 * ********************************************* */
document.observe('dom:loaded', init);
////////////////////////////////////////////////////////////////////////////////
// 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');
		}
	});
}