var oHolder = null;
var formSent = false;
window.addEvent('domready', function() {
	// create the events for the menu
	if ($defined($('reaction_form'))) {
		formSent = false;
		$('frm_reaction_text_captcha').addEvent('keydown', function(event) {
			event = new Event(event);
		    if (event.key == 'enter') {
		    	event.stop();
		    		if(!formSent) {
		    			formSent = true;
		    			return processReactionForm();		
		    		} else { 
						return;
					}
		    } else {
			    if (event.key == 's' && event.control) {
			    	event.stop();
			    	if(!formSent) {
			    		formSent = true;
						return processReactionForm();
			    	} else {
			    		return;
			    	}
				}
		    }
		});
	}
});


function showSubmenu(el)
{	
	el.style.display = 'block';	
}

function hideSubmenu(el)
{	
	el.style.display = 'none';	
}

function processReactionForm() {
	// Send Form
	var oForm = $('reaction_form');
	oForm.send({ onComplete: validateReactionForm });
}


function validateReactionForm(sReponse) {
	var Form = $('reaction_form')
	formSent = false;
	// Evaluate server response
	var oResponse = Json.evaluate(sReponse);
	
	// Function to execute if server response is valid
	if(oResponse.valid) {
		
		// Remove error classes
		Form.getElements('input').each(function(el) {
			el.removeClass('iError');
			$('reaction_form').reset();
		});
	
		// Remove previous error messages
		Form.getElements('.errormsg').each(function(el) {
			el.remove();
		});
		
		// Add reaction
		oHolder = new Element('div').addClass('reaction').setStyle('opacity','0').setProperty('id','new_reaction');
		var oTitle  = new Element('h4').injectInside(oHolder);
		var oDate   = new Element('span').setText(oResponse.data.date + " | ").injectInside(oTitle);
		var oName   = new Element('b').setText(oResponse.data.name).injectInside(oTitle);
		var oText   = new Element('p').setText(oResponse.data.reaction).injectInside(oHolder);
		
		var Scroller = new Fx.Scroll(window, {duration:300, wait:false}).toElement('project_reactions_overview');
		
		oHolder.injectBefore($('project_reactions_overview').getElement('div'));
		
		var fx = $(oHolder).effects({duration: 500, wait: true});
	 
		fx.start({
		}).chain(function() {
			this.start.delay(10, this, {
				'opacity': 1
			});
		});
		formSent = false;
 
	
	} else {
		
		// Remove error classes
		Form.getElements('input').each(function(el) {
			el.removeClass('iError');
		});
		Form.getElements('textarea').each(function(el) {
			el.removeClass('iError');
		});
	
		// Remove previous error messages
		Form.getElements('.errormsg').each(function(el) {
			el.remove();
		});
		
		// For each error do
		$each(oResponse.errors, function(errorMessage, fieldName) {
			var formElement = $(document.body).getElement('[name^=' + fieldName + ']');
			
			$(formElement).addClass('iError');
			
			$(formElement).value = '';
			if ($type(errorMessage) == 'object') {
				$each(errorMessage, function(msg, key){
					// Place the error message in the dataholder
					if (fieldName == 'security') {
						$(formElement).value = key;
					} else {
						$(formElement).value = msg;
					}
				});
			} else {
				// Place the error message in the dataholder 
				$(formElement).value = errorMessage;
			}
			
		});
		
	}
}


function processContactForm() {
	// Send Form
	var oForm = $('contactForm');
	oForm.send({ onComplete: validateContactForm });
}

function validateContactForm(sReponse) {
	var Form = $('contactForm')
	formSent = false;
	// Evaluate server response
	var oResponse = Json.evaluate(sReponse);
	
	// Function to execute if server response is valid
	if(oResponse.valid) {
		
		// Remove error classes
		Form.getElements('input').each(function(el) {
			el.removeClass('iError');
			
		});
	
		// Remove previous error messages
		Form.getElements('.errormsg').each(function(el) {
			el.remove();
		});
		
		// Add Thanks
		
		var fxOut = $('contactForm').effects({duration: 900, wait: true});
		fxOut.start({
		}).chain(function() {
			this.start.delay(10, this, {
				'opacity': 0
			});
		});
		$('contactFormHolder').getElement('p').setOpacity(0);
		
		var oMsg  = new Element('h4').setText('Bedankt voor het invullen van het contactformulier!').setOpacity(0).injectBefore($('contactForm'));
		var fxIn = $(oMsg).effects({duration: 500, wait: true});
		fxIn.start({
		}).chain(function() {
			this.start.delay(10, this, {
				'opacity': 1
			});
		});
 		//$('contactForm').reset();
	
	} else {
		
		// Remove error classes
		Form.getElements('input').each(function(el) {
			el.removeClass('iError');
		});
		Form.getElements('textarea').each(function(el) {
			el.removeClass('iError');
		});
	
		// Remove previous error messages
		Form.getElements('.errormsg').each(function(el) {
			el.remove();
		});
		
		// For each error do
		$each(oResponse.errors, function(errorMessage, fieldName) {
			var formElement = $(document.body).getElement('[name^=' + fieldName + ']');
			
			$(formElement).addClass('iError');
			
			$(formElement).value = '';
			if ($type(errorMessage) == 'object') {
				$each(errorMessage, function(msg, key){
					// Place the error message in the dataholder
					if (fieldName == 'security') {
						$(formElement).value = key;
					} else {
						$(formElement).value = msg;
					}
				});
			} else {
				// Place the error message in the dataholder 
				$(formElement).value = errorMessage;
			}
			
		});
		
	}
}

function checkValue(elm, val) {
	if (elm.value == val) {
		elm.value = '';
	}
	$(elm).removeClass('iError');
}

function scrollToForm() {
	var Scroller = new Fx.Scroll(window, {duration:500, wait:false}).toElement('reaction_form');
}

function reloadCaptcha() {
	
	var newCapImg = new Element('img');
	var url = '/captcha/generate/cache/' + $random(0,99999999);
	var loadedImage = new Asset.image(url, {
		onload: function() {
			$('cap_img').remove();
			this.injectAfter($('frm_reaction'));
			this.setProperty('id','cap_img');
			this.setProperty('align','left');
			this.setStyle('margin','10px 0 5px 10px');
			
			var fxFadeIn = this.effects({duration: 800, wait: true});
	 
			fxFadeIn.start({
			}).chain(function() {
				this.start.delay(0, this, {
					'opacity': 1
				});
			});
		}
	}).setOpacity(0);
	
}