preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer, ipcMain } = require('electron');
const objectScan = require('object-scan');
const shell = require('shelljs');
var builtin_functions = []; //Builtin functions will be stored here for prototype usage.
var plugin_functions = []; //Plugin functions will be stored here for prototype usage.
var custom_functions = []; //Custom functions will be stored here for prototype usage.

window.addEventListener('DOMContentLoaded', () => {

    contextBridge.exposeInMainWorld(
        'electron',
        {
            //#region Index.html

            choose_file: () => { ipcRenderer.send('chooseFile') },
            save_location: () => { ipcRenderer.send('select_folder') },
            load_projects: () => { ipcRenderer.send('get_saved_files') },
            create_project: () => {
                ipcRenderer.send('set_saved_files',
                    document.getElementById("save_location_input").value,
                    document.getElementById("create_bot_name").value,
                    document.getElementById("profile_viewer").toDataURL())
            },
            show_error_message: (args) => { show_error_message_function(args) },
            open_project: (args) => { ipcRenderer.send('open_project', args) },
            open_button: () => { ipcRenderer.send('open_button') },
            reveal_in_explorer: (args) => { ipcRenderer.send('reveal_in_explorer', args) },
            remove_from_list: (args) => { ipcRenderer.send('remove_from_list', args) },
            //#endregion
            //#region Update_Sidebar
            update_sidebar_check: (arg) => { ipcRenderer.send('last_visited_update', arg) },
            update_sidebar_set: (arg) => { ipcRenderer.send('set_last_visited_update', arg) },
            //#endregion
            //#region Main.html
            //#region Sidebar
            update_sidebar_profile: () => { ipcRenderer.send('get_profile_picture') },
            go_to_main_menu: () => { ipcRenderer.send('go_to_main_menu') },
            //#endregion
            //#region Header
            update_title: () => { ipcRenderer.send('update_title') },
            get_settings_details: () => { ipcRenderer.send('get_settings_details') },
            open_website: () => { ipcRenderer.send('open_website') },
            open_help: (aux) => { ipcRenderer.send('open_help', aux) },
            clear_all_data: () => { ipcRenderer.send('clear_data') },
            //#endregion
            //#region Home
            load_home: () => { ipcRenderer.send('load_home') },
            home_platform: (args) => { ipcRenderer.send('home_platform', args) },
            general_image_change: () => { ipcRenderer.send('general_image_change') },
            change_name: (args) => { ipcRenderer.send('change_name', args) },
            //#endregion
            //#region Theme
            update_theme_button: (args) => { ipcRenderer.send('update_theme_button', args) },
            set_theme: (arg1, arg2) => { ipcRenderer.send('set_theme', arg1, arg2); },
            //#endregion
            //#region Plugins
            load_plugins_database: () => { ipcRenderer.send('load_plugins_database'); },
            load_plugins: () => { ipcRenderer.send('load_plugins'); },
            //#endregion
            //#region Library
            load_libraries_database: () => { ipcRenderer.send('load_libraries_database'); },
            load_libraries: () => { ipcRenderer.send('load_libraries'); },
            //#endregion
            //#region Teach
            load_teach: () => { ipcRenderer.send('load_teach') },
            default_group_created: (arg) => { ipcRenderer.send('group_create_default', arg) },
            create_intent: (intent_name, utterances, answers, group_name) => { ipcRenderer.send('create_intent', intent_name, utterances, answers, group_name) },
            update_group_name: (user_input, group_path) => { ipcRenderer.send('update_group_name', user_input, group_path); delete_path(group_path); },
            edit_intent: (intent_name, utterances, answers, prototype, group_path) => { ipcRenderer.send('edit_intent', intent_name, utterances, answers, prototype, group_path); on_edit_intent(group_path); },
            //#endregion
            //#region Functions
            load_builtin_functions: () => { ipcRenderer.send("load_builtin_functions"); },
            create_custom_function: (name, async, returns, parameters, description, code) => { ipcRenderer.send("create_custom_function", name, async, returns, parameters, description, code); },
            load_custom_functions: () => { ipcRenderer.send("load_custom_functions") },
            remove_custom_function: (function_name) => { ipcRenderer.send("remove_custom_function", function_name) },
            update_custom_function: (oldname, name, async, returns, parameters, description, code) => { ipcRenderer.send("update_custom_function", oldname, name, async, returns, parameters, description, code); },
            //#endregion
            //#region Prototype
            open_prototype: (name, path) => { ipcRenderer.send('open_prototype', name, path, builtin_functions, plugin_functions, custom_functions) },
            load_prototype_functions: () => { ipcRenderer.send('load_prototype_functions') },
            save_prototype: (changed_save, group_path) => { ipcRenderer.send('save_prototype', changed_save, group_path) },
            //#endregion
            //#endregion
        })

    //#region Index.html
    ipcRenderer.on('remove_dynamic_projects', (event) => {
        document.getElementById("dynamic_projects").innerHTML = "";
    })

    ipcRenderer.on('load_all_saved_one_by_one', (event, json_object, location) => {
        json_parse = JSON.parse(json_object);
        document.getElementById("dynamic_projects").insertAdjacentHTML('beforeend', '&emsp;' + '<button id="' + location + '" class="project_button"><img src="' + json_parse.image + '" alt="' + json_parse.name + '" width="90" height="85"><div><p>' + json_parse.name + '</p></div></button>');
    })

    ipcRenderer.on('show_error_message', (event, args) => {
        show_error_message_function(args);
    })

    ipcRenderer.on('load_all_projects', (event, args) => {
    })

    ipcRenderer.on('chosenFile', (event, base64) => {
        const img_src = `data:image/png;base64,${base64}`
        document.getElementById("profile_viewer").src = img_src;
    })

    ipcRenderer.on('save_located', (event, path) => {
        document.getElementById("save_location_input").value = path;
    })

    function show_error_message_function(args) {
        document.getElementById("message_box_text").textContent = args;
        document.getElementById("message_box").style.display = "block";
        setTimeout(function () { document.getElementById("message_box").style.display = "none" }, 5000);
    }

    Object.defineProperty
        (
            HTMLImageElement.prototype, 'toDataURL',
            {
                enumerable: false, configurable: false, writable: false, value: function (m, q) {
                    let c = document.createElement('canvas');
                    c.width = this.naturalWidth; c.height = this.naturalHeight;
                    c.getContext('2d').drawImage(this, 0, 0); return c.toDataURL(m, q);
                }
            }
        );

    //#endregion

    //#region Main.html
    //#region Sidebar
    ipcRenderer.on('received_profile_sidebar', (event, arg) => {
        document.getElementById("side_profile").src = arg;
    })
    ipcRenderer.on('new_update_found_sidebar', (event, arg) => {
        if (arg) {
            document.getElementById("side_green_dot").style.display = "block";
        }
        else {
            document.getElementById("side_green_dot").style.display = "none";
        }
    })
    //#endregion
    //#region Header
    ipcRenderer.on('received_title', (event, arg) => {
        document.getElementById("project_title").innerHTML = arg;
    })
    ipcRenderer.on('received_settings_details', (event, arg) => {
        document.getElementById("settings_app_version").innerHTML = "App Version: " + arg[0];
        document.getElementById("settings_os_version").innerHTML = "Operating System: " + arg[1];
    })
    //#endregion
    //#region Home
    ipcRenderer.on('received_load_home', (event, arg) => {
        const platforms = arg.platforms;
        if (platforms == [] || platforms == null || platforms == {} || platforms == undefined) { return; }
        if (platforms.indexOf('web') > -1) { document.getElementById("web_check").style.display = "block" } else { document.getElementById("web_check").style.display = "none" }
        if (platforms.indexOf('react') > -1) { document.getElementById("react_check").style.display = "block" } else { document.getElementById("react_check").style.display = "none" }
        if (platforms.indexOf('linux') > -1) { document.getElementById("linux_check").style.display = "block" } else { document.getElementById("linux_check").style.display = "none" }
        if (platforms.indexOf('windows') > -1) { document.getElementById("windows_check").style.display = "block" } else { document.getElementById("windows_check").style.display = "none" }
        if (platforms.indexOf('mac') > -1) { document.getElementById("mac_check").style.display = "block" } else { document.getElementById("mac_check").style.display = "none" }
        document.getElementById('profile_viewer_general').src = arg.image;
        document.getElementById('change_bot_name_general').value = arg.name;
        document.getElementById('project_title').innerHTML = arg.name;
    })
    ipcRenderer.on('received_general_change_image', (event, arg) => {
        document.getElementById('profile_viewer_general').src = arg;
    })
    //#endregion
    //#region Theme
    ipcRenderer.on('received_load_theme_tab', (event, arg) => {
        var tab_array = [];
        if (arg == [] || arg == null || arg == {} || arg == undefined) { document.getElementById("slideshow_theme_preview").style.display = "none"; document.getElementById("slideshow_theme_select").style.display = "none"; return; }
        if (arg.indexOf('web') > -1) { document.getElementById("web_theme").style.display = "inline-block"; tab_array.push(document.getElementById("web_theme")); } else { document.getElementById("web_theme").style.display = "none"; }
        if (arg.indexOf('react') > -1) { document.getElementById("react_theme").style.display = "inline-block"; tab_array.push(document.getElementById("react_theme")); } else { document.getElementById("react_theme").style.display = "none"; }
        if (arg.indexOf('linux') > -1) { document.getElementById("linux_theme").style.display = "inline-block"; tab_array.push(document.getElementById("linux_theme")); } else { document.getElementById("linux_theme").style.display = "none"; }
        if (arg.indexOf('windows') > -1) { document.getElementById("windows_theme").style.display = "inline-block"; tab_array.push(document.getElementById("windows_theme")); } else { document.getElementById("windows_theme").style.display = "none"; }
        if (arg.indexOf('mac') > -1) { document.getElementById("mac_theme").style.display = "inline-block"; tab_array.push(document.getElementById("mac_theme")); } else { document.getElementById("mac_theme").style.display = "none"; }
        if (!tab_array.length == 0) {
            document.getElementById("no_platform_message").style.display = "none";
            if (tab_array.length == 1) { tab_array[0].style.borderRadius = "7px"; tab_array[0].click(); }
            else {
                var tab_buttons = document.querySelectorAll('div.theme_switch_tab button');
                for (i = 0; i < tab_buttons.length; i++) { tab_buttons[i].style.borderRadius = "0px" }
                tab_array[0].style.borderRadius = "7px 0px 0px 7px";
                tab_array[tab_array.length - 1].style.borderRadius = "0px 7px 7px 0px";
                tab_array[0].click();
            }
        } else {
            document.getElementById("slideshow_theme_preview").style.display = "none";
            document.getElementById("slideshow_theme_select").style.display = "none";
            document.getElementById("no_platform_message").style.display = "block";
        }
    })

    ipcRenderer.on('received_upate_theme_button', (event, arg) => {
        var arg_parent = document.getElementById(arg).parentElement.id;
        var other_theme_buttons = document.querySelectorAll('div.' + arg_parent + ' button');
        for (i = 0; i < other_theme_buttons.length; i++) {
            other_theme_buttons[i].children[0].innerHTML = other_theme_buttons[i].children[0].innerHTML.replace('(Selected)', "");
        }
        document.getElementById(arg).click();
        document.getElementById(arg).children[0].innerHTML = document.getElementById(arg).children[0].innerHTML + "(Selected)";
    })
    //#endregion
    //#region Plugins
    function plugins_selected(e) {
        e = e || window.event;
        e = e.target || e.srcElement;
        if (e.nodeName === 'BUTTON') {
            if (e.parentElement.querySelector("button").innerHTML == "Selected") {
                e.parentElement.querySelector("button").innerHTML = "Select";
                ipcRenderer.send('plugin_removed', e.dataset.category)
                return;
            }
            child_count = e.parentElement.childNodes.length;
            if (e.parentElement.querySelector("input") && e.parentElement.querySelector("input").value == "") { show_error_message_function("Please type API Key."); return; };
            for (i = 0; i < e.parentElement.parentElement.querySelectorAll("div.plugins_inner_body").length; i++) {
                e.parentElement.parentElement.querySelectorAll("div.plugins_inner_body")[i].querySelector("button").innerHTML = "Select";
            }
            e.parentElement.querySelector("button").innerHTML = "Selected";
            if (e.parentElement.querySelector("input")) {
                ipcRenderer.send('plugin_selected', e.dataset.category, e.id, e.parentElement.querySelector("input").value)
            }
            else {
                ipcRenderer.send('plugin_selected', e.dataset.category, e.id)
            }
        }
    }

    ipcRenderer.on('received_load_plugins', (event, arg, plugins_file) => {
        if (arg == null || arg == undefined || arg == []) {
            return;
        }
        var plugins = JSON.parse(arg);
        clear_plugin_dataset(); //Found in functions section.
        clear_plugin_functions(); //Found in functions section.
        for (i = 0; i < Object.keys(plugins).length; i++) {
            var selected_heading = plugins[Object.keys(plugins)[i]];
            var selected_plugin = Object.keys(selected_heading)[0];
            var selected_content = plugins[Object.keys(plugins)[i]][selected_plugin];
            var link = plugins_file[Object.keys(plugins)[i]][selected_plugin]["link"];
            load_functions_from_plugin(selected_plugin, link)
            var element = document.getElementById(Object.keys(plugins)[i] + "_plugin").findId(selected_plugin + "_inner_body")
            if (selected_content.length > 1) { element.querySelector("input").value = selected_content[1]; element.querySelector("button").innerHTML = "Selected" }
            else { element.querySelector("button").innerHTML = "Selected" }
        }
    })

    function library_selected(e) {
        e = e || window.event;
        e = e.target || e.srcElement;
        if (e.nodeName === 'INPUT') {
            if (e.style.opacity != 0.5) {
                ipcRenderer.send('selected_library', e.id)
            }
        }
    }

    ipcRenderer.on('received_load_plugins_database', (event, arg) => {
        var plugins = JSON.parse(arg);
        var titles = Object.keys(plugins);
        for (i = 0; i < titles.length; i++) {
            var elements = Object.keys(plugins[titles[i]])
            document.getElementById("plugins_body").insertAdjacentHTML('beforeend', '<div id="' + titles[i] + '_plugin"><h3 class="plugin_heading">' + titles[i] + '</h3></div>')
            for (j = 0; j < elements.length; j++) {
                var name = elements[j]
                document.getElementById(titles[i] + "_plugin").insertAdjacentHTML('beforeend', '<div id="' + name + '_inner_body" class="plugins_inner_body">' + name + '<ul></ul></div>')
                var description = plugins[titles[i]][elements[j]]["description"]
                for (k = 0; k < description.length; k++) {
                    document.getElementById(titles[i] + "_plugin").childNodes[j + 1].childNodes[1].insertAdjacentHTML('beforeend', '<li>' + description[k] + '</li>')
                }
                if (plugins[titles[i]][elements[j]]["api_key"] == "true") { document.getElementById(titles[i] + "_plugin").childNodes[j + 1].insertAdjacentHTML('beforeend', '<input type="text" placeholder="Type Your API Key">') }
                var plugin_button = document.createElement("Button");
                plugin_button.innerHTML = "Select";
                plugin_button.id = name;
                plugin_button.dataset.category = titles[i];
                plugin_button.addEventListener('click', () => { plugins_selected() })
                document.getElementById(titles[i] + "_plugin").childNodes[j + 1].insertAdjacentElement('beforeend', plugin_button);
            }
        }
    })
    //#endregion
    //#region Library
    ipcRenderer.on('received_load_libraries_database', (event, arg) => {
        var libraries = JSON.parse(arg);
        for (i = 0; i < Object.keys(libraries).length; i++) {
            var library_name = Object.keys(libraries)[i];
            var library_version = libraries[Object.keys(libraries)[i]][0];
            var library_link = libraries[Object.keys(libraries)[i]][1];
            document.getElementById("libraries_body").insertAdjacentHTML('beforeend', '<div> <input id="' + library_name + '" type="checkbox">' + library_name + ' v' + library_version + '</div>');
            if (libraries[Object.keys(libraries)[i]][2] == "true") {
                document.getElementById(library_name).style.opacity = 0.5;
                document.getElementById(library_name).checked = true;
                document.getElementById(library_name).addEventListener('click', (event) => {
                    event.preventDefault();
                    show_error_message_function("This library cannot be disabled.")
                })
                ipcRenderer.send('selected_library', library_name, true);
            }
            else {
                document.getElementById(library_name).addEventListener('click', () => {
                    library_selected();
                })
            }
        }
    })
    ipcRenderer.on('received_load_libraries', (event, plugins, plugins_db, libraries_from_save) => {
        for (i = 0; i < libraries_from_save.length; i++) {
            document.getElementById(libraries_from_save[i]).checked = true;
        }
        var save_file_plugins = [];
        for (i = 0; i < Object.keys(plugins).length; i++) {
            for (j = 0; j < Object.keys(plugins[Object.keys(plugins)[i]]).length; j++) {
                save_file_plugins.push([Object.keys(plugins)[i], Object.keys(plugins[Object.keys(plugins)[i]])[j]]);
            }
        }
        for (i = 0; i < save_file_plugins.length; i++) {
            var plugins_avail = plugins_db[save_file_plugins[i][0]][save_file_plugins[i][1]]["libraries"];
            for (j = 0; j < plugins_avail.length; j++) {
                if (document.getElementById(plugins_avail[j])) {
                    document.getElementById(plugins_avail[j]).checked = true;
                    document.getElementById(plugins_avail[j]).style.opacity = 0.5;
                    document.getElementById(plugins_avail[j]).addEventListener('click', (event) => {
                        event.preventDefault();
                        alert("This library is used by a plugin. Please remove that plugin to disable this library.");
                    })
                    ipcRenderer.send('selected_library', plugins_avail[i], true);
                }
            }
        }
        /*
        var used_plugins = {};
        for (i = 0; i < Object.keys(plugins).length; i++) {
            var selected_heading = plugins[Object.keys(plugins)[i]];
            for (j = 0; j < Object.keys(selected_heading).length; j++) {
                var selected_content = plugins[Object.keys(plugins)[i]][Object.keys(selected_heading)[j]]
                if (selected_content["libraries"].length > 0) {
                    for (a = 0; a < selected_content["libraries"].length; a++) {
                        if (selected_content["libraries"] != {} || null || undefined) {
                            if (used_plugins[selected_content["libraries"][a]]) {
                                var temp_array = used_plugins[selected_content["libraries"][a]];
                                temp_array.push(Object.keys(selected_heading)[j])
                            }
                            else {
                                used_plugins[selected_content["libraries"][a]] = {}
                                used_plugins[selected_content["libraries"][a]] = [Object.keys(selected_heading)[j]]
                            }
                        }
                    }
                }
            }
        }
        for (i = 0; i < Object.keys(used_plugins).length; i++) {
            var used_plugins_name = new String();
            for (j = 0; j < Object.keys(used_plugins[Object.keys(used_plugins)[i]]).length; j++) {
                used_plugins_name = used_plugins_name + "\n" + used_plugins[Object.keys(used_plugins)[i]][j];
            }
            if (document.getElementById(Object.keys(used_plugins)[i]) != null) {
                document.getElementById(Object.keys(used_plugins)[i]).checked = true;
                document.getElementById(Object.keys(used_plugins)[i]).style.opacity = 0.5;
                document.getElementById(Object.keys(used_plugins)[i]).addEventListener('click', (event) => {
                    event.preventDefault();
                    alert("Some of the plugins are using this libraries. Remove the following plugins to disable this library :\n"
                        + used_plugins_name)
                })
            }
        }*/
    })
    //#endregion
    //#region Teach
    ipcRenderer.on('received_load_teach', (event, arg) => {
        var teach = JSON.parse(arg);
        group_it(teach);
        add_listeners_teach();
    })

    ipcRenderer.on('intent_created', (event) => {
        clear_intent_values();
    })

    function clear_intent_values() {
        document.getElementById("create_intent_wrapper").style.display = 'none';
        document.getElementById("create_intent_name").value = "";
        document.querySelector('#create_intent_utterances').querySelector(".intent_container_body").innerHTML = "";
        document.querySelector('#create_intent_answers').querySelector(".intent_container_body").innerHTML = "";
        document.querySelector('#create_intent_utterances').querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" /><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>')
        document.querySelector('#create_intent_utterances').querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" /><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>')
        document.querySelector('#create_intent_answers').querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" /><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>')
        document.querySelector('#create_intent_answers').querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" /><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>')
    }

    function group_it(obj) {
        var tot_group = [];
        objectScan(['**'], {
            reverse: false,
            filterFn: ({ key }) => {
                if (key[key.length - 1] === "prototype" || key[key.length - 1] === "utterances" || key[key.length - 1] === "answers") { }
                else {
                    if (key.length == 1) { tot_group.unshift(key) } else {
                        tot_group.push(key);
                    }
                }
            }
        })(obj);
        for (i = 0; i < tot_group.length; i++) {
            group_iterate(tot_group[i], obj);
        }
    }

    function delete_path(group_path) {
        group_path = group_path.split(",");
        iterate_document(group_path).remove();
    }

    function group_iterate(arg, obj) {
        if (arg.length == 1) {
            if (document.querySelector("#" + arg[0])) { return; }
            if (document.querySelector("#" + arg[0] + "_intent")) { return; }
            if (Object.keys(obj[arg[0]])[0] === "prototype") {
                document.getElementById("teach_command_body").insertAdjacentHTML('beforeend', '<div class="teach_intents" id="' + arg[0] + '_intent"><div class="intents_inside outer_intent_fix"><div class="intent_name">' + arg[0] + '</div><button class="intent_delete"><img src="./img/delete-red.png" height="30px" width="30px"></button><button class="intent_prototype"><img src="./img/tree-view.png" height="30px" width="30px"></button><button class="intent_edit"><img src="./img/maximize.png" height="30px" width="30px"></button></div></div>')
            } else {
                if (document.getElementById("teach_command_body").querySelector(":scope > #" + arg[0] + "") == null) {
                    document.getElementById("teach_command_body").insertAdjacentHTML('afterbegin', '<div class="teach_groups" id="' + arg[0] + '"> <div class="group_inside"><img class="arrow collapse" src="./img/arrow.png"><div class="group_name">' + arg[0] + '</div><button class="group_button group_delete"><img src="./img/delete.png"></button><button class="group_button group_edit"><img src="./img/pencil.png"></button><button class="group_button group_add"><img src="./img/group.png"></button><button class="group_button intent_add"><img src="./img/plus.png"></button></div><div class="inner_body"></div></div>')
                }
            }
        }
        else {
            var group_iterator_arr = [];
            var group_element_itr = "";
            var element_iterator_arr = "obj";
            for (j = 0; j < arg.length; j++) {
                group_iterator_arr.push(arg[j]);
                element_iterator_arr += "['" + arg[j] + "']";
                group_element_itr += " > #" + arg[j] + " ";
                if (iterate_document(group_iterator_arr) == null) {
                    if (Object.keys(eval(element_iterator_arr))[0] === "prototype") {
                        //Check if already exists
                        var group_iterator_already_exists = group_iterator_arr.slice(0, -1);
                        group_iterator_already_exists.push(group_iterator_arr[group_iterator_arr.length - 1] += "_intent");
                        if (iterate_document(group_iterator_arr)) { continue; }

                        //Create an intent
                        var group_it_arr = group_iterator_arr.slice(0, -1);
                        iterate_document(group_it_arr).querySelector(".inner_body").insertAdjacentHTML('beforeend', '<div class="teach_intents" id="' + arg[j] + '_intent"><div class="intents_inside"><div class="intent_name">' + arg[j] + '</div><button class="intent_delete"><img src="./img/delete-red.png" height="30px" width="30px"></button><button class="intent_prototype"><img src="./img/tree-view.png" height="30px" width="30px"></button><button class="intent_edit"><img src="./img/maximize.png" height="30px" width="30px"></button></div></div>')
                    }
                    else {

                        //Create an group
                        var group_it_arr = group_iterator_arr.slice(0, -1);
                        try {
                            iterate_document(group_it_arr).querySelector(".inner_body").insertAdjacentHTML('afterbegin', '<div class="teach_groups" id="' + arg[j] + '"> <div class="group_inside"><img class="arrow collapse" src="./img/arrow.png"><div class="group_name">' + arg[j] + '</div><button class="group_button group_delete"><img src="./img/delete.png"></button><button class="group_button group_edit"><img src="./img/pencil.png"></button><button class="group_button group_add"><img src="./img/group.png"></button><button class="group_button intent_add"><img src="./img/plus.png"></button></div><div class="inner_body"></div></div>')
                        } catch (err) { }
                    }
                }
            }
        }
    }

    function add_listeners_teach() {
        var groups = document.getElementsByClassName("arrow");
        for (i = 0; i < groups.length; i++) {
            if (groups[i].getAttribute("data-aligned") != "true") {
                groups[i].setAttribute("data-aligned", "true");
                groups[i].addEventListener('click', () => {
                    group_selected();
                })
            }
        }

        var intents_add = document.getElementsByClassName("intent_add");
        for (i = 0; i < intents_add.length; i++) {
            if (intents_add[i].getAttribute("data-aligned") == "true") { continue; }
            else { intents_add[i].setAttribute("data-aligned", "true"); }
            intents_add[i].addEventListener('click', function (event) {
                intent_add(event.target.parentElement);
            })
        }

        var groups_add = document.getElementsByClassName("group_add");
        for (i = 0; i < groups_add.length; i++) {
            if (groups_add[i].getAttribute("data-aligned") == "true") { continue; }
            else { groups_add[i].setAttribute("data-aligned", "true"); }
            groups_add[i].addEventListener('click', function (event) {
                group_add(event.target.parentElement)
            })
        }

        var groups_edit = document.getElementsByClassName("group_edit");
        for (i = 0; i < groups_edit.length; i++) {
            if (groups_edit[i].getAttribute("data-aligned") == "true") { continue; }
            else { groups_edit[i].setAttribute("data-aligned", "true"); }
            groups_edit[i].addEventListener('click', function (event) {
                group_edit(event.target.parentElement)
            })
        }

        var groups_delete = document.getElementsByClassName("group_delete");
        for (i = 0; i < groups_delete.length; i++) {
            if (groups_delete[i].getAttribute("data-aligned") == "true") { continue; }
            else { groups_delete[i].setAttribute("data-aligned", "true"); }
            groups_delete[i].addEventListener('click', function (event) {
                group_delete(event.target.parentElement)
            })
        }

        var intents_delete = document.getElementsByClassName("intent_delete");
        for (i = 0; i < intents_delete.length; i++) {
            if (intents_delete[i].getAttribute("data-aligned") == "true") { continue; }
            else { intents_delete[i].setAttribute("data-aligned", "true"); }
            intents_delete[i].addEventListener('click', function (event) {
                intent_delete(event.target.parentElement)
            })
        }

        var intents_edit = document.getElementsByClassName("intent_edit");
        for (i = 0; i < intents_edit.length; i++) {
            if (intents_edit[i].getAttribute("data-aligned") == "true") { continue; }
            else { intents_edit[i].setAttribute("data-aligned", "true"); }
            intents_edit[i].addEventListener('click', function (event) {
                intent_edit(event.target.parentElement)
            })
        }

        var intents_prototype = document.getElementsByClassName("intent_prototype");
        for (i = 0; i < intents_prototype.length; i++) {
            if (intents_prototype[i].getAttribute("data-aligned") == "true") { continue; }
            else { intents_prototype[i].setAttribute("data-aligned", "true"); }
            intents_prototype[i].addEventListener('click', function (event) {
                intent_prototype(event.target.parentElement)
            })
        }
    }

    function intent_prototype(elem) {
        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        var intent_name = elem.parentElement.querySelector("div.intent_name").innerHTML;
        groups.push(intent_name);
        ipcRenderer.send('open_prototype', name, groups, builtin_functions, plugin_functions, custom_functions)
    }

    function on_edit_intent(group_path) {
        document.getElementById("edit_intent_wrapper").style.display = "none";
        group_path = group_path.split(",");
        var intent_name = group_path[group_path.length - 1];
        group_path = group_path.slice(0, -1);
        iterate_document(group_path).querySelector("#" + intent_name + "_intent").remove();
    }

    function intent_edit(elem) {
        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        var intent_name = elem.parentElement.querySelector("div.intent_name").innerHTML;
        groups.push(intent_name);
        ipcRenderer.send("load_edit_intent", groups);
    }

    ipcRenderer.on('received_load_edit_intent', (event, name, utterances, answers, prototype, group_path) => {
        document.getElementById("edit_intent_wrapper").style.display = "block";
        document.getElementById("edit_intent_wrapper").setAttribute("data-group_path", group_path);
        document.getElementById("edit_intent_wrapper").setAttribute("data-prototype", JSON.stringify(prototype));
        document.getElementById("edit_intent_name").value = name;
        for (i = 0; i < utterances.length; i++) {
            document.querySelector("#edit_intent_utterances").querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" value="' + utterances[i] + '"/><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>');
        }
        for (i = 0; i < answers.length; i++) {
            document.querySelector("#edit_intent_answers").querySelector(".intent_container_body").insertAdjacentHTML('afterbegin', '<div><input class="add_intent_utterances_boxes" value="' + answers[i] + '"/><image src="./img/delete.png" class="answer_utterance_remove_button"></image></div>');
        }
        intent_answers_utterances_event_listeners();
    })

    // Function to add event listeners to Remove answers and utterances button
    function intent_answers_utterances_event_listeners() {
        var remove_au_button = document.getElementsByClassName("answer_utterance_remove_button");
        for (remove_au_loop = 0; remove_au_loop < remove_au_button.length; remove_au_loop++) {
            remove_au_button[remove_au_loop].addEventListener('click', (event) => {
                // Check the number of child elements. If its lesser or equal to 2 dont delete.
                if (event.target.getAttribute("data-event_added") != "1") {
                    event.target.setAttribute("data-event_added", "1");
                    event.target.parentElement.parentElement.querySelectorAll("div").length <= 1 ? show_error_message_function("Cannot remove.") : event.target.parentElement.remove();
                }
            })
        }
    }

    function intent_delete(elem) {

        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        var intent_name = elem.parentElement.querySelector("div.intent_name").innerHTML;
        groups.push(intent_name);
        show_confirmation("Warning", "Would you like to delete this intent ?", () => {
            elem.parentElement.parentElement.remove();
            ipcRenderer.send("delete_group", groups);
        });
    }

    function group_delete(elem) {

        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        show_confirmation("Warning", "Deleting this will also delete the sub groups and intents. Would you like to continue ?", () => {
            delete_path(groups.join(","));
            ipcRenderer.send("delete_group", groups);
        });
    }

    function group_edit(elem) {

        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        document.getElementById("edit_group_wrapper").setAttribute("data-group_path", groups);
        document.getElementById("edit_group_name").value = elem.parentElement.querySelector(".group_name").innerHTML;
        document.getElementById("edit_group_wrapper").style.display = "block";
    }

    function group_add(elem) {

        //Gettings group_path
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }

        //Set arrow to face down and open the group
        elem.parentElement.querySelector("img.arrow").className = "arrow expanded";
        elem.parentElement.parentElement.querySelector("div.inner_body").style.display = "block";
        elem.parentElement.parentElement.querySelector("div.inner_body").insertAdjacentHTML('afterbegin', '<div class="teach_create_group"><input placeholder="Group Name" class="create_group_input"><button id="create_group_button_' + groups.join("_") + '" class="create_confirm"><img src="./img/tick.png"></button></div>');
        document.getElementById("create_group_button_" + groups.join("_")).setAttribute("data-group_path", groups);

        //Handling event listeners
        document.getElementById("create_group_button_" + groups.join("_")).addEventListener('click', function (event) {
            var group_path = event.target.parentElement.getAttribute("data-group_path")
            event.target.parentElement.parentElement.style.display = 'none';
            if (group_path == null) { ipcRenderer.send("load_teach"); event.target.parentElement.remove(); return; }
            var user_value = event.target.parentElement.parentElement.querySelector("input").value;
            if (user_value.replace(/\s/g, "") != "") {
                ipcRenderer.send("create_group", user_value, group_path)
            }
            event.target.parentElement.remove();
        })
    }

    function intent_add(elem) {
        document.getElementById("create_intent_wrapper").style.display = 'block';
        var a = elem;
        var els = [];
        var groups = [];
        while (a) {
            els.unshift(a);
            a = a.parentNode;
        }
        for (i = 0; i < els.length; i++) {
            if (els[i].className == "teach_groups") { groups.push(els[i].querySelector("div.group_name").innerHTML) }
        }
        document.getElementById("create_intent_wrapper").setAttribute("data-group_name", groups);
    }

    function group_selected(e) {
        e = e || window.event;
        e = e.target || e.srcElement;
        if (e.nodeName === 'IMG' && e.className.includes('arrow')) {
            if (e.className.includes("collapse")) {
                e.className = "arrow expanded";
                try {
                    e.parentElement.parentElement.querySelector("div.inner_body").style.display = "block";
                } catch (e) { }
            }
            else {
                e.className = "arrow collapse";
                try {
                    e.parentElement.parentElement.querySelector("div.inner_body").style.display = "none";
                } catch (e) { }
            }
        }
    }

    function iterate_document(arr) {
        try {
            var final_document = document.getElementById("teach_command_body");
            for (ami = 0; ami < arr.length; ami++) {
                final_document = final_document.querySelector("#" + arr[ami]);
            }
            return (final_document)
        } catch (ame) { return null; }
    }
    //#endregion
    //#region Functions

    //On receive functions data from save file.
    ipcRenderer.on("received_load_custom_functions", (event, file) => {
        clear_custom_functions(); //Removes all old functions created by custom function.
        var plugin_body = document.getElementById("custom_function_body");
        var style_white = false;
        for (i = 0; i < Object.keys(file).length; i++) {
            var function_name = Object.keys(file)[i] //Get name of the selected function.
            var myclass = "functions_button" //Set element class.
            var function_data = file[Object.keys(file)[i]]; //Packing data of current function.
            var parameters = function_data["parameters"] //Get parameters of selected plugin.
            var _return = function_data["return"] //Get return of selected plugin.
            var description = function_data["description"] //Get Description of selected plugin.
            var _async = function_data["async"] //Get async state of selected plugin.
            var code = function_data["code"] //Get code from the selected plugin.
            if (style_white) { style_white = false; myclass += " white" } else { style_white = true; } //Set black-white black-white pattern for element.
            plugin_body.insertAdjacentHTML('beforeend', '<button class="' + myclass + ' custom_functions" data-parameters="' + parameters + '" data-return="' + _return + '" data-description="' + description + '" data-async="' + _async + '" data-plugin_name="Custom" data-function_name="' + function_name + '" data-code="' + code + '">' + function_name + '</button>') //Insert the element in html body.
            custom_functions.push([function_name, description]);
        }
        add_functions_event_listeners(); //Add event listeners for custom functions buttons.
    })

    function clear_custom_functions() {
        custom_functions = [];
        var elements = document.querySelectorAll(".custom_functions"); //Selects all elements created by plugins.
        for (i = 0; i < elements.length; i++) {
            elements[i].remove(); //Removes all old plugin intent and groups by class name.
        }
    }

    //On Receive json data from load_builtin_functions.
    ipcRenderer.on("received_load_builtin_functions", (event, file, function_data) => {
        functions = file["functions"];
        var plugin_body = document.getElementById("built_in_function_body");
        var style_white = false;
        for (i = 0; i < Object.keys(functions).length; i++) {
            var myclass = "functions_button" //Set element class.
            var parameters = function_data[functions[i]]["parameters"]; //Get parameters of selected plugin.
            var _return = function_data[functions[i]]["return"]; //Get return of selected plugin.
            var description = function_data[functions[i]]["description"]; //Get Description of selected plugin.
            var _async = function_data[functions[i]]["async"]; //Get async state of selected plugin.
            if (style_white) { style_white = false; myclass += " white" } else { style_white = true; } //Set black-white black-white pattern for element.
            plugin_body.insertAdjacentHTML('beforeend', '<button class="' + myclass + '" data-parameters="' + parameters + '" data-return="' + _return + '" data-description="' + description + '" data-async="' + _async + '" data-plugin_name="Built-In">' + functions[i] + '</button>') //Insert the element in html body.
            builtin_functions.push([functions[i], description])
        }
        add_functions_event_listeners(); //Add event listeners for plugin buttons.
    })

    //Add function listeners.
    function add_functions_event_listeners() {
        var elements = document.querySelectorAll(".functions_button");
        for (i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function (event) {
                var parameters = event.target.getAttribute('data-parameters');
                var _return = event.target.getAttribute("data-return");
                var description = event.target.getAttribute('data-description');
                var _async = event.target.getAttribute('data-async');
                var plugin_name = event.target.getAttribute('data-plugin_name');
                document.getElementById("functions_parameters").innerHTML = parameters;
                document.getElementById("functions_return").innerHTML = _return;
                document.getElementById("functions_description").innerHTML = description;
                document.getElementById("functions_async").innerHTML = _async;
                document.getElementById("functions_plugin_name").innerHTML = plugin_name;
                document.getElementById("functions_wrapper").style.display = "block";
                if (plugin_name == "Custom") {
                    document.getElementById("functions_wrapper").setAttribute('data-function_name', event.target.getAttribute('data-function_name'))
                    document.getElementById("functions_wrapper").setAttribute('data-code', event.target.getAttribute('data-code'))
                    document.getElementById("functions_footer_menu").style.display = "block";
                    document.getElementById("monoco-editor_update").style.display = "block";
                    document.getElementById("monoco-editor_save").style.display = "none";
                }
                else {
                    document.getElementById("functions_wrapper").removeAttribute('data-code');
                    document.getElementById("functions_footer_menu").style.display = "none";
                }
            })
        }
    }

    //Load functions from all plugin.
    function load_functions_from_plugin(plugin_name, plugin_link) {
        ipcRenderer.send("get_plugin_function", plugin_name, plugin_link);
    }

    //On Receoved get_plugin_function
    ipcRenderer.on("received_get_plugin_function", (event, plugin_name, file) => {
        try {
            file = JSON.parse(file); //Parses the file.
            datasets = file["data-set"]; //Get datasets from file JSON.
            functions = file["functions"]; //Get functions from file JSON.
            function_data = file["data"]; //Get function's data from file JSON.
            //Datasets from plugin
            clear_plugin_dataset(); //Clear old plugin dataset.
            group_it_plugin(datasets); //Starts inserting datasets from plugin file.
            add_listeners_teach(); //Add listeners for all arrow button for expanding and collapsing.
            //Functions from plugin
            clear_plugin_functions(); //Clear old plugin functions.
            function_it_plugin(functions, function_data, plugin_name); //Starts inserting functions from plugin file.
        } catch (e) { }
    })

    function function_it_plugin(functions, function_data, plugin_name) {
        var plugin_body = document.getElementById("plugin_function_body");
        var style_white = false;
        for (i = 0; i < Object.keys(functions).length; i++) {
            var myclass = "functions_button" //Set element class.
            var parameters = function_data[functions[i]]["parameters"]; //Get parameters of selected plugin.
            var _return = function_data[functions[i]]["return"]; //Get return of selected plugin.
            var description = function_data[functions[i]]["description"]; //Get Description of selected plugin.
            var _async = function_data[functions[i]]["async"]; //Get async state of selected plugin.
            if (style_white) { style_white = false; myclass += " white" } else { style_white = true; } //Set black-white black-white pattern for element.
            plugin_body.insertAdjacentHTML('beforeend', '<button class="' + myclass + '" data-parameters="' + parameters + '" data-return="' + _return + '" data-description="' + description + '" data-async="' + _async + '" data-plugin_name="' + plugin_name + '">' + functions[i] + '</button>') //Insert the element in html body.
            plugin_functions.push([functions[i], description]);
        }
        add_functions_event_listeners(); //Add event listeners for plugin buttons.
    }

    function clear_plugin_dataset() {
        var elements = document.querySelectorAll(".plugin_dataset_teach"); //Selects all elements created by plugins.
        for (i = 0; i < elements.length; i++) {
            elements[i].remove(); //Removes all old plugin intent and groups by class name.
        }
    }

    function clear_plugin_functions() {
        plugin_functions = [];
        var elements = document.querySelectorAll(".plugin_function_body > .functions_button"); //Selects all elements created by plugins.
        for (i = 0; i < elements.length; i++) {
            elements[i].remove(); //Removes all old functions created by plugin.
        }
    }

    function group_it_plugin(obj) {
        var tot_group = [];
        objectScan(['**'], {
            reverse: false,
            filterFn: ({ key }) => {
                if (key[key.length - 1] === "prototype" || key[key.length - 1] === "utterances" || key[key.length - 1] === "answers") { }
                else {
                    if (key.length == 1) { tot_group.unshift(key) } else {
                        tot_group.push(key);
                    }
                }
            }
        })(obj);
        for (i = 0; i < tot_group.length; i++) {
            group_iterate_plugin(tot_group[i], obj);
        }
    }

    function group_iterate_plugin(arg, obj) {
        if (arg.length == 1) {
            if (document.querySelector("#" + arg[0])) { return; }
            if (document.querySelector("#" + arg[0] + "_intent")) { return; }
            if (Object.keys(obj[arg[0]])[0] === "prototype") {
                document.getElementById("teach_command_body").insertAdjacentHTML('beforeend', '<div class="teach_intents plugin_dataset_teach" id="' + arg[0] + '_intent"><div class="intents_inside outer_intent_fix"><div class="intent_name">' + arg[0] + '</div><div class="left_title">Plugin</div></div></div>')
            } else {
                if (document.getElementById("teach_command_body").querySelector(":scope > #" + arg[0] + "") == null) {
                    document.getElementById("teach_command_body").insertAdjacentHTML('afterbegin', '<div class="teach_groups plugin_dataset_teach" id="' + arg[0] + '"> <div class="group_inside"><img class="arrow collapse" src="./img/arrow.png"><div class="group_name">' + arg[0] + '</div><div class="left_title">[Plugin]</div></div><div class="inner_body"></div></div>')
                }
            }
        }
        else {
            var group_iterator_arr = [];
            var group_element_itr = "";
            var element_iterator_arr = "obj";
            for (j = 0; j < arg.length; j++) {
                group_iterator_arr.push(arg[j]);
                element_iterator_arr += "['" + arg[j] + "']";
                group_element_itr += " > #" + arg[j] + " ";
                if (iterate_document(group_iterator_arr) == null) {
                    if (Object.keys(eval(element_iterator_arr))[0] === "prototype") {
                        //Check if already exists
                        var group_iterator_already_exists = group_iterator_arr.slice(0, -1);
                        group_iterator_already_exists.push(group_iterator_arr[group_iterator_arr.length - 1] += "_intent");
                        if (iterate_document(group_iterator_arr)) { continue; }

                        //Create an intent
                        var group_it_arr = group_iterator_arr.slice(0, -1);
                        iterate_document(group_it_arr).querySelector(".inner_body").insertAdjacentHTML('beforeend', '<div class="teach_intents plugin_dataset_teach" id="' + arg[j] + '_intent"><div class="intents_inside"><div class="intent_name">' + arg[j] + '</div><div class="left_title">[Plugin]</div></div></div>')
                    }
                    else {
                        //Create an group
                        var group_it_arr = group_iterator_arr.slice(0, -1);
                        iterate_document(group_it_arr).querySelector(".inner_body").insertAdjacentHTML('afterbegin', '<div class="teach_groups plugin_dataset_teach" id="' + arg[j] + '"> <div class="group_inside"><img class="arrow collapse" src="./img/arrow.png"><div class="group_name">' + arg[j] + '</div><div class="left_title">[Plugin]</div></div><div class="inner_body"></div></div>')
                    }
                }
            }
        }
    }

    //#endregion
    //#region Prototype
    ipcRenderer.on('received_load_prototype_functions', (event, builtin_functions, plugin_functions, custom_functions, save_file, group_path, prototype_data) => {
        document.getElementById("leftcard").setAttribute('data-builtin_functions', JSON.stringify(builtin_functions))
        document.getElementById("leftcard").setAttribute('data-plugin_functions', JSON.stringify(plugin_functions))
        document.getElementById("leftcard").setAttribute('data-custom_functions', JSON.stringify(custom_functions))
        document.getElementById("leftcard").setAttribute('data-save_file', JSON.stringify(save_file))
        document.getElementById("leftcard").setAttribute('data-group_path', JSON.stringify(group_path))
        document.getElementById("leftcard").setAttribute('data-prototype_data', JSON.stringify(prototype_data))
        document.getElementById("event_listener").click();
        ipcRenderer.send('clear_prototype_save');
    })

    //#endregion
    //#region Lab
    ipcRenderer.on('lab_console', (event, data) => {
        document.getElementById("lab_console_inner_text").innerHTML += data + "\n";
    })

    ipcRenderer.on('lab_terminal', (event, lab_terminal_message, path = null) => {
        if (path) { shell.pushd(path); }
        lab_shell = shell.exec(lab_terminal_message, { async: true }, function (code) {
            console.log("Lab shell exited with code " + code);
        });
        lab_shell.stdout.on('data', function (data) {
            document.getElementById("lab_terminal_inner_text").innerHTML += data;
        });
    })

    ipcRenderer.on('lab_terminal_npm_install', async (event, npm_commands, path) => {
        shell.pushd(path);

        let lab_npm_install = (npm_command, current, total) => new Promise((resolve, reject) => {
            let lab_shell = shell.exec(npm_command + " --save", { async: true }, function (code) {
                if (code == 0) {
                    current = current + 1;
                    document.getElementById("lab_terminal_inner_text").innerHTML += '(' + current + '/' + total + ') ' + 'Library Installed.' + '\n';
                    resolve();
                }
                setTimeout(resolve, 90000)
            });
        });

        for (npmcounter = 0; npmcounter < npm_commands.length; npmcounter++) {
            await lab_npm_install(npm_commands[npmcounter], npmcounter, npm_commands.length);
            if (npmcounter == npm_commands.length - 1) {
                document.getElementById("lab_terminal_inner_text").innerHTML += 'Library Installation Completed.' + '\n';
                ipcRenderer.send('lab_terminal_npm_install_complete');
            }
        }

    });
    //#endregion
    //#endregion

    //#region  Basic
    function show_confirmation(title, message, callback) {
        document.getElementById("show_confirmation_wrapper").style.display = "block";
        document.getElementById("show_confirmation_title").innerHTML = title;
        document.getElementById("show_confirmation_message").innerHTML = message;
        document.getElementById("show_confirmation_yes").addEventListener('click', () => {
            document.getElementById("show_confirmation_wrapper").style.display = "none";
            callback();
        })
        document.getElementById("show_confirmation_no").addEventListener('click', () => {
            document.getElementById("show_confirmation_wrapper").style.display = "none";
        })
    }

    HTMLElement.prototype.findId = function (_id) {
        var childs = this.childNodes;

        for (var i = 0; i < childs.length; i++) {
            if (childs[i].nodeType == Node.ELEMENT_NODE) {
                if (childs[i].id == _id) {
                    return childs[i];
                }
            }
        }

        return null;
    }
    //#endregion
})