//This is the starting function that will show the centered editing window on the screen.
function make_menu_editor_ui(do_action) {
    var box = null;
    var container = null;
    var box_id = null;
    var container_id = null;
    var tbl = null;
    var action_field = null;
    var action_set = null;
    var save_button = null;

    container = document.getElementById("centered_div_container"); //parent container
    //if it exists, remove it, recreate it and reappend it
    if (container !== null) {
        //remove, recreate, and append
        container.parentNode.removeChild(container);
        container = make_center_div_container();
        document.body.appendChild(container);
    }
    else {
        //container does not exist, create and append it
        container = make_center_div_container();
        document.body.appendChild(container);
    }

    box = document.getElementById("centered_div"); //child box centered on the screen containing form data to be posted to the server
    //if it exists, remove it, recreated it and reappend it
    if (box !== null) {
        //remove, recreate, and append box
        box.parentNode.removeChild(box);
        box = make_centered_div();
        container.appendChild(box);
    }
    //it doesn't exist, so make the centered div box and append it to its container
    else {
        box = make_centered_div();
        container.appendChild(box);
    }

    //makes the table that splits the centered window into a top header, and a lower body
    tbl = document.getElementById("edit_menu_outer_table");
    if (tbl !== null) {
        //remove, recreate, and append tbl
        tbl.parentNode.removeChild(tbl);
        tbl = make_box_outer_table();
        box.appendChild(tbl);
    }
    else {
        tbl = make_box_outer_table();
        box.appendChild(tbl);
    }

    //makes the save button icon and sets it in place
    save_button = document.getElementById("menu_form_save_icon");
    if (save_button !== null) {
        save_button.parentNode.removeChild(save_button);
        add_save_button();
    }
    else {
        //places the "save" icon into the center box to submit the form data
        add_save_button();
    }

    //insert the form action text into a hidden form field
    action_set = set_form_action(do_action);
    if (action_set === true) {
    //if the form action has been successfully set
    }
    else {
    //if the form was unsuccessful in setting the form action field
        console.log("Setting the form action field was not successful. File edit_menu_functions_[X]");
    }

    //depending on what action we want the form to do, set the title to the centered box accordingly
    set_center_box_title(do_action);

    //add_hidden_form_elems();

    //clicking anywhere outside the screen centered window will hide the parent object that holds the screen centered box
    document.getElementById("centered_div_container").addEventListener("mousedown", function () {
        hide_show_center_box();
    });


    //clicking the centered div toggles (shows/hides) the screen centered box
    document.getElementById("centered_div").addEventListener("mousedown", function () {
        hide_show_center_box();
    });

    
    window.addEventListener("mouseover", function () {
        show_form_elems();
    });
}



function set_center_box_title(do_action) {

    if (do_action == "test") {
        insert_box_title("test");
    }
    else if (do_action == "create") {
        insert_box_title("Create New Menu Item");
    }
    else if (do_action == "update") {
        insert_box_title("Update Menu Item");
    }
    else if (do_action == "add_submenus") {
        insert_box_title("Add New Submenu Item");
    }
    else if (do_action == "delete") {
        insert_box_title("Delete Menu Item");
    }
    //insert_box_title("test");
}




//This function creates the box that pops up in the center of the screen. This box holds the form values ad submits data to the server
function make_centered_div() {
    var d = null;
    var d_id = null;
    var outer_tbl = null;
    var img = null;

    d_id = "centered_div";
    d = document.getElementById(d_id);

    if (d !== null) {
        d = document.getElementById(d_id);
        img = append_blank_image();
    }
    else {
        d = document.createElement("div");
        d.setAttribute("id", "centered_div");
        document.body.appendChild(d);
        d = document.getElementById(d.id);
        if (d !== null) {
            d.style.margin = "auto";
            d.style.position = "absolute";
            d.style.width = "50%";
            d.style.minHeight = "370px";
            d.style.left = "20%";
            d.style.top = "15%";
            d.style.paddingBottom = "6px";
            d.style.zIndex = parseFloat(top_zIndex()).toFixed(0) + 100000001;
            d.style.overflow = "auto";
            //d.style.zoom = "80%";
            d.classList.add("box");
        }
    }
    return d;
}




//This function makes the parent div that holds the screen centered box
function make_center_div_container() {
    var c = null;
    var c_id = null;

    c_id = "centered_div_container";
    c = document.getElementById(c_id);

    if (c !== null) {
        c = document.getElementById(c_id);
    }
    else {
        c = document.createElement("div");
        c.setAttribute("id", "centered_div_container");
        document.body.appendChild(c);
        c = document.getElementById(c.id);
        if (c !== null) {
            c.style.margin = "0";
            c.style.padding = "0";
            c.style.position = "absolute";
            c.style.width = "100%";
            c.style.height = "100%";
            c.style.left = "0";
            c.style.top = "0";
            c.style.zIndex = parseFloat(top_zIndex()).toFixed(0) + 100000000;
            c.classList.add("container"); //adds a CSS class to further configure the centered container
        }
    }
    return c;
}




