//Used to handle the ui for an under construction page

var gui = function () {
	
	return {
		
		init: function () {
			$('h2').click(function () {
				$(this).next().slideToggle(300);
			});
		},
		
		submitContact: function (formId) {
			
			gui.toggleSubmit(true);
			
			var data = $('#' + formId).serialize();
			
			$.ajax({
				data: data,
				dataType: 'json',
				error: function () {
					alert('There was an error sending your message.');
					gui.toggleSubmit(false);
				},
				success: gui.processResponse,
				type: 'post',
				url: 'process-contact.php'
			});
		},
		
		processResponse: function (json) {
			
			gui.clearErrors();
			
			if (json.errors) {
				$('#messages').css({'color':'red','font-size':'13px'});
				
				var errors = json.errors;				
				for (elId in json.errors) {
					if (elId) {
						gui.markInvalid(elId, json.errors[elId]);
					}
				}
				
				gui.toggleSubmit(false);
			}else{
				$('#messages').css({'color':'green','font-size':'13px'});
				var messageBox = $('#messages').get(0).innerHTML = json['success'];				
			}
			
		},
		
		toggleSubmit: function (bool) {
			$('#submit-button').get(0).disabled = bool;
		},
		
		markInvalid: function (elementId, message) {
			$('#' + elementId).get(0).style.border = "dashed thin red";
			
			var messageBox = $('#messages').get(0);
			var existingMessages = messageBox.innerHTML;
			messageBox.innerHTML = existingMessages + '<br />' + message;
		},
		
		clearErrors: function () {
			$('#messages').get(0).innerHTML = "";
		},
		
		clearForm: function (formId) {
			$('#' + formId).get(0).reset();
			gui.toggleSubmit(false);
			gui.clearErrors();
		}
	}
}();