/*................This version supports validation only for required fields......................*/
/*-------------------------------------GETTING THE FORM VALUES-----------------------------------*/
//message while sending the mail.
loadbar = 'Verzenden...';
//message once the mail has been sent
success = 'verzonden bericht';
//failure message
failure = "Er is iets fout gegaan. De mail is niet verzonden.";

//set the time out for progressbar
loadbarTime = 1500;

//id of the box where error messages are to be displayed
messagesDisplayBox = "Email succesvol";

//error message if any required filed is left empty
errorMessage = "Verplichte velden dienen te worden ingevuld...";

//define the background colors form mandatory input boxes...
errorColor = "#009DE0";
normalColor = "#999999";

//loadingBar image name and path
loadBarPath = "_relatedFiles/_relatedImages/loading.gif";

//server side file to which the request needs to be sent...
url = "_relatedFiles/send_mail.php";


//define the background colors form mandatory input boxes...
errorColor = "#009DE0";
normalColor = "#999999";

//error message if any required filed is left empty
errorMessage = "Verplichte velden dienen te worden ingevuld...";

/*~~~~~~CLASS NAMES AND DEFINITIONS FOR VALIDATIONS:
	1. required	:		validates for mandatory fields
	2. required email:  validates email
	3. required number: validates number
	
	
	PARAMETERS:
		1. formref:   Reference to the form that has to be submitted...
		2. msgDiv:  Reference to the div where all the messages will be displayed...
		3. filePath: Path and name of the loading image (Ajax Loader).
	*/
function validateFormElements(formref,msgDiv,img,filePath)
{
	
	//SET THE MESSAGES DISPLAY BOX
	messagesDisplayBox = msgDiv;
	//SET THE LOADING IMAGE
	loadBarPath = img;
	//server side file to which the request needs to be sent...
	url = filePath;
	
	
var errormsg = '';
var emailmsg = '';
var numbermsg = '';

	//gettting the form elements
	var formElements = $$('#'+formref.id+' .required');

//checking each elements in the form
	for (var i=0;i < formElements.length ;i++)
	 {
		
				// if the value is empty
			 if(formElements[i].value == "")
					{
						formElements[i].style.borderColor = errorColor;
						if(formElements[i].title != '')
						{
							errormsg += '<br />'+formElements[i].title; 
						}
						else
						{
							errormsg = '<br />'+errorMessage;
						}
					}
			   else
				{
				//if the value is not empty	
				if(formElements[i].value != "")
				{
					//if the class name is email	
					if(formElements[i].hasClass('email'))
					{
						var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
						if(!formElements[i].value.toUpperCase().match(regEmail))
						{
								formElements[i].style.borderColor = errorColor;
								if(formElements[i].title != '')
									{
										emailmsg += '<br />'+formElements[i].title; 
									}
									else
									{
										emailmsg += '<br />Voer een geldig e-mail adress in.';
									}
							}
							else
							{
								formElements[i].style.borderColor = normalColor;
							}
					}
					
					//if the class name is number
					else if(formElements[i].hasClass('number'))
					{
						if (isNaN(formElements[i].value) || formElements[i].value == "")
							{
								formElements[i].style.borderColor = errorColor;
								if(formElements[i].title != '')
									{
										numbermsg += '<br />'+formElements[i].title; 
									}
									else
									{
										numbermsg += '<br />Voer een geldig nummer in.';
									}
							}
							else
							{
								formElements[i].style.borderColor = normalColor;
							}
					}
					else
					{
						formElements[i].style.borderColor = normalColor;
					}
				}
			}				
		}
	

	//if any required fields are left out
	if(errormsg!="" || emailmsg!="" || numbermsg!="")
	{
		document.getElementById(msgDiv).innerHTML = errormsg + emailmsg + numbermsg;
		return false;
	}
	else
	{
		document.getElementById(msgDiv).innerHTML = '';
		
		//calling getting_data function
		return getFormValues(formref);
	}

}



/*~~~~~~CLASS NAMES AND DEFINITIONS FOR VALIDATIONS:
	1. requiredField	:		validates for mandatory fields
	
	
	
	PARAMETERS:
		1. oForm:   Reference to the form that has to be submitted...
		2. msgDiv:  Reference to the div where all the messages will be displayed...
		3. imgPath: Path and name of the loading image (Ajax Loader).
	*/
