var required_els;

$(document).ready(function() {
	$("#avatar-contact-form").submit(function() {
		return check_required();
	});

	var els = $(".input");
	els.push($(".code-input")[0]); // $.merge() isn't behaving well
	required_els = new Array();
	// Build the list of required elements
	for(var i = 0; i < els.length; i++) {
		if(els[i].className.indexOf("required") != -1) {
			els[i].id = els[i].name;
			required_els.push(els[i]);
		}
	}

	$('input[type="text"]').addClass("idleField");
	$('input[type="text"]').focus(function() {
		$(this).removeClass("idleField").addClass("focusField");
		if (this.value == this.defaultValue) { 
			this.value = '';
		}
		if(this.value != this.defaultValue) {
			this.select();
		}
	});
	$('input[type="text"]').blur(function() {
		$(this).removeClass("focusField").addClass("idleField");
		if ($.trim(this.value) == ''){
			this.value = (this.defaultValue ? this.defaultValue : '');
		}
	});
	$('textarea').addClass("idleField");
	$('textarea').focus(function() {
		$(this).removeClass("idleField").addClass("focusField");
		if (this.value == this.defaultValue) { 
			this.value = '';
		}
		if(this.value != this.defaultValue) {
			this.select();
		}
	});
	$('textarea').blur(function() {
		$(this).removeClass("focusField").addClass("idleField");
		if ($.trim(this.value) == '') {
			this.value = (this.defaultValue ? this.defaultValue : '');
		}
	});
	$('select').addClass("idleField");
	$('select').focus(function() {
		$(this).removeClass("idleField").addClass("focusField");
	});
	$('select').blur(function() {
		$(this).removeClass("focusField").addClass("idleField");
	});
});	

function check_required() {
	var error = false;
	var len = required_els.length;
	var code_empty = false;
	for(var i = 0; i < len; i++) {
		// Reset from last time around
		hide_error(required_els[i]);
		if(required_els[i].value.length == 0) {
			error = true;
			if(required_els[i].id == "code") {
				code_empty = true;
			}
			show_error(required_els[i], 'Required');
		}
		else if(required_els[i].id == "email") {
			var email = required_els[i].value;
			if(!email.match(/^[^\@]+\@[^\@]+\.(museum|[a-z]{2,4})$/i)) {
				error = true;
				show_error(required_els[i], "Please enter an email address");
			}
		}
	}

	if(!code_empty && !check_code()) {
		error = true;
	}

	return error ? false : true;
}

// Yeah I know it's stupid to put your captcha decoding code into javascript.  I just do what I'm told...
function check_code() {
	code_ref = $('#code_ref').attr("value");
	code_ref = code_ref.split("").reverse();
	result = new Array();
	result.push(9 - code_ref[0]);
	for(var i = 1; i < code_ref.length; i++) {
		result[i] = (result[i - 1] + (9 - code_ref[i])) % 10;
	}
	result = result.join("");
	
	code_el = $(".code-input")[0];
	if(result != code_el.value) {
		show_error(code_el, 'Incorrect code');
		return false;
	}
	else {
		return true;
	}
}

var shown_errors = new Array();
function hide_error(el) {
	if(shown_errors[el.name]) {
		shown_errors[el.name].remove();
		shown_errors[el.name] = null;
	}
}

function show_error(input_el, label) {
	var el = document.createElement('div');
	el.className = "error";
	el.style.position = "absolute";
	// Aargh, position() is only available if we select the element directly via $().
	var in_el = $("#" + input_el.name);
	var pos = in_el.position();
	el.style.left = pos.left + in_el.width() + 15 + "px";
// Uncomment if we decide we want the error messages centered vertically with bigger inputs
//	if(in_el.height() > 30) {
//		var offset_height = in_el.height() / 2 - 10;
//	}
//	else {
		var offset_height = -1;
//	}
	el.style.top = pos.top + offset_height + "px";

	var text = document.createTextNode(label);
	el.appendChild(text);
	// I'm a bit of a jQuery newbie, hence the DOM stuff.  No time to research more appropriate ways...
	jel = jQuery(el);
	jel.insertAfter(input_el);
	shown_errors[input_el.name] = jel;
}