"use strict";

//create_details_menu("win ID");

//const { nthchild } = require("modernizr");



function create_details_menu(win_id)
{
    //alert("testing");
    //return;
    var new_div, tble, window_obj, parent_cell_id, parent_cell_obj, options_displayed, styles, content_div = null;
    var web_window_menu = null;
    var code_editor_displayed = null;
    var details_plain_text = null;
    var details_btn = null;
    var window_contents_div = null;

    window_obj = document.getElementById(win_id);

    //If details/options is already showing
    options_displayed = options_menu_showing(win_id);
    if (options_displayed === true)
        {
        remove_details_menu(win_id);
        //create_details_menu(win_id);
        return;
    }

    // If the code editor is displayed
    code_editor_displayed = is_code_editor_showing(win_id);
    if (code_editor_displayed) {
        cancel_code_editor(win_id);
        //create_details_menu(win_id);
        return;
    }

    new_div = document.createElement("div");
    new_div.setAttribute("id", (win_id + "_details_menu"));
    new_div.style.backgroundColor = "rgb(153,153,153)";
    //new_div.setAttribute("style", "");
    
    //new_div.style.position = "relative";
    //new_div.style.top = "auto";
    //new_div.style.left = "0";

    new_div.style.height =  "100%";
    //new_div.style.width = "99.999%";

    //new_div.style.zIndex = "0";
   // new_div.style.display = "none";
    new_div.style.top = "auto";
    new_div.style.left = "auto";
    new_div.style.borderStyle = "solid";
    new_div.style.borderWidth = "1px";
    new_div.style.borderRightColor = "#aaaaaa";
    new_div.style.borderBottomColor = "#cccccc";
    new_div.style.borderLeftColor = "#55555";
    new_div.style.borderTopColor = "#111111";
    new_div.style.backgroundColor = "777777";
    //new_div.style.overflowY = "scroll";
    new_div.style.position = "relative";
    new_div.style.boxShadow = "inset 0 0 8px 2px #272727";

    content_div = document.createElement("div");
    content_div.setAttribute("id", (win_id + "_content_div"));
    content_div.style.height = "100%";
    content_div.style.position = "absolute";
    content_div.style.width = "100%";
    content_div.style.overflow = "auto";
    content_div.innerHTML = "<div style=\"width:95%;height:auto;text-align:center;padding:3px;margin:auto;\"><input type=\"button\" id=\""+ win_id +"_hide_details_btn\" value=\"hide details\" onmouseup=\"remove_details_menu('" + win_id + "');\" style=\"background-color:" + global_button_bgColor_light + ";margin:6px;padding:3px;padding-left:8px;padding-right:8px;font-family:Arial;font-size:12pt;color:'#fff';\" onmouseout=\"this.style.backgroundColor='" + global_button_bgColor_light + "';\" onmouseover=\"this.style.backgroundColor='#fff';\"></div>";
    content_div.childNodes[0].setAttribute("data-title", "Hide Window Details");
    content_div.childNodes[0].setAttribute("data-desc", "click to hide the details of this window");
    set_caption(content_div.childNodes[0]);

    //new_div.style.backgroundImage = "url(/images/desktop_backgrounds/content_bg_steel.png)";


    parent_cell_id = win_id + "_tbl_0000_tr_0001_td_0000";
    parent_cell_obj = document.getElementById(parent_cell_id);

    tble = make_details_table(win_id);
    content_div.appendChild(tble);

    window_contents_div = document.getElementById((win_id + "_tbl_0000_tr_0001_td_0000_div_0000"));
    window_contents_div.style.display = "none";

    parent_cell_obj.appendChild(new_div);

    new_div.appendChild(content_div);

    hide_contents_container(win_id);

    //update_details(win_id);

    //new_div.appendChild(tble);
    //new_div.style.height = "99.999%";
    //new_div.style.width = "inherit";

    //new_div.style.style.display = "block"; //"initial"
    //window_contents_div.style.opacity = "0";

    web_window_menu = make_web_window_menu(win_id);

    //alert(web_window_menu.outerHTML);
    //document.getElementById(win_id + "_content_div").parentNode.appendChild(web_window_menu);
    document.getElementById(content_div.getAttribute("id")).appendChild(web_window_menu);
    web_window_menu.style.height = web_window_menu.parentNode.scrollHeight + "px";


    details_plain_text = return_details_innerText(win_id); //grabs the window data in the text-area form elem and returns it in plain text format
    //inner_div.setAttribute("id", win_id + "side_menu_div");
    //parent_cell_obj.childNodes[0].childNodes[0].appendChild(web_window_menu);


}



