$(document).ready(function() {
	$('#contact_form').validate({
		debug: false,							// switch to false to go live
		rules: {
			first_name: "required",
			last_name: "required",
			email: {
				required: true,
				email: true
			},
			'00N50000001ss6r': {		// type of comment
				required: true
			},
			description: "required",
			zip: {
				number: true,
				rangelength: [5,5]
			}
		},
		messages: {
			first_name: "We need your first name.",
			last_name: "We need your last name.",
			email: {
				required: "We need your email address.",
				email: "That's not a valid email address."
			},
			'00N50000001ss6r': {		// type of comment
				required: "Let us know where to direct your comment."
			},
			description: "Let us know what you have to say.",
			zip: "Please enter your 5-digit zip code."
		},
		errorElement: 'div',
		errorPlacement: function (error, element) {
			//this is tossing the error messages into their proper places
			error.appendTo(element.closest('li.group').children('.validate'));
		},
		errorClass: 'invalid',
		validClass: 'valid',
		highlight: function(element, errorClass) {
			/* this is managing the check marks and x marks
			 * highlight fires on failed validation */
			$(element).closest('li.group').addClass(errorClass).removeClass('valid');
			$(element).addClass(errorClass).removeClass('valid');
		},
		success: function(label) {
			/* this is managing the check marks and x marks
			 * success fires on passed validation
			 * note: these work differently because highlight and success 
			 * in jQuery.validate work on radically different models
			 *
			 * the success code is particularly janky, because the label
			 * that's passed into this function has not yet been inserted into
			 * the DOM, hence having to go grab the proper DOM element first
			 */
			var $target = $('#'+label.attr('htmlfor'));
			$target.removeClass('invalid').addClass('valid');
			$target.closest('li.group').removeClass('invalid').addClass('valid');
		}, 
		submitHandler: function(form) {
			/* this changes the form's submit button to say "Processing..."
			 * before it submits. It also kills the submit button, so as long
			 * as JavaScript is running on the page, multiple clicks will not
			 * submit the form multiple times. Probably best to keep the warning,
			 * though, since if JS is disabled this won't help at all... */
			$('#contact_form input:submit').val('Processing...')
			form.submit();
			$('#contact_form').submit(function() { return false; });
		}
	});
	
	
	$("#optional_fields input").keyup(function() { 
		if(!$(this).val()) {
			$(this).removeClass('valid invalid')
				.closest('li.group').removeClass('valid invalid');
		}
	});
	$("#contact_form input.val, #contact_form textarea").blur(function() {
		$('#contact_form').validate().element(this);
	});
	$("#contact_form select").change(function(){
		$('#contact_form').validate().element(this);
	})
});