"use strict";

        /* 2023-06-21:
        ################################################################
        Chromosphere Thumbnail Feature
        ################################################################
                Added a thumbnail feature to preview web windows
                that are currently in a minimized state. 
                The thumbnail object will appear
                inside a small box next to the minimized web window
        */
        //
        //2023-06-22: 
        //Note: the path to the 'eye' icon is ~/chromosphere/images/ui/icons/eye_2.png
        //
        //get web-window object by its id as an argument
        //
        //if window exists
        //
        //make a clone of the window
        //
        //lower the cloned window size (zoom style) by about 50%
        //
        //set its display style as none by default
        //
        //if it doesn't exist, make a div to contain the thumbnail. otherwise, use the existing one
        //
        //insert cloned window object (the thumbnail object) into the container div as innerHTML
        //
        //append to the DOM
        //
        //set display as true
        //
        //set the display of the div container to true
        //
        /*
        ################################################################
        End of Feature Summary
        ################################################################
        */


//this function is the starting point of the thumbnail feature.
function start_thumbnails(win_id) {
    //2024-03-17:
    //if there is currently a thumbnail in the DOM container
    //for showing none-cached thumbnails, then remove
    //the old one to get a new one.
    ////delete_current_thumbnail_in_container(win_id);


    //2023-09-19:
    //Setting it to false doesn't affect it. Setting it back to true.
    //2023-09-19:
    //setting cached thumbnails global var to false; disbale cached thumbnails.
    //2023-07-22: Enable, or disable thumbnails to be cached in the DOM for retrieval.
    //otherwise, if disabled, all thumbnails are generated fresh each time a thumbnail is
    //shown. See file 'globals.js'
    global_thumbnails_enable_cached_thumbnails = true;
    ////global_thumbnails_enable_cached_thumbnails = false;


    //remove_single_thumbnail_container();

    retrieve_cached_thumbnail_or_new(win_id);

}



function retrieve_cached_thumbnail_or_new(win_id) {
    
    var thumbnail_id = null;
    var thumbnail = null;
    var is_expired = null;

    thumbnail_id = "copied_node_" + win_id + "_is_cached";
    thumbnail = document.getElementById(thumbnail_id);
    if (thumbnail !== null) {
        ////console.log("Thumbnail is cached in the DOM");


        is_expired = is_cached_thumbnail_in_DOM_expired(thumbnail.id);
        //console.log("Is expired: " + is_expired);
        if (is_expired === true) {
            if (global_thumbnails_enable_cached_thumbnails === true) {
                //2023-07-22:
                //This is where we place code to grab thumbnail from a cached DOM node.
                //The code below is temporarily written to ignore if
                //2023-07-21: the code below hides any visible cached thumbnails (global_thumbnails_enable_cached_thumbnails === true).

                //hide any cached thumbnails
                hide_all_cached_thumbnails();
                hide_cached_thumbnail(win_id);

                //create and display a fresh thumbnail
                remove_single_thumbnail_container_content();
                make_thumbnail(win_id);
                show_single_thumbnail(win_id);
            }
            else {
                get_fresh_thumbnail(win_id);
                return true;
            }
        }
        else if (is_expired === false) {
            //alert("not expired");
            //console.log("Existing thumbnail is NOT yet expired");

            //2023-07-22:
            //if the global thumbnail variable is set to true, this enables thumbnails to be pulled
            //from a collection of thumbnails that are stored in DOM cache.
            if (global_thumbnails_enable_cached_thumbnails === true) {
                //2023-07-22: Scrach that. Disabling caching so every thumbnail is posted from fresh 
                    //2023-07-22: This code runs depending on whether cached DOM thumbnails are
                    //set to be recreated, or otherwise to be pulled from the DOM cache. If a global variable
                    //is set to true, then all thumbnails are to be pulled from cache (if they exist yet).
                    //The code for this is below

                    //2023-07-22: Code for displaying a cached thumbnail
                    //hide all single thumbnails
                    //hide all single thumbnail containers
                    //get thumbnail (and its parent container) from DOM cache
                    //display thumbnail
                    //position visible thumbnail object
                //remove_single_thumbnail_container_content();
                ////hide_single_thumbnail(win_id);
                ////hide_all_cached_thumbnails();
                ////hide_cached_thumbnail(win_id);
                ////show_cached_thumbnail(win_id);
                ////position_CACHED_thumbnail_to_web_window(win_id);

                ////remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0002");
                ////remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0000");

                //2023-07-22: This code runs depending on whether cached DOM thumbnails are
                //set to be recreated, or otherwise to be pulled from the DOM cache. If a global variable
                //is set to null, or false, then all thumbnails are recreated and
                //displayed when a thumbnail is to be shown. The code for this is below

                get_fresh_thumbnail(win_id);
                return true;
            }
            else if (global_thumbnails_enable_cached_thumbnails === false || global_thumbnails_enable_cached_thumbnails === null) {
                    //2023-07-22: This code runs depending on whether cached DOM thumbnails are
                    //set to be recreated, or otherwise to be pulled from the DOM cache. If a global variable
                    //is set to null, or false, then all thumbnails are recreated and
                    //displayed when a thumbnail is to be shown. The code for this is below

                get_fresh_thumbnail(win_id);
                return true;
            }
        }
    }
    else {
        get_fresh_thumbnail(win_id);
        return true;
    }
}


//2-23-07-22:
//this function creates a freshly copied node.
//makes a cloned node of a web window object.
//shrinks cloned item to X zoom size.
//returns object from win_id function argument
function get_fresh_thumbnail(win_id) {
    
    var win = null;
    var w_id = null;

    w_id = win_id;
    win = document.getElementById(w_id);
    if (win !== null) {
        //console.log("Thumbnail is NOT cached in the DOM");
        //console.log("making thumbnail");

        hide_cached_thumbnail(w_id);

        //make and display fresh thumbnail
        remove_single_thumbnail_container_content();
        make_thumbnail(w_id);
        show_single_thumbnail(w_id);

        remove_bg_color("copied_node_" + w_id + "_tbl_0000_tr_0000_td_0002");
        remove_bg_color("copied_node_" + w_id + "_tbl_0000_tr_0000_td_0000");

        return win;

    }
    else {
        return win;   
    }
    return win;
}


