// this function sets up the gateway we'll use and
// requests the chemical series that will populate
// the first select box.
// Note here that we are chaining three methods together. 
function body_onLoad() {
	objGateway = new gateway("serverpages/elements.cfm?");
	objGateway.setListener('seriesPacket_onReceive').setArguments( {type:'series'} ).request()
	// The line above is equivalent to these three lines:
	// objGateway.setListener('seriesPacket_onReceive');
	// objGateway.setArguments( {type:'series'} );
	// objGateway.request();
}



// this function loads the "series" select box with a query record 
// set. Here we are using an SRS function srsLoadSelect() to
// make the job simpler. 
// The function attributes are: field ID, data, value column, 
// display column, prompt option, prompt value.
function seriesPacket_onReceive(packet) {
	var select = document.getElementById('selectSeries');
	srsLoadSelect(select, packet, 'id', 'name', '> Series <', 0);
}



// when the selected value changes, we send off a request for 
// the elements in the selected series. As in example 2, we
// are chaining method requests together here.
function selectSeries_onChange(field) {
	var choice = field.options[field.selectedIndex].value;
	objGateway.setListener('elementsInSeriesPacket_onReceive').setArguments( {type:'elements',series:choice} ).request();
}



// this function loads the "element" select box with a query record 
// set. Once again we use the SRS function srsLoadSelect() .
function elementsInSeriesPacket_onReceive(packet) {
	var select = document.getElementById('selectElement');
	srsLoadSelect(select, packet, 'symbol', 'name', '> Element <', 0);
}



// when the selected value changes, we send off a request for the
// element details.
function selectElement_onChange(field) {
	var symbol = field.options[field.selectedIndex].value;
	objGateway.setListener('elementPacket_onReceive').setArguments( {type:'element',symbol:symbol} ).request();
}



// this function loads a table with the details of a specific
// element. 
function elementPacket_onReceive(packet) {
	document.getElementById('tdElementName').innerHTML = packet['name'];
	document.getElementById('tdElementSymbol').innerHTML = packet['symbol'];
	document.getElementById('tdElementMass').innerHTML = packet['atomicmass'];
	document.getElementById('tdElementNumber').innerHTML = packet['atomicnumber'];
	if ( packet['discovered'] == 'true' ) 
		document.getElementById('tdElementDiscovered').innerHTML = 'Yes';
	else 
		document.getElementById('tdElementDiscovered').innerHTML = 'No';			
}



// as a key is pressed, a request is sent to the server, which 
// returns a record set of matching elements
function input_onKeyUp(field) {
		objGateway.setListener('searchResultsPacket_onReceive').setArguments( {type:'search',filter:field.value} ).request();
}



// this function generates an HTML table of search results.
function searchResultsPacket_onReceive(packet) {
	var theTable = document.getElementById('tableResults');
	var tbody = document.createElement("tbody");
	for ( var i = 0 ; i < packet.name.length; i++ ) {
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		td.innerHTML = packet.symbol[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = packet.name[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = packet.atomicnumber[i];
		tr.appendChild(td);
		td = document.createElement("td");
		td.innerHTML = packet.atomicmass[i];
		tr.appendChild(td);
		tbody.appendChild(tr);
	}
	theTable.replaceChild(tbody, theTable.childNodes[1]); 
}