
function init_search() 
{
	var input_phone = document.getElementById('phone');
	var input_name = document.getElementById('name');

	input_phone.onkeyup = function () { form_onkeyup(); }
	input_name.onkeyup = function () { form_onkeyup(); }
}


function form_onkeyup() {
	var data = get_form_data();
	Ajax.request('/php-bin/search.php', response_search, data);
}


function get_form_data() {
	var name = document.getElementById('name').value;
	var phone = document.getElementById('phone').value;
	
	var data = 'name=' +name+ '&phone=' +phone;
	return data;
}


function response_search() 
{
	// If server responded
	if (Ajax.checkReadyState(Ajax.xmlHttp))
	{			
	
		var div_results = document.getElementById('results');
		var table_exists = document.getElementById('search_results');
		var in_phone = document.getElementById('phone');
		var in_name = document.getElementById('name');
		var response = Ajax.xmlHttp.responseXML.documentElement;

		var names = response.getElementsByTagName('name');
		var raw_phones = response.getElementsByTagName('raw_phone');
		var phones = response.getElementsByTagName('phone');
		var sequences = response.getElementsByTagName('sequence');
		var checkmarks = response.getElementsByTagName('checkmark');
		
		// If table alrady exists, remove it so it can be updated with new values
		if (table_exists) {
			div_results.removeChild(div_results.firstChild);
		}
		
		div_results = document.getElementById('results');
		
		var table = document.createElement('table');
		
		table.className = 'listing';
		table.width = '95%';
		table.align = 'center';
		table.id = 'search_results';
		
		var tbody = document.createElement('tbody');
		var tr = document.createElement('tr');

		var th1 = document.createElement('th');
		var th_value = document.createTextNode('Company');
		th1.appendChild(th_value);
		th1.width = "25%";

		var th2 = document.createElement('th');
		var th_value = document.createTextNode('Number');
		th2.appendChild(th_value);
		th2.width = "25%";
		
		var th3 = document.createElement('th');
		var th_value = document.createTextNode('Sequence');
		th3.colSpan = 2;
		th3.appendChild(th_value);
		
		tr.appendChild(th1);
		tr.appendChild(th2);
		tr.appendChild(th3);
		tbody.appendChild(tr);
		table.appendChild(tbody);
		
		for (i = 0; i < names.length; i++) {
			
			var zebra = (i%2)?'zebra':'';		// if odd row, change its background color
			
			var name = names[i].firstChild.data;
			var raw_phone = raw_phones[i].firstChild.data;
			var phone = phones[i].firstChild.data;
			var sequence = sequences[i].firstChild.data;
			var checkmark = checkmarks[i].firstChild.data;

			var tr = document.createElement('tr');
			var td1 = document.createElement('td');
			var td_value = document.createTextNode(name);
			td1.appendChild(td_value);
			
			var td2 = document.createElement('td');
			var a = document.createElement('a');
			a.href = '/details.php?phone=' +raw_phone;
			var a_value = document.createTextNode(phone);
			a.appendChild(a_value);
			td2.appendChild(a);
			
			var td3 = document.createElement('td');
			var td_value = document.createTextNode(sequence);
			td3.appendChild(td_value);
			
			var td4 = document.createElement('td');
			var img = document.createElement('img');
			img.src = checkmark;
			td4.appendChild(img);
			
			tr.className = zebra;
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tbody.appendChild(tr);
			table.appendChild(tbody);
		}
		// Display table result if any results present
		if (names.length && (in_phone.value || in_name.value)) 
		{ 
			div_results.appendChild(table);	
		}
				

		// Done with calculations and server activity - hide server busy icon
		Display.hide_busy();
	}
	// If server's busy
	else { Display.show_busy(); }
	
}