function remove_details_menu(win_id)
{
    /* 
     var parent_cell_id = null;
    var parent_cell_obj = null;
    */

    //parent_cell_id = win_id + "_tbl_0000_tr_0001_td_0000";
    //parent_cell_obj = document.getElementById(parent_cell_id);
    var details_menu = null;
    var window_contents_div = null;
    var options_is_displayed = null;
    options_is_displayed = options_menu_showing(win_id);
    details_menu = document.getElementById(win_id + "_details_menu");

    if (options_is_displayed == true) {
        details_menu.parentNode.removeChild(details_menu);
        details_menu = null;
        window_contents_div = document.getElementById((win_id + "_tbl_0000_tr_0001_td_0000_div_0000"));
        window_contents_div.style.display = "block";
        show_contents_container(win_id);
    }



}



function options_menu_showing(win_id)
{
    var details_menu = null;
    details_menu = document.getElementById(win_id + "_details_menu");
   
    if (details_menu != null && typeof details_menu == "object") {
     return true;
    }
    else
    {
    return false;
    }
}




function make_details_table(win_id)
{
    
    var tbl, tr_obj, td_obj, cell_height, cell_width, win = null;
    win = document.getElementById(win_id);
    tbl = document.createElement("table");
    tr_obj = document.createElement("tr");
    td_obj = document.createElement("td");
    //td_obj.style.textAlign = "top"; //setAttribute("valign", "top");
   // td_obj.innerHTML = "Window: <br>";
   // td_obj.innerHTML = td_obj.innerHTML + "     LEFT: " + win.style.left + "<br>";
   // td_obj.innerHTML = td_obj.innerHTML + "     TOP: " + win.style.top + "<br>";
   // td_obj.innerHTML = td_obj.innerHTML + "     WIDTH: " + win.offsetWidth + "<br>";
   // td_obj.innerHTML = td_obj.innerHTML + "     HEIGHT: " + win.offsetHeight + "<br>";
   // td_obj.innerHTML = td_obj.innerHTML + "     Z-INDEX: " + win.style.zIndex + "<br>";
    //td_obj.style.width = "300px";
    //alert(td_obj.innerHTML);
    tbl.appendChild(tr_obj);
    tr_obj.appendChild(td_obj);
    tbl.style.width = "inherit";
    //tbl.setAttribute("border", "1");
    // tbl.style.backgroundImage = "url(/chromosphere/images/ui/icons/details_menu_bg.png)";
    td_obj.innerHTML = td_obj.innerHTML + populate_details(win_id);


    //tbl.style.height = "100%";
    return tbl;

}