//this function checks to see if the top container for
//all thumbnail data exists. It checks to see if the
//individual container for a single thumbnails exists.
//if both exist, continue with creating the thumbnail object.
//It saves the thumbnail outer HTML into a global array, and
//returns the data to a local variable. It empties the single thumbnail
//container of any existing thumbnail object data. It places the new
//outer HTML of a web window inside. It makes the top-most container for
//all thumbnail data, and makes it visible. It sets the thumbnail object to
//display as a cascaded web window, and changes the value of its ID attribute
//to a different value than the original web window. This prevents any conflicts
//between thumbnails and existing web windows, as their ID attribute values are now each set
//to be unique. Disable the element by calling a function that places a blank
//image on top of the thumbnail object to prevent user interaction. See file
//'functions.js' for the function that is being called here. Hide the thumbnail
//object by default. Position the x,y, location of the thumbnail object so that
//it pops up just below a minimized window. If the web window that was cloned
//had any icons highlighted (blue background color) as a result of user 
//interaction before being cloned, remove the thumbnail object's highlights
//by removing their background using CSS. 
function make_thumbnail(win_id) {
    
    var win = null;
    var top_container = null;
    var single_thumbnail_container = null;
    var thumbnail_HTML = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        top_container = get_all_thumbnails_top_container();
        if (top_container !== null) {
            single_thumbnail_container = get_single_thumbnail_container();
            if (single_thumbnail_container !== null) {
                top_container.appendChild(single_thumbnail_container);
                thumbnail_HTML = get_thumbnail_outer_HTML(win_id);
                if (thumbnail_HTML !== null) {
                    
                    //setup the thumbnail and its functionality
                    create_config_save_show_thumbnail(win_id, thumbnail_HTML); //setup the thumbnail and its functionality
                    
                }
            }
        }
    }
    return thumbnail_HTML;
}

//delete any thumbnail container in the thumbnail's
//container. This ensures that we get a fresh, updated thumbnail
//instead of an old cached copy.
function delete_current_thumbnail_in_container(win_id) {
    var thumbnail_id = null;
    var thumb = null;

    thumbnail_id = "copied_node_" + win_id;
    thumb = document.getElementById(thumbnail_id);
    if (thumb !== null) {
        thumb.parentNode.removeChild(thumb);
    }
}

function get_thumbnail_outer_HTML(win_id) {
    
    var thumbnail_HTML = null;

    //get the thumbnail window outerHTML. If it doesn't exist
    //in the global array object, then insert it.
    thumbnail_HTML = get_and_save_thumbnail_outerHTML(win_id);

    return thumbnail_HTML;
}

//2023-06-24: creating a separate function to do all the work related to
//configuring and displaying thumbnails. This is intended for use with the
//'single_thumbnail_container' thumbnail features. 
//Not for use w/ "cached_thumbnails" functionality
function create_config_save_show_thumbnail(win_id, thumbnail_HTML) {
    //var is_expired = null;
    //var thumbnail_expired = null;
    var single_thumbnail_container = null;
    var win = null;

    //get the container object that holds the thumbnail
    single_thumbnail_container = get_single_thumbnail_container();

    //remove thumbnail HTML from the thumbnail's container,
    //and place data for showing different thumbnail into
    //the container.
    single_thumbnail_container.innerHTML = "";
    single_thumbnail_container.innerHTML = thumbnail_HTML;

    //2023-09-19:
    //This is a function call which disables the thumbnail from having any ability to
    //interact in any way in terms of user interaction. 
    //See file: 'functions_2.js'
    //remove_all_event_listeners_and_event_handlers(document.getElementById("copied_node_" + win_id));
    ////remove_all_event_listeners_and_event_handlers(single_thumbnail_container);

    single_thumbnail_container.style.border = "1px solid rgba(255,0,0,0.00)";
    single_thumbnail_container.style.borderRadius = "4px";
    //single_thumbnail_container.style.width = parseFloat(single_thumbnail_container.offsetWidth) + "px";
    //single_thumbnail_container.style.height = (parseFloat(single_thumbnail_container.offsetHeight) - parseFloat(single_thumbnail_container.scrollTop)) + "px";
    //single_thumbnail_container.style.zoom = 0.334;


    show_thumbnail_top_container();
    ////show_thumbnail_window_as_cascaded("copied_node_" + win_id);
    //hide_single_thumbnail();
    remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0002");
    remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0000");

    //2023-06-25: This function places the newly made thumbnail into
    //the DOM cache so it can quickly load when accessed in the future
    save_thumbnail_to_dom("copied_node_" + win_id, thumbnail_HTML);


    //2023-06-25: Remember to move this call to a location that is
    //This function call doesn't belong here. This function only checks for the
    //existence of thumbnails that are cached inside the DOM. It won't work
    //for thumbnails in the 'single_thumbnail_container' object.
    ////thumbnail_expired = is_thumbnail_expired(win_id);
    ////console.log("Expired: " + thumbnail_expired);


    //This sets the cache expiration date on thumbnails that are generated by the
    //'single_thumbnail_container' object. Not for DOM cached thumbnails.
    set_thumbnail_cache_expiration_date("copied_node_" + win_id, 0);

    //2025-01-15:
    //if the code editors are present in the window, then
    //upon minimizing them, their maximum and minimum width
    //and height are constrained. the following code removes
    //any width and height restraints on the thumbnail window.
    win = document.getElementById("copied_node_" + win_id);
    if (win !== null) {
        win.style.maxHeight = "unset";
        win.style.minHeight = "unset";
        win.style.maxWidth = "unset";
        win.style.minWidth = "unset";
    }

    //2023-09-19:
    //When the thumbnail window appears, display it as cascaded.
    //Currently, I'm fixing a bug that displays thumbnail objects
    //correctly, and placing this function to occur upon display
    //of thumbnail. It appears to work fine as of now.
    show_thumbnail_window_as_cascaded("copied_node_" + win_id);


    position_thumbnail_to_web_window(win_id);

    //2023-08-20: Call the function that hides the scrollbars of an object.
    //In this case, we're hiding scrollbars on thumbnail objects
    hide_scrollbars(("copied_node_" + win_id + "_contents_container"));


    //2023-09-19:
    //sets an attribute to the window object indicating that it is a thumbnail object.
    //see file 'thumbnail_functions.js'.
   /*
   if (is_object_thumbnail_window(win_id) !== "true" && is_object_thumbnail_window(win_id) !== true) {
        set_object_thumbnail_true(win_id);
    }
    */

    //2023-08-22:
    //a function that is made to shrink iframe content within a thumbnail.
    ////shrink_any_window_content_iframes("copied_node_" + win_id);

    //2023-07-20: Hide all thumbnails, new or cached. Display newly loaded thumbnail.
    ////hide_all_thumbnails();
    ////show_single_thumbnail(win_id);


    //alert("Expired: " + is_thumbnail_expired(win_id));

    //2023-06-24: Keep this, as it may be used later.
    //check to see if thumbnail stored in cache needs
    //to be refreshed with an up to date thumbnail.
    /*******
    is_expired = thumbnail_is_expired(win_id);
    if (is_expired !== true && is_expired !== false) {
    }
    else if (is_expired === false) {
    }
    else if (is_expired === true) {
    }
    else {
    }
    *********/

    //if the code editor is present in the THUMBNAIL window,
    //then show the code editor, and size the code
    //editor objects to fit the THUMBNAIL window's content
    //container. see file: 'code_editor_functions.js'
    if (is_code_editor_present("copied_node_" + win_id) === true && is_code_editor_present(win_id) === true) {
        show_code_editor("copied_node_" + win_id);
        resize_tabs_bar("copied_node_" + win_id);
        on_cascade_resize_objects("copied_node_" + win_id);
    }

}




