"use strict";

//this function adds a blank image over the web window contents
//preventing unwanted user interaction
//(specifically when a web window that has an iframe is clicked on to be selected, iframes don't react).
//This places a transparent image over the web window content object on top of any iframes, or any
//content for that matter
function block_window_content_container(win_id) {
    
    var win = null;
    var contents_container = null; 
    var content_blocking_img = null;
    var contents_td_top = null;
    var contents_td_left = null;
    var contents_td_width = null;
    var contents_td_height = null;

    //get the web window object
    win = document.getElementById(win_id);
    if (win !== null) {
        //create the UI blocking layer, which is a blank image
        content_blocking_img = new Image();
        content_blocking_img.setAttribute("src", global_cached_blank_img.src);
        content_blocking_img.setAttribute("id", win_id + "_block_window_content_container_img");
        content_blocking_img.setAttribute("name", "ui_blocking_image");
        content_blocking_img.style.position = "absolute";
        content_blocking_img.style.userSelect = "none";

        //if testing mode is set to true, make the UI blocking layer opaque white
        //in order to view its behavior.
        if (global_ui_interaction_window_content_block_test_mode === true) {
            content_blocking_img.style.opacity = 0.8;
            content_blocking_img.style.backgroundColor = "rgba(255,255,255, 0.8)";
            content_blocking_img.style.userSelect = "none";
        }
        else {
            content_blocking_img.style.opacity = 0.0;
            content_blocking_img.style.backgroundColor = "rgba(255,255,255, 0.0)";
            content_blocking_img.style.userSelect = "none";
        }

        //this is the contents box of the web window
        contents_container = document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000");
        
        if (contents_container !== null) {
            contents_container.style.userSelect = "none";

            //get the content container size and location
            contents_td_top = parseFloat(contents_container.offsetTop);
            contents_td_left = parseFloat(contents_container.offsetLeft);
            contents_td_width = parseFloat(contents_container.offsetWidth);
            contents_td_height = parseFloat(contents_container.offsetHeight);

            //set the blocking image to fit over the entire web-window contents section
            content_blocking_img.style.top = contents_td_top + "px";
            content_blocking_img.style.left = contents_td_left + "px";
            content_blocking_img.style.width = contents_td_width + "px";
            content_blocking_img.style.height = contents_td_height + "px";


            if (document.getElementById(win_id + "_block_window_content_container_img") !== null) {
            //continue, it already exists
            }
            else {
                win.appendChild(content_blocking_img); //the UI blocking image doesn't exist, so it's created and added to the DOM
            }


            //this hides any main menu items that are showing when the user
            //interacts with a web window
            content_blocking_img.addEventListener("mousedown", function (event) {
                var copied_event = null;
                var blocking_image = null;

                copied_event = event;

                ////event.preventDefault();
                ////event.stopPropagation();
                ////alert(content_blocking_img.id);
                ////unblock_window_content_container(win.id);
                
                ////the following function call sends the mousedown event
                ////that just occurred on the content blocking image to
                ////a function that creates a synthetic mousedown event
                ////at the same X, and Y location that the user clicked
                ////their mouse down upon. since the mouse down event that
                ////removes the content blocking image from the web-window's
                ////content container doesn't register as a mousedown event
                ////to the web-window's content container, then dispatch a
                ////similar synthetic mousedown with the web-window's content
                ////container as the event's target.
                ////window_content_mousedown_synthetic_event(event, win_id);
                //invoke_mouse_event(contents_container.id, "mousedown", event);
                ////window_content_mousedown_synthetic_event(contents_container, copied_event, win_id, "mouseenter");

                blocking_image = document.getElementById(content_blocking_img.id);
                if (blocking_image !== null) {
                    ////unblock_window_content_container(win_id);
                    block_all_window_content_containers();
                    unblock_window_content_container(win_id);
                }

                window_content_mousedown_synthetic_event(contents_container, copied_event, win_id, "mousemove");

                hide_submenus_when_blocking_ui();

                
                ////alert("M0o0oo!");
            });

            content_blocking_img.addEventListener("mouseout", function (event) {
                //    ////event.preventDefault();
                ////alert("mouseout");
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown", -1.0);
            });

            //content_blocking_img.addEventListener("load", function (event) {
            //    setTimeout(function () {
            //        content_blocking_img.src = "/chromosphere/images/blank.gif?r=" + (Math.floor(Math.random() * 9000000000) + 1000000000);
            //    }, 500);
            //    //    ////event.preventDefault();
            //    ////alert("blur");
            //    ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown", -1.0);
            //});

            contents_container.addEventListener("click", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "click", -1.0);
                ////console.log("the CLICK event has been triggered on the contents container.");
            });

            contents_container.addEventListener("mouseup", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mouseup", -1.0);
                ////console.log("the MOUSEUP event has been triggered on the contents container.");
            });

            contents_container.addEventListener("mousedown", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown", -1.0);
                ////console.log("the MOUSEDOWN event has been triggered on the contents container.");
            });

            contents_container.addEventListener("mouseenter", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown");
                ////var event_target = null;

                ////event_target = event.target;


                ////console.log("the MOUSEENTER event has been triggered on the contents container.");
            });

            contents_container.addEventListener("mouseover", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown");
                var event_target = null;

                event_target = event.target;

                ////console.log("MOUSEOVER contents container. \nevent target id: " + event.target.id);
            });

            win.addEventListener("mousemove", function (event) {
                ////window_content_mousedown_synthetic_event(contents_container, event, win_id, "mousedown");
                var event_target = null;

                event_target = event.target;

                if (event.target.id.indexOf("_inner_contents_container") > -1.0) {

                }

                if (event.target.id.indexOf("_block_window_content_container_img") > - 1.0) {
                    //    ////window_content_mouseevent_synthetic_event(element, event, win_id, "mousemove");
                    ////add_synthetic_mouse_event_listener(document.getElementById(event.target.parentNode.id) , event, win_id, "mouseenter");
                    ////dispatch_synthetic_mouse_event(document.getElementById(event.target.parentNode.id), event, win_id, "mouseenter");
                    ////return;

                }
                else {
                    ////add_synthetic_mouse_event_listener(event.target, event, win_id, "mouseover");
                    ////dispatch_synthetic_mouse_event(event.target, event, win_id, "mouseover");
                }

                if (event.target.id.indexOf("_inner_contents_container") > -1.0) {
                    ////add_synthetic_mouse_event_listener(document.getElementById(event.target.id), event, win_id, "mousemove");
                    ////dispatch_synthetic_mouse_event(document.getElementById(event.target.id), event, win_id, "mousemove");

                    ////add_synthetic_mouse_event_listener(event, win_id, "mouseenter");
                    ////dispatch_synthetic_mouse_event(event.target, event, win_id, "mouseenter");
                }


                //if (event.target.parentNode.getAttribute("name").indexOf("web_window") > - 1.0) {
                    ////window_content_mouseevent_synthetic_event(element, event, win_id, "mousemove");

                    ////dispatch_synthetic_mouse_event(event.target.parentNode, event, win_id, "mousemove");


                //}
                ////console.log("MOUSEMOVE over target element. \nevent target id: " + event.target.id);
            });


            //win.addEventListener("mousemove", function (event) {
             //   console.log("event target element id: \n" + event.target.id);
            //});
            ////block_all_window_content_containers();
            ////unblock_window_content_container(win_id);

            //I'm adding this event listener for when you click down on an object that's underneath
            //the blocking layer and attempt to move it, the ondragstart event is called. Hence, we need to 
            //alleviate that by adjusting the event listener. 
            content_blocking_img.addEventListener("dragstart", function (event) {
                show_hide_blocking_layer();
                event.preventDefault();
                event.stopPropagation();
            });
        }
    }
}