function populate_details(win_id) {
    var win = document.getElementById(win_id);
    var web_window_title = null;
    var cid = null;
    var time_loaded = null;
    var created = null;
    var hidden = null;
    var opac = null;
    var outerL = null;
    var outerT = null;
    var outerW = null;
    var outerH = null;
    var winZIndex = null;
    var winStatus = null;
    var content_id = null;

    var window_id = null;

    var details_txt = null; 
    var m = null;
    var d = null;
    var y = null;
    var h = null;
    var min = null;
    var sec = null;
    var ms = null;

    var active_window_id = null;
    var cursor_offset_left = null;
    var cursor_offset_right = null;
    var is_maximized = null;
    var is_minimized = null;
    var window_universal_identifier = null;

    var cascade_param_x = null;
    var cascade_param_y = null;
    var cascade_param_w = null;
    var cascade_param_h = null;
    var window_desc = null;
    var view_window_content_code = null;

    var active_window_id = null;
    var win_mode = null;
    var win_state = null;
    var is_minimized = null;
    var is_maximized = null;
    var current_is_active = null;

    var details_elem = null;
    var details_displayed = null;

    var created_date = null;
    var created_time = null;
    var cursor_offset_top = null;

    //window universal identifier e.g xxxxx.xxxxx
      //Window Cascade Parameters
      //Original / Cascaded Left
      //data - orig_x="375"
      //data - orig_y="375"
      //data - orig_l="375"
      //data - orig_t="375"
    //data-desc_text="Window&nbsp;Desc" //Description of Window
    //contents source code


    web_window_title = document.getElementById(win_id + "_title_box").innerText; //Web Window Title:


    content_id = document.getElementById(win_id).getAttribute("data-content_id"); //Content ID:

    time_loaded = document.getElementById(win_id).getAttribute("data-timestamp_loaded"); //time window is loaded in serial date format
    /*
    m = new Date(time_loaded);
    m = m.getMonth();
    d = new Date(time_loaded);
    d = d.getDay();
    y = new Date(time_loaded);
    y = y.getFullYear();

   
    h = new Date(time_loaded);
    h = h.getHours();
    min = new Date(time_loaded);
    min = min.getMinutes();
    sec = new Date(time_loaded)
    sec = sec.getSeconds();
    */
    //alert(time_loaded.toString());

    //created = m + "/" + d + "/" + y + " <br>" + h + ":" + min + ":" + sec;
    created = new Date(Math.abs(time_loaded));
    created_date = (created.getUTCMonth() + 1) + "/" + created.getUTCDate() + "/" + created.getUTCFullYear() + "&nbsp;";
    created_time = created.getUTCHours() + ":" + created.getUTCMinutes() + ":" + created.getUTCSeconds();
    created = created_date + created_time + "&nbsp;UTC";
    //created = created.getDate();
    //Modified:
    //Accessed:
    //win.style.opacity = 1.0;
    /*
    //Permissions:
    //	Allow:
    //		Read: Public;
    //		Write: Registered Users;
    //		Execute: Registered Users;
    //	Deny:
    //		Read: Restricted Users;
    //		Write: Restricted Users;
    //		Execute: Restricted Users;
    */

    hidden = win.style.visibility; //Hidden:
    opac = parseFloat(win.style.opacity).toFixed(2); //Opacity:
    //alert(hidden);

    if (hidden == "visible") {
        hidden = "True";
    }
    else if (hidden == "hidden") {
        hidden = "False";
    }
    else {
        hidden = "Undefined";
    }

    if (opac != null) {
        opac = Math.abs(opac);
        if (opac >= 0.0 & opac <= 1.0) {
            opac = (opac * 100);
            opac = parseFloat(opac).toFixed(0).toString() + "%";
        }
        else if (typeof opac == "number" && opac.toString().indexOf(".") > -1) {
            opac = opac.toFixed(2);
            opac = (opac * 100);
            opac = parseFloat(opac).toFixed(0).toString() + "%";
        }
        else {
            opac = "Undefined";
        }
    }

    
    outerL = parseFloat(win.style.left).toString() + " units"; //Outer Left:
    outerT = parseFloat(win.style.top).toString() + " units"; //Outer Top:

    outerW = parseFloat(win.style.width).toString() + " units"; //Outer Width:
    outerH = parseFloat(win.style.height).toString() + " units"; //Outer Height:

    winZIndex = win.style.zIndex; //Z-Index

    winStatus = document.getElementById(win_id + "_window_status").innerText; //Window Status //div id = "window_0001_window_status"
    //var winStyle = document.getElementById(win_id).style;
    //alert(winStyle.item(0));

    window_id = win.getAttribute("id");

    web_window_title = "<div /style=\"display:flex;width:inherit;height:37px;\"><span style=\"color:#000;\"><b>Title:</b></span>&nbsp;<div style=\"color:#fff;padding:4px;text-align:top;padding-top:0;\" contenteditable=\"true\" id=\"" + win_id + "_window_title_text_00000\" name=\"" + win_id + "_details_menu_item\" onmousedown=\"this.style.backgroundColor='#fff';this.style.color='#000';\" onblur=\"this.style.background='none';this.style.color='#fff';set_window_title('" + win_id + "', this.innerText);change_title('" + win_id + "', this.innerText);window.getSelection().empty();\" onkeyup=\"set_window_title('" + win_id + "', this);change_title('" + win_id + "', this.innerText);\" onkeydown=\"enterText(this)\" >" + web_window_title + "</div><div style=\"width:30px;height:15px;margin-left:10px;margin-top:0;padding-left:3px;padding-right:3px;padding-top:0;padding-bottom:0;box-shadow:1px 1px 8px 1px #555555;font-size:10pt;color:black;cursor:default;vertical-align:top;text-align:center;border-style:solid;border-color:#333;border-width:1px;background-color:" + global_button_bgColor_light +";\" onmouseup=\"this.style.boxShadow='1px 1px 8px 1px #555555';\" onmousedown=\"this.style.boxShadow='none';this.previousSibling.style.backgroundColor='#fff';this.previousSibling.style.color='#000';\" onclick=\"this.previousSibling.click();this.previousSibling.focus();select_text_content(this.previousSibling);this.previousSibling.style.backgroundColor='#fff';this.previousSibling.style.color='#000';\" onmouseover=\"this.style.backgroundColor='#fff';\" onmouseout=\"this.style.backgroundColor='" + global_button_bgColor_light +"';\">edit</div></div>"; //Web Window Title:

    content_id = "<span style=\"color:black;\">Content&nbsp;ID:&nbsp</span><span style=\"color:white;\" id=\"" + win_id + "_window_content_id_00000\" name=\"" + win_id + "_details_menu_item\">" + content_id + "</span>"; //Content ID:

    //time_loaded = document.getElementById(win_id).getAttribute("data-timestamp_loaded"); //time window is loaded in serial date format
    //created = new Date(Math.abs(time_loaded));
    created = "<span style=\"color:black;\">Created:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_timer_window_created\" name=\"" + win_id + "_details_menu_item\">" + created + "</span>";
    
    hidden = "<span style =\"color:black;\">Visibility:&nbsp</span><span style=\"color:white\" id=\"" + win_id + "_current_window_visibility\" name=\"" + win_id + "_details_menu_item\">" + hidden + "</span>"; //Visibility:"; //"Hidden:&nbsp;" + hidden; //Hidden:
    opac = "<span style=\"color:black;\">Opacity:&nbsp</span><span style=\"color:white\" id=\"" + win_id + "_current_window_opacity\" name=\"" + win_id + "_details_menu_item\">" + opac + "</span>"; //Opacity:



    outerL = "<span style=\"color:black;\">Position&nbsp;Left:&nbsp;</span><span style=\"color:white;\"  id=\"" + win_id + "_outerL" + "\" name=\"" + win_id + "_details_menu_item\">" + global_mouse_coords_x + "&nbsp;units</span>"; //Outer Left:
    outerT = "<span style=\"color:black;\">Position&nbsp;Top:&nbsp;</span><span style=\"color:white;\"  id=\"" + win_id + "_outerT" + "\" name=\"" + win_id + "_details_menu_item\">" + global_mouse_coords_y + "&nbsp;units</span>"; //Outer Top:

    outerW = "<span style=\"color:black;\">Width:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_outerW" + "\" name=\"" + win_id + "_details_menu_item\">" + parseFloat(document.getElementById(win_id).style.width) + "&nbsp;units</span>"; //Outer Width:
    outerH = "<span style=\"color:black;\">Height:&nbsp;</span><span style=\"color:white;\" id =\"" + win_id + "_outerH" + "\" name=\"" + win_id + "_details_menu_item\">" + parseFloat(document.getElementById(win_id).style.height) + "&nbsp;units</span>"; //Outer Height:


    ////outerW = "<span style=\"color:black;\">Width:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_outerW" + "\" name=\"" + win_id + "_details_menu_item\">" + get_win_inner_pixel_width(win_id) + "&nbsp;units</span>"; //Outer Width:
    ////outerH = "<span style=\"color:black;\">Height:&nbsp;</span><span style=\"color:white;\" id =\"" + win_id + "_outerH" + "\" name=\"" + win_id + "_details_menu_item\">" + get_win_inner_pixel_height(win_id) + "&nbsp;units</span>"; //Outer Height:

    ////window.addEventListener("mousemove", function () {
    ////    document.getElementById(global_active_window.id + "_outerL").innerText = parseFloat(global_active_window.style.left).toString();
    ////    document.getElementById(global_active_window.id + "_outerT").innerText = parseFloat(global_active_window.style.top).toString();

    ////    document.getElementById(global_active_window.id + "_outerW").innerText = parseFloat(global_active_window.style.width).toString();
    ////    document.getElementById(global_active_window.id + "_outerH").innerText = parseFloat(global_active_window.style.height).toString();

    ////});

    winZIndex = "<span style=\"color:black;\">Layer:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_zIndex\" name=\"" + win_id + "_details_menu_item\">" + winZIndex + "</span>"; //Z-Index

    winStatus = "<span style=\"color:black;\">Window&nbsp;Status:&nbsp;</span><br><span style=\"color:white;\" id=\"" + win_id + "_win_status\" name=\"" + win_id + "_details_menu_item\">" + winStatus + "</span>"; //document.getElementById(win_id + "_window_status"); //Window Status //div id = "window_0001_window_status"

    is_maximized = win.getAttribute("data-is_maximized");
    is_minimized = win.getAttribute("data-is_minimized");

    if (is_maximized == "true") {
        is_maximized = "Yes";
    }
    else {
        is_maximized = "No";
    }

    if (is_minimized == "true") {
        is_minimized = "Yes";
    }
    else {
        is_minimized = "No";
    }


    window_id = "<span style=\"color:black;\">Window&nbsp;ID:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_window_id\" name=\"" + win_id + "_details_menu_item\">" + window_id + "</span>"; //DOM ID of this window

    win_mode = global_window_mode;
    win_state = win.getAttribute("data-window_state");

    if (global_active_window != null) {
        active_window_id = global_active_window.getAttribute("id");
        if (win.id == active_window_id) {
            current_is_active = "This Window";
        }
        else {
            current_is_active = "Window: " + active_window_id;
        }
    }
    else {
        current_is_active = "None"
    }

    win_mode = "<span style=\"color:black;\">Global&nbsp;Window&nbsp;Mode:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_win_mode\" name=\"" + win_id + "_details_menu_item\">" + win_mode + "</span>";  // Global Window Mode
    win_state = "<span style=\"color:black;\">Window&nbsp;State:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_win_state\" name=\"" + win_id + "_details_menu_item\">" + win_state + "</span>"; //Window State

    is_maximized = "<span style=\"color:black;\">Window&nbsp;Maximized:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_win_is_maximized" + "\" name=\"" + win_id + "_details_menu_item\">" + is_maximized + "</span>";
    is_minimized = "<span style=\"color:black;\">Window&nbsp;Minimized:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_win_is_minimized" + "\" name=\"" + win_id + "_details_menu_item\">" + is_minimized + "</span>";

    active_window_id = "<span style=\"color:black;\">Active&nbsp;Window:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_current_is_active\" name=\"" + win_id + "_details_menu_item\">" + current_is_active + "</span>"; //Is this window the active window?

    cursor_offset_left = "<span style=\"color:black;\">OnMouseDown&nbsp;&nbsp;Cursor&nbsp;Window&nbsp;Offset&nbsp;Left:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_cursor_offset_x\" name=\"" + win_id + "_details_menu_item\">" + Math.abs(win.getAttribute("data-cursor_offset_x")).toString() + "&nbsp;units</span>"; //Window to Cursor offset x
    cursor_offset_top = "<span style=\"color:black;\">OnMouseDown&nbsp;&nbsp;Cursor&nbsp;Window&nbsp;Offset&nbsp;Top:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_cursor_offset_y\" name=\"" + win_id + "_details_menu_item\">" + Math.abs(win.getAttribute("data-cursor_offset_y")).toString() + "&nbsp;units</span>"; //Window to Cursor offset y

    window_universal_identifier = "<span style=\"color:black;\">Universal&nbsp;Window&nbsp;Identifer:&nbsp;</span><br><span style=\"color:white;\" id=\"" + win_id + "_universal_identifier\" name=\"" + win_id + "_details_menu_item\">" + win.getAttribute("data-unique_id") + "</span>"; //Universal window ID

    cascade_param_x = "<span style=\"color:black;\">Cascade&nbsp;Parameter&nbsp;Left:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_original_x\" name=\"" + win_id + "_details_menu_item\">" + win.getAttribute("data-orig_x") + " units</span>"; //Cascaded Window Left
    cascade_param_y = "<span style=\"color:black;\">Cascade&nbsp;Parameter&nbsp;Top:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_original_y\" name=\"" + win_id + "_details_menu_item\">" + win.getAttribute("data-orig_y") + " units</span>"; //Cascaded Window Top
    cascade_param_w = "<span style=\"color:black;\">Cascade&nbsp;Parameter&nbsp;Width:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_original_w\" name=\"" + win_id + "_details_menu_item\">" + win.getAttribute("data-orig_w") + " units</span>"; //Cascaded Window Width
    cascade_param_h = "<span style=\"color:black;\">Cascade&nbsp;Parameter&nbsp;Height:&nbsp;</span><span style=\"color:white;\" id=\"" + win_id + "_original_h\" name=\"" + win_id + "_details_menu_item\">" + win.getAttribute("data-orig_h") + " units</span>"; //Cascaded Window Height

    window_desc = "<span style=\"color:black;\">Window&nbsp;Description:&nbsp;</span><br /><textarea style=\"width:300px;height:70px;null-color:white;\" onfocus=\"\" onblur=\"//save_window_description('" + win_id + "',this)\" onkeyup=\"save_window_description('" + win_id + "',this)\" id=\"" + win_id + "_window_description\"  name=\"" + win_id + "_details_menu_item\" value=\"" + win.getAttribute("data-desc_text").replace(" < ", " &lt; ").replace(" > ", " &gt;").replace("\"", "&quot;").replace("'", "&#39;") + "\" >" + document.getElementById(win_id).getAttribute("data-desc_text") + "</textarea>"; //Window Description

    view_window_content_code = "<span style=\"color:black;\" id=\"" + win_id + "_content_data_src_code\">Content&nbsp;Source&nbsp;Data:&nbsp;</span><br /><div style=\"color:white;\" name=\"" + win_id + "_details_menu_item\">" + encodeURI(document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000_div_0000").innerHTML) + "</div>"; //Content Source Code

    details_txt = "<span style=\"font-size:14pt;color:#222222;font-weight:700;\" >Web Window Details</span><br/><hr style=\"width:inherit;\">";
        details_txt = details_txt + web_window_title + "<hr style=\"width:inherit;\">";
    details_txt = details_txt + content_id + "<br/>";
    details_txt = details_txt + window_id + "<br/>";
    details_txt = details_txt + "<hr style=\"width:inherit;\" />";
    details_txt = details_txt + window_universal_identifier + "<br/>";
    details_txt = details_txt + "<hr style=\"width:inherit;\" />";
        details_txt = details_txt + created + "<br/><hr style=\"width:inherit;\">";
    details_txt = details_txt + outerL + "<br/>";
    details_txt = details_txt + outerT + "<br/>";
    details_txt = details_txt + outerW + "<br/>";
    details_txt = details_txt + outerH + "<br/>";
    details_txt = details_txt + "<hr style=\"width:inherit;\" />";
    details_txt = details_txt + active_window_id + "<br/>";
    details_txt = details_txt + cursor_offset_left + "&nbsp;<br/>";
    details_txt = details_txt + cursor_offset_top + "&nbsp;<br/>";
        details_txt = details_txt + winZIndex + "<br/><hr style=\"width:inherit;\">";
    details_txt = details_txt + winStatus + "<br/>";
        details_txt = details_txt + "<hr style=\"width:inherit;\" />";
    details_txt = details_txt + win_mode + "<br/>";
    details_txt = details_txt + win_state + "<br/>"
    details_txt = details_txt + is_maximized + "<br/>";
    details_txt = details_txt + is_minimized + "<br/>";
    details_txt = details_txt + opac + "<br>";
    details_txt = details_txt + hidden + "<br/>";
    //details_txt = details_txt + undefined + "<br/>";
        details_txt = details_txt + "<hr style=\"width:inherit;\" />";
    details_txt = details_txt + cascade_param_x + "<br/>";
    details_txt = details_txt + cascade_param_y + "<br/>";
    details_txt = details_txt + cascade_param_w + "<br/>";
    details_txt = details_txt + cascade_param_h + "<br/>";
    details_txt = details_txt + "<hr style=\"width:inherit;\" />";
    details_txt = details_txt + window_desc + "<br/><br/>";
        details_txt = details_txt + "<hr style=\"width:inherit;\" />";

   /* details_elem = document.getElementById(win_id + "_details_data"); //if the detail is already present, remove it
    if (details_elem != null) {
        details_elem.parentNode.removeChild(details_elem);
    }
    */

    details_txt = "<div style=\"margin-left:100px;padding:3px;font-family:Arial;font-size:11pt;width:300px;\" id=\"" + win_id + "_details_data\">" + details_txt + "</div>";

    //details_txt = details_txt + "<br><button onclick=\"return_details_innerText('"+win_id+"');\">copy details</button>";

    

    return details_txt;

    /*
    -------------------------------------- Details For Devs Below ---------------------------
    
    Window Style
    style="
         position: absolute;
         top: 90px;
         left: 375px;
         width: 978px;
         height: 360px;
         //padding: 0px 3px;
         padding: 0px 3px;
         border-radius: 8px;
         border-style: solid;
         border-width: 1px;
         border-color: rgb(204, 204, 204) rgb(51, 51, 51) rgb(34, 34, 34) rgb(170, 170, 170);
         border-collapse: collapse;
         z-index: 2;
         background-color: rgb(51, 51, 51);
         display: block;
         background-image: url(&quot;/images/desktop_backgrounds/window_bg_steel.png&quot;);
         box-shadow: none;
    "
    
    Window Name
    Name: "web_window"
    
    DOM Object Id
    "window_0001"
    
    Window Alternate Unique Id
    data-unique_id="6894175135194319.1614293306374"
    
    Window Content Id
    data-content_id="10000000000000000000"
    
    Window Loaded Date/Time Stamp
    data-timestamp_loaded="1614293306374"
    
    Cursor to Window Location Offset Top
    data-cursor_offset_x="249"
    Cursor to Window Location Offset Left
    data-cursor_offset_y="17"
    
    Window State
    data-window_state="Cascade"
    
    Window Minimized
    data-is_minimized="false"
    Window Maximized
    data-is_maximized="false"
    
    Window Cascade Parameters
    Original/Cascaded Left
    data-orig_x="375"
    Original/Cascaded Top
    data-orig_y="90"
    Original/Cascaded Width
    data-orig_w="978"
    Original/Cascaded Height
    data-orig_h="360"
    
    --div id="window_0001_window_title"
    --data-desc_text="Window&nbsp;Title" //Description of Window
    
    
    tr id="window_0001_tbl_0000_tr_0001" //table row containing the content data of window
    Inner Window Height
    height="100%"
    --Inner Window Width
    --width="100%"
    
    --td id="window_0001_tbl_0000_tr_0001_td_0000" //Table Cell container for Content
    Horizontal Alignment
    align="left"
    
    Inner Window Minimum Width
    style="
         min-width: 280px;
    "
    
    div id="window_0001_tbl_0000_tr_0001_td_0000_div_0000" //Div container for Contents
    --data-window_id="window_0001"
    --name="contents_div"
    style="
         width: inherit;
         height: 99.999%;
         border-width: 1px;
         border-style: solid;
         border-top-color: rgb(51, 51, 51);
         border-right-color: rgb(187, 187, 187);
         border-bottom-color: rgb(204, 204, 204);
         box-shadow: rgb(39, 39, 39) 0px 0px 8px 2px inset;
         border-radius: 6px;
         background-image: url(&quot;/images/desktop_backgrounds/content_bg_steel.png&quot;);
    "
    
    
    img src="/images/blank.gif?10000000000000000000" //Default image source of window
    --id="contents_blankimage_window_0001"
    
    
    Actions Upon Loading:
    onload="load_content(this,'window_0001');this.style.borderStyle='none';fade_elem_in('window_0001');//fade_in('window_0001');//alert();"
    
    Inner Window Styles
    div
    style="
        position:absolute;
        top:auto;
        left:auto;
        display:inline;
        overflow:hidden;
        padding:3px;
        font-family:arial;
        font-size:9pt;
        color:#aaaaaa;
        opacity:0.30;
    "
    
    --CONTENTS of Window:
    --"No Data"
    
    
     */
}

//this function updates the details of the window when it changes
//properties such as height, width, top, left, zIndex, and others.
function update_details(win_id) {
    var win = null;
    var pixel_top = null;
    var pixel_left = null;
    var pixel_width = null;
    var pixel_height = null;
    var win_zIndex = null;
    var win_state = null;
    ////var active_window = null;
    var detail_label_width_object = null;
    var detail_label_height_object = null;
    var detail_label_top_object = null;
    var detail_label_left_object = null;
    var detail_label_zIndex_object = null;
    var detail_label_window_state_object = null;
    ////var detail_label_active_window_object = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        if (options_menu_showing(win_id) === true) {
            pixel_top = parseFloat(win.style.top).toFixed(3);
            pixel_left = parseFloat(win.style.left).toFixed(3);
            pixel_width = parseFloat(win.style.width).toFixed(3);
            pixel_height = parseFloat(win.style.height).toFixed(3);
            win_zIndex = parseFloat(win.style.zIndex);
            win_state = win.getAttribute("data-window_state");
            //get the window's current state. if it is not a valid string,
            //then set it to "unset".
            if (typeof (win_state) === "string") {
                //continue
                if (win_state.length > 0) {
                    //continue
                }
                else {
                    win_state = "unset";
                }
            }
            else {
                win_state = "unset";
            }

            //get the active window and set it to the proper value
            ////if (global_active_window !== null) {
            ////    active_window = global_active_window.id;
            ////}
            ////else {
            ////    active_window = "unset"
            ////}
            
            detail_label_width_object = document.getElementById(win_id + "_outerW");
            if (detail_label_width_object !== null) {
                detail_label_width_object.innerHTML = pixel_width + "&nbsp;units";
            }
            detail_label_height_object = document.getElementById(win_id + "_outerH");
            if (detail_label_height_object !== null) {
                detail_label_height_object.innerHTML = pixel_height + "&nbsp;units";
            }
            detail_label_top_object = document.getElementById(win_id + "_outerT");
            if (detail_label_top_object !== null) {
                detail_label_top_object.innerHTML = pixel_top + "&nbsp;units";
            }
            detail_label_left_object = document.getElementById(win_id + "_outerL");
            if (detail_label_left_object !== null) {
                detail_label_left_object.innerHTML = pixel_left + "&nbsp;units";
            }
            detail_label_zIndex_object = document.getElementById(win_id + "_zIndex");
            if (detail_label_zIndex_object !== null) {
                detail_label_zIndex_object.innerHTML = win_zIndex;
            }
            detail_label_window_state_object = document.getElementById(win_id + "_win_state");
            if (detail_label_window_state_object !== null) {
                detail_label_window_state_object.innerHTML = win_state;
            }
            //detail_label_active_window_object = document.getElementById(active_window);
            //if (detail_label_active_window_object !== null) {
            //    detail_label_active_window_object.innerHTML = active_window;
            //}
        }
    }
}