/*function validateFormElements(oForm,msgDiv,img,reqFile)
{
	//SET THE MESSAGES DISPLAY BOX
	messagesDisplayBox = msgDiv;
	//SET THE LOADING IMAGE
	loadBarPath = img;
	//server side file to which the request needs to be sent...
	url = reqFile;
	
	//make the array of form elements
	formElements = oForm.elements;
	
	//initiate error message variable to check whether the form is filled as per requirements.
	 errorMessages = "";
	
	for(i=0;i<formElements.length;i++)
		{
			if(formElements[i].className=="requiredField")
			{
				//params[formElements[i].className+"_"+i] = formElements[i].value;
				if(formElements[i].value=="")
				{
					 formElements[i].style.borderColor = errorColor;
					 errorMessages = errorMessage;
				}
				else
				{
					formElements[i].style.borderColor = normalColor;
				}
			}
		}
	//if any required fields are left out
	if(errorMessages!="")
	{
		document.getElementById(messagesDisplayBox).innerHTML = errorMessages;
		document.getElementById(messagesDisplayBox).style.display = "block";
		return false;
	}
	return getFormValues(oForm);
}
*/
function getFormValues(oForm){
	//set the display of succes to none for multiple form submissions
	document.getElementById(messagesDisplayBox).style.display='none';
	//show the contact timer as soon as u start getting the values filled in
	var image = document.getElementById(messagesDisplayBox);
	image.innerHTML = loadbar+'<img src="'+loadBarPath+'" alt="Laden..." title="Mail verzendeb." />';

	image.style.display='block';
	//initiate an array to hold the Ids of all the form elements
	var formElementIds = Array();
	//initiate a variable to hold the values of particular element
	var val;
	var j=0;
	
	/*get the Ids of the each element if they are not of type hidden, submit, or button
	 here 'i' will hold the current element including omits i.e. submit, hidden, button, etc
	 and 'j' will hold the number of Ids that has been accepted*/
	for (var i=0; i<oForm.elements.length; i++)
	{
		if(oForm.elements[i].type !="submit" && oForm.elements[i].type !="button" && oForm.elements[i].type !="reset" && oForm.elements[i].tagName!="FIELDSET")
		{
			//if the element is a radio button and is checked then only get the id of that radio button
			if(oForm.elements[i].type == "radio")
			{
				if(oForm.elements[i].checked)
				{
				 formElementIds[j]=oForm.elements[i].id;
				 //once the Id is taken don't forget to increment the j value i.e. number of Id in the array
				 j++;
				 }
				else
				{
				 	//oForm.elements[i]=oForm.elements[i].nextChild;
					}
				}
			else
			{
				formElementIds[j]=oForm.elements[i].id;
				//once we take an Id into array the number (j value) has to be incremented
				j++;
				}
			}
		}

		//get the values of all the form fields
		var formValues = Array();
		//loop through all the Ids
		for (var j=0; j<formElementIds.length; j++){
			//check if the type is checkbox and also is checked or not
			if(document.getElementById(formElementIds[j]).getAttribute("type")=='checkbox'){
				if(document.getElementById(formElementIds[j]).checked)
					formValues[j]='Yes';
				else
					formValues[j]='No';
				}
			else{
				val = document.getElementById(formElementIds[j]).value;
				formValues[j] = val;
			}
		}
		//get all the elements with node name label
		var lables = oForm.getElementsByTagName('label');
		//an array to hold lable values
		var lableValues = Array();
		//get the lable values
		for (var i=0; i<lables.length; i++){
			//check if it is a node before getting the node values
				lableValues[i] = lables[i].innerHTML;
		}
		//formValues
		//lableValues
		formLength = formValues.length;
		lableLength = lableValues.length;
		//variable used for posting
		var params={};
		for(i=0; i<formLength; i++)
		{
			params[lableValues[i]] = formValues[i];
		}
	//send the request
		new Ajax(url,
		 {
			 method:'post',
			 data: params,
			 onComplete: function(response)
			 {
			 	//check if the mail sent successfully.. and display messages accordingly..
			 	if(response==true)
			 	{
				 var sentTimer = setTimeout("hideContactTimer()",loadbarTime);
			 	}
				 else
				 {
				 	document.getElementById(messagesDisplayBox).innerHTML=failure;
				 }
			 }
			}).request();
			//reset the form values....
		oForm.reset();
		return false;
		}
		

//hide loading bar and show success message	
function hideContactTimer()
{
	document.getElementById(messagesDisplayBox).innerHTML=success;
}