"use strict";

//2023-09-19: NOTE - the 'window_id' argument
//must be in the format of ("text_text_16DigitString").
//typically, an example created by default might be something
//like this: "window_0015_1048576878897556"
async function make_new_window(window_id, L, T, W, H, title, content_id, do_reload = false) {
    //name all web windows as "web_window"
    var cid = null;
    var tbl_obj = null;
    var win_obj = null;
    var desktop = null;
    var unique_id = null;
    var desc_text = null;
    var date_obj = null;
    var date_serial = null;
    var win_id = null;
    var timestamp = null;
    var blocking_layer = null;
    var num_instance = null;
    var add_instance = null;
    var script_addr = null;
    var window_script = null;
    var win_script = null;
    var script = null;
    var script_exists = null;
    var css_obj = null;
    var css_container = null;
    var script_container = null;

    var duplicate_win_exists = null;
    var create_new_win_instance = null;
    var create_new_win = null;
    var overwrite_current_win = null;
    var win_title = null;
    var preexisting_cid = null;

    var is_duplicate_window_attribute = null;
    var duplicate_win_id = null;
    var window_count = null;
    var current_win_state = null;
    var is_window_reload = null;
    var i = null;
    var is_tabbed = null;

    duplicate_win_exists = false;
    
    cid = Math.abs(parseFloat(content_id));
    preexisting_cid = cid;

    if (typeof cid === "number" && cid >= 0) {
        cid = cid.toString();
    }
    else {
        i = 0;
        do {
            i++;
            cid = await make_unique_id(16);
            //cid = 1000000000000000;
            //set a default value and load the
            //actual id later.each javascript 
            //generated unique id is a 
            //"1,000,000,000,000,000" x 
            //random value;
            if (i > 100) {
                break;
            }
        } while (unique_id_generated_already_exists(cid) === true);

        i = 0;
        do {
            i++;
            //until there is a unique id generated by the
            //web server, repeat choosing unique ids until
            //a unique id number is returned.
            cid = await get_db_uniqueID("16", "15", "2");
            if (i > 100) {
                break;
            }
        } while (unique_id_generated_already_exists(cid) === true);
    }

    /* 
    2023-09-19:
    IMPORTANT: 
    The win_id variable must be in the format of ("text_text_16DigitString"), or 
    something like ("text-more-text_text-and-more-text_16DigitString.3414") works too,
    because the string's value still has 3 parts, each separated by an underscore character ("_").
    Don't input any underscore characters.  
    */
    if (window_id == null || typeof window_id != "string" || window_id == "" || window_id == undefined) {
        win_id = make_id(cid);
    }
    else {
        win_id = window_id.toString();
    }

    win_title = title;

    //if duplicate window exists (has the same content_id (number: 16 digits), not win_id)
    //allow user to open a duplicate window, or let them choose to bring the existing
    //window to the front
    //-------------------------------------------------------------------------------------

    //2023-10-18:
    //passing an optional argument into the function which
    //sets a boolean flag which determines if we want to
    //reload the current window, not duplicate or create a new one.
    if (do_reload === true) {
        is_duplicate_window_attribute = ["data-is_duplicate_window", "false"];
        do_reload = false; //set the reload option for the window to fale to prevent
        //it from reloading the window as an infinited loop.
        is_window_reload = true; //set a boolean flag indicating if this is a new
        //window, or a reloading window.
        //open_window(cid);
        ////return;
        //remove_all_window_content(win_id);
        //div_content = make_new_div_content_container(win_id);
        document.getElementById(win_id).style.opacity = 0.0;
        remove_elem_animations(win_id);
        place_mask_over_window(win_id);
        clear_window_content_do_reload(win_id);
        equalize_window_size_to_table_size(win_id);
        remove_window_mask(win_id);
        set_do_reload_window_false(win_id);
        do_reload = false;
        //document.getElementById(win_id).childNodes[0].style.opacity = 1.0;
        ////reset_window_to_original_dimensions(win_id);
        //remove_elem_HTML_attributes(win_id);
        //alert(document.getElementById(win_id).outerHTML);
        //document.getElementById(win_id).style.opacity = 0.0;
        //return;
        
    }
    else if (do_reload === false) {
        is_window_reload = false; //set a boolean flag indicating if this is a new
        //window, or a reloading window.

        duplicate_win_exists = duplicate_window_exists(win_id);
        if (duplicate_win_exists === true) {
            //2023-09-19: disabling the duplicate window feature for now. 
            //New bugs take place due to the development / modification of a new feature.
            //to enable this feature, comment the two lines below.
            ////open_window(cid);
            ////return;

            create_new_win_instance = confirm("This window is already open. \nDo you want to create a new duplicate instance?");
            if (create_new_win_instance === true) {
                //open a duplicate window
                window_count = parseInt(number_of_windows());
                window_count++;
                win_title = title + " (Duplicate Window " + window_count.toString() + ")";
                is_duplicate_window_attribute = ["data-is_duplicate_window", "true"];
                //2023-09-19:
                //Modify the win_id string to inclue a dash-delimited string value
                //to indicate that it is a duplicate window.
                duplicate_win_id = win_id.split("_")[0] + "-duplicate-" + make_unique_id(10).toString();
                win_id = duplicate_win_id + "_" + win_id.split("_")[1] + "_" + win_id.split("_")[2];
            }
            else if (create_new_win_instance === false) {
                //bring the existing opened window to
                //top of the window stack(z-index is set
                //to top window z-index + 1)
                open_window(cid);
                return;
            }
        }
        else //no window with that content id is open
        {
            is_duplicate_window_attribute = ["data-is_duplicate_window", "false"];
        }
        //-------------------------------------------------------------------------------------
        //2023-10-18:
        //End: 'do_reload' conditional block
    }


    desktop = document.getElementById("desktop");
    win_obj = document.createElement("div");
    win_obj.innerHTML = "";
    
    tbl_obj = make_table_interface(win_id, cid);

    win_obj.style.position = "absolute";
    win_obj.style.marginTop = "0";
    win_obj.style.top = "0";
    win_obj.style.left = "auto";
    win_obj.style.width = "auto";
    win_obj.style.height = "auto";
    win_obj.style.paddingBottom = global_window_padding_bottom;
    win_obj.style.paddingTop = global_window_padding_top;
    win_obj.style.paddingRight = global_window_padding_right;
    win_obj.style.paddingLeft = global_window_padding_left;
    win_obj.style.borderRadius = global_window_corner_radius;
    win_obj.style.borderStyle = global_window_border_style;
    win_obj.style.borderWidth = global_window_border_width;
    win_obj.style.borderColor = global_window_border_color;
    win_obj.style.borderBottomColor = global_window_bottom_border_color;
    win_obj.style.borderRightColor = global_window_right_border_color;
    win_obj.style.borderTopColor = global_window_top_border_color;
    win_obj.style.borderTopStyle = "solid";
    win_obj.style.borderLeftColor = global_window_left_border_color;
    //win_obj.style.opacity = global_window_outer_opacity;
    //win_obj.childNodes[0].style.opacity = global_window_inner_opacity;
    win_obj.style.borderCollapse = "collapse";
    //win_obj.className = "box"; //this box blurs the background
    //win_obj.setAttribute("class", "box");

    //win_obj.classList.add("box");

    //win_obj.style.filter = "blur(2px)";
    win_obj.setAttribute("data-desc_text", win_title);

    if (global_test_mode === true) {
        tbl_obj.setAttribute("border", "1");
    }
    else {
        tbl_obj.setAttribute("border", "0");
    }

    win_obj.appendChild(tbl_obj);
    //equalize_window_size_to_table_size(win_obj.id);
    if (desktop !== null) {
        if (window_currently_exists(win_id) !== true) {
            desktop.appendChild(win_obj);
        }
    }

    //win_obj.style.width = "1px";
    //win_obj.style.height = "1px";

    //equalize_window_size_to_table_size(win_obj.id);

    win_obj.setAttribute("name", "web_window");
    win_obj.setAttribute("id", win_id);

    //2023-08-24:
    //sets an attribute telling us if it is a duplicate window or not.
    win_obj.setAttribute(is_duplicate_window_attribute[0], is_duplicate_window_attribute[1]);


    //2023-10-19:
    //check the state of the window
    //(e.g. cascaded, minimized, maximized, unknown).
    //if the window already exists and is reloading,
    //then don't set the window's HTML attributes for
    //its current state. The attributes should already exist.
    //if the window is being created for the first time, set its
    //default window state to cascaded ("Cascade").
    //See file 'window_2.js'
    current_win_state = get_current_window_state(win_id);
    //alert(current_win_state);
    if (current_win_state === "unknown") {
        win_obj.setAttribute("data-window_state", "Cascade");
        win_obj.setAttribute("data-is_minimized", "false");
        win_obj.setAttribute("data-is_maximized", "false");
    }


    //if the window is being created, and not opened, and not duplicated,
    //then set its "data-is_tabbed" = false. By default, newly created
    //windows are in a "Cascade" state. If a window is opened, or duplicated
    //then the "data-is_tabbed" attribute may already be set. Check
    //to see if the attribute exists.
    if (win_obj.hasAttribute("data-is_tabbed") === true) {
        is_tabbed = win_obj.getAttribute("data-is_tabbed");
        if (is_tabbed === "false" || is_tabbed === false) {
            //continue. make no changes
        }
        else if (is_tabbed === "true" || is_tabbed === true) {
            //continue. make no changes
        }
        else {
            //the attribute exists, but does not have a valid
            //value. It is neither "true", or "false". Set the
            //default attribute value to "false"
            win_obj.setAttribute("data-is_tabbed", "false");
        }
    }
    else {
        //the attribute does not exist. Set the attribute to the 
        //window with a default value of "false".
        win_obj.setAttribute("data-is_tabbed", "false");
    }



    win_obj.style.zIndex = get_top_window_z_index() + 1;
    //win_obj.style.backgroundColor = "#838381";
    win_obj.style.backgroundColor = global_window_bgColor;


    //Experimenting with the web window background image, and its X,Y offset
    /*
    win_obj.style.backgroundImage = "url('/chromosphere/images/ui/backgrounds/steel_gradient.png')";
    win_obj.style.backgroundPositionX = parseFloat(parseFloat(win_obj.style.left) * -1.0) + "px";
    win_obj.style.backgroundPositionY = parseFloat(parseFloat(win_obj.style.top) * -1.0) + "px";
    */

    //win_obj.style.backgroundColor = "#b1b1af";
    //win_obj.childNodes[0].style.filter = "blur(6px)";
    win_obj.style.opacity = global_window_opacity;
    //document.getElementById(win_obj.id).childNodes[0].style.opacity = 1.0;
    win_obj.style.position = "absolute";
    win_obj.style.display = "block";

    tbl_obj.style.width = "inherit";
    tbl_obj.style.height = "inherit";
    tbl_obj.style.position = "relative";

    //alert(current_win_state);

    if (is_window_reload === false && current_win_state === "unknown" || is_window_reload === false && current_win_state === "cascaded") {
        //set the window object's Left, Top, Width, and Height
        win_obj = set_window_top_left_width_height(win_obj, L, T, W, H);
    }

    //equalize_window_size_to_table_size(win_obj.id);

    //this places a transparent image over the window which prevents
    //any unwanted user interaction.
    block_window_content_container(win_id);

   // win_obj.style.backgroundImage = "url(/chromosphere/images/desktop_backgrounds/window_bg_aluminum.png)";

    win_obj.addEventListener("mousedown", function (event) {


        ////set_window_left_position(win_obj.id);

        //2024-05-18:
        //set all windows' zIndex property in order. tabbed windows are set
        //with the lowest zIndex. cascaded windows are set next. minimized
        //windows are set next. finally, the maximized window(s) are set.
        //see file: 'window_2.js'
        ////set_all_window_zIndexes();
        //reset_all_window_zIndexes();
        ////move_all_minimized_windows_to_front();
        ////move_all_maximized_windows_to_front();



        if (is_window_tabbed(win_obj.id)) {
            //do nothing since the window is tabbed.
            ////arrange_tabbed_windows(win_obj.id);
            //set_window_left_position(win_obj.id);
            
        }
        else {
            //2024-05-18:
            //set all windows' zIndex property in order. tabbed windows are set
            //with the lowest zIndex. cascaded windows are set next. minimized
            //windows are set next. finally, the maximized window(s) are set.
            //see file: 'window_2.js'
            ////reset_all_window_zIndexes();
            ////set_all_window_zIndexes();

            set_active_window(win_obj.id);
            move_to_front(win_obj.id);
        }

        //2024-07-16:
        //for each open window that is displaying the 'window details' menu,
        //update the details in the details menu.
        //see file: 'show_window_details.js'.
        ////update_all_window_details_menus();
        //update_details(win_obj.id);


        //2024-05-18:
        //storing the last 'mousedown' window's id attribute
        //in a global variable. see file: 'window_2.js'
        ////global_last_window_mousedown_id = win_obj.id;

        //2024-05-18:
        //set all windows' zIndex property in order. tabbed windows are set
        //with the lowest zIndex. cascaded windows are set next. minimized
        //windows are set next. finally, the maximized window(s) are set.
        //see file: 'window_2.js'
        ////set_all_window_zIndexes();

        ////invoke_mouse_event(win_obj.id + "_tbl_0000_tr_0001_td_0000", "mousedown", event);
        ////invoke_mouse_event(win_obj.id + "_tbl_0000_tr_0001_td_0000", "mouseup", event);
        ////invoke_mouse_event(win_obj.id + "_tbl_0000_tr_0001_td_0000", "mouseclick", event);

        ////invoke_mouse_event(win_obj.id + "_block_window_content_container_img", "mousedown", event);
        ////invoke_mouse_event(win_obj.id + "_block_window_content_container_img", "mouseup", event);
        ////invoke_mouse_event(win_obj.id + "_block_window_content_container_img", "mouseclick", event);

        //2024-03-18:
        //IMPORTANT: be sure to keep these event methods commented
        //out so that they won't impede upon the javascript/html/css
        //code editors' textarea functionality. Enabling/uncommenting
        //these event methods will cause problems in disallowing
        //any interaction with these textarea boxes for the user.
        //Keep this in place as a reminder!
        ////event.stopImmediatePropagation();
        ////event.stopPropagation();
        ////event.preventDefault();
    });

    win_obj.addEventListener("mouseup", function () {
        ////set_window_left_position(win_obj.id);

        deactivate_global_active_window();
        ////////arrange_tabbed_windows(win_obj.id);
        ////move_to_front(win_obj.id);

        //2024-07-16:
        //for each open window that is displaying the 'window details' menu,
        //update the details in the details menu.
        //see file: 'show_window_details.js'.
        ////update_all_window_details_menus();
        ////update_details(win_obj.id);

        //2024-05-18:
        //set all windows' zIndex property in order. tabbed windows are set
        //with the lowest zIndex. cascaded windows are set next. minimized
        //windows are set next. finally, the maximized window(s) are set.
        //see file: 'window_2.js'
        ////reset_all_window_zIndexes();
        ////move_all_tabbed_windows_to_front();
        ////move_all_cascaded_windows_to_front();
        ////move_all_minimized_windows_to_front();
        ////move_all_maximized_windows_to_front();

    });

    win_obj.addEventListener("click", function (event) {
        ////set_window_left_position(win_obj.id);
        ////move_to_front(win_obj.id);
        ////////arrange_tabbed_windows(win_obj.id);
        //do nothing
    });

    win_obj.addEventListener("mouseenter", function () {
        ////set_window_left_position(win_obj.id);
        //var mouse_entered = null;

        //mouse_entered = win_obj.id;

        //2023-07-19: Trying to set the CSS animation properties of the window
        //within the 'create_window' script doesn't work unless the window is opened
        //using a setTimeout/delay. This is a redundant function call to make sure
        //the window's CSS animation properties are set, and set properly.

        //2023-09-21:
        //set the window's CSS animation parameters.
        ////set_window_animations(win_obj.id);

        //hide_ui_blocking_onmouseover(win_obj.id);
        ////set_active_window_by_events(win_obj.id);

        //2024-07-16:
        //for each open window that is displaying the 'window details' menu,
        //update the details in the details menu.
        //see file: 'show_window_details.js'.
        ////update_all_window_details_menus();
    });

    win_obj.addEventListener("mouseout", function () {
        //block_all_window_content_containers();
        //show_ui_blocking_onmouseout(win_obj.id);
    });


    //2024-11-24:
    //custom synthetic event that is fired when the web window
    //has finished loading its content.
    //see file: 'win_to_win_comms.js'
    //see file: 'create_window.js'
    //see file: 'window.js'
    win_obj.addEventListener("loadwebwindow", function () {
        ////set_win_title(win_obj.id, "Testing a 'write to window' feature");
        ////write_to_window(win_obj.id, ("<div style='padding:5px;color:white;font-family:MS Sans Serif, Arial, Verdana;font-size:12pt;'>Data Has Been Written to Window " + parseFloat(Math.floor(Math.random() * 900000) + 100000).toString() + "</div>"), false);

        //2025-01-17:
        //testing a feature that writes data to a web window based
        //on its ID attribute value.
        set_win_title(win_obj.id, "Testing a new 'write-to-window' feature");
        write_to_window(win_obj.id, ("<div style='padding:5px;color:white;font-family:MS Sans Serif, Arial, Verdana;font-size:12pt;'>Data Has Been Written to Window " + parseFloat(Math.floor(Math.random() * 900000) + 100000).toString() + "</div>"), false);

        //2025-01-19:
        //call this function to reload the javascript
        //element belonging to this web window.
        //see file: 'reload_window.js'
        //see file: 'functions_3.js'
        reload_JS_object(win_obj.id);

        /*setTimeout(function () {
            //TESTING...
            //this function reloads the HTML code editor iframe if it exists
            //to accurately reflect changes in the code on the server so that
            //it matches the HTML code editor iframe window.
            //see file: 'control_panel_html.js'
            refresh_html_code_editor_if_present(win_obj.id);
        }, 600);*/
    });

    //this function call sets a "do NOT reload"
    //flag in the designated window. Once the do
    //reload flag has been set to false, then
    //the window reloads its content from the
    //server. see file: 'reload_window.js'
    set_do_reload_window_false(win_obj.id);
    do_reload = false;

    //2023-10-18:
    //add a data attribute to the window object setting the 'do reload'
    //flag to false, so the window doesn't reload in an infinite loop.
    win_obj.setAttribute("data-do_reload", do_reload);

    //win_obj.addEventListener("drag", function () {
    //   // alert("drag");
    //});
    
   /*
    win_obj.setAttribute("onmousedown", "set_active_window('" + win_id + "');move_to_front('" + win_id + "');");

    win_obj.setAttribute("onmouseup", "deactivate_global_active_window();");

    win_obj.setAttribute("onclick", "void(0);");

    win_obj.setAttribute("onmouseover", "set_animation_event_listeners('" + win_id + "');");
    */
    change_title(win_obj.id, win_title);

    set_window_status(win_obj.id, "Opening window...");

    date_obj = new Date(Date.now());

    date_serial = date_obj.getTime();
    date_serial = date_serial.toString();

    //this attribute value is temporary. It will sync with info from
    //the database upon saving this window.
    unique_id = make_unique_id(16).toString() + "." + make_unique_id(16).toString(); //window_id.content_id


    win_obj.setAttribute("data-content_id", cid);
    win_obj.setAttribute("data-querystring_id", cid); // win_id.split("_")[2]);
    win_obj.setAttribute("data-unique_id", unique_id);

    timestamp = time_stamp();
    win_obj.setAttribute("data-timestamp_loaded", timestamp);

    //win_obj.style.opacity = 0.0;

    //get the Javascript for the window and
    //append it into the *BODY* element, 
    //not the *HEAD* element.
    script = place_JS_data(win_id, cid); //returns the Javascript object for the window
    script_container = make_JS_container(); //make the js container, or return the existing
    script_container.appendChild(script); //append the script to the script container (container is appended to the body when it is created)

    //get the CSS for the window and 
    //append it to the *HEAD* element, 
    //not inside the *BODY*!
    css_obj = place_CSS_data(win_id, cid); //returns css for the window
    css_container = make_css_container(); //if container doesn't exist, make it (container is appended to the head automatically when it is created)
    css_container.appendChild(css_obj); //append the css object to the container

    //console.log("Window '" + win_id + "' is loaded.");
    //move_up(win_obj.id, 31, 4, 10, 1);

    //fade_in(win_obj.id);
    //set_outer_glow(win_id);

    //win_obj.setAttribute("class", "box");
    //win_obj.style.backdropFilter = "blur(10px)";
    //win_obj.style.webkitBackdropFilter = "blur(10px)";
    //win_obj.style.backdropFilter = "blur(10px)";

    //fade the window in
    win_obj.style.opacity = 0.0;
    ////quick_fade_in(win_obj.id); //this function is located in the functions_2.js file

    //document.getElementById(win_obj.id).childNodes[0].style.opacity = 1.0;
    setTimeout(function () {
        quick_fade_in(win_obj.id); //this function is located in the functions_2.js file
    }, 300);

    //set the default shadow to values of 0, not "none"
    win_obj.style.boxShadow = "0 0 0 0 rgba(0,0,0, 0.0)";

    //2023-09-21:
    //set the window's CSS animation parameters.
    ////set_window_animations(win_obj.id);


    win_obj.style.boxShadow = global_inactive_window_dropshadow;

    //win_obj.style.zoom = "80%";

    //set_icons_add_functions_for_cascaded(win_id);

    //2023-08-24:
    //Each window has its own HTML attribute indicating if it needs to be save or not.
    //By default, set it to unsaved ("false", or false). If the window is flagged to
    //be saved, then save it. See file 'save_entire_window.js'
    ////set_window_unsaved_flag(win_obj.id);
    ////if (is_window_saved(win_obj.id) !== "true" && is_window_saved(win_obj.id) !== true) {
        //wait for a few milliseconds to call save function.
        //This gives the window contents time to load before saving.
        ////setTimeout(function () {
            ////set_window_unsaved_flag(win_obj.id);
            ////start_save_all(win_obj.id);
        ////}, 100);
    ////}

    //2023-08-24:
    //set an attribute into this window's html telling
    //us that this window needs to be saved.
    //After setting the flag to unsaved, call
    //the save function. 
    set_window_unsaved_flag(win_obj.id);
    start_save_all(win_obj.id);



    //2023-09-19:
    //sets an attribute to the window object indicating that it is a thumbnail object.
    //see file 'thumbnail_functions.js'.
    //set_object_thumbnail_false(win_obj.id);

    //2023-09-21:
    //This function places x resize, and y resize 
    //bars onto the window. See file 'resize_windiw.js'
    setup_resize_bars(win_obj.id);


    //2024-04-19:
    //set CSS animations for the WINDOW object, and
    //remove animations from the table object. This prevents
    //the window interface from lagging during resize/move actions
    default_config_elem_for_animation(win_obj.id);
    remove_elem_animations(tbl_obj.id);

    //2024-04-22:
    //testing 2 new functions in file: 'animations.js'.
    //both functions appear to be working correctly.
    //one function adds a CSS property to the element for animation,
    //and the other function removes a property from an element's
    //animated properties. elements are passed as arguments as objects.
    //add/remove properties is a string with one of more comma delimited
    //CSS properties. single properties to be added, or removed don't
    //require a comma.
    ////add_css_animation_property(win_obj, "box-shadow");
    ////add_css_animation_property(win_obj, "padding");
    ////remove_css_animation_property(win_obj, "padding");
    //set_element_animation_duration(win_obj, 3.5);
    //set_element_animation_duration(win_obj, "3.5s");
    //set_element_animation_delay(win_obj, 3.5);
    //set_element_animation_delay(win_obj, "3.5s");

    //2023-09-22:
    //set the CSS animation for the window's box shadow.
    //This function sets an event listener for onmouseenter
    //for the window to animate the window shadow.
    ////set_window_box_shadow_animations(win_obj.id);

    //2023-09-22:
    //set an attribute in the window's HTML specifying
    //the default value of resize window to resize
    //both width (x), and height (y).
    //See file: 'resize_window`.js'
    set_win_resize_xy_attribute(win_obj.id, "xy");


    //2023-10-19:
    //set the window to cascade by default
    ////cascade_window(win_obj.id);

    ////win_obj.style.opacity = global_window_outer_opacity;
    ////win_obj.childNodes[0].style.opacity = global_window_inner_opacity;


    /*
    //Keep this! Place a window tab into the row of window tabs.
    //see file 'tab_windows.js'.
    */
    ////config_window_for_tabbed_view(win_obj.id);
    ////init_tab_window(win_obj.id);

    //2024-03-19:
    //this function copies the cascade icon table cell
    //of the window, and clones it. It configures the
    //cloned node into a new icon, and inserts it into the
    //window's table as a 'more windows actions' icon.
    start_more_window_actions(win_obj.id);

    //2024-07-16:
    //set an HTML attribute inside the window's HTML
    //indicating whether it is currently the 'global_active_window'.
    //defaults to "false"
    //see file: 'show_window_details.js'.
    win_obj.setAttribute("data-is_global_active_window", "false");

    //2024-08-16:
    //set the touchscreen event listeners to the title bar
    //of the window object. These event listeners allow for
    //using touch screen events to move the window's X,Y
    //location. the touchscreen events are mapped
    //to their corresponding synthetic mouse events.
    //see file: 'ui_touch_functions.js'
    /*--------------------------------------------------*/
    //add event listeners to the web window's title bar element
    add_touch_event_listeners_title_bar(win_obj.id);
    //add event listeners to the web window's resize elements
    add_touch_event_listeners_resize_web_window(win_obj.id);
    /*--------------------------------------------------*/

    //2024-09-25:
    //this function sets an HTML attribute in the window
    //indicates whether the window's code editor is showing
    //or not. the code editor is not shown by default, so it
    //is set to false initially. 
    //see file: 'code_editor_functions.js'
    set_code_editor_visible_attribute(win_obj.id, false);

    return win_obj;
}