//2024-07-16:
//for each open window that is displaying the 'window details' menu,
//update the details in the details menu. not currently in use.
function update_all_window_details_menus() {
    var wins = null;
    var wins_length = null;
    var i = null;
    var w = null;
    var win_id = null;

    wins = document.getElementsByName("web_window");
    if (wins !== null) {
        if (!isNaN(wins.length)) {
            wins_length = wins.length;
            for (i = 0; i < wins_length; i++) {
                w = wins[i];
                if (w !== null) {
                    win_id = w.id;
                    if (options_menu_showing(win_id)) {
                        //create_details_menu(win_id);
                        //remove_details_menu(win_id);
                        //populate_details(win_id);
                        //create_details_menu(win_id);
                    }
                }
            }
        }
    }
}
//function update_details(win_id) {
//    var details_data = null;

//    details_data = document.getElementById(win_id + "_details_data");
//    if (details_menu != null) {
//        details_menu.parentNode.removeChild(details_menu);
//        populate_details(win_id);
//        alert("data updated");
//    }
//}

//this function gets the width of a window, minus the padding, margin, and border.
function get_win_inner_pixel_width(win_id) {
    var win = null;
    var offset_width = null
    var total_padding = null;
    var total_margin = null;
    var total_border = null;
    var client_width = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        offset_width = parseFloat(win.offsetWidth);
        total_padding = (parseFloat(win.style.paddingLeft) + parseFloat(win.style.paddingRight));
        total_margin = (parseFloat(win.style.marginLeft) + parseFloat(win.style.marginRight));
        total_border = (parseFloat(win.style.borderLeftWidth) + parseFloat(win.style.borderRightWidth));

        if (!isNaN(offset_width) === true) {
            client_width = offset_width;
            if (!isNaN(total_padding) === true) {
                client_width = (client_width - total_padding);
            }
            if (!isNaN(total_margin) === true) {
                client_width = (client_width - total_margin);
            }
            if (!isNaN(total_border) === true) {
                client_width = (client_width - total_border);
            }
        }
    }
    return client_width;
}