//This function creates the table inside the window at the center of the screen. It creates the table holding the form elements and their corresponding label names.
function create_menu_item_input_table() {

    var i = null;

    var tbl = null;

    var tr = null;
    var td_1 = null;
    var td_2 = null;

    var tr_count = null;
    var td_count = null;
    var td_2_count = null;

    var tr_id = null;
    var td_id_1 = null;
    var td_id_2 = null;

    var tbl = null;
    var tbl_id = null;

    var txt_label = null;
    var textbox = null;

    var textbox_id_array = [];
    var input_type_array = [];
    var input_type = null;

    //var tr_bg_color = null;

    //this is a text array holding the textbox names/ids for each text box
    textbox_id_array = ["item_icon_url", "item_label_text", "item_key_code", "item_click", "is_disabled", "is_visible", "is_public", "is_deleted"];
    input_type_array = ["textbox", "textbox", "textbox", "textbox", "checkbox", "checkbox", "checkbox", "checkbox"];

    tbl = document.createElement("table");
    tbl.setAttribute("id", "tbl_menu_input_form");
    tbl.setAttribute("border", "0");
    tbl.setAttribute("cellpadding", "3");
    tbl.style.width = "100%";
    //tbl.style.minWidth = "620px";

    //start all id values as 5 digits long
    tr_count = 10000;
    td_count_1 = 10000;
    td_count_2 = 10000;


    //I'm gathering 7 fields of data. The database table contains more, but we don't need them.
    for (i = 0; i < 8; i++) {
        //toggle each table row's background color
        /* if (tr_bg_color === null) {
            tr_bg_color = "rgba(255,255,255,0.03)";
        }
        else {
            if (tr_bg_color === "rgba(255,255,255,0.03)") {
                tr_bg_color = "rgba(0, 0, 0, 0.03)";
            }
            else {
                tr_bg_color = "rgba(255,255,255,0.03)";
            }
        }
        //end toggle tr background color
        */

        //create table objects
        tr = document.createElement("tr");
        td_1 = document.createElement("td");
        td_2 = document.createElement("td");

        //create the id values to be placed in objects
        tr_id = ((tr_count + i));
        td_1_id = ((td_count_1 + i));
        td_2_id = ((td_count_2 + i));

        //remove the leading '1' at the beginning of the numerical string to get the id value we want
        tr_id = tr_id.toString().substring(1, (tr_id.length));
        td_1_id = td_1_id.toString().substring(1, (td_1_id.length));
        td_2_id = td_2_id.toString().substring(1, (td_2_id.length));

        //add tag names to the ids of the objects so they can be understood easily
        tr_id = "tr_" + (tr_id);
        td_1_id = "td_1_" + (td_1_id);
        td_2_id = "td_2_" + (td_2_id);

        //make each row span the whole width of the table
        tr.setAttribute("id", tr_id);
        tr.style.width = "100%";
        tr.style.height = "36px";
        

        td_1.setAttribute("id", td_1_id);
        td_1.style.width = "50%"; //the label tds will take up 50% of the width in the table
        td_1.style.height = "36px"; //the height is 45px while taking into account padding/margin
        

        td_2.setAttribute("id", td_2_id);
        td_2.style.width = "auto"; //This table cell will automatically contain the rest of the table; the right side of the table w/ the text inputs
        td_2.style.height = "36px"; //the height is 45px while taking into account padding/margin
        td_2.style.paddingRight = "24px";

        input_type = input_type_array[i];
        if (input_type === "textbox") {
            textbox = make_text_input(); //make a generic text input object
            textbox.setAttribute("id", "menu_form_" + textbox_id_array[i]); //give the object an id value
            textbox.setAttribute("name", textbox_id_array[i]); //insert the name attribute of the text box so we can identify it when processing form data
            //place the text box into the right table cell
            td_2.appendChild(textbox);
        }
        else if (input_type === "checkbox") {
            checkbox = make_checkbox_input(textbox_id_array[i], textbox_id_array[i], 0, "false");
            //place the check box into the right table cell
            td_2.appendChild(checkbox);
        }


        //append the objects together into one
        tr.appendChild(td_1);
        tr.appendChild(td_2);
        tbl.appendChild(tr);

        //get the corresponding label to name/identify the textbox
        txt_label = make_td_label(i);
        td_1.innerHTML = txt_label;
    }

    return tbl;
}




//sets the hidden form field to whatever action the user wants to perform (i.e. "create", "delete").
function set_action_field(action) {
    var hidden_field = null;
    var hidden_field_container = null;

    hidden_field = document.getElementById("menu_form_action"); //get the hidden field object
    //if the hidden field exists
    if (hidden_field !== null) {
        //if the action is any one of 4 different values
        if (action === "create") {
            hidden_field.value = action;  //set the form to create a menu item
        }
        else if (action === "update") {
            hidden_field.value = action; //set the form to update/edit a menu item
        }
        else if (action === "add_submenus") {
            hidden_field.value = action; //set the form to add a new stacked menu item
        }
        else if (action === "delete") {
            hidden_field.value = action; //set the form to delete a menu item
        }
    }
    else {
       hidden_field = make_hidden_input("action", "action", action);
       hidden_field_container = document.getElementById("centered_div");
        if (hidden_field_container !== null) {
            if (hidden_field !== null) {
                hidden_field_container.appendChild(hidden_field);
            }
        }
        else {
            //alert("hidden field container does not exist. See function set_action_field.");
            console.log("hidden field container does not exist. See function set_action_field.");

        }
    }
}




//This function creates a table which displays the centered window as a box with a thin top header, and a body to hold content.
function make_box_outer_table() {
    var tbl = null;
    var tr_1 = null;
    var tr_2 = null;
    var td_1 = null;
    var td_2 = null;
    var content_tbl = null;
    var s = null;

    content_tbl = create_menu_item_input_table(); //this function returns the form interface containing the labels and their text boxes in an HTML table object

    tbl = document.createElement("table");
    tbl.setAttribute("id", "edit_menu_outer_table");
    tbl.setAttribute("border", "0");
    tbl.setAttribute("cellspacing", "0");
    tbl.setAttribute("cellpadding", "0");

    tr_1 = document.createElement("tr");
    tr_2 = document.createElement("tr");

    td_1 = document.createElement("td");
    td_2 = document.createElement("td");

    tbl.appendChild(tr_1);
    tbl.appendChild(tr_2);
    tr_1.appendChild(td_1);
    tr_2.appendChild(td_2);

    tr_1.classList.add("box_table_top_tr");
    tr_2.classList.add("box_table_body_tr");

    td_1.classList.add("box_table_top_td");
    td_1.setAttribute("id", "box_table_top_td");
    td_2.classList.add("box_table_body_td");

    td_2.appendChild(content_tbl); //place the content (form labels and form text fields are placed in this table cell.

    tbl.classList.add("box_table"); //add styles from the edit_menu.css stylesheet to further customize the table styles

    //set it to be placed on top of other objects
    tbl.style.zIndex = parseFloat(top_zIndex()).toFixed(0) + 100000002;

    return tbl;
}




