var user_address = "";
var user_city = "";
var user_zip = "";

function find_services() {
	
	//select the Find Services button
	//select ('find_services', 'search_categories');
	
	//fill the content variable with instructions and address form.
	var content = renderFindInstructions();
	content += renderFindForm();
	
	//fill the html content area
	document.getElementById('content_area').innerHTML = content;

}

function search_categories() {

	//select ('search_categories', 'find_services');
	
	//var content = renderCategoryInstructions();
	//content += renderCategoryAddress();
	var content = renderCategories();
	document.getElementById('content_area').innerHTML = content;
}

//Saves the user address so user doesn't have to re-write address when toggling between 'Find Services' or 'Search Category'
function saveAddress() {
	user_address = document.getElementById('user_address').value;
	user_city = document.getElementById('user_city').value;
	user_zip = document.getElementById('user_zip').value;
}

//form for find services option.  Takes an html rendering of the address input as an argument.
function renderFindForm() {

	form = 		'<form method = "POST" action = "go.php" name = "intake" target = "_parent">';
	form +=			'<input type = "hidden" name = "search_type" value = "referral_match"></input>';
	form += 		'<table style = "font-family: arial; position: relative; top: -17px;">';
	form += 	    	'<tr style = "font-weight: bold; font-size: 0.9em">';
	form +=					'<td>Address</td>';
	form +=					'<td>City</td>';
	form +=					'<td>State</td>';
	form +=					'<td>Zip</td>';
	form +=				'</tr>';
	form +=				'<tr>';
	form +=					'<td>';
	form +=						'<input id = "user_address" name = "address" size = 17 onblur = "saveAddress()" value = "' + user_address + '">';
	form +=					'</td>';
	form +=					'<td>';
	form +=						'<input id = "user_city" name = "city" size = 12 onblur = "saveAddress()" value = "' + user_city + '">';
	form +=					'</td>';
	form +=					'<td>';
	form +=						'<input id = "user_state" name = "state" size = 2 value = "CA" disabled = "disabled">';
	form +=					'</td>';
	form +=					'<td>';
	form +=						'<input id = "user_zip" name = "zip" size = 5 onblur = "saveAddress()" value = "' + user_zip + '">';
	form +=					'</td>';
	form +=				'</tr>';
	form +=			'</table>';
	form += 		'<input type = image src = "images/start.jpg" onclick = "document.intake.submit();" style = "position: relative; left: 270px;">';
	form +=		'</form>';

	return form;

}

//user instructions for the find services option
function renderFindInstructions() {

var instructions = '<p style = "margin-right: 40px; font-family: arial; font-weight: bold; color : 555555;">Answer the following questions to get matched to financial services that can help you and your family improve your economic well being.  Enter your address and press \'Start\' to get started.</p>';
return instructions;

}

//user instructions for Search by Category
function renderCategoryInstructions() {

	var instructions = '<p style = "margin-right: 40px; font-family: arial; font-weight: bold; color : ff0000; font-size: 0.9em">';
	instructions +=	"Step One: Enter Your Address";
	instructions += '</p>';
	return instructions;

}

// select one button and deselect the other
function select(select, deselect) {

	var arrow = '<span style="position: relative; top: 2px; left: -5px; display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/arrow.png\');">';
	arrow += '<img src = "images/arrow.png" style = "filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);">';
	arrow += '</span>';

	document.getElementById(select).innerHTML = arrow;
	document.getElementById(deselect).innerHTML = "";
}