//temporarily disable the "shrink window content iframes."
async function shrink_any_window_content_iframes(cloned_win_id) {
    return;
    // ("copied_node_" + win_id + "_contents_container")
    var iframe_obj = null;
    var iframes = null;
    var cloned_win_content = null;
    var thumbnail_win_dom_objects = null;
    var child_object_count = null;
    var child_node = null;
    var iframe_body = null;
    var i = null;
    var iframe_node = null;
    var iframe_HTML = null;
    var new_iframe_node = null;
    //var base_url = null;

    cloned_win_content = document.getElementById(cloned_win_id + "_contents_container");
    if (cloned_win_content !== null) {
        thumbnail_win_dom_objects = cloned_win_content.getElementsByTagName("*");
        child_object_count = thumbnail_win_dom_objects.length;
        for (i = 0; i < child_object_count;i++) {
            child_node = thumbnail_win_dom_objects[i];
            if (child_node !== null) {
                if (child_node.tagName.toLowerCase() === "iframe") {
                    iframe_obj = child_node;
                    //alert(iframe_obj.src);
                    iframe_HTML = await get_iframe_data(iframe_obj.src);
                    new_iframe_node = HTML_to_node(iframe_HTML);


                    //if (new_iframe_node.hasAttribute("src") === true) {
                    //    new_iframe_node.removeAttribute("src");
                    //}

                    ////new_iframe_node = new_iframe_node.getElementsByTagName("*");
                    new_iframe_node.style.zoom = 0.5;

                    //var doc = document.createElement("html");
                    //var body = document.createElement("body");

                    //body.setAttribute("onload", "alert('hello world!');");
                    //body.addEventListener("load", function () {
                    //    alert("loaded");
                    //});

                    //doc.appendChild(body);

                    //doc.outerHTML = new_iframe_node.innerHTML;

                    


                    ////iframe_obj.outerHTML = "<html>" + new_iframe_node.innerHTML + "</html>";

                    
                    iframe_obj.outerHTML = new_iframe_node.innerHTML;

                    //console.log(new_iframe_node.getElementsByTagName("div")[0].innerHTML);

                    //iframe_document = iframe_obj.contentWindow.document.getElementsByTagName("html")[0]; //get the first <H1> tag in the IFrame's document.
                    ////iframe_document = iframe_obj.contentWindow.document.documentElement;
                    //iframe_document = iframe_obj.contentWindow.document.getElementsByTagName("*")[0];
                    //console.log("shrinking an iframe within a thumbnail");
                    //console.log(iframe_obj.contentWindow.document.getElementsByTagName("*")[0].outerHTML);
                    //iframe_document.style.zoom = 0.5;
                    //iframe_document.style.zoom = 0.5;
                    //iframe_obj.contentWindow.document.documentElement.style.zoom = 0.5;
                    ////iframe_document.style.zoom = 0.5;
                    //console.log(iframe_obj.contentWindow.document.documentElement.outerHTML);

                    ////iframe_node = document.importNode(iframe_obj.contentWindow.document.body, true);
                    ////iframe_node.style.zoom = 0.5;
                    ////console.log(iframe_node.outerHTML);

                    //iframe_document.style.zoom = 0.5;

                    //iframe_obj.contentWindow.document.documentElement.style.zoom = 0.5;
                    //console.log(iframe_obj.contentWindow.document.body.innerHTML);

                }
            }
        }
    }
    /**********************************************************************
    NOTE: Revised on 2023-08-22:
    NOTE: 2023-02-10 2:00PM
    Putting this here so I remember it. 
    It's the example code for getting an 
    element inside a web page's IFrame, and
    importing it into the the current document containing the IFrame
    For more information on this: https://stackoverflow.com/a/53276239
    View the full thread about this topic at: https://stackoverflow.com/questions/39372886/document-importnode-vs-node-clonenode-real-example
    var frame = document.getElementsByTagName("IFRAME")[0] //get an IFrame element within your document
    var h = frame.contentWindow.document.getElementsByTagName("H1")[0]; //get the first <H1> tag in the IFrame's document.
    var x = document.importNode(h); //place the <H1> element from the IFrame into the current document
    *********************************************************************/
}




function make_new_thumbnail_save_to_DOM_cache(win_id) {
    var thumbnail_HTML = null;

    thumbnail_HTML = get_thumbnail_outer_HTML(win_id);

    show_thumbnail_window_as_cascaded("copied_node_" + win_id + "_is_cached");

    cached_thumbnail_icon_eye_td = document.getElementById("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0000");
    cached_thumbnail_icon_cascade_td = document.getElementById("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0002");

    //remove background from thumbnail icons
    //cached_thumbnail_icon_eye_td.setAttribute("id", cached_thumbnail_icon_eye_td.id + "_eye_icon_td");
    //cached_thumbnail_icon_cascade_td.setAttribute("id", cached_thumbnail_icon_cascade_td.id + "_cascade_icon_td");


    remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0002");
    remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0000");

    //2023-06-25: This function places the newly made thumbnail into
    //the DOM cache so it can quickly load when accessed in the future
    save_thumbnail_to_dom("copied_node_" + win_id, thumbnail_HTML);


    //2023-06-25: Remember to move this call to a location that is
    //This function call doesn't belong here. This function only checks for the
    //existence of thumbnails that are cached inside the DOM. It won't work
    //for thumbnails in the 'single_thumbnail_container' object.
    ////thumbnail_expired = is_thumbnail_expired(win_id);
    ////console.log("Expired: " + thumbnail_expired);


    //This sets the cache expiration date on thumbnails that are generated by the
    //'single_thumbnail_container' object. Not for DOM cached thumbnails.
    set_thumbnail_cache_expiration_date("copied_node_" + win_id, 0);
}

//this function checks for the presence of thumbnail data that's
//ALREADY CACHED in the DOM. This function doesn't work
//for checking expiration dates on thumbnails that are loaded 
//into the 'single_thumber_container' thumbnail container object
function is_thumbnail_expired(win_id) {
    var cached_thumbnail_expiration_date = null;
    var current_date_in_seconds = null; 

    //if thumbnail object is stored in cache, check its expiration date
    if (thumbnail_is_cached("copied_node_" + win_id) === true) {
        cached_thumbnail_expiration_date = get_thumbnail_cache_expiration_date("copied_node_" + win_id);
        if (cached_thumbnail_expiration_date !== null) {
            if (typeof cached_thumbnail_expiration_date === "number") {
                current_date_in_seconds = parseFloat(get_date_in_seconds()); //parseFloat(new Date().getSeconds());

                //2023-06-25: Using an alert box to check if the expiration time is correctly
                //calculated with the expected numbers. The difference between these two date
                //values can be converted from seconds to days by dividing the difference by (24 * 3600). 
                //alert(((cached_thumbnail_expiration_date - current_date_in_seconds) / (24 * 3600)));

                if (current_date_in_seconds >= cached_thumbnail_expiration_date) {
                    //thumbnail is expired
                    //alert("expired");
                    return true;
                }
                else if (current_date_in_seconds < cached_thumbnail_expiration_date) {
                    //not yet expired
                    //alert("valid");
                    return false;
                }
                else {
                    //invalid, or missing date parameter input.
                    //alert("null");
                    return null;
                }
            }
        }
    }
}


