function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName && document.appendChild) {
		// Obtain references to both select boxes
		sel1 = document.getElementById(id1);
		sel2 = document.getElementById(id2);
		if (sel1 !==null && sel2 !=null) {
			// Clone the dynamic select box
			var clone = sel2.cloneNode(true);
			// ensure selectedIndex is inherited by the clone
			clone.selectedIndex = sel2.selectedIndex;
		
			// Onload init: call a generic function to display the related options in the dynamic select box
			refreshDynamicSelectOptions(sel1, sel2,clone);
			// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
			sel1.onchange = function() {
				// reset selectedIndex for onchange event
				clone.selectedIndex = 0;
				refreshDynamicSelectOptions(sel1, sel2, clone);
			};
		}
	}
}

function refreshDynamicSelectOptions(sel1, sel2, clone) {
	// Enable sel1 menu
	sel1.disabled="";
	
	// Obtain reference to all cloned optgroups
	var clonedOptGroups = clone.getElementsByTagName("optgroup");
	
	// Obtain reference to all cloned options
	var clonedOptions   = clone.getElementsByTagName("option");

	// remove select item contents
	sel2.innerHTML = ""; 
	
	// Create regular expression objects for the value of the selected option of the main select box as optgroup labels
	var pattern = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	
	// Reinstate the first option in sel2 ('Please select...')
	sel2.appendChild(clonedOptions[0].cloneNode(true));
	
	// Iterate through all cloned optgroups
	var clonedOptions = new Array(); // store the clonedOptions
	if (sel1.options[sel1.selectedIndex].value != "") {
		for (var i = 0; i < clonedOptGroups.length; i++) {
			clonedOptions[i] = clonedOptGroups[i].getElementsByTagName("option");
	
			if (clonedOptGroups[i].label.match(pattern)) {
				// Iterate through all selected optgroup options
				for (var j = 0; j < clonedOptions[i].length; j++) {
					// Clone the option from the hidden option pool and append it to the dynamic select box
					sel2.appendChild(clonedOptions[i][j].cloneNode(true));
				}	
			}
		}
		// Enable sel2 menu
		sel2.disabled="";
		
		// Force sel2 to inherit the correct selected index (required by ie)
		// Need to calculate how much to trim selected index value now that the sel2 menu is showing one optgroup only
		var trim=0;
		var optIndex=0;
		for (var i=0; i<clonedOptions.length; i++) {
			optIndex +=clonedOptions[i].length;
			if (clone.selectedIndex > optIndex ) {
				trim +=clonedOptions[i].length;
			}
		}
		clone.selectedIndex -=trim;
		sel2.selectedIndex = clone.selectedIndex;
	} else {
		sel2.disabled="disabled"; // disable sel2 menu
	}
}

/* dynamic select menus */
function do_dynamicSelect() {
	dynamicSelect("dynamicFilter", "dynamicOptions");
}

/* add onload event */
addEvent(window,'load',do_dynamicSelect, false);