function renderCategories() {
	
	categories =	'<form method = "POST" action = "go.php" name = "intake" target = "_parent">';
	categories +=		'<input type = "hidden" name = "search_type" value = "referral_search"></input>';
	categories +=		'<input type = "hidden" id = "selected_category" name = "selected_category" value = "tax preparation"></input>';
	categories += 		'<table style = "font-family: arial; position: relative; top: -33px; _top: -40px;">';
	categories += 	    	'<tr style = "font-weight: bold; font-size: 0.9em">';
	categories +=					'<td>Address</td>';
	categories +=					'<td>City</td>';
	categories +=					'<td>State</td>';
	categories +=					'<td>Zip</td>';
	categories +=					'<td></td>';
	categories +=			'</tr>';
	categories +=			'<tr>';
	categories +=					'<td>';
	categories +=						'<input id = "user_address" name = "address" size = 17 onblur = "saveAddress()" value = "' + user_address + '">';
	categories +=					'</td>';
	categories +=					'<td>';
	categories +=						'<input id = "user_city" name = "city" size = 12 onblur = "saveAddress()" value = "' + user_city + '">';
	categories +=					'</td>';
	categories +=					'<td>';
	categories +=						'<input id = "user_state" name = "state" size = 2 value = "CA" disabled = "disabled">';
	categories +=					'</td>';
	categories +=					'<td>';
	categories +=						'<input id = "user_zip" name = "zip" size = 5 onblur = "saveAddress()" value = "' + user_zip + '">';
	categories +=					'</td>';
	categories +=					'<td>';
	categories +=					'<input type = "Submit" value = "Go!"></input>';
	categories +=					'</td>';
	categories +=			'</tr>';
	categories +=		'</table>';
	/**
	categories += 		'<div style = "position: relative; top: -10px; width: 380px; border-top-style: solid; border-top-width: 1px; border-top-color: 877ca1;"></div>';
	categories += 		"<span style = 'position: relative; _top: -20px; font-family: arial; font-weight: bold; font-size: 0.9em; color: ff0000'>Step Two: Pick a Category</span>";
	categories +=		'<table cellpadding = 0 cellspacing = 0 style = "width: 385; font-family: arial; font-size: 0.7em; position: relative; left: -10px; top: 0px; _top: -20px;">';
	categories +=			'<tr>';
	categories +=				renderCategory('Tax Preparation');
	categories +=				renderCategory('Tax Credit');
	**/
	/**
	categories +=				renderCategory('Credit Counseling');
	categories +=				renderCategory('Financial Education');
	categories +=				renderCategory('First-Time Homebuyer', 'Homebuyer');
	categories +=				renderCategory('Foreclosure Prevention', 'Foreclosure');
	categories += 			'</tr>';
	categories +=			'<tr><td style = "height: 7px"></td></tr>'; //spacer row between the two display rows
	categories += 			'<tr>';
	categories +=				renderCategory('Matching Savings Accounts', 'Savings Accounts');
	categories +=				renderCategory('Small Business Development', 'Business Dev.');
	categories += 			'</tr>';
	categories += 		'</table>';
	**/
	categories +=	'</form>';

	return categories;

}

/**
By David Henderson
Renders a category cell

takes the category name, as it appears in the database and an "alt_text",
which stands for alternative text.  This text is a shorter representation
of the category name for display purposes
**/
function renderCategory(category_name, alt_text) {
	if (alt_text == '' || alt_text == null) {
		alt_text = category_name;
	}
	var category_name_lower = category_name.toLowerCase();
	var img_url = "../images/categories/" + category_name_lower + ".png";
	var category = 	'<td onclick = "selectCategory(\'' + category_name + '\')" onmouseover = "highlight(this)" onmouseout = "unhighlight(this)" align = center valign = bottom style = "cursor: pointer; padding: 1px;">';
	category += 		"<span style = \"display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img_url + "'); \">";
	category += 			'<img class = "trans" src = "' + img_url + '">';
	category +=			"</span>";
	category +=			"<br>" + alt_text;
	category += 	'</td>';
	
	return category;
}


//submits the category search form to search for the selected category
function selectCategory(category_name) {
	//reloadParent();
	document.getElementById('selected_category').value = category_name;
	document.intake.submit();
}

function highlight(category) {
	category.style.borderStyle ='solid';
	category.style.borderWidth ='1px';
	category.style.borderColor ='cacaca';
	category.style.padding = "0px";
}

function unhighlight(category) {
	category.style.borderWidth = '0px';
	category.style.padding = "1px";
}