//checks to see if thumbnail object is stored in cache (inside the DOM).
//If a valid thumbnail is present in the cache, return true. Otherwise, return false.
//if it's not there return false
function thumbnail_is_cached(thumbnail_id) {
    var thumbnail = null;
    var is_cached = null;

    is_cached = false;
    thumbnail = document.getElementById(thumbnail_id);
    if (thumbnail !== null) {
        if (thumbnail.hasAttribute("id") === true) {
            is_cached = true;
        }
    }
    return is_cached;
}




//this function takes a cloned DOM object, and an HTML attribute name as input.
//For all child nodes within a cloned node object, change every HTML node's
//value to something unique. 
//This prevents a cloned DOM object from having the same HTML attributes (ID attribute in this case),
//from having conflicts with other existing elements that share the same ID/name/attribute, what not. 
function configure_thumbnail_clone_attribute(cloned_window, attribute) {
    
    var node_length = null;
    var i = null;
    var node_object = null;
    var attribute_node = null;
    var attr = null;
    var all_nodes = null;

    attr = attribute;
    if (cloned_window !== null) {
        cloned_window.setAttribute("id", "copied_node_" + cloned_window.id);
        cloned_window.setAttribute("name", "copied_web_window");

        all_nodes = get_node_children(cloned_window);
        if (all_nodes !== null) {
            node_length = all_nodes.length;
            for (i = 0; i < node_length; i++) {
                node_object = all_nodes[i];
                if (node_object.hasAttribute(attr) === true) {
                    attribute_node = node_object.getAttribute(attr);
                    if (attribute_node !== null && attribute_node !== "") {
                        if (attribute_node.indexOf("copied_node_") === -1.0) {
                            node_object.setAttribute(attr, "copied_node_" + attribute_node);
                        }
                    }
                }
            }
        }
    }
    return cloned_window;
}






//gets all child nodes that exist within a node object.
//This function returns every child node of a cloned web window
//in the form of an array.
function get_node_children(node_object) {
    var all_nodes = null;

    if (node_object !== null) {
        all_nodes = node_object.getElementsByTagName("*");
    }
    return all_nodes;
}



//gets the outer HTML of a web window's thumbnail object which
//is stored in a 2 dimensional global array.
//If the does not exist in the global array, add it to the array.
//returns the thumbnail outer HTML when complete.
function get_and_save_thumbnail_outerHTML(win_id) {
    
    var thumbnail_HTML = null;
    var thumbnail_window_data = null;
    var cloned_window = null;

    thumbnail_window_data = get_thumbnail_data_from_global_array(win_id);
    if (thumbnail_window_data !== null) {
        thumbnail_HTML = thumbnail_window_data;
    }
    else {
        cloned_window = make_web_window_clone(win_id);
        if (cloned_window !== null) {
            cloned_window = shrink_web_window_clone(cloned_window);
            store_thumbnail_in_global_array(cloned_window.outerHTML, "copied_node_" + win_id);
            thumbnail_HTML = get_thumbnail_data_from_global_array(win_id);
        }
    }
    return thumbnail_HTML;
}



//when cloning a web window when the web window is minimized,
//it shows up appearing as a minimized web window thumbnail.
//This sets the web window to a cascaded state that may be
//used as a thumbnail of a web window.
function show_thumbnail_window_as_cascaded(thumbnail_win_id) {
    
    var thumbnail = null;

    thumbnail = document.getElementById(thumbnail_win_id);
    if (thumbnail !== null) {
        cascade_thumbnail_window(thumbnail_win_id);

        ////thumbnail.childNodes[0].style.height = parseFloat(thumbnail.style.height) + "px";
        ////thumbnail.childNodes[0].style.width = parseFloat(thumbnail.style.width) + "px";
        //2024-03-17:
        //commented out the 'left' position setting where it originally resided.
        //see function: 'position_thumbnail_to_web_window(win_id)'
        thumbnail.style.left = "0";
    }
}


//this makes the thumbnail's container visible, hence
//making its thumbnail content visible.
function make_thumbnail_visible() {
    var single_thumbnail_container = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");

    if (single_thumbnail_container !== null) {
        //single_thumbnail_container.style.display = "block";
        //2023-06-24: Instead of showing the single thumbnail, 
        //show the parent container instead
        show_thumbnail_top_container();

        single_thumbnail_container.style.opacity = 1.0;
        single_thumbnail_container.style.zIndex = parseFloat(top_zIndex()) + 10000000000;
        
    }
}



//when the 'eye' icon (left-most icon in a minimized web window)
//is hovered over, it prevents the corresponding icon background color
//in the corresponding thumbnail object's icon from showing any background color. 
//When the 'minimize' icon is hovered over/clicked on, this prevents 
//the corresponding thumbnail object's 'minimize' icon from 
//having a background color as well.
function remove_bg_color(elem_id) {
    var elem = null;

    elem = document.getElementById(elem_id);
    if (elem !== null) {
        elem.style.background = 'none';
    }
}




//makes a cloned node of a web window that will serve as
//a thumbnail.
function make_web_window_clone(win_id) {
    var win = null;
    var cloned_window = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        cloned_window = win.cloneNode(true); //clone web window, and inclue its child nodes

        //2023-09-19:
        //This is a function call which disables the thumbnail from having any ability to
        //interact in any way in terms of user interaction.
        //See file: 'functions_2.js'
        //remove_all_event_listeners_and_event_handlers(document.getElementById("copied_node_" + win_id));
        remove_all_event_listeners_and_event_handlers(cloned_window);

        cloned_window = configure_thumbnail_clone_attribute(cloned_window, "id"); //change the value of the cloned element's HTML ID attribute

        //uncomment the following line if further configurations need to be performed on the cloned window.
        cloned_window = configure_thumbnail(cloned_window);


        //2023-09-19:
        //I commented this out just after creating it. Now, the errors
        //aren't popping up.
        //2023-09-19:
        //If thumbnail is showing the code editor, the thumbnail renders
        //with the code editor appearing under the thumbnail. Trying
        //to fix this by cascading the window immediately after cloning.
        ////cascade_window(cloned_window.id);


        return cloned_window;
    }
}


//this function was written to make configuration changes
//to a cloned web window that may be necessary in the future.
//as of now, it makes no changes to the cloned window.
function configure_thumbnail(cloned_window) {
    if (cloned_window !== null) {
        //do nothing. If the cloned window needs further configuration,
        //then write the configuration code, here.
        ////cloned_window.childNodes[0].style.height = parseFloat(cloned_window.style.height) + "px";
       
    }
    return cloned_window;
}




//this takes a full-sized clone of a cascaded web window
//and shrinks it down to thumbnail size.
//2023-07-20: NOTE: I added dropd shadow CSS to thumbnail.
function shrink_web_window_clone(cloned_window) {
    var cw = null;

    cw = cloned_window;
    cw.style.zoom = 0.5;
    cw = add_thumbnail_dropshadow(cw);
    cw = set_thumbnail_bg_color(cw);

    //cw.style.opacity = 0;
    //cw = set_thumbnail_CSS_animations(cw);

    return cw;
}