//this function gets the height of a window, minus the padding, margin, and border.
function get_win_inner_pixel_height(win_id) {
    var win = null;
    var offset_height = null
    var total_padding = null;
    var total_margin = null;
    var total_border = null;
    var client_height = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        offset_height = parseFloat(win.offsetHeight);
        total_padding = (parseFloat(win.style.paddingTop) + parseFloat(win.style.paddingBottom));
        total_margin = (parseFloat(win.style.marginTop) + parseFloat(win.style.marginBottom));
        total_border = (parseFloat(win.style.borderTopWidth) + parseFloat(win.style.borderBottomWidth));

        if (!isNaN(offset_height) === true) {
            client_height = offset_height;
            if (!isNaN(total_padding) === true) {
                client_height = (client_height - total_padding);
            }
            if (!isNaN(total_margin) === true) {
                client_height = (client_height - total_margin);
            }
            if (!isNaN(total_border) === true) {
                client_height = (client_height - total_border);
            }
        }
    }
    return client_height;
}



function save_window_description(win_id, obj) {
    var win = null;
    var desc_txt = null;

    win = document.getElementById(win_id);
    desc_txt = obj.value;

    win.setAttribute("data-desc_text", "");
    win.setAttribute("data-desc_text", desc_txt);

    //alert(desc_txt);
}