//This function places labels, or descriptions into the center window's table
function make_td_label(index) {
    var div = null;
    var menu_array = [];
    var label = null;

    menu_array.push("Menu Item Icon");
    menu_array.push("Menu Item Label");
    menu_array.push("Menu Item Key Code");
    menu_array.push("Menu Item JavaScript");

    menu_array.push("Menu Item Is Disabled");
    menu_array.push("Menu Item Is Visible");
    menu_array.push("Menu Item Is Public");
    menu_array.push("Menu Item Is Deleted");

    label = "<div class='menu_editor_td_label'>" + menu_array[index] + "</div>";

    return label;
}




//This function creates a basic text box that holds data about editing/creating/updating a menu item
function make_text_input() {
    var textbox = null;

    textbox = document.createElement("input");
    textbox.setAttribute("type", "text");
    textbox.setAttribute("maxlength", "200");
    textbox.style.width = "100%";
    textbox.style.minWidth = "200px";
    textbox.style.height = "32px";
    textbox.style.minHeight = "32px";
    textbox.style.display = "none";
    textbox.style.opacity = 0.0;
    textbox.style.fontSize = "12pt";
    textbox.style.fontWeight = "700";
    return textbox;
}




//This creates a hidden form field that stores the action word (i.e. "create", "delete", etc.) that designates what the server is to do with the submitted form data.
function make_hidden_input(id, name, value) {
    var hidden = null;

    hidden = document.createElement("input");
    hidden.setAttribute("type", "hidden");
    hidden.setAttribute("id", "menu_form_" + id);
    hidden.setAttribute("name", name);
    hidden.setAttribute("value", value);

    return hidden;
}



//This creates a checkbox form field that stores true or false data via checkbox click
function make_checkbox_input(id, name, value, checked) {
    var checkbox = null;

    checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.setAttribute("id", "menu_form_" + id);
    checkbox.setAttribute("name", name);
    checkbox.setAttribute("value", value);
    //checkbox.setAttribute("checked", checked);
    checkbox.style.height = "16px";
    checkbox.style.width = "16px";
    //checkbox.style.color = "rgb(255,255,255)";

    checkbox.addEventListener("click", function () {
        if (checkbox.checked === true) {
            checkbox.value = 1;
        }
        else {
            checkbox.value = 0;
            checkbox.checked = false;
        }
        //alert(checkbox.value);
    });

    return checkbox;
}



//If hidden, this function sets the text input boxes in the document to visible.
function show_form_elems() {
    var textboxes = null;
    var box_num = null;
    var input_type = null;
    var form_elem = null;

    textboxes = document.getElementsByTagName("input");
    if (textboxes !== null) {
        box_num = textboxes.length;
        if (box_num > 0) {
            for (i = 0; i < box_num; i++) {
                form_elem = textboxes[i];
                input_type = form_elem.getAttribute("type");
                if (input_type !== null) {
                    if (input_type === "text") {
                        form_elem.style.display = "block";
                        form_elem.style.opacity = 1.0;
                    }
                }
            }
        }
    }
}



//This function hides any displayed text input boxes on the page.
function hide_form_elems() {
    var textboxes = null;
    var box_num = null;
    var input_type = null;
    var form_elem = null;

    textboxes = document.getElementsByTagName("input");
    if (textboxes !== null) {
        box_num = textboxes.length;
        if (box_num > 0) {
            for (i = 0; i < box_num; i++) {
                form_elem = textboxes[i];
                input_type = form_elem.getAttribute("type");
                if (input_type !== null) {
                    if (input_type === "text") {
                        form_elem.style.display = "none";
                        form_elem.style.opacity = 0.0;
                    }
                }
            }
        }
    }
}



//if center box is visible, returns true
function center_box_visible() {
    var c = null;
    var c_id = null;
    var display = null;

    c_id = "centered_div_container";
    c = document.getElementById(c_id);
    if (c !== null) {
        display = c.style.display;
        if (display !== "none") {
            return true;
        }
        else {
            return false;
        }
    }
}



//This function toggles the visibility of the center box that pops up to enter data into the DB.
function hide_show_center_box() {
    var c = null;
    var c_id = null;
    var display = null;

    c_id = "centered_div_container";
    c = document.getElementById(c_id);
    if (c !== null) {
        display = c.style.display;
        if (display === "none") {
            c.style.display = "block"; //show center box

        }
        else {
            c.style.display = "none"; //hide center box
            //hide_form_elems(); //hides text input boxes
        }
        //if the center box is visble, show form elements
        if (center_box_visible() === true) {
            show_form_elems(); //this function makes the text input boxes visible
        }
        else {
            hide_form_elems(); //this function makes the text input boxes visible
        }
    }
}



//hides center box if it is showing
function hide_center_box() {
    var c = null;
    var c_id = null;
    var display = null;

    c_id = "centered_div_container";
    c = document.getElementById(c_id);
    if (c !== null) {
        c.style.display = "none";
    }
}



//makes the center box visible
function show_center_box() {
    var c = null;
    var c_id = null;
    var display = null;

    c_id = "centered_div_container";
    c = document.getElementById(c_id);
    if (c !== null) {
        c.style.display = "block"; //hide center box
    }
}