function add_thumbnail_dropshadow(cloned_window) {
    //2023-07-20: you can also use the global web window drop shadow variable
    //to set the box shadow of the cloned thumbnail window
    //cloned_window.style.boxShadow = global_inactive_window_dropshadow;
    cloned_window.style.boxShadow = "rgba(0, 0, 0, 0.85) 33px 36px 60px 9px";
    return cloned_window;
}



function set_thumbnail_bg_color(elem) {

    if (elem !== null) {
        elem.style.background = "rgb(153,153,153)";
    }
    return elem;
}




function set_thumbnail_CSS_animations(elem) {
    if (elem !== null) {
        most_customizable_config_elem_for_animation(elem.id, "opacity", "0.334", "0.005");
    }
    return elem;
}



//2023-06-21: make a container div that will serve as a top parent 
//node which will container all thumbnail elements in the DOM
function get_all_thumbnails_top_container() {
    var top_container = null;

    top_container = document.getElementById("thumbnail_top_container");
    if (top_container !== null) {
        return top_container;
    }
    else {
        top_container = document.createElement("div");
        top_container.setAttribute("id", "thumbnail_top_container");
        top_container.style.display = "none";
        top_container.style.opacity = 0;
        top_container.style.zIndex = parseFloat(top_zIndex()) + 1000000000;

        document.body.appendChild(top_container);
        return top_container;
    }

}


//if the thumbnail container object exists, return it. 
//if it does not exist, create it, and return it.
function get_single_thumbnail_container() {
    var single_thumbnail_container = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        return single_thumbnail_container;
    }
    else {
        single_thumbnail_container = document.createElement("div");
        single_thumbnail_container.setAttribute("id", "single_thumbnail_container");
        single_thumbnail_container.style.position = "absolute";
        single_thumbnail_container.style.width = "20px";
        single_thumbnail_container.style.height = "20px";
        single_thumbnail_container.style.display = "block";
        single_thumbnail_container.style.opacity = 1.0;
        //adds a visible border to the thumbnail container for testing purposes. 
        single_thumbnail_container.style.border = "0.5px none rgba(255,0,0,0.00)";

        return single_thumbnail_container;
    }
}


//this makes the thumbnail's parent container hidden, hence
//simultaneously making the thumbnail object hidden.
function hide_single_thumbnail(win_id) {
    var single_thumbnail_container = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        //2023-06-24: instead of hiding just the thumbnail, 
        //hide the entire thumnails top parent node
        hide_thumbnail_top_container(); 

        //single_thumbnail_container.style.opacity = 0;
        single_thumbnail_container.style.display = "none";
        single_thumbnail_container.style.opacity = 0;

        //adds CSS style to the minimized window back to its default appearance
        stylize_for_display_of_default(win_id);
    }
}


//this makes the thumbnail's parent container visible, hence
//simultaneously making the thumbnail object visible.
function show_single_thumbnail(win_id) {
    var single_thumbnail_container = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        //2023-06-24: instead of showing just the thumbnail, 
        //show the entire thumnails top parent node
        show_thumbnail_top_container();

        single_thumbnail_container.style.display = "block";

        single_thumbnail_container.style.opacity = 1.0;

        //set the backgrounds of these icons to none
        remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0002");
        remove_bg_color("copied_node_" + win_id + "_tbl_0000_tr_0000_td_0000");

        //adds CSS style to the minimized window when thumbnail is showing
        stylize_for_display_of_thumbnail(win_id);
    }
}




function show_cached_thumbnail(win_id) {
    var thumbnail = null;

    thumbnail = document.getElementById("copied_node_" + win_id + "_in_DOM_container");
    if (thumbnail !== null) {
        thumbnail.style.opacity = 1.0;
        thumbnail.style.display = "block";
    }
}



function hide_cached_thumbnail(win_id) {
    var thumbnail = null;

    thumbnail = document.getElementById("copied_node_" + win_id + "_in_DOM_container");
    if (thumbnail !== null) {
        thumbnail.style.opacity = 0;
        thumbnail.style.display = "none";
    }
}




function remove_single_thumbnail_container_content() {
    var single_thumbnail_container = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        single_thumbnail_container.innerHTML = "";
    }
}


function remove_single_thumbnail_container() {
    var single_thumbnail_container = null;

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


function stylize_for_display_of_thumbnail(win_id) {
    var w = null;
    //var top_row_object = null;

    w = document.getElementById(win_id);
    if (w !== null) {
        w.style.backgroundColor = "rgb(175,175,175)";
       // top_row_obj = document.getElementById(w.id + "_tbl_0000_tr_0000");
      //  if (top_row_object !== null) {
            //top_row_object.style.backgroundColor = "rgb(153, 153, 153)"; //default color
      //      top_row_object.style.backgroundColor = "rgb(138, 138, 138)"; //selected item background color
      //  }
    }
}



function display_code_editors_if_present(cloned_win_id) {
    ////return;
    var code_editor_container = null;
    var win = null;
    var developer_panel = null;
    var single_thumbnail_container = null;
    var thumbnail_top_container = null;
    var javascript_iframe = null;
    var html_iframe = null;
    var css_iframe = null;
    var inner_contents_container = null;
    var contents_container = null;
    var clip_width = null;

    clip_width = 6;

    thumbnail_top_container = document.getElementById("thumbnail_top_container");
    if (thumbnail_top_container !== null) {
        thumbnail_top_container.style.display = "block";
        thumbnail_top_container.style.opacity = 1.0;
    }

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        single_thumbnail_container.style.display = "block";
        single_thumbnail_container.style.opacity = 1.0;
    }


    code_editor_container = document.getElementById(cloned_win_id + "_code_editor_container");
    if (code_editor_container !== null) {
        win = document.getElementById(cloned_win_id);
        if (win !== null) {
            win.childNodes[1].style.width = parseFloat(win.style.width) + "px";
            win.childNodes[1].style.height = parseFloat(win.style.height) + "px";
            code_editor_container.style.display = "block";
            code_editor_container.style.width = (parseFloat(win.style.width) - clip_width) + "px";
            developer_panel = document.getElementById(cloned_win_id + "_developer_panel");
            if (developer_panel !== null) {
                developer_panel.style.display = "flex";
                developer_panel.style.width = (parseFloat(win.style.width) - clip_width) + "px";
                inner_contents_container = document.getElementById(cloned_win_id + "_inner_contents_container");
                if (inner_contents_container !== null) {
                    inner_contents_container.style.display = "none";
                }
                javascript_iframe = document.getElementById(cloned_win_id + "_code_editor_iframe_javascript");
                if (javascript_iframe !== null) {
                    javascript_iframe.style.width =  (parseFloat(win.style.width) - clip_width) + "px";
                }
                html_iframe = document.getElementById(cloned_win_id + "_code_editor_iframe_html");
                if (html_iframe !== null) {
                    html_iframe.style.width = (parseFloat(win.style.width) - clip_width) + "px";
                }
                css_iframe = document.getElementById(cloned_win_id + "_code_editor_iframe_css");
                if (css_iframe !== null) {
                    css_iframe.style.width = (parseFloat(win.style.width) - clip_width) + "px";
                }
            }
        }
    }
}