function set_window_title(win_id, obj) {
    var win = null;
    var elem = null;
    var title_box = null;


    win = document.getElementById(win_id);
    elem = obj;
    if (elem.innerText == "") {
        elem.innerText = "Window Title";
    }
    title_box = document.getElementById(win_id + "_title_box");
    title_box.innerText = elem.innerText;
    

}


function update_window_details(win_id) {
    var details_menu = null;
    var details_data = null;
    return;

    if (options_menu_showing(win_id) == true) {
        details_data = document.getElementById(win_id + "_details_data");
        details_menu = document.getElementById(win_id + "_details_menu");

        if (details_data != null) {
            //details_menu.innerHTML = "";
            //populate_details(win_id);
        }

        if (details_menu != null) {
            //details_menu.innerHTML = "";
            //populate_details(win_id);
        }
    }
}

//select text inside text box (contenteditable=true)
function select_text_content(obj) {
    var range = document.createRange();
    range.selectNodeContents(obj);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}



function enterText(selected_text_node, event) {

    var key_code = null;
    key_code = event.key.toLowerCase();
    if (key_code === "enter") {
        selected_text_node.blur();
        if (window.getSelection) {
            window.getSelection().empty();
            set_bg_none(selected_text_node);
        }
    }
}




function toggle_editor_bgColor(obj) {
    var bg = null;
    var c = null;

    bg = obj.style.backgroundColor;
    c = obj.style.color;

    if (bg === null || bg === "") {
        bg = "#fff";
        c = "#000";
    }
    else if (bg === "#fff" || bg === "rgb(255, 255, 255)") {
        bg = "none";
        c = "#fff";
    }
    else if (bg === "none") {
        bg = "#fff";
        c = "#000";
    }

    obj.style.backgroundColor = bg;
    obj.style.color = c;
}