//yet another function makes a 'save' icon that is used when updating data in the center box of the screen
function add_save_button() {
    //return;
    var s = null;
    var div = null;
    var parent_tbl = null;
    var tr = null;
    var td = null;
    //var box_table_top_td = null;
    var key_code = null;
    var centered_div = null;

    //make "save" icon
    s = document.createElement("img");
    s.setAttribute("id", "menu_form_save_icon");
    s.setAttribute("src", "/chromosphere/images/ui/icons/save_icon.png");
    s.setAttribute("alt", "save changes");
    s.style.width = "48px";
    s.style.height = "48px";
    s.style.padding = "2px";
    s.style.paddingTop = "2px";
    s.style.position = "relative";
   
    s.style.paddingLeft = "61px";
    s.style.margin = "0";
    //s.style.top = "50%";

    centered_div = document.getElementById("centered_div");
    if (centered_div !== null) {
        centered_div.appendChild(s);
    }

    //Save; submit form to server when mouse clicks down on 'save' image
    s.setAttribute("onmouseup", "post_form_edit_main_menu();");

    //when the save icon loads, that means the form has been made visible
    //since the form is visible on image load, focus the caret into the first text input form element
    s.addEventListener("load", function () {
        document.getElementsByTagName("input")[0].focus();
    });

    self.addEventListener("keydown", function () {
        key_code = event.keyCode;
        if (key_code === 13) {
            if (center_box_visible() === true) {
                post_form_edit_main_menu();
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
            }
        }
    });
}



//when the form loads in the center box, place the caret (cursor) into the first text box
function focus_first_form_elem() {
    var form_elems = null;
    var input_objects = null;

    if (document.getElementsByTagName("input")[0] !== null) {
        document.getElementsByTagName("input")[0].focus();
    }
}



//This function takes all textbox/form element values and places them into a FORM object.
//It calls the function to post this data to the server.
//item_icon_url, item_label_text, item_key_code, is_disabled, is_visible, is_public, action
function post_form_edit_main_menu() {
    var f = null; //Holds a new formData object
    var u = null; //url var
    var b = null; //base path string for the url

    var action_box = null;
    var action = null;

    var item_icon_url_box = null;
    var item_label_text_box = null;
    var item_key_code_box = null;
    var item_click_box = null;
    var is_disabled_checkbox = null;
    var is_visible_checkbox = null;
    var is_public_checkbox = null;
    var is_deleted_checkbox = null;

    var row_id_field = null;
    var user_id_field = null;
    var desktop_id_field = null;
    var id_number_field = null;
    var parent_id_number_field = null;
    var tier_level_number_field = null;

    //var record_id = null;
    var row_id = null;
    var user_id = null;
    var desktop_id = null;
    var id_number = null;
    var parent_id_number = null;
    var tier_level_number = null;

    var item_icon_url = null;
    var item_label_text = null;
    var item_key_code = null;
    var item_click = null;
    var is_disabled = null;
    var is_visible = null;
    var is_public = null;
    var is_deleted = null;

    //gets the action box (tells the server how to treat data "create"/"delete" etc...)
    //action_box = document.getElementById("menu_form_action"); //the action is what specifies what we're doing to the menu being edited. You can create, update, add_submenus, and delete menu items.
    //if (action_box !== null) {
    //    action = action_box.value; //get the action text
    //}

    action = get_form_action();

    //get the textbox and checkbox form objects
    item_icon_url_box = document.getElementById("menu_form_item_icon_url");
    item_label_text_box = document.getElementById("menu_form_item_label_text");
    item_key_code_box = document.getElementById("menu_form_item_key_code");
    item_click_box = document.getElementById("menu_form_item_click");
    is_disabled_checkbox = document.getElementById("menu_form_is_disabled");
    is_visible_checkbox = document.getElementById("menu_form_is_visible");
    is_public_checkbox = document.getElementById("menu_form_is_public");
    is_deleted_checkbox = document.getElementById("menu_form_is_deleted");

    //get the values contained within the text/checkbox input boxes
    //truncate all values to a maximum of 200 characters.
    item_icon_url = item_icon_url_box.value.toString().substring(0,200);
    item_label_text = item_label_text_box.value.toString().substring(0, 200);
    item_key_code = item_key_code_box.value.toString().substring(0, 200);
    item_click = item_click_box.value.toString().substring(0, 200);

    is_disabled = is_disabled_checkbox.value;
    is_visible = is_visible_checkbox.value;
    is_public = is_public_checkbox.value;
    is_deleted = is_deleted_checkbox.value;


    //if we are creating a new menu item, we don't have to add these parameters
    if (action !== "none" && action !== null) {
        //get the hidden field parameter objects
        row_id_field = document.getElementById("menu_form_row_id");
        user_id_field = document.getElementById("menu_form_user_id");
        desktop_id_field = document.getElementById("menu_form_desktop_id");
        //id_number_field = document.getElementById("menu_form_id_number");
        parent_id_number_field = document.getElementById("menu_form_parent_id_number");
        tier_level_number_field = document.getElementById("menu_form_tier_level_number");

        //get the hidden fields' values
        row_id = parseInt(row_id_field.value);
        user_id = parseInt(user_id_field.value);
        desktop_id = parseInt(desktop_id_field.value);
        //id_number = parseInt(id_number_field.value);
        parent_id_number = parseInt(parent_id_number_field.value);
        tier_level_number = parseInt(tier_level_number_field.value);
    }

    //b = get_base_path(); //grabs the base path for the url
    f = new FormData(); //make new form object
    u = "/chromosphere/scripts/js/ui/topmenu/edit_menu/edit"; //path to submit form data


    //place the form data into the form object to be submitted
    //the hidden field which stores what action the server is to make ("create"/"delete", etc...)
    f.append("menu_form_action", action); //the specific action word that tells the server what to do with the data ("create", "update", etc...)

    if (action !== "none" && action !== null) {
        //remove_hidden_fields(); //remove all hidden fields
        //hidden fields' values listed below
        f.append("row_id", row_id);
        f.append("user_id", user_id);
        f.append("desktop_id", desktop_id);
        //f.append("id_number", id_number);
        f.append("parent_id_number", parent_id_number);
        f.append("tier_level_number", tier_level_number);
    }
    else {
        remove_hidden_fields(); //remove all hidden fields
    }

    //the textbox and checkbox fields that are visible to the user
    f.append("item_icon_url", item_icon_url.substring(0, 200));
    f.append("item_label_text", item_label_text.substring(0, 200));
    f.append("item_key_code", item_key_code.substring(0, 200));
    f.append("item_click", item_click.substring(0, 200));
    f.append("is_disabled", is_disabled);
    f.append("is_visible", is_visible);
    f.append("is_public", is_public);
    f.append("is_deleted", is_deleted);

    http_post_menu_data(u, f); //call function to post this data to the server
}



