JS

var Menu = (function() {
    function Menu(container, menu_container, menu_class, menu_icon, menu_items, menu_callback) {
        this.container = container;
        this.menu_container = menu_container;
        this.menu_class = menu_class;
        this.menu_icon_src = menu_icon;
        this.menu_items = menu_items;
        this.menu_callback = menu_callback;

        this.createMenuOuter();
    }

    Menu.prototype.createMenuOuter = function() {
        this.outer_container = document.createElement('DIV');
        this.outer_container.style.width = "0px";
        this.outer_container.className = "DoorSelector--MenuOuterContainer MenuContainer_" + this.menu_class;
        this.container.appendChild(this.outer_container);

        this.menu_button = document.createElement('DIV');
        this.menu_button.className = "DoorSelector--MenuItem MenuItem_" + this.menu_class;
        this.menu_button.addEventListener('click', this.openMenu.bind(this, this.outer_container));
        this.menu_container.appendChild(this.menu_button);

        this.menu_icon = document.createElement('IMG');
        this.menu_icon.className = "DoorSelector--MenuItemThumb";
        this.menu_icon.src = "modules/DoorSelector/images/menu_icons/" + this.menu_icon_src + ".jpg";
        this.menu_button.appendChild(this.menu_icon);

        this.menu_title = document.createElement('P');
        this.menu_title.className = "DoorSelector--MenuTitle";
        this.outer_container.appendChild(this.menu_title);

        this.menu_options_container = document.createElement('DIV');
        this.outer_container.appendChild(this.menu_options_container);

        // create options
        this.createMenuOptions(this.menu_items, null);
    };

    Menu.prototype.createMenuOptions = function(group, parent) {
        this.menu_options_container.innerHTML = "";
        this.menu_title.innerHTML = group.title;
        this.createBackOption(parent, this.outer_container);

        // add new options
        var _this = this;
        Array.prototype.forEach.call(group.options, function(option) {
            _this.createMenuOption.call(_this, option, group);
        });
    };

    Menu.prototype.createMenuOption = function(option, parent) {
        var option_container = document.createElement('DIV');
        option_container.className = "DoorSelector--FamilyOption";
        this.menu_options_container.appendChild(option_container);

        if(typeof option.options != "undefined")
        {
            option_container.addEventListener('click', this.createMenuOptions.bind(this, option.options, parent) );
        } else {
            var _this = this;
            option_container.addEventListener('click', function() {
                _this.menu_callback(option)
            });
        }

        if(typeof option.thumbnail != "undefined")
        {
            var option_thumb = document.createElement("IMG");
            option_thumb.className = "DoorSelector--FamilyThumbnail";
            option_thumb.src = option.thumbnail;
            option_container.appendChild(option_thumb);
        }

        if(typeof option.rgb_thumb != "undefined")
        {
            var option_thumb = document.createElement('IMG');
            option_thumb.className = "DoorSelector--FamilyColour";
            option_thumb.src = option.rgb_thumb;
            option_container.appendChild(option_thumb);
        }

        if(typeof option.RGB != "undefined")
        {
            var option_colour = document.createElement('DIV');
            option_colour.className = "DoorSelector--FamilyColour";
            option_colour.style.backgroundColor = "rgb(" + option.RGB + ")";
            option_container.appendChild(option_colour);
        }

        var option_title = document.createElement('P');
        option_title.className = "DoorSelector--FamilyTitle";
        option_title.innerHTML = option.name;
        option_container.appendChild(option_title);

        var new_width = parseInt(this.outer_container.style.width.replace('px','')) + 254;
        if(new_width > (window.outerWidth - 400)) new_width = (window.outerWidth - 400);

        this.outer_container.style.width =  new_width + "px";
    };

    Menu.prototype.createBackOption = function(parent, close_container) {
        var button = document.createElement('DIV');
        button.className = "DoorSelector--FamilyOption";
        var event_func = (parent == null) ? this.closeMenu.bind(this, close_container) : this.createMenuOptions.bind(this, parent, null);
        button.addEventListener('click', event_func);

        this.menu_options_container.appendChild(button);

        var image = document.createElement('IMG');
        image.className = "DoorSelector--FamilyThumbnail back";
        image.src = "/modules/DoorSelector/images/arrow_back.jpg";
        button.appendChild(image);

        this.outer_container.style.width = "240px";
    };

    Menu.prototype.closeMenu = function(container, event) {
        event.preventDefault();
        event.stopPropagation();

        container.classList.remove('show');
    };

    Menu.prototype.openMenu = function(container, event) {
        event.preventDefault();
        event.stopPropagation();
        var openedMenu = document.querySelector('.show');
        if(openedMenu != undefined) {
            openedMenu.classList.remove('show');
        }

        container.classList.add('show');
    };

    return Menu;
})();