function stylize_for_display_of_default(win_id) {
    var w = null;
    var top_row_object = null;


    w = document.getElementById(win_id);
    if (w !== null) {
        w.style.backgroundColor = "rgb(153,153,153)";
        //top_row_obj = document.getElementById(w.id + "_tbl_0000_tr_0000");
        //if (top_row_object !== null) {
        //    //top_row_object.style.backgroundColor = "rgb(153, 153, 153)"; //default color
        //    top_row_object.style.backgroundColor = "rgb(153, 153, 153)"; //set bg color back to default value
        //}
    }
}



////this makes the thumbnail's parent container visible, hence
////simultaneously making the thumbnail object itself visible.
//function show_thumbnail(win_id) {
//    var single_thumbnail_container = null;

//    var is_thumbnail_cached_in_DOM = null;
//    var cached_thumbnail = null;
//    var is_cached_thumbnail_expired = null;

//    cached_thumbnail = document.getElementById("copied_node_" + win_id + "_in_DOM_container");

//    if (cached_thumbnail !== null) {
//        is_cached_thumbnail_expired = is_thumbnail_expired(win_id);
//        if (is_cached_thumbnail_expired === false) {
//            //thumbnail exists in DOM, and is NOT expired.
//            //get and show cached thumbnail

//        }
//        else {
//            //thumbnail exists in DOM, and is expired
//            //get and show newly made thumbnail to replace expired thumbnail
//            single_thumbnail_container = document.getElementById("single_thumbnail_container");
//            if (single_thumbnail_container !== null) {
//                //2023-06-24: instead of showing just the thumbnail, 
//                //show the entire thumnails top parent node
//                show_thumbnail_top_container();

//                //single_thumbnail_container.style.display = "block";
//                cached_thumbnail.style.opacity = 1.0;
//                single_thumbnail_container.style.opacity = 0;
//            }
//        }
//    }
//    else {
//        //thumbnail does not exist in DOM cache.
//        //make the thumbnail. It does not exist in the DOM cache.
//        single_thumbnail_container = document.getElementById("single_thumbnail_container");
//        if (single_thumbnail_container !== null) {
//            //2023-06-24: instead of showing just the thumbnail, 
//            //show the entire thumnails top parent node
//            show_thumbnail_top_container();

//            //single_thumbnail_container.style.display = "block";
//            single_thumbnail_container.style.opacity = 1;
//        }
//    }
//}


//There is a top container which acts as a parent object
//for all thumbnail contents. This function
//makes the top container visible.
function show_thumbnail_top_container() {
    var top_container = null;

    top_container = document.getElementById("thumbnail_top_container");
    if (top_container !== null) {
        top_container.style.display = "block";
        top_container.style.opacity = 1;
        top_container.style.zIndex = parseFloat(top_zIndex()) + 1000000000;
    }
}



//There is a top container which acts as a parent object
//for all thumbnail contents. This function
//makes the top container invisible.
function hide_thumbnail_top_container() {
    var top_container = null;

    top_container = document.getElementById("thumbnail_top_container");
    if (top_container !== null) {
        top_container.style.display = "none";
        top_container.style.opacity = 0;
        top_container.style.zIndex = parseFloat(top_zIndex()) + 1000000000;
    }
}



//places the thumbnail to appear just below a minimized web window's
//bottom position when the user moves the mouse cursor
//over the 'eye' icon of a minimized window. When a web window is
//minimized, the burger icon (top left corner of window) changes to the
//eye icon.
function position_thumbnail_to_web_window(win_id) {
    
    var single_thumbnail_container = null;
    var win = null;
    var thumbnail = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        single_thumbnail_container = document.getElementById("single_thumbnail_container");
        if (single_thumbnail_container !== null) {
            thumbnail = document.getElementById("copied_node_" + win_id);
            if (thumbnail !== null) {

                remove_elem_animations(thumbnail.id);



                ////single_thumbnail_container.style.top = (parseFloat(window.scrollY) + parseFloat(win.offsetTop) + parseFloat(win.scrollTop) + 29) + "px";
                if (parseFloat(get_pixel_ratio()) === 1.25) {
                    single_thumbnail_container.style.top = (parseFloat(win.offsetTop) + parseFloat(window.scrollY) * (get_pixel_ratio()) + 29) + "px";
                }
                else {
                    single_thumbnail_container.style.top = (parseFloat(win.offsetTop) + parseFloat(window.scrollY) / (get_pixel_ratio()) + 29) + "px";
                }

                single_thumbnail_container.style.left = (parseFloat(win.offsetLeft) + 28) + "px";
                single_thumbnail_container.style.width = ((parseFloat(thumbnail.style.width) * 0.5) + 3) + "px";
                single_thumbnail_container.style.height = ((parseFloat(thumbnail.style.height) * 0.5) + 3) + "px";

                thumbnail.style.top = (parseFloat(win.scrollTop)) + "px";
                //2024-03-17:
                //commenting out the left position code for thumbnail.
                //now setting left position at function: 'show_thumbnail_window_as_cascaded(thumbnail_win_id)'
                ////thumbnail.style.left = (parseFloat(win.offsetLeft)) + "px";
            }
        }
    }
}




//places the CACHED thumbnail to appear just below a minimized web window's
//bottom position when the user moves the mouse cursor
//over the 'eye' icon of a minimized window. When a web window is
//minimized, the burger icon (top left corner of window) changes to the
//eye icon.
function position_CACHED_thumbnail_to_web_window(win_id) {
    
    var cached_thumbnail_container = null;
    var win = null;
    var cached_thumbnail = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        //cached_thumbnail_container = document.getElementById("copied_node_" + win_id + "_in_DOM_container");
        cached_thumbnail_container = document.getElementById("cached_thumbnails");
        if (cached_thumbnail_container !== null) {
            cached_thumbnail = document.getElementById("copied_node_" + win_id + "_in_DOM_container");
            if (cached_thumbnail !== null) {

                remove_elem_animations(cached_thumbnail.id);

                cached_thumbnail_container.style.top = (parseFloat(win.offsetTop) + 29) + "px";
                cached_thumbnail_container.style.left = (parseFloat(win.offsetLeft) + 28) + "px";
                cached_thumbnail_container.style.width = ((parseFloat(cached_thumbnail.style.width) * 0.5) + 3) + "px";
                cached_thumbnail_container.style.height = ((parseFloat(cached_thumbnail.style.height) * 0.5) + 0) + "px";
                cached_thumbnail.style.top = (parseFloat(win.scrollTop)) + "px";
                cached_thumbnail.style.left = (parseFloat(win.offsetLeft)) + "px";
            }
        }
    }
}


