/*
This collection of functions sets the look n feel of any required input that is 
missing a value when the submit button is clicked:

NOTE:  the default color set is an orange-yellow to indicate a caution.
You can set your own colors and border width using hex numbers/pixels
*/
function sfv_get_background_color(){
	var background_color	= "#FFDA56";
	return background_color;
}
function sfv_get_border_color(){
	var border_color		= "#153F6F";
	return border_color;
}
function sfv_get_border_width(){
	var border_width		= "1px";
	return border_width;
	
}


/*
This function is the engine that cycles through all the required 
fields and keeps track of any missing required fields.
NOTE: you "shouldn't" need to change anything in this section :--)
*/
function sfv_validator(required_inputs){

	// grab error colors and border width
	var background_color	= sfv_get_background_color();
	var border_color		= sfv_get_border_color();
	var border_width		= sfv_get_border_width();

	var err_found = false; // initialize

	// cycle through all required fields
	// start off by clearing all fields so any 'good' fields don't maintain
	// any 'error found' colors on subsequent clicks of the submit button
	for (i=0;i<required_inputs.length;i++){
		document.getElementById(required_inputs[i]).style.backgroundColor = '';
		document.getElementById(required_inputs[i]).style.borderColor = '';
		document.getElementById(required_inputs[i]).style.borderWidth = '';
	}

	// cycle through all required fields -- if there are any missing, then set that id
	// to the error found colors and border width
	for (i=0;i<required_inputs.length;i++)
	{
		if (document.getElementById(required_inputs[i]).value == "") {
			err_found = true;
			document.getElementById(required_inputs[i]).style.backgroundColor = background_color;
			document.getElementById(required_inputs[i]).style.borderColor = border_color;
			document.getElementById(required_inputs[i]).style.borderWidth = border_width;
		}
	}
	
	return err_found;
}




/*
the main function - it works like this:
1.  checks for an incoming form

2.  based on that form.id, sets "required_fields" to a new array
    with the ids for those <input ...> tags that are required fields

3.  Calls the sfv_validator function and passes it the required_fields array

4.  If any errors are returned, then an alert is displayed with all missing
    fields highlighted based on the values you put in the following functions:
	
	(a) sfv_get_background_color()
	(b) sfv_get_border_color()
	(c) sfv_get_border_width()

NOTE: for this to work, you need to:

1.  change the case statement (and add a case for any/all forms you are validating)
	to match the form.id passed based on the form you are trying to validate
	
2.  update the required_inputs array to match the id of each input tag
    that is a required field -- be careful to ensure you don't have a comma
	after the last value in the new Array()

3.  ensure in your form tage, you pass >>this<< when calling the 
    below function in your <form > tag like this:
	<form id="add_client" name="add_client" method="post" onsubmit="return sfv_check_form(this)">
	--------------------------------------------------------------------------------------^^^^
*/

function sfv_check_form(form){

	switch (form.id){ // don't change this line

		// --------------------------------------
		// to add a case clause start copying here
		case "add_client":
			var required_inputs = new Array(
				'company_name',
				'first_name',
				'last_name',
				'title',
				'email'
			); // end of parentheses for the required_inputs array - don't delete
			break;
		// to add a case clause, stop copying here
		// ---------------------------------------

		// after copying the above, you can paste it below here
		// then change the case "???": where ??? is the form's id
	
	}

	// don't change anything below here
	var err_found = false;
	var err_msg = "\n\nto continue, please complete the highlighted entries:\n\n";

	// calls the validator engine and passes required_inputs
	err_found = sfv_validator(required_inputs);

	if (err_found) {
		alert(err_msg);
		return false;

	} else {
		switch (form.id){
			// add a case statement here for each case statement
			// in the switch method above that sets the applicable
			// required_fields array
			// in the document.???.submit() statement, the ??? is the name="" in
			// your form tag
			case "add_client":
				document.add_client.submit(); // this is the name="" value in your form tag
			    //name="add_client" in the form tag
				break;
		}
	}

}