//This is a rather generic but useful FORM data posting function. Takes the url, and the data to be posted, and if successfully processed by the server, confirmed by a custom message box
function http_post_menu_data(u, form_data) {
    var xhr = new XMLHttpRequest();
    var msg_box_returns = null;


    xhr.open("POST", u, true);
    //xhr.setRequestHeader("Cookie", "SameSite=None; Secure; HttpOnly;");
    //xhr.setRequestHeader("Origin", "");

    //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () { // Call a function when the state changes.
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            // Request finished. Do processing here.
            hide_show_center_box(); //the data has been successfully submitted to the server. Hide the center box containing the input form
            msg_box_returns = msg_box("3", "Success", translate_msg_box_response(this.responseText)); //Pops up an "alert"/"msgBox" dialog box to confirm the success of the action performed. Then, translate the response from the server into readable text that the user can understand.

            GLOBAL_http_post_menu_data_timer_id = setTimeout(function () {
                window.location.reload(true);
                clearTimeout(GLOBAL_http_post_menu_data_timer_id);
            }, 1500);
            //alert(msg_box_returns);
            //console.log("USER RESPONSE: " + msg_box_returns); //alert(msg_box_returns.then(alert("hello")));
        }
    }
    xhr.send(form_data); //submit the form data
}



//whenever the menu is updated/modified there is a response message that is returned from the server with a single word to specify the successful HTTP request.
function translate_msg_box_response(response_text) {
    var t = null;

    if (response_text === "create") {
        t = "A new menu item has been created";
    }
    else if (response_text === "update") {
        t = "The menu item has been updated";
    }
    else if (response_text === "delete") {
        t = "The menu item has been deleted";
    }
    else if (response_text === "add_submenus") {
        t = "A new sub-menu item has been created";
    }
    else if (response_text === "none") {
        t = "Done";
    }
    return t;
}




//gets the row object of the specified menu item. 
//The row object contains the data that we need.
function get_row_obj(elem) {
    var tr = null;
    var tr_id = null;

    //Yes, I know this is a hackjob. Referencing a node in the DOM relative to another node in the DOM is asking for trouble. 
    //if the sturcture of the DOM changes, you may need to change the way the tr_id is accesssed

    tr_id = elem.parentNode.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0].id; //get the id value of the stack menu row which contains data on user_id, desktop_id etc...
    tr = document.getElementById(tr_id);
    if (tr !== null) {
        //alert(tr.getAttributeNames()[0]);
        return tr;
    }
    else {
        //alert("The row object does not exist.\n edit_menu_functions_X.js"); //X is any letter of the alphabet but version A is the first version, through version Z is one of the last. I just add another "_A" to begin a new file sequence. to
        console.log("The row object does not exist. See file: edit_menu_functions_[X].js");
        //alert("row object does not exist. get_row_obj function");
    }
    return;
}



//populates the text and checkbox items in the form
function populate_form_elements(row_obj) {
    //alert(row_obj);
    /* These are example values contained within the row object
    id="menu_item_row_13"
    data-row_id_num="13"
    data-user_id="1"
    data-desktop_id="1"
    data-row_parent_id_num="3"
    data-tier_level="1"
    data-item_icon_url="/chromosphere/images/blank.gif"
    data-item_label_text="Item 9, tier 1"
    data-item_key_code="13"
    data-item_click="return; "
    data-is_disabled="False"
    data-is_visible="True"
    data-is_public="True"
    */

    //action box, and action, store the intended action for the form so the server knows how to process menu edits
    var action_box = null;
    var action = null;

    //variables to hold the textbox values
    var item_icon_url_box = null;
    var item_label_text_box = null;
    var item_key_code_box = null;
    var item_click_box = null;

    //variables to hold the data to be placed into the form elements
    var item_icon_url = null;
    var item_label_text = null;
    var item_key_code = null;
    var item_click = null;

    if (row_obj !== null) {
        //for redunancy, get the value of the action field and reset its value
        //action_box = document.getElementById("menu_form_action"); //the action is what specifies what we're doing to the menu being edited. You can create, update, add_submenus, and delete menu items.
        //if (action_box !== null) {
        //    action = action_box.value;
        //}

        action = get_form_action();

        //check the action and according to its value, populate the text fields, or not
        if (action !== "none" && action !== null && action !== "") {
            if (action === "add_submenus" || action === "create") {
                //leave text fields blank
            }
            else if (action === "delete") {
                //leave text fields blank
            }
            else {
                //put values into text boxes...
                //in this case, the action is likely to be: "update"

                //get the text box objects
                item_icon_url_box = document.getElementById("menu_form_item_icon_url");
                item_label_text_box = document.getElementById("menu_form_item_label_text");
                item_key_code_box = document.getElementById("menu_form_item_key_code");
                item_click_box = document.getElementById("menu_form_item_click");

                //get the data from the row object where these values are stored
                item_icon_url = row_obj.getAttribute("data-item_icon_url");
                item_label_text = row_obj.getAttribute("data-item_label_text");
                item_key_code = row_obj.getAttribute("data-item_key_code");
                item_click = row_obj.getAttribute("data-item_click");

                //set the center div box text fields' value
                item_icon_url_box.value = item_icon_url.substring(0, 200);
                item_label_text_box.value = item_label_text.substring(0, 200);
                item_key_code_box.value = item_key_code.substring(0, 200);
                item_click_box.value = item_click.substring(0, 200);
            }
        }
        else {
            ////console.log("The action (create, update, delete, etc...) of the form is incorrect. See file edit_menu_functions_[X].js ");
            ////console.log("action: " + action);
            //alert("invalid action variable. function populate_form_elements");
        }


        //set the values of the checkboxes in the form according to the action command
        if (action == "add_submenus") {
            set_checkboxes_to_default(row_obj);
        }
        else if (action == "create") {
            //alert(action);
            set_checkboxes_to_default(row_obj);
        }
        else if (action == "update") {
            populate_checkboxes(row_obj);
        }
        else if (action == "delete") {
            set_checkboxes_to_delete(row_obj);
            config_center_box_ui_for_delete();
        }


        if (action !== "none" && action !== null && action !== "") {
            remove_hidden_fields(); //remove all hidden fields
            add_hidden_form_elems(row_obj); //appends the hidden form fields w/ their values    
        }

    }
}