//This function stores the thumbnail's HTML, and its ID attribute,
//into a two dimensional global array. This allows you to get the
//thumbnail HTML by using the ID attribute value of the thumbnail.
function store_thumbnail_in_global_array(thumbnail_data, thumbnail_win_id) {
    var array_len = null;

    if (global_web_window_thumbnails_array !== null) {
        array_len = parseFloat(global_web_window_thumbnails_array.length);
        if (array_len > 0) {
            global_web_window_thumbnails_array = [[thumbnail_win_id, thumbnail_data]];
        }
        else {
            global_web_window_thumbnails_array = [[thumbnail_win_id, thumbnail_data]];
        }
    }
    else {
        global_web_window_thumbnails_array = [[thumbnail_win_id, thumbnail_data]];
        array_len = 1;
    }

   //console.log(global_web_window_thumbnails_array[array_len - 1].toString());
}


//retrives the thumbnail outer HTML from a 2 dimensional global array.
//if the the web window's thumbnail HTML is not found
//in the global array, then add it. The function then
//returns the thumbnail HTML text.
function get_thumbnail_data_from_global_array(win_id) {
    var thumbnail_win_id = null;
    var i = null;
    var global_web_window_thumbnails_array_length = null;
    var thumbnail_id = null;
    var thumbnail_window_data = null;
    var thumbnail = null;
    var web_window_thumbnails_array_element = null;

    thumbnail_win_id = "copied_node_" + win_id;

    if (global_web_window_thumbnails_array !== null) {
        global_web_window_thumbnails_array_length = parseFloat(global_web_window_thumbnails_array.length);
        for (i = 0; i < global_web_window_thumbnails_array_length; i++) {
            web_window_thumbnails_array_element = global_web_window_thumbnails_array[i];
            thumbnail_id = web_window_thumbnails_array_element[0];
            if (thumbnail_id === thumbnail_win_id) {
                thumbnail_window_data = web_window_thumbnails_array_element[1];
                //console.log(thumbnail_window_data);
            }
        }
    }
    else {
        thumbnail = document.getElementById(thumbnail_win_id);
        if (thumbnail !== null) {
            store_thumbnail_in_global_array(thumbnail.outerHTML, thumbnail_win_id);
            thumbnail_window_data = thumbnail.outerHTML;
        }
        else {

        }
    }

    return thumbnail_window_data;
}


//2023-06-26: This function will store the ID attribute values of
//selected thumbnail parent containers, and that of their thumbnail child object.
//This will allow us to designate exclusively one thumbnail and its container object
//to be selected as the active thumbnail element.  
function store_selected_thumbnail_object(thumbnail_parent_object_id) {
    var thumbnail_top_container = null;
    var thumbnail_container_id = null;
    var thumbnail_id = null;
    var thumbnail_parent = null;

    thumbnail_parent = document.getElementById(thumbnail_parent_object_id);
    if (thumbnail_parent !== null) {
        thumbnail_container_id = thumbnail_parent.getAttribute("id");
        if (thumbnail_container_id !== null) {
            thumbnail_top_container = document.getElementById("thumbnail_top_container");
            if (thumbnail_top_container !== null) {
                thumbnail_top_container.setAttribute("data-selected_thumbnail_container_id", thumbnail_parent.getAttribute("id"));
                if (thumbnail_parent.hasChildNodes() === true) {
                    if (thumbnail_parent.childNodes[0] !== null) {
                        thumbnail_id = thumbnail_parent.childNodes[0].getAttribute("id");
                        if (thumbnail_id !== null) {
                            thumbnail_top_container.setAttribute("data-selected_thumbnail_id", thumbnail_id);
                        }
                    }
                }
            }
        }
    }
}




//2023-06-26:
//This function's purpose is to retrieve the DOM ID attributes that have been stored
//as the selected/active thumbnail's ID, and the selected/active thumbnail's parent ID.
//It returns a two item string array. Item 0 is the 'thumbnail parent id', and array
//item 1 is the 'thumbnail id'. The 'thumbnail parent id' represents the container
//that holds the thumbnail object as a first and only child object. Use
//document.getElementById("example_id") to manifest these two objects
//that make up the parent and child objects of one single combined object.
function get_selected_thumbnail_objects() {
    var thumbnail_id = null;
    var thumbnail_parent_id = null;
    var thumbnail_top_container = null;
    var output_array = [];

    thumbnail_top_container = document.getElementById("thumbnail_top_container");
    if (thumbnail_top_container !== null) {
        if (thumbnail_top_container.hasAttribute("data-selected_thumbnail_container_id") === true) {
            if (thumbnail_top_container.hasAttribute("data-selected_thumbnail_id") === true) {
                thumbnail_parent_id = thumbnail_top_container.getAttribute("data-selected_thumbnail_container_id");
                thumbnail_id = thumbnail_top_container.getAttribute("data-selected_thumbnail_id");
                if (thumbnail_parent_id !== null) {
                    if (thumbnail_id !== null) {
                        output_array.push(thumbnail_parent_id.toString());
                        output_array.push(thumbnail_id.toString());
                        return output_array;
                    }
                }
            }
        }
    }
    return null;
}



//function hide_all_thumbnails() {
//    hide_all_cached_thumbnails();
//}



function hide_all_cached_thumbnails() {
    var thumbnails = [];
    var thumbnail_length = null;
    var i = null;
    var thumbnail = null;

    thumbnails = document.getElementsByName("cached_DOM_thumbnails");
    if (thumbnails !== null) {
        if (Array.isArray(thumbnails) === true) {
            thumbnail_length = thumbnails.length;
            for (i = 0; i < thumbnail_length; i++) {
                thumbnail = thumbnails[i];
                thumbnail.style.opacity = 0;
            }
        }
    }
}


//2023-08-23:
//gets data from any iframe within web window's contents
async function get_iframe_data(url) {
    //let d = await fetch(url);

    let d = await fetch(url, {
        method: "GET",
        headers: {
            "Content-Type": "text/plain;charset=UTF-8"
            //"Cache-Control": "no-cache"
            //"Set-Cookie": make_sameSite_cookie(),
            //"Access-Control-Allow-Origin": ""
        }
        //referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
        //mode: "no-cors", // same-origin, no-cors
        //credentials: "same-origin", // omit, include
        //}).then().catch();
    });
    let t = await d.text();
    return t;
}





//function hide_all_new_thumbnails() {

//    var thumbnails = [];
//    var thumbnail_length = null;
//    var i = null;
//    var thumbnail = null;

//    thumbnails = document.getElementsByName("copied_web_window");
//    if (thumbnails !== null) {
//        if (Array.isArray(thumbnails) === true) {
//            thumbnail_length = thumbnails.length;
//            for (i = 0; i < thumbnail_length; i++) {
//                thumbnail = thumbnails[i];
//                thumbnail.style.opacity = 0;
//                //2023-07-19:
//                //hide the entire thumnails top parent node container
//                hide_thumbnail_top_container();
//            }
//        }
//    }
//}



