YAHOO.namespace("YAHOO.hmg.dropdownsplit");

YAHOO.hmg.dropdownsplit.init = function(){

	var elSelect = YAHOO.util.Dom.get("referer"),
		elSelectGroups = '',
		arrGroups = [],
		arrGroupsLen = 0,
		elSelectOptions = '',
		arrOptions = [],
		arrOptionsLen = 0,
		i = 0,
		y = 0,
		elHiddenInput = '',
		currentBox = '';
	
	YAHOO.hmg.dropdownsplit.currentBox = '';

	if(elSelect)
	{
		// Create select box for optgroups.
		elSelectGroups = document.createElement('select');
		elSelectGroups.id = 'referrer-groups';
		YAHOO.util.Dom.insertBefore(elSelectGroups, elSelect);
		arrGroups = YAHOO.util.Selector.query('optgroup', 'referer');
		arrGroupsLen = arrGroups.length;

		// Build options for new optgroups selectbox.
		elSelectGroups.options[0] = new Option('Please select', '');
		for(i=0;i<arrGroupsLen;i++){
			elSelectGroups.options[i+1] = new Option(arrGroups[i].label, 'arrGroups-'+i);
			
			// Create a select box for each optgroup.
			elSelectOptions = document.createElement('select');
			elSelectOptions.id = 'arrGroups-'+i;
			YAHOO.util.Dom.addClass(elSelectOptions, 'hide');
			YAHOO.util.Dom.insertBefore(elSelectOptions, elSelect);
			// Set the value of the hidden input when changed.
			YAHOO.util.Event.addListener(elSelectOptions, 'change', YAHOO.hmg.dropdownsplit.setHiddenValue);
			
			arrOptions = YAHOO.util.Selector.query('optgroup[label='+arrGroups[i].label+'] option', 'referer');
			arrOptionsLen = arrOptions.length;
			
			// Build options for each option in specific optgroup.
			elSelectOptions.options[0] = new Option('Please select', '');
			for(y=0;y<arrOptionsLen;y++){
				elSelectOptions.options[y+1] = new Option(arrOptions[y].label, arrOptions[y].value);
			}
		}
		
		// Replace original select box with a hidden input.
		elHiddenInput = YAHOO.hmg.dropdownsplit.elHiddenInput = document.createElement('input');
		elHiddenInput.id = 'referrer-hidden';
		elHiddenInput.type = 'hidden';
		elHiddenInput.name = elSelect.name;
		YAHOO.util.Dom.insertBefore(elHiddenInput, elSelect);
		elSelect.parentNode.removeChild(elSelect);

		// Add event for changing first select box.
		YAHOO.util.Event.addListener(elSelectGroups, 'change', YAHOO.hmg.dropdownsplit.toggleSelect);
	}

}

YAHOO.hmg.dropdownsplit.toggleSelect = function(){

	// We're changing the select boxes so reset the previous box's index.
	if(YAHOO.hmg.dropdownsplit.currentBox.selectedIndex){
		YAHOO.hmg.dropdownsplit.currentBox.selectedIndex = 0;
		YAHOO.hmg.dropdownsplit.elHiddenInput.value = '';
	}

	YAHOO.util.Dom.addClass(YAHOO.hmg.dropdownsplit.currentBox, 'hide');
	YAHOO.hmg.dropdownsplit.currentBox = YAHOO.util.Dom.get(this.value);
	YAHOO.util.Dom.removeClass(YAHOO.hmg.dropdownsplit.currentBox, 'hide');

	if(!YAHOO.hmg.dropdownsplit.currentBox){
		YAHOO.hmg.dropdownsplit.elHiddenInput.value = '';
	}
	
}

YAHOO.hmg.dropdownsplit.setHiddenValue = function(){

	YAHOO.hmg.dropdownsplit.elHiddenInput.value = this.value;

}

YAHOO.util.Event.onDOMReady(YAHOO.hmg.dropdownsplit.init);