//populates checkboxes to coincide with values on the server
async function populate_checkboxes(row_obj) {
    //make array for each checkbox in the form
    var checkbox_array = null;
    var table_name = null;
    var row_id = null;
    var base_path = null;
    var file_path = null;
    var output = null;
    var array_len = null;
    var i = null;

    var is_disabled_checkbox = null;
    var is_visible_checkbox = null;
    var is_public_checkbox = null;
    var is_deleted_checkbox = null;
    var checkbox_object_array = [];
    var checkbox = null;

    if (row_obj !== null) {
        //get all of the form's checkboxes
        is_disabled_checkbox = document.getElementById("menu_form_is_disabled");
        is_visible_checkbox = document.getElementById("menu_form_is_visible");
        is_public_checkbox = document.getElementById("menu_form_is_public");
        is_deleted_checkbox = document.getElementById("menu_form_is_deleted");

        //put checkbox objects into an array
        checkbox_object_array.push(is_disabled_checkbox);
        checkbox_object_array.push(is_visible_checkbox);
        checkbox_object_array.push(is_public_checkbox);
        checkbox_object_array.push(is_deleted_checkbox);

        //row_id coincides to the row 'id' in the database
        row_id = row_obj.getAttribute("data-row_id_num");

        //make an array with the field names
        checkbox_array = ["is_disabled", "is_visible", "is_public", "is_deleted"];

        //designate the name of the table
        table_name = "tblMainMenus";

        //get the length of the items in checkbox_array
        array_len = checkbox_array.length;

        for (i = 0; i < array_len; i++) {
            //pull the field value from the database
            output = await get_field_value(table_name, checkbox_array[i], row_id);
            //get the individual checkbox form object
            checkbox = checkbox_object_array[i];
            //set the checked attribute to true, or false
            output = output.toString().toLowerCase();

            //if the output has a true value, click the checkbox to select it
            //no need to see if the output is false because that is the default
            if (output === "true") {
                if (checkbox.checked === false) {
                    //if the value is true, check the (empty/false/unchecked by default) checkbox and set it to checked=true
                    checkbox.click();
                    checkbox.checked = true;
                }
            }
        }
    }
    else {
        //alert("invalid row object. See function populate_checkboxes.");
        console.log("invalid row object. See function populate_checkboxes.");
    }
}



//sets the checkboxes in the form to their defaults
function set_checkboxes_to_default(row_obj) {
    var is_visible_checkbox = null;
    var is_public_checkbox = null;

    if (row_obj !== null) {
        //if the row object that we need exists
        //get the checkboxes we want to select
        is_visible_checkbox = document.getElementById("menu_form_is_visible"); //.click();
        is_public_checkbox = document.getElementById("menu_form_is_public"); //.click();

        //if checkbox exists
        if (is_visible_checkbox !== null) {
            if (is_visible_checkbox.checked === true) {
                //it is already checked, so no work needs to be done
            }
            else {
                //click to set the checkbox as checked
                if (is_visible_checkbox.checked === false) {
                    is_visible_checkbox.click();
                    is_visible_checkbox.checked = true;
                }
            }
        }

        //if checkbox exists
        if (is_public_checkbox !== null) {
            if (is_public_checkbox.checked === true) {
                //it is already checked, so no work needs to be done
            }
            else {
                //click the checkbox as checked
                if (is_public_checkbox.checked === false) {
                    is_public_checkbox.click();
                    is_public_checkbox.checked = true;
                }
            }
        }
    }
    else {
        console.log("Row object is not valid. See file named edit_menu_functions_[X].js");
       // alert("row object is invalid. set_checkbox_to_default");
    }
}



//leaves all checkboxes blank except the "delete checkbox" which is checked
function set_checkboxes_to_delete(row_obj) {
    var is_deleted_checkbox = null;
    var is_deleted = null;

    is_deleted_checkbox = document.getElementById("menu_form_is_deleted");
    is_deleted = row_obj.getAttribute("data-is_deleted");
    if (is_deleted_checkbox.checked === false) {
        is_deleted_checkbox.click();
        is_deleted_checkbox.checked = true;
    }

}



