/* 

	Cascading Dropdowns 
	written by Thomas Lahr Reingold, Inc.
	
*/

this.cascadingdropdowns = function() {
  
	alert("JavaScript has loaded.");
	
	//use XSLT to create multi-dimensional, associative arrays for each parent-child relationship in the filter menu
	var countries_array = new Array();
	<xsl:for-each select="/root/Products3/Product/CategoryName[generate-id()=generate-id(key('distinct-category',.))][../CategoryType='Country']">
	     <xsl:variable name="Country" select="."/>
	     countries_array['<xsl:value-of select="$Country"/>']= new Array ( "",
	     <xsl:for-each select="/root/Products3/Product[CategoryName=$Country]">
			  "<xsl:value-of select="Child" />", 
	     </xsl:for-each>
	     "" );
	</xsl:for-each>
	
	var regions_array = new Array();
	<xsl:for-each select="/root/Products3/Product[CategoryType='Country']/Child">
	     <xsl:variable name="Region" select="."/>
	     regions_array['<xsl:value-of select="$Region"/>']= new Array ( "",
	     <xsl:for-each select="/root/Products3/Product[Child=$Region]">
			  "<xsl:value-of select="CategoryName" />" ,
	     </xsl:for-each>
	     "");
	</xsl:for-each>
	
	var types_array = new Array();
	<xsl:for-each select="/root/Products3/Product/CategoryName[generate-id()=generate-id(key('distinct-category',.))][../CategoryType='Type']">
	     <xsl:variable name="Type" select="."/>
	     types_array['<xsl:value-of select="$Type"/>']= new Array ( "",
	     <xsl:for-each select="/root/Products3/Product[CategoryName=$Type]">
			  "<xsl:value-of select="Child" />", 
	     </xsl:for-each>
	     "" );
	</xsl:for-each>
	
	var varietals_array = new Array();
	<xsl:for-each select="/root/Products3/Product[CategoryType='Type']/Child">
	     <xsl:variable name="Varietal" select="."/>
	     varietals_array['<xsl:value-of select="$Varietal"/>']= new Array ( "",
	     <xsl:for-each select="/root/Products3/Product[Child=$Varietal]">
			  "<xsl:value-of select="CategoryName" />" ,
	     </xsl:for-each>
	     "");
	</xsl:for-each>
      
      
	function updateDropdowns(select) {
	   //alert ('Welcome to the program! '+select.id);
	   
	   //on dropdown change pass the selected value, the target menu and the proper array to populateOptions function
	   
	   switch(select.id)
	    {
	    case "countries": 
	      populateOptions(select.value,document.getElementById("regions"),countries_array);
	      break; 
	      
	    case "regions":
	      populateOptions(select.value,document.getElementById("countries"),regions_array);
	      break;
	      
	    case "types":
	      populateOptions(select.value,document.getElementById("varietals"),types_array);
	      break;
	      
	    case "varietals":
	      populateOptions(select.value,document.getElementById("types"),varietals_array);
	      break;
	      
	     default:
	      return;
	     }
	
	function populateOptions(selection,target,thomas)
	  {
		//make a backup of the parent select if one does not already exist
		if (!target.backup) {
		  target.backup = target.cloneNode(true);
		}
										
		//clear out the target options
		target.options.length=0;
		
		//repopulate with correct options
		if (selection == '') {
		    for (i=0; i&lt;(target.backup.length); i++)
		    {
			addOption(target,target.backup[i].value,target.backup[i].value);
		    }
		}
		else {
		    for (i=0; i&lt;(thomas[selection].length)-1; i++) {
		    addOption(target,thomas[selection][i],thomas[selection][i]);
		    }
		}
	  }

	function addOption(selectbox,text,value)
	  {
	  var optn = document.createElement("OPTION");
	  optn.text = text;
	  optn.value = value;
	  selectbox.options.add(optn);
	  }
      }
}

window.onload=cascadingdropdowns;