boom.js

(function () {
    "use strict";
    var entries = [], anchor, selectList, entryIndex = [], Entry = Class.create({
        initialize: function (element, depth, parentEntry) {
            this.childrenIndex = [];
            this.children = [];
            this.element = element;
            this.parentEntry = parentEntry;
            this.depth = depth;
            if (element !== null) {
                this.text = element.innerText.substring(depth * 2);
            }
        },
        addChild: function (childEntry) {
            this.children.push(childEntry);
            this.childrenIndex[childEntry.element.value] = this.children.length - 1;
            return childEntry;
        },
        toSelect: function (selectedValue) {
            var valuesel, select = new Element('select', {'class': 'dropdown'}).observe('change', this.handleChange.bind(this));
            if (typeof (selectedValue) === "undefined") {
                valuesel = false;
                selectedValue = 0;
            } else {
                valuesel = true;
            }

            select.appendChild(
                new Element('option', {value: 0, disabled: true, selected: !valuesel}).update("Selecteer categorie")
            );
            this.children.each(function (item) { select.appendChild(item.toOption(valuesel, selectedValue)); });
            return select;
        },
        handleChange: function (event) {
            this.select(this.children[event.target.selectedIndex - 1]);
        },
        select: function (child) {
            while (entries.length > this.depth + 1) {
                Element.remove(entries.pop());
            }
            if (child.hasChildren()) {
                entries[this.depth + 1] = anchor.appendChild(child.toSelect());
            }

            child.element.selected = true;
        },
        toOption: function (select, selectedValue) {
            var selected = (select === true && selectedValue === this.element.value);
            return new Element('option', {value: this.element.value, 'selected': selected}).update(this.text);
        },
        hasChildren: function () {
            return this.children.length > 0;
        },
        getChild: function (value) {
            return this.children[this.childrenIndex[value]];
        }
    });

    document.observe("dom:loaded", function () {
        selectList = $('category_id').hide();
        anchor = $(selectList.parentNode);

        var depth = 0, current = new Entry(null, 0, null), root = current, selectedValue = selectList.down('[selected]').value, tmpList = [], popped, sel;

        selectList.childElements().each(function (item) {
            if (item.value === "0") {
                return;
            }
            var i = 0, cDepth, from;
            while (item.innerText.charAt(i) === "-") {
                i += 1;
            }
            cDepth = i / 2;

            if (cDepth > depth) {
                depth = cDepth;
                from = current;
            } else if (cDepth === depth) {
                from = current.parentEntry;
            } else {
                while (depth > cDepth) {
                    current = current.parentEntry;
                    depth -= 1;
                }
                from = current.parentEntry;
            }

            current = from.addChild(new Entry(item, depth, from));
            if (current.parentEntry.element !== null) {
                entryIndex[item.value] = current.parentEntry.element.value;
            }
        });
        entries[0] = anchor.appendChild(root.toSelect());
        if (selectList.selectedIndex !== 0) {
            tmpList.push(selectedValue);
            while (entryIndex[selectedValue] > 0) {
                selectedValue = entryIndex[selectedValue];
                tmpList.push(selectedValue);
            }

            while (entries.length > 0) {
                Element.remove(entries.pop());
            }

            while (tmpList.length > 0) {
                popped = tmpList.pop();
                sel = root.getChild(popped);
                anchor.appendChild(root.toSelect(popped));
                root = sel;
            }

            if (root.hasChildren()) {
                anchor.appendChild(root.toSelect());
            }
        }
    });
}());