//2023-06-24: This currently isn't being used.
//The transparent image that covers over the web window's content
//also exists on thumbnail objects. Because the thumbnail object
//and all of its child node objects have a modified ID attribute value,
//the ui blocker image isn't deleted by the feature that implements it.
//it can't find it as the ID attribute value does not match. It has
//been modified to make it unique as not to interfere with other
//DOM elements that already have a certain ID attribute value.
/*
function delete_thumbnail_ui_block_image(win_id) {
    var ui_block_imgs = null;
    var ui_block_imgs_len = null;
    var i = null;
    var img = null;
    var contains_win_id = null;

    ui_block_imgs = document.getElementsByName("ui_blocking_image");
    if (ui_block_imgs !== null) {
        ui_block_imgs_len = ui_block_imgs.length;
        for (i = 0; i < ui_block_imgs_len; i++) {
            img = ui_block_imgs[i];
            contains_win_id = img.id.toString.indexOf(win_id);
            if (contains_win_id > -1.0) {
                img.parentNode.removeChild(img);
            }
        }
    }
}
*/


//2023-06-22: Not Currently In Use
//This function was written to hide the thumbnail image
//by hiding the CSS overflow, and shrinking the height and width of the
//thumbnail container which obscures the entire thumbnail.
/*
function mask_thumbnail() {
    var single_thumbnail_container = null;
    var i = null;
    var thumbnail_width = null;
    var thumbnail_height = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        thumbnail_width = parseFloat(single_thumbnail_container.offsetWidth);
        thumbnail_height = parseFloat(single_thumbnail_container.offsetHeight);
        single_thumbnail_container.overflow = "hidden";

        for (i = thumbnail_width; i >= 0; i--) {
            setTimeout(function () {
                single_thumbnail_container.style.width = i + "px";
            }, (i + 1) * i);
        }

        for (i = thumbnail_height; i >= 0; i--) {
            setTimeout(function () {
                single_thumbnail_container.style.height = i + "px";
            }, (i + 1) * i);
        }
    }
}
*/


//2023-06-22: Not Currently In Use
//This function was written to show the thumbnail image
//by hiding the CSS overflow, and enlarging the height and width of the
//thumbnail container which reveals the entire thumbnail.
/*
function reveal_thumbnail() {
    var single_thumbnail_container = null;
    var i = null;
    var thumbnail_width = null;
    var thumbnail_height = null;

    single_thumbnail_container = document.getElementById("single_thumbnail_container");
    if (single_thumbnail_container !== null) {
        thumbnail_width = parseFloat(single_thumbnail_container.offsetWidth);
        thumbnail_height = parseFloat(single_thumbnail_container.offsetHeight);
        single_thumbnail_container.overflow = "hidden";

        for (i = 0; i < thumbnail_width;i++) {
            setTimeout(function () {
                single_thumbnail_container.style.width = i + "px";
            }, (i + 1) * i);
        }

        for (i = 0; i < thumbnail_height; i++) {
            setTimeout(function () {
                single_thumbnail_container.style.height = i + "px";
            }, (i + 1) * i);
        }
    }
}
*/

//2024-03-17:
//added a function to handle cascading a minimized thumbnail
//window. The original 'cascade window' function also exists,
//but there are difference. Hence, this function was added.
function cascade_thumbnail_window(win_id) {
    var orig_x = null;
    var orig_y = null;
    var orig_w = null;
    var orig_h = null;
    var win_state = null;
    var win = null;
    var parent_minimized_window = null;


    reset_css_pixel_ratio(); //IMPORTANT for resetting the pixel ratio. Sets the ratio of CSS and regular pixels to 1:1

    win = document.getElementById(win_id);

    if (win != null) {
        //if we're cascading a thumbnail window,
        //we want to get its top and left coordinates
        //by getting the X, and Y from the original
        //minimized window's X, Y location.
        if (win_id.indexOf("copied_node_") > -1.0) {
            

            parent_minimized_window = document.getElementById(win_id.replace("copied_node_", ""));
            orig_x = parseFloat(parent_minimized_window.style.left);
            orig_y = parseFloat(parent_minimized_window.style.top);
            ////orig_w = parseFloat(parent_minimized_window.style.width);
            ////orig_h = parseFloat(parent_minimized_window.style.height);
        }
        else {
           return;
        }

        //2023-09-22:
        //Apply default CSS animation to element for
        //CSS properties: top, left, width, height, and box-shadow.
        //This CSS animation behaves the same way for all CSS properties
        //mentioned.
        //See file: 'window_2.js'
        ////set_animations_move_window(win_id);
        ////set_animations_default(win_id);

        win_state = win.getAttribute("data-window_state");
        //If the window is not Cascaded, then it is either
        //minimized, or maximized. Cascade the window.
        if (win_state !== "Cascade") {

            win.style.position = "absolute";

            ////orig_x = win.getAttribute("data-orig_x");
            ////orig_y = win.getAttribute("data-orig_y");
            orig_w = win.getAttribute("data-orig_w");
            orig_h = win.getAttribute("data-orig_h");

            ////win.style.left = parseFloat(orig_x) + "px";
            ////win.style.top = parseFloat(orig_y) + "px";
            win.style.width = parseFloat(orig_w) + "px";
            win.style.height = parseFloat(orig_h) + "px";

            win.childNodes[0].style.width = win.style.width;
            win.childNodes[0].style.height = win.style.height;
            win.childNodes[0].style.width = parseFloat(orig_w) + "px";
            win.childNodes[0].style.height = parseFloat(orig_h) + "px";
            win.childNodes[0].style.opacity = 1.0;

            //These 3 methods resize the code editor (if showing) when the window is Cascaded
            ////resize_menu_bar(win_id);
            resize_tabs_bar(win_id);
            on_cascade_resize_objects(win_id);

            win.setAttribute("data-is_minimized", "false");
            win.setAttribute("data-is_maximized", "false");
            win.setAttribute("data-window_state", "Cascade");

            resize_contents_container(win_id);

            //resize the image that blocks unwanted user interaction
            resize_window_adjust_blocking_image(win_id);

            if (is_code_editor_present(win_id) === true) {
                on_maximize_resize_code_window(win_id); //if the code editor is visible and present, resize it accordingly
            }

            //update_window_details(win_id); //if window details are showing, update them

            //Set the web window's 3 upper right icons
            //that are used to change the web window's "state" (or display) 
            //to match the state the web window is in: "cascade", "maximized", "minimized"
            set_window_state_icons(win_id);

            //if the web window is not maximized, enable the resize icon in case it's disabled
            enable_resize_icon(win_id);

            ////minimize_window_main(); ////show/hide minimized window menu scroll box (see minimize_window.js)

            //this sets the web window's bg color to default on cascade.
            win.style.backgroundColor = global_window_bgColor;


            //Upon minimizing a window, its drop shadow is removed.
            //Now that the window is considered cascaded, the drop
            //shadow can be reset.
            win.style.boxShadow = global_inactive_window_dropshadow;



            //2023-09-22:
            //This resizes the bar object for resizing. In this case,
            //we are resizing the bar that provides only X resizing.
            //See file 'set_x_resize.js'
            ////set_size_resize_bar_x(win_id);

            //2023-09-23:
            //This resizes the bar object for resizing. In this case,
            //we are resizing the bar that provides only Y resizing.
            //See file 'set_y_resize.js'
            ////set_size_resize_bar_y(win_id);

            //2024-03-13:
            //if any windows are displayed in tab mode, set the tabs
            //container to visible. 
            ////show_tabs_container();
        }
    }
}