// regions.js
//
// Handles visibility and contents of three select boxes:
//		region
//		country
//		institution
// All contents come from variable tree - which will eventually be provided by DB via Java. 
//
// RegionContainer, CountryContainer, InstitutionContainer are HTML elements that
// contain the selects (and associated labels/text), so that setting the element hidden
// removes the option from the screen.
//
// RegionValue, CountryValue, InstitutionValue are kept up to date with the current
// selections by the script. On pressing the 'Back' button to return to the page, browsers
// will repopulate form fields to previous values - though they fail with the dynamic selects.
// The hidden _value fields are correctly repopulated, so we use them in the onLoad handler
// to recreate the previous select state.

function addChild(child) {
	this.children.push(child);
}

function Node(text, value) {
	this.text = text;
	this.value = value;
	this.children = new Array();
	this.add = addChild;
}

var tree = new Node("root", "root");

var region_node = null;
var country_node = null;
var inst_node = null;


	region_node = new Node("Europe", "1");
	
		country_node = new Node("Belgium", "22");
		
			inst_node = new Node("NBGB", "15");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("Denmark", "60");
		
			inst_node = new Node("CUL North", "3");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("Germany", "82");
		
			inst_node = new Node("BGBM", "10");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("Spain", "204");
		
			inst_node = new Node("RJBM", "12");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("Sweden", "210");
		
			inst_node = new Node("SWEUPS", "4");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("Switzerland", "211");
		
			inst_node = new Node("CJB", "11");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
		country_node = new Node("United Kingdom", "231");
		
			inst_node = new Node("BL(UK)", "6");
			country_node.add(inst_node);
		
			inst_node = new Node("NHM-LONDON", "1");
			country_node.add(inst_node);
		
			inst_node = new Node("RGB KEW", "14");
			country_node.add(inst_node);
		
			inst_node = new Node("LINNEAN", "2");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
	tree.add(region_node);

	region_node = new Node("North America", "2");
	
		country_node = new Node("United States of America", "233");
		
			inst_node = new Node("NYBG", "13");
			country_node.add(inst_node);
		
		region_node.add(country_node);
	
	tree.add(region_node);


// xxxChange() functions handle 3 things:
//   - updating visibility of the three selects
//   - updating contents of the three selects
//   - recording current state in xxxValue hidden text boxes (these are used to
//     recover previous state when 'Back' is pressed after unsuccessful search)
//
// @param prefix Used to distinguish between multiple sets of dropdowns on a page
function regionChange(prefix) {
  // update hidden fields - these values are used when 'Back' is pressed
  document.getElementById(prefix + "RegionValue").value = document.getElementById(prefix + "Region").value;
  document.getElementById(prefix + "CountryValue").value = "any";
  document.getElementById(prefix + "InstitutionValue").value = "any";
  
  // Institution select is now invalid, so hide it
  document.getElementById(prefix + "InstitutionContainer").className = "hidden";

  // Check whether the "Any" option is selected.
  var region = document.getElementById(prefix + "Region");
  if (region.selectedIndex == 0) {
    // Hide country select
    document.getElementById(prefix + "CountryContainer").className = "hidden";

  } else {
    // Make country select visible
    document.getElementById(prefix + "CountryContainer").className = "";
      
    // And set its contents.
    var country = document.getElementById(prefix + "Country");
    country.options.length = 1;
    
    var regionNode = tree.children[region.selectedIndex - 1];
	populateSelection(country, regionNode);
  }
}

function countryChange(prefix) {
	// update hidden fields - these values are used when 'Back' is pressed
	document.getElementById(prefix + "CountryValue").value = document.getElementById(prefix + "Country").value;
	document.getElementById(prefix + "InstitutionValue").value = "any";

	// Check whether the "Any" option is selected.
	var country = document.getElementById(prefix + "Country");
	if (country.selectedIndex == 0) {
		// Hide the institution select
		document.getElementById(prefix + "InstitutionContainer").className = "hidden";
	} else {
		// Make institution select visible.
		document.getElementById(prefix + "InstitutionContainer").className = "";
		
		// And set its contents.
		var region = document.getElementById(prefix + "Region");
		var institution = document.getElementById(prefix + "Institution");
		institution.options.length = 1;
		
		var node = tree.children[region.selectedIndex - 1].children[country.selectedIndex - 1];
		populateSelection(institution, node);
	}
}

function institutionChange(prefix) {
	// update hidden field - this value is used when 'Back' is pressed
	document.getElementById(prefix + "InstitutionValue").value = document.getElementById(prefix + "Institution").value;
}

// Sets the options of the selectElement to the children of node
function populateSelection(selectElement, node) {
	selectElement.options.count = 1;
	for (var i = 0; i != node.children.length; ++i) {
		var oOption = document.createElement("option");
		selectElement.options.add(oOption);
		oOption.text = node.children[i].text;
		oOption.value = node.children[i].value;
	}
}

// Set the option of selectElement with a value of chosenValue to selected
//   if there's no match (e.g. chosenValue left at ""), nothing will be set as
//   selected leaving the browser to show the first one.
function setSelectedOption(selectElement, chosenValue) {
	var arrOptions = selectElement.options;
	for (var i=0; i < arrOptions.length; ++i) {
		if (arrOptions[i].value == chosenValue) {
			arrOptions[i].selected = true;
			break;
		}
	}
}

// Called from onLoad - manages setting of initial visibility, contents and selected values
// of region/country/institution fields. Takes account of hidden xxxValue fields to
// reset to previous state after 'Back' button is pressed.
function setupRegionFields(prefix) {
	// Populate the region select
	var region = document.getElementById(prefix + "Region");
	populateSelection(region, tree);
	// Set selected option according to  
	setSelectedOption(region, document.getElementById(prefix + "RegionValue").value);
	
	if (document.getElementById(prefix + "RegionValue").value == "any") {
		// any region - hide others
		document.getElementById(prefix + "CountryContainer").className = "hidden";
		document.getElementById(prefix + "InstitutionContainer").className = "hidden";
	} else {
		// a region is selected - show country select
		document.getElementById(prefix + "CountryContainer").className = "";
		
		// find node in tree for selected region
		var regionNode = null;
		for (var i = 0; i != tree.children.length; ++i) {
			if (tree.children[i].value == document.getElementById(prefix + "RegionValue").value) {
				regionNode = tree.children[i];
				break;
			}
		}
		var country = document.getElementById(prefix + "Country");
		// populate the select with values from correct node, and set selected
		populateSelection(country, regionNode);
		setSelectedOption(country, document.getElementById(prefix + "CountryValue").value);
		
		if (document.getElementById(prefix + "CountryValue").value == "any") {
			// any country - hide institution select
			document.getElementById(prefix + "InstitutionContainer").className = "hidden";
		} else {
			// a country is selected - show institution select
			document.getElementById(prefix + "InstitutionContainer").className = "";
			
			// populate it, then set selected
			var institution = document.getElementById(prefix + "Institution");
			var countryNode = null;
			for (var i = 0; i != regionNode.children.length; ++i) {
				if (regionNode.children[i].value == document.getElementById(prefix + "CountryValue").value) {
					countryNode = regionNode.children[i];
				}
			}
			populateSelection(institution, countryNode);
			setSelectedOption(institution, document.getElementById(prefix + "InstitutionValue").value);
		}
	}
}