var validInputIconSrc = '/img/form_Ok.gif';
var errorInputIconSrc = '/img/form_Error.gif';
var progressIconSrc = '/img/progress.gif';
var fieldState = new Array();
var requiredFields = new Array('name','phone','email');

$('document').ready(function(){
	
	// add stars to req fields labels
	$('label.required').append('<span class="asterisk">*</span>');

	// focus on the name field
	$('#name').focus();

	// preload validation images
	var vimg = $('<img>').attr('src', validInputIconSrc);
	var eimg = $('<img>').attr('src', errorInputIconSrc);
	var pimg = $('<img>').attr('src', progressIconSrc);
});

function sendForm() {

	var noErrors = true;

	$.each(requiredFields, function(i,fieldName) {
		noErrors = checkField(fieldName);
	});

	if (noErrors) {

		// send form data
		$.ajax({
			type: "POST",
			url: "/send_rfq.php",
			dataType: "json",
			processData: true,
			cache: false,
			data: {
				name: $('#name').val(),
				email: $('#email').val(),
				phone: $('#phone').val(),
				response_pref: $('input[@name="response_pref"]:checked').val(),
				message: $('#message').val(),
				source: $('#source').val(),
				budget: $('option:selected').val(),
				budget_other: $('#budget_other').val()
			},
			beforeSend: function(reqObj) {
				// disable fields
				$('input').attr("disabled", true);
				$('textarea').attr("disabled", true);
				$('select').attr("disabled", true);
				$('#submitbutton').hide();

				// show message
				$('#msgDiv').html('<img id="progress" src="' + progressIconSrc + '" /> Sending...');
				$('#msgDiv').show();
			},
			success: function(jsonData) {
				if(jsonData.OK) {
					$('#msgDiv').html('<b>Thank You!</b> Your message has been sent.');
					$('#msgDiv').attr('class','okMessage');
				}
				else {
					$('#msgDiv').html('Form Error - ' + jsonData.message);
					$('#msgDiv').attr('class','errorMessage');
					$('#submitbutton').show();
				}
				$('input').removeAttr("disabled");
				$('textarea').removeAttr("disabled");
				$('select').removeAttr("disabled");
			},
			error: function(reqObj, errorStr, exceptionObj) {
				$('#msgDiv').html('System Error - ' + errorStr);
				$('#msgDiv').attr('class','errorMessage');
				$('input').removeAttr("disabled");
				$('textarea').removeAttr("disabled");
				$('select').removeAttr("disabled");
				$('#submitbutton').show();
			}
		});
	}
}

function checkField(fieldName) {
	switch (fieldName) {
	case 'name':
		if ($.trim($('#' + fieldName).val()) == '') {
			stateError(fieldName,'(required)');
			return false;
		}
		else {
			stateValid(fieldName);
		}
		break;
	case 'phone':
		var fieldValue = $.trim($('#' + fieldName).val());
		if (fieldValue == '') {
			stateError(fieldName,'(required)');
			return false;
		}
		else if (fieldValue.length < 8) {
			stateError(fieldName,'(invalid)');
			return false;
		}
		else {
			stateValid(fieldName);
		}
		break;
	case 'email':
		var fieldValue = $.trim($('#' + fieldName).val());
		if (fieldValue == '') {
			stateError(fieldName,'(required)');
			return false;
		}
		else if (fieldValue.indexOf('@') < 1 || fieldValue.indexOf('.') < 1) {
			stateError(fieldName,'(invalid)');
			return false;
		}
		else {
			stateValid(fieldName);
		}
		break;
	case 'budget':
		if($('option:selected').val() == 'other'){
			$('#budget_other_div').css('display','inline');
		} else {
			$('#budget_other_div').hide();
		}
		break;
	default:
		return true;
	}
	return true;
}

function stateValid(fieldName) {

	if (fieldState[fieldName] == 'valid') {
		return;
	}
	else if (fieldState[fieldName] == 'error') { 
		// remove highlight
		$('#' + fieldName).removeClass('errorField');
		$("label[for='" + fieldName + "']").removeClass('errorLabel');

		// remove error message
		$("label[for='" + fieldName + "']").children('b').remove();

		// remove Error icon
		$('#' + fieldName + '_error_icon').remove();

	}

	// show OK icon 
	$('#' + fieldName).after('<img class="icon" id="' + fieldName + '_ok_icon" src="' + validInputIconSrc + '"/>');
	$('#' + fieldName + '_ok_icon').fadeOut(4000);

	fieldState[fieldName] = 'valid';
}

function stateError(fieldName,errorMsg) {

	if (fieldState[fieldName] == 'error') {
		// just update error text
		$("label[for='" + fieldName + "']").children('b').html(errorMsg);
		return;
	}
	else if (fieldState[fieldName] == 'valid') {
		// remove Ok icon
		$('#' + fieldName + '_ok_icon').remove();
	}

	// show error icon
	$('#' + fieldName).after('<img class="icon" id="' + fieldName + '_error_icon" src="' + errorInputIconSrc + '"/>');

	// highlight field label and border
	$('#' + fieldName).addClass('errorField');
	$("label[for='" + fieldName + "']").addClass('errorLabel');

	// show error message
	$("label[for='" + fieldName + "']").append(' <b>' + errorMsg + '</b>');

	fieldState[fieldName] = 'error';
}