function add_synthetic_mouse_event_listener(elem, event, win_id, event_type) {
    var event_target = null;
    var element = null;

    event_target = event.target;
    element = elem;
    event_target.addEventListener(event_type, function (event) {
        console.log(typeof(event_target));
    });
}


//takes all web windows and places the ui blocking image onto their contents
function block_all_window_content_containers() {
    var wins = [];
    var win = null;
    var wins_length = null;
    var blocking_img = null;
    var i = null;
    var win_id = null;

    wins = document.getElementsByName("web_window"); //get all the web windows
    if (wins !== null) {
        wins_length = parseFloat(wins.length);
        if (wins_length > 0) {
            for (i = 0; i < wins_length; i++) {
                win = wins[i]; //get an individual web window in the array
                if (win !== null) {
                    win_id = win.getAttribute("id"); //get the ID of the web-window
                    blocking_img = document.getElementById(win_id + "_block_window_content_container_img");
                    if (blocking_img !== null) {
                        block_window_content_container(win_id); //the function that places the UI blocking image over the web-window content
                        if (global_ui_interaction_window_content_block_test_mode === true) {
                            //turn the transparent blocking layer image to opaque white for testing
                            blocking_img.style.opacity = 0.8;
                            blocking_img.style.display = "block";
                            blocking_img.style.backgroundColor = "rgba(255,255,255, 0.8)";
                            blocking_img.style.userSelect = "none";
                        }
                        else {
                            blocking_img.style.opacity = 0.0;
                            blocking_img.style.display = "block";
                            blocking_img.style.backgroundColor = "rgba(255,255,255, 0.0)";
                            blocking_img.style.userSelect = "none";
                        }
                    }
                    else {
                    
                    }
                }
            }
        }
    }
}


