window.addEvent('domready', function() {
	var flatSelect = $('flat_category_select');
	if(!flatSelect)
		return;

	// Convert the flat selection into a hierarchy
	var SFChoice = function(text, value) {
		this.text = text
		this.value = value
		this.subchoices = [];
		this.initial = false;
	};
	var whitespaceRe = /^(\s*)(.+)$/;
	var topChoices = [];
	var ancestralStack = [];
	var maxLevel = 0;
	// Skip the first option, it's just a prompt.
	var options = flatSelect.getElements('option');
	for(var i = 1; i < options.length; i++) {
		var option = options[i];

		match = option.getText().match(whitespaceRe);
		var indent = match[1].length / 2;
		var text = match[2];
		var value = option.value;
		var choice = new SFChoice(text, value);

		if (indent == 0) {
			topChoices.push(choice);
			ancestralStack = [choice];
		} else {
			while (ancestralStack.length >= indent + 1) {
				ancestralStack.shift();
			}
			ancestralStack[0].subchoices.push(choice);
			ancestralStack.unshift(choice);
		}
		
		maxLevel = Math.max(maxLevel, ancestralStack.length + 1);

		if (i == flatSelect.selectedIndex) {
			ancestralStack.each(function(c) { c.initial = true; });
		}

	}

	var hiddenInput = new Element('input', {'type': 'hidden', 'name': flatSelect.name, 'value': flatSelect.getValue()});
	flatSelect.replaceWith(hiddenInput);
	
	var selects = [];
	
	var createSelect = function(index) {
		var sel = new Element('select');

		sel.addEvent('change', function(setInitialValue) {
			if(sel.selectedIndex >= 0) {
				hiddenInput.value = sel.options[sel.selectedIndex].value;
			} else {
				hiddenInput.value = "";
			}
			
			for(var i = index + 1; i < selects.length; i++) {
				var subsel = selects[i];
				subsel.empty();
				subsel.setStyle('display', 'none');
			}

			var choices = topChoices;
			for(var i = 0; i <= index; i++) {
				var selectedIndex = selects[i].selectedIndex - 1;
				if(selectedIndex < 0)
					return;
				var choices = choices[selectedIndex].subchoices;
			}
			
			if(index < selects.length - 1 && choices.length > 0) {
				var i = index + 1;
				var subsel = selects[i];
				var option = new Option();
				subsel.adopt(new Element('option').setText('Please select'));
				for(var j = 0; j < choices.length; j++) {
					subsel.adopt(new Element('option', {'value': choices[j].value}).setText(choices[j].text));
					if (setInitialValue && choices[j].initial) {
						subsel.selectedIndex = j + 1;
					}
				}
				subsel.setStyle('display', '');
			}
		});

		if(index == 0) {
			var choices = topChoices;
			sel.adopt(new Element('option').setText('Please select'));
			for(var j = 0; j < choices.length; j++) {
				sel.adopt(new Element('option', {'value': choices[j].value}).setText(choices[j].text));
				if (choices[j].initial) {
					sel.selectedIndex = j + 1;
				}
			}
		} else {
			sel.setStyle('display', 'none');
		}

		selects.push(sel);
		return sel;
	}

	for(var i = 0; i < maxLevel; i++) {
		var s = createSelect(i);
	}
	for(var i = selects.length - 1; i >= 0; i--) {
		selects[i].injectAfter(hiddenInput);
	}
	for(var i = 0; i < selects.length; i++) {
		selects[i].fireEvent('change', true);
	}
});