function set_bg_none(obj) {
    obj.style.backgroundColor = "none";
    obj.style.color = "#fff";
}


//take the details' inner-text data and place it into an invisible object
//text is formatted much like this:
/*
        Web Window Details

        new window
        edit
        Content ID: 4423685000253268
        Window ID: window_0018_1690346212989563

        Universal Window Identifer:
        2382934499668476.5338893444221655

        Created: 10/16/2021 1:31:41 UTC

        Position Left: 115 units
        Position Top: 92 units
        Width: 554 units
        Height: 336 units
        Layer: 20

        Window Status:
        Loaded at: 10/15/2021 6:31 PM

        Global Window Mode: active
        Window State: Cascade
        Window Maximized: No
        Window Minimized: No
        Opacity: 97%
        Visibility: Undefined

        Active Window: This Window
        OnMouseDown  Cursor Window Offset Left: 0 units
        OnMouseDown  Cursor Window Offset Top: 0 units

        Cascade Parameter Left: 96 units
        Cascade Parameter Top: 72 units
        Cascade Parameter Width: 554 units
        Cascade Parameter Height: 337 units

        Window Description:

 */
function return_details_innerText(win_id) {
    var details_panel = null;
    var data = null;
    var txt_box = null;

    txt_box = document.getElementById(win_id + "_details_textarea_text");
    if (txt_box !== null) {
        //text area already exists for this window
        //continue
    }
    else {
        txt_box = document.createElement("textarea");
        txt_box.setAttribute("id", win_id + "_details_textarea_text");
        txt_box.style.width = "inherit";
        //txt_box.style.height = "300px";
        txt_box.style.display = "none";

        details_panel = document.getElementById(win_id + "_details_data");
        if (details_panel !== null) {
            data = details_panel.innerText;
            txt_box.value = data;
            details_panel.appendChild(txt_box);
            return txt_box.value;
        }
    }

    details_panel = document.getElementById(win_id + "_details_data");
    if (details_panel !== null) {
        data = details_panel.innerText;
        txt_box.value = data;
        return txt_box.value;
    }
    return null;
}