//when the user clicks on the ui blocking image, the blocking image disappears, allowing the user to interact w/ the web window
function unblock_window_content_container(win_id) {
    var contents_container = null;
    var blocking_img = null;

    contents_container = document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000");
    if (contents_container !== null) {
        blocking_img = document.getElementById(win_id + "_block_window_content_container_img");
        if (blocking_img !== null) {
            //disable the UI blocking layer. Keep it in the DOM, but turn off its display
            //blocking_img.parentNode.removeChild(blocking_img);
            blocking_img.style.opacity = 0.0;
            blocking_img.style.display = "none";
            blocking_img.style.backgroundColor = "rgba(255,255,255, 0.0)";
            blocking_img.style.userSelect = "none";

            //2023-09-22:
            //There's an issue with CSS where the window content table
            //cell has its user-select style set to none. It's caused
            //by this script. The following code resets the
            //table cell content so that it is selectable.
            contents_container.style.userSelect = "auto";
        }
    }
}



//selects the global active window and unblocks it
function unblock_content_active_window() {
    var win_id = null;

    if (global_active_window !== null) {
    win_id = global_active_window.getAttribute("id");
        unblock_window_content_container(win_id);
    }
}


//When the user resizes a web window, the blocking image is resized to fit
function resize_window_adjust_blocking_image(win_id) {
     var contents_container = null;
    var content_blocking_img = null;
   var contents_td_top = null;
   var contents_td_left = null;
   var contents_td_width = null;
   var contents_td_height = null;

     content_blocking_img = document.getElementById(win_id + "_block_window_content_container_img");
     contents_container = document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000");

     if (content_blocking_img !== null && contents_container !== null) {
         contents_td_top = parseFloat(contents_container.offsetTop);
         contents_td_left = parseFloat(contents_container.offsetLeft);
         contents_td_width = parseFloat(contents_container.offsetWidth);
         contents_td_height = parseFloat(contents_container.offsetHeight);

         content_blocking_img.style.top = contents_td_top + "px";
         content_blocking_img.style.left = contents_td_left + "px";
         content_blocking_img.style.width = (contents_td_width + parseFloat(global_window_corner_radius)) + "px";
         content_blocking_img.style.height = (contents_td_height + parseFloat(global_window_corner_radius)) + "px";
     }
}


//hides any visible main menu items that may be visible
//when the user clicks on the web window blocking image
function hide_submenus_when_blocking_ui() {
    all_stack_menus_allow_hide();
    hide_all_stack_menus();
}


//2023-06-24:
//this function is made for the purpose of deleting all ui blocking images
//that may exist. All blocking ui images are provided with an HTML name attribute.
//Query all ui blocking images by name attribute. Scroll through the collection
//of blocking images and remove them.
function unblock_all_elements_by_name() {
    var imgs = null;
    var name = "ui_blocking_image";
    var img_count = null;
    var img = null;

    imgs = document.getElementsByName(name);
    if (imgs !== null) {
        img_count = imgs.length;
        for (i = 0; i < img_count; i++) {
            img = imgs[i];
            if (img !== null) {
                img.parentNode.removeChild(img);
            }
        }
    }
}



//2023-06-24: I created this function to unblock any ui element referenced by
//the element's id.
function ublock_element_by_id(elem_id) {
    var elem = null;
    var blocking_img_id = null;
    var blocking_img = null;

    elem = document.getElementById(elem_id);
    if (elem !== null) {
        blocking_img_id = elem.id + "_block_window_content_container_img";
        blocking_img = document.getElementById(blocking_img_id);
        if (blocking_img !== null) {
            blocking_img.parentNode.removeChild(blocking_img);
        }
    }
}





function hide_ui_blocking_onmouseover(win_id) {
    var win = null;
    var blocking_img = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        blocking_img_id = win.id + "_block_window_content_container_img";
        blocking_img = document.getElementById(blocking_img_id);
        if (blocking_img !== null) {
            if (global_left_mouse_button_down !== true) {
                blocking_img.style.display = "none";
            }
        }
    }
}





