// JavaScript Document

var fields = {
	"loan_amount": {		"validator": "NumericRange",	"min": 50,	"max": 125000},
	"loan_purpose": {		"validator": "Options"},
	"monthly_repayment_max": {"validator": "NumericRange",	"min": 10,	"max": 9999999},

	"annual_salary": {		"validator": "Options"},
	"home_status": {		"validator": "Options"},
	"mortgage_status": {	"validator": "Options"},
	"renting_status": {		"validator": "Options"},

	"age": {				"validator": "NumericRange",	"min": 18,	"max": 100},
	"marital_status": {		"validator": "Options"},
	"number_of_dependants": {"validator": "Options"},

	"employment_status": {	"validator": "Options"},
	"time_with_employer": {	"validator": "Options"},
	"time_with_bank": {		"validator": "Options"},

	"credit_cards": {		"validator": "Options"},
	"missed_payments": {	"validator": "Options"},
	"ccjs": {				"validator": "Options"},

	"mobile_phone": {		"validator": "Options"},
	"phone": {				"validator": "Telephone3"},

	"title": {				"validator": "Options"},
	"first_name": {			"validator": "String"},
	"last_name": {			"validator": "String"},

	"address1": {			"validator": "String"},
	"postcode": {			"validator": "PostCode"},
	"years_at_address": {	"validator": "Options"},
	"property_type": {		"validator": "Options"},
	
	"email": {				"validator": "Email"},
	"home_value": {			"validator": "Numeric"},
	"mortgage_balance": {	"validator": "Numeric"}
};


// do not edit below this line unless you are Jon.

var form;
function initForm()
{
	form = document.getElementById("app_form");

	var l = form.elements.length;
	for (var i=0; i<l; i++)
	{
		el = form.elements[i];

		el.onfocus = function() {
			if (this.nodeName != "FIELDSET" && this.nodeName != "OBJECT") setActive(this);
		};
		el.onblur = function() {
			if (this.nodeName != "FIELDSET" && this.nodeName != "OBJECT") validate(this);
		};

		// if it's a dropdown, do the validation onchange as well
		if (el.nodeName == "SELECT") el.onchange = function() {
			validate(this);
		}
	}

	percent_complete = getCompletion();
	updateProgress(percent_complete);
}
addOnLoad(initForm);

function validate(el)
{
	var valid = false;

	var li = el;
	while(li.nodeName != "LI") {li = li.parentNode;}

	// only do the validation if a validation method is defined
	if (typeof(fields[li.id]) == "undefined")
	{
		css.removeClassFromElement(li, "active");
		return;
	}

	if (window.ActiveXObject) request = new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) request = new XMLHttpRequest();


	// we need to handle the DOB fields seperately, as there is more than one item in the LI
	if (li.id == "dob")
	{
		f = document.getElementById("app_form");
		day = f.elements["dob_day"].value;
		month = f.elements["dob_month"].value;
		year = f.elements["dob_year"].value;

		value = day + "/" + month + "/" + year + "&field=dob";
	}
	else
	{
		value = escape(el.value) + "&field=" + el.name;
	}

	url = "/site/search/validate.phtml?type=ajax&value=" + value;

	// concatenate the rest of the values in the object so we can submit all the optional stuff
	for (i in fields[li.id]) url += "&" + i + "=" + fields[li.id][i];

	request.open('GET', url, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4)
		{
//			alert(request.responseText);
			result = request.responseText;

			// clear the active class so we can set it to error/complete
			css.removeClassFromElement(li, "active");

			if (result != "") setError(li, request.responseText)
			else setComplete(li);

			percent_complete = getCompletion();
			updateProgress(percent_complete);
		}
	};
	request.send(null);

	// handle the dependancies
	handleDependancies(el, li)
}

function setActive(el)
{
	var li = el;
	while(li.nodeName != "LI") {li = li.parentNode;}

	css.addClassToElement(li, "active");
}


var percent_complete = 0;
function getCompletion()
{
	var form = document.getElementById("app_form");
	var lis = form.getElementsByTagName("LI");

	// get the number of items in the fields array, and only add them to the list if they are visible on the form
	var num_elements = 0;
	for (field in fields)
	{
		if (document.getElementById(field))
		{
			if (!css.elementHasClass(document.getElementById(field), "hidden") && !css.elementHasClass(document.getElementById(field), "invisible")) num_elements++;
		}
	}

	num_complete = 0;
	for (i=0; i<lis.length; i++) if (css.elementHasClass(lis[i], "complete")) num_complete++;

	percent_complete = (num_complete / num_elements) * 100;
	percent_complete = Math.round(percent_complete);
	if (percent_complete > 100) percent_complete = 100;

	return percent_complete;
}