//returns true if checkbox is checked
function is_checkbox_checked(checkbox) {
    if (checkbox.checked === true) {
        return true;
    }
    else {
        return false;
    }
}



//gets form text input objects, and puts them into an array
function get_textboxes() {
    var boxes = null;
    var box = null;
    var input_item = null;
    var box_len = null;
    var i = null;
    var type_attr = null;
    var box_array = [];

    boxes = document.getElementsByTagName("input"); //gets every input element in the doc

    if (boxes !== null) {
        box_len = boxes.length; //number of form data input elements
        if (box_len > 0) {
            for (i = 0; i < box_len; i++) {
                input_item = boxes[i]; //get an individual input element
                if (input_item !== null) {
                    type_attr = input_item.getAttribute("type"); //grabs the input type object's type attribute
                    if (type_attr !== null) {
                        if (type_attr === "text") {
                            //alert(input_item.value);
                            box_array.push(input_item); //if the input element is of type "text", add it to an array
                        }
                    }
                }
            }
        }
    }
    return box_array;
}




//adds the collection of hidden form elements to the form
function add_hidden_form_elems(row_obj) {
    var user_id_number = null;
    var desktop_id_number = null;
    //var id_number = null;
    var row_id = null;
    var row_id_field = null;
    var parent_id_number = null;
    var tier_level_number = null;
    var box = null;
    var div_wrap = null;


    if (row_obj !== null) {
        div_wrap = document.getElementById("hidden_fields_container");

        if (div_wrap !== null) {

            div_wrap.parentNode.removeChild(div_wrap);
            div_wrap = document.createElement("div");
            div_wrap.setAttribute("id", "hidden_fields_container"); //this is the container of the hidden fields within the body of the document
        }
        else {
            div_wrap = document.createElement("div");
            div_wrap.setAttribute("id", "hidden_fields_container"); //this is the container of the hidden fields within the body of the document

        }


        if (div_wrap !== null) {
            box = document.getElementById("centered_div"); //child box centered on the screen containing form data to be posted to the server

            row_id = row_obj.getAttribute("data-row_id_num");
            user_id_number = row_obj.getAttribute("data-user_id");
            desktop_id_number = row_obj.getAttribute("data-desktop_id");
            parent_id_number = row_obj.getAttribute("data-row_parent_id_num");
            tier_level_number = row_obj.getAttribute("data-tier_level");

            row_id_field = make_hidden_input("row_id", "row_id", row_id);
            user_id_field = make_hidden_input("user_id", "user_id", user_id_number);
            desktop_id_field = make_hidden_input("desktop_id", "desktop_id", desktop_id_number);
            parent_id_number_field = make_hidden_input("parent_id_number", "parent_id_number", parent_id_number);
            tier_level_number_field = make_hidden_input("tier_level_number", "tier_level_number", tier_level_number);

            div_wrap.appendChild(row_id_field);
            div_wrap.appendChild(user_id_field);
            div_wrap.appendChild(desktop_id_field);
            div_wrap.appendChild(parent_id_number_field);
            div_wrap.appendChild(tier_level_number_field);

            if (box !== null) {
                box.appendChild(div_wrap); //add the hidden fields inside a div wrapper
            }
        }
    }
    else {
        //alert("Row object is invalid. function add_hidden_form_elems");
        console.log("Row object is invalid. See file edit_menu_functions_[X].js");
    }
}



//adds a signle hidden element to the form
function add_hidden_elem_to_form(txt_id, txt_name, txt_value) {
    var hidden_field = null;

    hidden_field = make_hidden_input(txt_id, txt_name, txt_value);
    return hidden_field;
}



//removes the hidden fields in the form
function remove_hidden_fields() {
    var div_wrap = null;

    div_wrap = document.getElementById("hidden_fields_container");
    if (div_wrap !== null) {
        div_wrap.parentNode.removeChild(div_wrap);
    }
}



//this adds the hidden fields for the creation of a new menu item to be added
function set_hidden_fields_for_create_menu_item(tr_obj) {
    var tr = null;

    tr = tr_obj;
    //alert(tr_obj.id);
    if (tr !== null) {
        remove_hidden_fields();
        add_hidden_form_elems(tr);
    }
    else {
        //alert("The table row object is not found or is invalid. function: set_hidden_fields_for_create_menu_item");
        console.log("Table row object is not found edit_menu_functions_[X].js");
    }
}



//places a title into the center box top bar
function insert_box_title(txt) {
    var box_table_top_td = null;
    var action_txt_container = null;

    box_table_top_td = document.getElementById("box_table_top_td");
    if (box_table_top_td !== null) {
        action_txt_container = document.getElementById("action_txt");
        if (action_txt_container !== null) {
            action_txt_container.innerText = txt;
        }
        else {
            box_table_top_td.innerHTML = box_table_top_td.innerHTML + "<span id=\"action_txt\" class=\"center_window_title\">" + txt + "</span>";
        }
    }
}



//gets user id according to querystring
function get_user_id_val(url, name) {
    var user_id = null;
    var url_txt = null;

    url_txt = url;
    if (typeof url_txt === "string") {
        if (url_txt.length > 0) {
            url_txt = url;
        }
        else {
            url_txt = window.location.href;
        }

    }
    //the following function is located in 'functions.js'
    user_id = get_querystring_value_by_name(url_txt, name);
    user_id = Math.abs(user_id);

    if (typeof user_id === "number") {
        if (user_id > 0) {
            //user id is a number above 0. continue.
        }
        else {
            user_id = 1;
        }
    }
    else {
        user_id = 1; //default to 1 if no value is provided. 
    }
    return user_id;
}