function show_ui_blocking_onmouseout(win_id) {
    var win = null;
    var blocking_img = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        blocking_img_id = win.id + "_block_window_content_container_img";
        blocking_img = document.getElementById(blocking_img_id);
        if (blocking_img !== null) {
            //if (global_left_mouse_button_down !== true) {
            blocking_img.style.display = "block";
            //}
        }
    }
}


function offset_ui_blocking_img_y(win_id, offset_y = 0) {
    var win = null;
    var blocking_img = null;
    var blocking_img_id = null;

    win = document.getElementById(win_id);
    if (win !== null) {
        blocking_img_id = win.id + "_block_window_content_container_img";
        blocking_img = document.getElementById(blocking_img_id);
        if (blocking_img !== null) {
            //if (global_left_mouse_button_down !== true) {
            blocking_img.style.top = (parseFloat(blocking_img.style.top) + parseFloat(offset_y)) + "px";
            //}
        }
    }
}


//this function creates a synthetic mousedown event that occurs
//in the same X, and Y location as the

function window_content_mousedown_synthetic_event(contents_container = null, event, win_id, event_type = "mousedown", stop = 0) {
    var win = null;
    var window_content_container = null;
    var synthetic_mousedown_event = null;
    var recursion_stop = null;
    var event_object = null;

    event_object = event;

    recursion_stop = stop;
    recursion_stop++
    console.log("number of recursions: " + recursion_stop);
    if (recursion_stop >= 1) {
        event_object.preventDefault();
        return;
    }

    win = document.getElementById(win_id);
    if (win !== null) {

        ////window_content_container = document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000"); //win_id + "_tbl_0000_tr_0001_td_0000");
        ////window_content_container.addEventListener("mousedown", window_content_mousedown_synthetic_event(event, win_id, recursion_stop));
        ////window_content_container = contents_container;
        ////if (window_content_container !== null) {
            ////window_content_container.addEventListener(event_type, function () {
            ////    console.log("The '" + event_type + "' event has been triggered");
            ////});

            synthetic_mousedown_event = new Event(event_type, {
                passive: event.passive,
                capture: event.capture
            });
            //event.target = window_content_container;

            synthetic_mousedown_event.bubbles = event.bubbles;
            synthetic_mousedown_event.cancelable = event.cancelable;
            synthetic_mousedown_event.clientX = event.clientX; // global_mouse_coords_x; //event.clientX;
            synthetic_mousedown_event.clientY = event.clientY; // global_mouse_coords_y;
            ////synthetic_mousedown_event.target = window;
            synthetic_mousedown_event.target = window_content_container;
            ////win.dispatchEvent(synthetic_mousedown_event);
            ////window.dispatchEvent(synthetic_mousedown_event);
            ////setTimeout(function () {
                window_content_container.dispatchEvent(synthetic_mousedown_event);
            ////}, 500);
        ////}
    }
    window_content_mousedown_synthetic_event(contents_container, event_object, win.id, event_type, recursion_stop);
}



function dispatch_synthetic_mouse_event(elem, event, win_id, event_type) {
    var element = null;
    var synthetic_mouse_event = null;

    element = elem;
    if (element !== null) {

        ////window_content_container = document.getElementById(win_id + "_tbl_0000_tr_0001_td_0000"); //win_id + "_tbl_0000_tr_0001_td_0000");
        ////window_content_container.addEventListener("mousedown", window_content_mousedown_synthetic_event(event, win_id, recursion_stop));
        ////window_content_container = contents_container;
        ////if (window_content_container !== null) {
        ////window_content_container.addEventListener(event_type, function () {
        ////    console.log("The '" + event_type + "' event has been triggered");
        ////});

        synthetic_mouse_event = new Event(event_type, {
            passive: event.passive,
            capture: event.capture
        });
        //event.target = window_content_container;

        synthetic_mouse_event.bubbles = event.bubbles;
        synthetic_mouse_event.cancelable = event.cancelable;
        synthetic_mouse_event.clientX = event.clientX; // global_mouse_coords_x; //event.clientX;
        synthetic_mouse_event.clientY = event.clientY; // global_mouse_coords_y;
        ////synthetic_mousedown_event.target = window;
        synthetic_mouse_event.target = element;
        ////win.dispatchEvent(synthetic_mousedown_event);
        ////window.dispatchEvent(synthetic_mousedown_event);
        ////setTimeout(function () {
        element.dispatchEvent(synthetic_mouse_event);
        ////}, 500);
        ////}
    }
}