//need a global variable to hold the stuff returned by the AJAX call
var myGroupLabel = '';
var myCascadePlace = 0;
var track = '';
var myChosenSelector;
var myAjaxHandle;

/*
extraSelection()
================
this handles the additional selection process - similar to, but much simpler than, the
makeSelection function below:
*/
function extraSelection(e) {
	myChosenSelector = e.id;
	var mySearchPattern = new RegExp('^select(.*)Extra$');
	var mySearchResults = myChosenSelector.match(mySearchPattern);
	myGroupLabel = mySearchResults[1];
	var mySemanticExtraId = myGroupLabel + 'Extra';
	var mySemanticExtraBox = document.getElementById(mySemanticExtraId);
	var mySemanticExtraValue = document.getElementById(myChosenSelector).value;
	mySemanticExtraBox.setAttribute('value', mySemanticExtraValue);
	setHiddenReturn();
	}

/*
setHiddenReturn
===============
The actual return is a combination of the Value and Extra display boxes - each time
they are updated, the hidden box also needs to be updated. It is the hidden box which
gets included in the main form, and thus contributes semantic data to the database.
*/
function setHiddenReturn() {
	var mySemanticId = myGroupLabel + 'Value';
	var myExtraId = myGroupLabel + 'Extra';
	var myHiddenId = myGroupLabel + 'SemanticCode';
	var mySemanticBox = document.getElementById(mySemanticId);
	var myExtraBox = document.getElementById(myExtraId);
	var myHiddenBox = document.getElementById(myHiddenId);
	var myHiddenValue = mySemanticBox.value + ':' + myExtraBox.value;
	myHiddenBox.setAttribute('value', myHiddenValue);
	}

/*
makeSelection()
===============
this is a cascade of actions, moving down from the selected box to the last one
because of the AJAX call, the process is split into 2 functions?
the cascade is required in case a user makes a series of selections and then changes their minds,
which means that selections made in lower boxes need to be cleared
it also handles the data population of the box below the selected box
*/
function makeSelection(e) {
	//parse e
	e = e || window.event;
	myChosenSelector = e.id;
	var mySearchPattern = new RegExp('^select(.*)([0-9])$');
	var mySearchResults = myChosenSelector.match(mySearchPattern);
	myGroupLabel = mySearchResults[1];
	myCascadePlace = parseInt(mySearchResults[2]);
	
	//get a handle to the box where the semantic code is shown, then update it with new code
	var mySemanticValueId = myGroupLabel + 'Value';
	var mySemanticValueBox = document.getElementById(mySemanticValueId);
	var myNewSemanticValue = document.getElementById(myChosenSelector).value;
	mySemanticValueBox.setAttribute('value', myNewSemanticValue);
	setHiddenReturn();
	
	//clear the lower divs to make room for the changes
	var myCounter = myCascadePlace + 1;
	if(myCounter < 6) {
		for(myCounter; myCounter < 6; myCounter++) {
			var tempSelectId = 'select' + myGroupLabel + myCounter;
			var tempSelect = document.getElementById(tempSelectId);
			try {
				tempSelect.style.setAttribute('visibility', 'hidden');
				}
			catch(e) {
				tempSelect.setAttribute('class', 'attribute-select-hidden');
				}
			tempSelect.options.length=0;
			}
		}

	//populate the box below the selected box with appropriate data via AJAX
	if(myCascadePlace < 6) {

		//setup and activate AJAX handle, and send request
		var myUrl='semantics-server.php?semid=' + myNewSemanticValue + "&timestamp=" + new Date().getTime();
		if(!myAjaxHandle) {
			myAjaxHandle=createXMLHTTPObject();
			}
		rCallAjax(myUrl, myAjaxHandle);
		}
	}

function rHandleAjaxReturn(newXml) {
	makeNewSelectionBox(newXml);
	}

function makeNewSelectionBox(newXml) {
	if(newXml) {
		var myNewCascadePlace = myCascadePlace + 1;
		var myNewSelectId = 'select' + myGroupLabel + myNewCascadePlace;
		var myNewSelector = document.getElementById(myNewSelectId);
		var myEntryNodes = newXml.getElementsByTagName('myEntry');
		if(myEntryNodes.length > 0) {
			for(var i = 0; i < myEntryNodes.length; i++) {
				var tempName = tempValue = null;
				for(var j = 0; j < myEntryNodes[i].childNodes.length; j++) {
					tempName = myEntryNodes[i].childNodes[j].nodeName;
					tempValue = myEntryNodes[i].childNodes[j].firstChild.nodeValue;
					if(tempName == 'text') {
						var myNodeText = tempValue;
						}
					else {
						var myNodeValue = tempValue;
						}
					}
				myNewSelector.options[myNewSelector.length]=new Option(myNodeText, myNodeValue)
				}
			try {
				myNewSelector.style.setAttribute('visibility', 'visible');
				}
			catch(e) {
				myNewSelector.setAttribute('class', 'attribute-select');
				}
			}
		}
	else {
		track += "\nappears as if AJAX returned nothing";
		}
	}