//gets the desktop id according to the querystring
function get_desktop_id_val(url, name) {
    var desktop_id = null;
    var url_txt = null;

    url_txt = url;
    if (typeof url_txt === "string") {
        if (url_txt.length > 0) {
            url_txt = url;
        }
        else {
            url_txt = window.location.href;
        }

    }
    //the following function is located in 'functions.js'
    desktop_id = get_querystring_value_by_name(url_txt, name);
    desktop_id = Math.abs(desktop_id);
    if (typeof desktop_id === "number") {
        if (desktop_id > 0) {
            //desktop_id is a number above 0. continue.
        }
        else {
            desktop_id = 1;
        }
    }
    else {
        desktop_id = 1; //default to 1 if no value is provided. 
    }
    return desktop_id;
}



function get_form_action() {
    var action = null;
    var action_field_id = null;
    var action_field = null;

    action_field_id = "menu_form_action";
    action_field = document.getElementById(action_field_id);

    if (action_field !== null) {
        action = action_field.getAttribute("value").toString();
    }
    return action;
}




function set_form_action(do_action) {
    var container = null;
    var box = null;
    var action_form_field = null;
    var action_value = null;
    var output = null;

    //set the output variable for
    //this function to false by default.
    //if the function is successful, its 
    //output will be set to true
    output = false;

    //checks for the existence of the interface. 
    //If it does not exist, it creates the 
    //interface framework which holds the
    //action element field.
    create_interface_boxes();

    //get the interface top container
    //and get the center box
    container = document.getElementById("centered_div_container");
    box = document.getElementById("centered_div");

    if (container !== null) {
        if (box !== null) {
            action_form_field = document.getElementById("menu_form_action");
            if (action_form_field !== null) {
                //the field exists. Set its value to the function's 'do_action' argument.
                if (typeof do_action === "string") {
                    if (do_action.length > 0) {
                        action_form_field.setAttribute("value", do_action);
                        output = true;
                    }
                }
            }
            else {
                //the field does not exist. Create it and place its value into the hidden form field
                action_form_field = make_hidden_input("action", "action", do_action);
                if (typeof do_action === "string") {
                    if (do_action.length > 0) {
                        if (action_form_field !== null) {
                            box.appendChild(action_form_field);
                            output = true;
                        }
                    }
                }
            }
        }
    }
    return output;
}



function create_interface_boxes() {
    var container = null;
    var box = null;
    var tbl = null;

    container = document.getElementById("centered_div_container"); //parent container
    //if it exists
    if (container !== null) {
    }
    else {
        //container does not exist, create and append it
        container = make_center_div_container();
        document.body.appendChild(container);
    }

    box = document.getElementById("centered_div"); //child box centered on the screen containing form data to be posted to the server
    //if it exists
    if (box !== null) {
    }
    //it doesn't exist, so make the centered div box and append it to its container
    else {
        box = make_centered_div();
        container.appendChild(box);
    }

    //makes the table that splits the centered window into a top header, and a lower body
    tbl = document.getElementById("edit_menu_outer_table");
    if (tbl !== null) {
    }
    else {
        tbl = make_box_outer_table();
        box.appendChild(tbl);
    }

    //makes the save button icon and sets it in place
    save_button = document.getElementById("menu_form_save_icon");
    if (save_button !== null) {
    }
    else {
        //places the "save" icon into the center box to submit the form data
        add_save_button();
    }
}



function config_center_box_ui_for_delete() {
    return;
    var center_box = null;
    var box_showing = null;
    var form_table = null;
    var save_button = null;
    var title = null;
    var title_div = null;

    center_box = document.getElementById("centered_div");
    if (center_box !== null) {
        box_showing = center_box_visible();
        if (box_showing === true) {
            hide_form_elems();
        }
        else {
            show_center_box();
            hide_form_elems();
        }

        center_box.style.minHeight = "150px";
        center_box.style.height = "150px";
        center_box.style.minWidth = "400px";
        center_box.style.width = "400px";
        center_box.style.margin = "0";
        center_box.style.padding = "0";
        center_box.style.left = (self.innerWidth / 2) - (parseFloat(center_box.style.width) / 2) + "px";
        center_box.style.top = (self.innerHeight / 2) - (parseFloat(center_box.style.height) / 2) + "px";


        title_div = document.createElement("div");
        //title_div.style.width = "100%";
        //title_div.style.height = "inherit";
        title_div.style.border = "1px none rgb(255,0,0)";
        title_div.innerHTML = "";

        title = "delete menu item?";
        title = "<div style=\"text-align:center;font-family:Sans-serif, Arial, Helvetica;font-size:14pt;margin-top:10px;\">" + title + "</div>";
        title_div.innerHTML = title;

        center_box.appendChild(title_div);

        form_table = document.getElementById("tbl_menu_input_form");
        if (form_table !== null) {
            form_table.style.opacity = 0.0;
            form_table.style.display = "none";
        }

        save_button = document.getElementById("menu_form_save_icon");
        if (save_button !== null) {
            save_button.style.paddingLeft = "0";

            save_button.setAttribute("src", "/chromosphere/images/ui/icons/big_red_X_w_shadow.png");
            save_button.addEventListener("mousedown", function () {
                if (save_button.src.indexOf("/chromosphere/images/ui/icons/big_red_X_w_shadow.png" > -1 || save_button.src.indexOf("/chromosphere/images/ui/icons/big_red_X_flat.png") > -1)) {
                    save_button.setAttribute("src", "/chromosphere/images/ui/icons/big_red_X_flat.png");
                }
                else {

                }

            });

            save_button.addEventListener("mouseup", function () {
                if (save_button.src.indexOf("/chromosphere/images/ui/icons/big_red_X_w_shadow.png" > -1 || save_button.src.indexOf("/chromosphere/images/ui/icons/big_red_X_flat.png") > -1)) {
                    save_button.setAttribute("src", "/chromosphere/images/ui/icons/big_red_X_w_shadow.png");
                }
                else {

                }
            });
        }
    }
}