function number_of_windows() {
    var num_windows = null;
    num_windows = get_number_windows();
    return num_windows;
}

function number_of_scripts() {
    var num_scripts = null;
    var scripts_name = null;
    var scripts = null;
    
    scripts_name = "web_window_script";
    scripts = document.getElementsByName(scripts_name);
    num_scripts = scripts.length.toString();

    return num_scripts;
}


function make_table_interface(win_id, unique_id) {
    var tbl = null;
    var return_table = null;
    var options_icon = null;
    var minimize_icon = null;
    var maximize_icon = null;
    var close_icon = null;
    var resize_icon = null;
    var title_text = null;
    var window_status_div = null;
    var content_id = null;
    var win_obj = null;
    var tr_0000 = null;
    var tr_0001 = null;
    var tr_0002 = null;
    var td_0000 = null;
    var td_0001 = null;
    var td_0002 = null;
    var td_0003 = null;
    var td_0004 = null;
    var td_0005 = null;
    var td_0006 = null;
    var td_0007 = null;
    var div_content = null;
    var i = null;


    content_id = unique_id.toString();
    win_obj = document.getElementById(win_id);

    tbl = return_new_elem("table", win_id, "_tbl_0000");

    ////tbl.setAttribute("border", "1");

    tr_0000 = return_new_elem("tr", win_id, "_tbl_0000_tr_0000");
    tr_0000.setAttribute("height", "19");
    tr_0000.style.overflow = "hidden";



    td_0000 = return_new_elem("td", win_id, "_tbl_0000_tr_0000_td_0000");
    td_0000.style.borderCollapse = "collapse";
    td_0000.setAttribute("width", "19");
    td_0000.setAttribute("height", "19");
    td_0000.style.maxHeight = "19px";
    options_icon = create_options_icon(win_id);
    options_icon.style.opacity = global_icon_opacity;
    td_0000.appendChild(options_icon);

    td_0001 = return_new_elem("td", win_id, "_tbl_0000_tr_0000_td_0001");
    td_0001.setAttribute("height", "19");
    td_0001.style.maxHeight = "19px";
    td_0001.style.borderCollapse = "collapse";

    title_text = create_title_txt(win_id);
    title_text.setAttribute("id", (win_id.toString() + "_window_title"));
    title_text.setAttribute("data-desc_text", title_text.innerText + "&nbsp;");
    title_text.style.paddingRight = "30px";
    title_text.style.overflow = "hidden";
    title_text.style.whiteSpace = "nowrap";
    title_text.style.color = global_window_title_color;
    prevent_drag_select(title_text);
    td_0001.appendChild(title_text);
    td_0001.style.overflow = "hidden";
    
    td_0002 = return_new_elem("td", win_id, ("_tbl_0000_tr_0000_td_0002"));
    td_0002.setAttribute("width", "19");
    td_0002.setAttribute("height", "19");
    td_0002.style.borderCollapse = "collapse";
    td_0002.style.maxHeight = "19px";
    minimize_icon = create_minimize_icon(win_id);
    minimize_icon.style.opacity = global_icon_opacity;
    td_0002.appendChild(minimize_icon);

    td_0003 = return_new_elem("td", win_id, "_tbl_0000_tr_0000_td_0003");
    td_0003.setAttribute("width", "19");
    td_0003.setAttribute("height", "19");
    td_0003.style.borderCollapse = "collapse";
    td_0003.style.maxHeight = "19px";
    maximize_icon = create_maximize_icon(win_id);
    maximize_icon.style.opacity = global_icon_opacity;
    td_0003.appendChild(maximize_icon);

    td_0004 = return_new_elem("td", win_id, "_tbl_0000_tr_0000_td_0004");
    td_0004.setAttribute("width", "19");
    td_0004.setAttribute("height", "19");
    td_0004.style.borderCollapse = "collapse";
    td_0004.style.maxHeight = "19px";
    close_icon = create_close_icon(win_id);
    close_icon.style.opacity = global_icon_opacity;
    td_0004.appendChild(close_icon);

    tr_0001 = return_new_elem("tr", win_id, "_tbl_0000_tr_0001");
    tr_0001.setAttribute("id", (win_id + "_tbl_0000_tr_0001"));
    tr_0001.setAttribute("height", "100%");

    td_0005 = return_new_elem("td", win_id, "_tbl_0000_tr_0001_td_0000");
    td_0005.setAttribute("colspan", "5");
    td_0005.setAttribute("align", "left");
    td_0005.style.borderCollapse = "collapse";
    //2023-09-23:
    //Adding a name attribute to the content table cell.
    td_0005.setAttribute("name", "window_content_table_cell");

    td_0005.style.userSelect = "auto";

    //2023-09-23:
    //adding an event listener for testing
    td_0005.addEventListener("mouseover", function () {
        ////console.log("Mouse is Over Contents Cell: " + td_0005.id);
        ////block_window_content_container(win_id);
        ////show_ui_blocking_onmouseout(win_id);
    });

    td_0005.addEventListener("mouseout", function () {
        ////console.log("Mouse Has Exited Contents Cell: " + td_0005.id);
    });

    div_content = make_new_div_content_container(win_id);

    //div_content = return_new_elem("div", win_id, "_tbl_0000_tr_0001_td_0000_div_0000");
    ////div_content.style.backgroundColor = "#3f3f3f";
    ////div_content.style.backgroundColor = "#6a6a6a";
    ////div_content.style.backgroundColor = "#b9b9b8";
    //div_content.style.backgroundColor = global_window_content_bgColor;
    //div_content.style.width = "99.8%";
    //div_content.style.height = "99.9%";
    //div_content.style.borderStyle = global_window_contents_container_border_style;
    //div_content.style.borderWidth = global_window_contents_container_border_width;
    ////div_content.style.borderWidth = "0.5px";
    ////div_content.style.borderStyle = "solid";
    ////div_content.style.borderTopColor = "#333333";
    ////div_content.style.borderLeftColor = "#11111";
    ////div_content.style.borderRightColor = "#bbbbbb";
    ////div_content.style.borderBottomColor = "#cccccc";
    //div_content.style.borderTopColor = global_window_contents_container_border_top_color;
    //div_content.style.borderLeftColor = global_window_contents_container_border_left_color;
    //div_content.style.borderRightColor = global_window_contents_container_border_right_color;
    //div_content.style.borderBottomColor = global_window_contents_container_border_bottom_color;

    //div_content.style.opacity = global_window_opacity;
    ////div_content.style.opacity = 0.0;
    //div_content.setAttribute("data-window_id", win_id);
    //div_content.setAttribute("name", "contents_div");

    //////div_content.innerHTML = "";

    ////call a function that places the web window's default content.
    ////itas a single pixel image that when it loads, it begins the
    ////process of loading window content
    //div_content.innerHTML = "<span style=\"color:#fff;font-family:Arial, Sans-Serif, Helvetica;opacity:0.5;line-height:160%;\" >" + content_id + "</span><br/><img src=\"" + "/chromosphere/images/blank.gif" + "?" + content_id + "\" id=\"contents_blankimage_" + win_id + "\" style=\"position:absolute;top:inherit;left:inherit;width:1px;height:1px;border-style:none;padding:0;margin:0;border-width:2px;border-color:#cccccc;border-radius:6px;\" onload=\"load_content(this,'" + win_id + "');this.style.borderStyle='none';//fade_in('" + win_id + "');\" ><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;\" >&nbsp;No&nbsp;Data&nbsp;</div>";

    //div_content.style.boxShadow = global_window_innerShadow;
    //div_content.style.borderRadius = global_window_contents_container_border_radius;
    ////div_content.style.backgroundImage = "url(/chromosphere/images/desktop_backgrounds/content_bg_steel.png)";
    
    //div_content.addEventListener("mousemove", function ()
    //{
    //    //console.log("MOUSEOVER");
    //    if (global_mouseover_content == true)
    //    {
    //    //do nothing    
    //    }
    //    else
    //    {
    //        global_mouseover_content = true;
    //    }
    //});

    //div_content.addEventListener("mouseover", function ()
    //{
    //    //console.log("MOUSEOVER");
    //    if (global_mouseover_content == true)
    //    {
    //    //do nothing    
    //    }
    //    else
    //    {
    //        global_mouseover_content = true;
    //    }
    //});
    //    div_content.addEventListener("mouseout", function ()
    //    {
    //    //console.log("MOUSEOUT");
    //        global_mouseover_content = false;
    //});

    tr_0002 = return_new_elem("tr", win_id, "_tbl_0000_tr_0002");
    tr_0002.setAttribute("id", (win_id + "_tbl_0000_tr_0002"));
    tr_0002.setAttribute("height", "19");

    td_0006 = return_new_elem("td", win_id, "_tbl_0000_tr_0002_td_0000");
    td_0006.setAttribute("colspan", "4");
    td_0006.style.borderCollapse = "collapse";
    td_0006.style.maxHeight = "19px";
    td_0006.style.overflow = "visible";
    window_status_div = return_new_elem("div", win_id, "_window_status");
    prevent_drag_select(window_status_div);

    td_0006.appendChild(window_status_div);

    //when the user double-clicks their mouse on the window's buttom
    //status bar to view the window as tabbed. 
    //see file: 'tab_windows.js'.

    window_status_div.setAttribute("style", "white-space:nowrap;max-height:19px;height:19px;overflow:visible;cursor:default;text-shadow:" + global_window_status_text_shadow + ";font-size:11pt;color:" + global_window_status_color + ";font-family:Arial,Verdana;padding:3px;opacity:1.0;");

    window_status_div.setAttribute("data-title", "Window Status");
    /* The status isn't set until after the window loads; we can't set its inner text at this point*/
    //window_status_div.setAttribute("data-desc", window_status_div.innerText);

    td_0007 = return_new_elem("td", win_id, "_tbl_0000_tr_0002_td_0001");
    td_0007.setAttribute("height", "19");
    td_0007.setAttribute("width", "19");
    td_0007.style.borderCollapse = "collapse";
    td_0007.style.maxHeight = "19px";
    resize_icon = create_resize_icon(win_id);
    resize_icon.style.opacity = global_icon_opacity;
    td_0007.appendChild(resize_icon);

    td_0000.style.overflow = "hidden";
    ////td_0000.style.clip = "rect(0 19px 19px 0)";
    //td_0001.style.overflow = "hidden";
    //td_0001.style.clip = "rect(0, 19px, 19px, 0)";
    td_0002.style.overflow = "hidden";
    ////td_0002.style.clip = "rect(0 19px 19px 0)";
    td_0003.style.overflow = "hidden";
    ////td_0003.style.clip = "rect(0 19px 19px 0)";
    td_0004.style.overflow = "hidden";
    ////td_0004.style.clip = "rect(0 19px 19px 0)";
    //td_0005.style.overflow = "hidden";
    //td_0005.style.clip = "rect(0, 19px, 19px, 0)";
    td_0006.style.overflow = "hidden";
    //td_0006.style.clip = "rect(0, 19px, 19px, 0)";
    td_0007.style.overflow = "hidden";
    //td_0007.style.clip = "rect(0 19px 19px 0)";


    td_0000.style.paddingTop = "4px";
    td_0000.style.paddingLeft = "1px";

    //td_0001.style.paddingTop = "4px";
    //td_0001.style.paddingLeft = "1px";

    td_0002.style.paddingTop = "4px";
    td_0002.style.paddingLeft = "1px";

    td_0003.style.paddingTop = "4px";
    td_0003.style.paddingLeft = "1px";

    td_0004.style.paddingTop = "4px";
    td_0004.style.paddingLeft = "1px";

    //td_0005.style.paddingTop = "4px";
    //td_0005.style.paddingLeft = "1px";

    //td_0006.style.paddingTop = "4px";
    //td_0006.style.paddingLeft = "1px";

    td_0007.style.paddingTop = "4px";
    td_0007.style.paddingLeft = "1px";

    tbl.appendChild(tr_0000);
    tr_0000.appendChild(td_0000);
    tr_0000.appendChild(td_0001);
    tr_0000.appendChild(td_0002);
    tr_0000.appendChild(td_0003);
    tr_0000.appendChild(td_0004);
    tbl.appendChild(tr_0001);
    tr_0001.appendChild(td_0005);
    td_0005.appendChild(div_content);
    tbl.appendChild(tr_0002);
    tr_0002.appendChild(td_0006);
    tr_0002.appendChild(td_0007);

    icon_mouseovers(td_0000);
    //icon_mouseovers(td_0001);
    icon_mouseovers(td_0002);
    icon_mouseovers(td_0003);
    icon_mouseovers(td_0004);
    //icon_mouseovers(td_0005);
    //icon_mouseovers(td_0006);
    icon_mouseovers(td_0007);

    options_icon = options_icon_add_event_listeners(td_0000, win_id);
    minimize_icon = minimize_icon_add_event_listeners(td_0002, win_id);
    maximize_icon = maximize_icon_add_event_listeners(td_0003, win_id);
    close_icon = close_icon_add_event_listeners(td_0004, win_id);
    resize_icon = resize_icon_add_event_listeners(td_0007, win_id);

    //prevent GUI objects from being selected or dragged while allowing the web window content to be interacted with
 
    prevent_drag_select(tr_0000);
    prevent_drag_select(tr_0002);
    
    prevent_drag_select(td_0000);
    prevent_drag_select(td_0001);
    prevent_drag_select(td_0002);
    prevent_drag_select(td_0003);
    prevent_drag_select(td_0004);
    //prevent_drag_select(td_0005);
    prevent_drag_select(td_0006);
    prevent_drag_select(td_0007);
    
    prevent_drag_select(options_icon);
    prevent_drag_select(minimize_icon);
    prevent_drag_select(maximize_icon);
    prevent_drag_select(close_icon);
    prevent_drag_select(resize_icon);

    //################# for helper captions functions ######################
    /*
     * 
     * IMPORTANT: Some helper caption functions also exist in file named helper_captions.js
     * 
     */
    td_0000.setAttribute("data-title", "Details");
    td_0001.setAttribute("data-title", "Title ");
    td_0002.setAttribute("data-title", "Minimize");
    td_0003.setAttribute("data-title", "Maximize");
    td_0004.setAttribute("data-title", "Close");
    td_0006.setAttribute("data-title", "Status");
    td_0007.setAttribute("data-title", "Resize");

    td_0000.setAttribute("data-desc", "view the details of this window");
    td_0001.setAttribute("data-desc", "click to move this window");
    td_0002.setAttribute("data-desc", "get this window out of the way");
    td_0003.setAttribute("data-desc", "make this window the maximum size");
    td_0004.setAttribute("data-desc", "close this window");
    td_0006.setAttribute("data-desc",  td_0006.innerText);
    td_0007.setAttribute("data-desc", "change the size of this window");

    options_icon.setAttribute("data-title", "Details");
    minimize_icon.setAttribute("data-title", "Minimize");
    maximize_icon.setAttribute("data-title", "Maximize");
    close_icon.setAttribute("data-title", "Close");
    resize_icon.setAttribute("data-title", "Resize");

    options_icon.setAttribute("data-desc", "view the details of this window");
    minimize_icon.setAttribute("data-desc", "get this window out of the way");
    maximize_icon.setAttribute("data-desc", "make this window the maximum size");
    close_icon.setAttribute("data-desc", "close this window");
    resize_icon.setAttribute("data-desc", "change the size of this window");

    var elem = null;
    var elem_array = [];
    elem_array[0] = td_0000;
    elem_array[1] = td_0001;
    elem_array[2] = td_0002;
    elem_array[3] = td_0003;
    elem_array[4] = td_0004;
    elem_array[5] = td_0005;
    elem_array[6] = td_0006;
    elem_array[7] = td_0007;
    elem_array[8] = options_icon;
    elem_array[9] = minimize_icon;
    elem_array[10] = maximize_icon;
    elem_array[11] = close_icon;
    elem_array[12] = resize_icon;

    var pixel_ratio = null; //to place the box in the proper position based on page zoom


    //reset_css_pixel_ratio();
    //pixel_ratio = get_inverse_pixel_ratio(parseFloat(get_pixel_ratio())); //get CSS to window pixel ratio


    for (i = 0; i < elem_array.length; i++) {
        if (i === 5) { 
            continue;
        }

        elem = elem_array[i];
        elem.addEventListener("mousemove", function (event) {

            //2024-04-17:
            //if the title and description values are string objects, and
            //have a length greater than 0, then continue. otherwise, 
            //the captions box would display as empty.
            if (typeof elem.getAttribute("data-title") === "string" && elem.getAttribute("data-title").length > 0) {
                //continue
            }
            else {
                return; //exit function
            }
            if (typeof elem.getAttribute("data-desc") === "string" && elem.getAttribute("data-desc").length > 0) {
                //continue
            }
            else {
                return; //exit function
            }

            move_caption_box(this, event); //function is located in the file helper_captions_[X].js
            
            //var box = document.getElementById("helper_caption_box");

            //if (box !== null) {
            //    box.style.display = "block";
            //    box.style.opacity = 1.0;

            //    pixel_ratio = get_inverse_pixel_ratio(get_pixel_ratio());

            //    if (pixel_ratio !== 0.8) {
            //        pixel_ratio = 1 - pixel_ratio;
            //        box.style.top = (event.clientY - (event.clientY * pixel_ratio) - 2) + "px";
            //        box.style.left = (event.clientX - (event.clientX * pixel_ratio) - 24) + "px";                }
            //    else {
            //        box.style.top = ((event.clientY / pixel_ratio) - 2) + "px";
            //        box.style.left = ((event.clientX / pixel_ratio) - 24) + "px"; 

            //    }
            //    box.innerHTML = "<div style=\"word-break:keep-all;letter-spacing:0.07em;font-weight:600;font-size:11pt;color:rgb(51,51,51);font-family:Microsoft Sans Serif, Arial, Sans-Serif, Verdana;\">" + this.getAttribute("data-title") + "</div>" + this.getAttribute("data-desc");
            //}
            //else {
            //    make_caption_box();
            //    //return;
            //}
        });

        elem.addEventListener("mousedown", function () {
            var box = document.getElementById("helper_caption_box");
            if (box !== null) {
                box.style.opacity = 0.0;
                box.style.display = "none";
                box.parentNode.removeChild(box);
            }
        });

        elem.addEventListener("mouseout", function () {
            var box = document.getElementById("helper_caption_box");
            if (box !== null) {
                box.style.opacity = 0.0;
                box.style.display = "none";
                box.parentNode.removeChild(box);
            }
        });
    }
    //################# END helper captions functions ######################
    return tbl;
}