function setError(li, msg)
{
	css.addClassToElement(li, "error");
	css.removeClassFromElement(li, "complete");

	strong = li.getElementsByTagName("STRONG")[0];
	strong.innerHTML = msg;
}

function setComplete(li)
{
	css.removeClassFromElement(li, "error");
	css.addClassToElement(li, "complete");

	strong = li.getElementsByTagName("STRONG")[0];
	strong.innerHTML = "";
}

function clearStatus(li)
{
	css.removeClassFromElement(li, "complete");
	css.removeClassFromElement(li, "error");
}






function handleDependancies(el, li)
{
	/* Home Status */
	if (li.id == "home_status")
	{
		var mortgage_status = document.getElementById("mortgage_status");
		var renting_status = document.getElementById("renting_status");
		
		var home_value = document.getElementById("home_value");
		var mortgage_balance = document.getElementById("mortgage_balance");

		// if the user owns their own home, show the mortgage status box
		if (el.selectedIndex == 1)
		{
			css.removeClassFromElement(mortgage_status, "hidden");
			css.removeClassFromElement(home_value, "hidden");

			// clear the rental status field
			css.addClassToElement(renting_status, "hidden");
			clearStatus(renting_status);
			form.elements["renting_status"].selectedIndex = 0;

			form.elements["mortgage_status"].focus();
		}
		// if the user rents their home, show the rental situation box
		else if (el.selectedIndex == 2)
		{
			css.removeClassFromElement(renting_status, "hidden");

			// clear the mortgage status fields
			css.addClassToElement(mortgage_status, "hidden");
			clearStatus(mortgage_status);
			form.elements["mortgage_status"].selectedIndex = 0;

			css.addClassToElement(home_value, "hidden");
			clearStatus(home_value);
			form.elements["home_value"].value = "";

			css.addClassToElement(mortgage_balance, "hidden");
			clearStatus(mortgage_balance);
			form.elements["mortgage_balance"].value = "";

			form.elements["renting_status"].focus();
		}
		// otherwise, hide it and its dependancies and reset them
		else
		{
			css.addClassToElement(mortgage_status, "hidden");
			clearStatus(mortgage_status);
			form.elements["mortgage_status"].selectedIndex = 0;
			
			css.addClassToElement(renting_status, "hidden");
			clearStatus(renting_status);
			form.elements["renting_status"].selectedIndex = 0;

			css.addClassToElement(home_value, "hidden");
			clearStatus(home_value);
			form.elements["home_value"].value = "";

			css.addClassToElement(mortgage_balance, "hidden");
			clearStatus(mortgage_balance);
			form.elements["mortgage_balance"].value = "";
		}
	}

	/* Mortgage Status */
	if (li.id == "mortgage_status")
	{
		var home_status = document.getElementById("home_status");
		var home_value = document.getElementById("home_value");
		var mortgage_balance = document.getElementById("mortgage_balance");

		// if the user has a mortgage is chosen, show the home value and mortgage status fields
		if (el.selectedIndex == 1 || el.selectedIndex == 2 || el.selectedIndex == 3)
		{
			css.removeClassFromElement(mortgage_balance, "hidden");
		}
		// otherwise, hide and reset them
		else
		{
			css.addClassToElement(mortgage_balance, "hidden");
			clearStatus(mortgage_balance);
			form.elements["mortgage_balance"].value = "";
		}
	}
}

















var params = {
	wmode: "transparent",
	menu: "false"
};
swfobject.embedSWF("/media/secured_loan_progress_bar.swf", "progress_bar1", "70", "40", "9.0.0", "", false, params);
swfobject.embedSWF("/media/secured_loan_progress_bar.swf", "progress_bar2", "70", "40", "9.0.0", "", false, params);

var percent = 0;

function updateProgress(percent)
{
	if (document.getElementById("progress_text1")) document.getElementById("progress_text1").innerHTML = "form " + percent + "% complete";
	if (document.getElementById("progress_text2")) document.getElementById("progress_text2").innerHTML = "form " + percent + "% complete";

	if (document.getElementById("progress_bar1")) document.getElementById("progress_bar1").SetVariable("percent", percent);
	if (document.getElementById("progress_bar2")) document.getElementById("progress_bar2").SetVariable("percent", percent);
}