// SELECTS
window.onload = function() {
dynamicSelect("style_a", "color_a");
dynamicSelect("color_a", "size_a");
dynamicSelect("size_a", "quantity_a");

dynamicSelect("style_b", "color_b");
dynamicSelect("color_b", "size_b");
dynamicSelect("size_b", "quantity_b");

dynamicSelect("style_c", "color_c");
dynamicSelect("color_c", "size_c");
dynamicSelect("size_c", "quantity_c");

dynamicSelect("style_d", "color_d");
dynamicSelect("color_d", "size_d");
dynamicSelect("size_d", "quantity_d");

dynamicSelect("style_e", "color_e");
dynamicSelect("color_e", "size_e");
dynamicSelect("size_e", "quantity_e");

dynamicSelect("style_f", "color_f");
dynamicSelect("color_f", "size_f");
dynamicSelect("size_f", "quantity_f");

dynamicSelect("style_g", "color_g");
dynamicSelect("color_g", "size_g");
dynamicSelect("size_g", "quantity_g");

dynamicSelect("style_h", "color_h");
dynamicSelect("color_h", "size_h");
dynamicSelect("size_h", "quantity_h");

dynamicSelect("style_i", "color_i");
dynamicSelect("color_i", "size_i");
dynamicSelect("size_i", "quantity_i");

dynamicSelect("style_j", "color_j");
dynamicSelect("color_j", "size_j");
dynamicSelect("size_j", "quantity_j");
}


// ENCOMENDA
function dynamicSelect(id1, id2) {
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_mac = (agt.indexOf("mac") != -1);
	// Feature test to see if there is enough W3C DOM support
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshdynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshdynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshdynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}