"use strict";

//Functions that handle the placement of a top layer on the screen, 
//so that when you move or resize a web-window, the movement is 100% smooth.
//The screen(a blank image) blocks all interaction with other parts of the
//page when you move and resize the web-window. It's invisible, but it's there! 
//Change opacity and run it. You'll see the screen display itself, then hide 
//when you move a web-window, or resize a web-window, and whenever 
//the mouse up event occurs, the blocking screen disappears. 
//
//if this feature weren't present, the move and resize functionality could
//interfere with the contents of the web-window. When you resize, or move the window too quickly, 
//the action tends to be jagged and irratic. Often times you'll have to reclick the web-window to 
//move or resize it. This was a very irritating problem. These functions --
//place_ui_blocking_layer(), show_hide_blocking_layer() and getTopElemZIndex() -- solved it.
//It works beautifully! I love it. Unfortunately it's invisible to the end-user
//so you'll just have to take my word for it :-)

function place_ui_blocking_layer() {
    var topLayer = null;
    var blocking_layer = null;
    var blocking_layer_obj = null;
    var pixel_ratio = null;
    var inverse_px_ratio = null;


    pixel_ratio = get_pixel_ratio();
    inverse_px_ratio = get_inverse_pixel_ratio(pixel_ratio);

    //alert(inverse_px_ratio);
    
    topLayer = getTopElemZIndex();


    blocking_layer_obj = document.getElementById("blocking_layer");
    if (blocking_layer_obj === null) {
        blocking_layer = new Image();

        blocking_layer.style.display = "block";
        blocking_layer.style.position = "fixed";
        blocking_layer.style.top = "0";
        blocking_layer.style.left = "0";

        //2024-03-15:
        //the commented code located below has been changed.
        //The code that replaces this code is located below
        //the commented code. It uses CSS to set the height
        //and width of the screen blocking layer. 
        ////if (inverse_px_ratio === 0.8) {
        ////    blocking_layer.style.width = (((parseFloat(self.innerWidth) / inverse_px_ratio))) + "px";
        ////    blocking_layer.style.height = (((parseFloat(self.innerHeight) / inverse_px_ratio))) + "px";
        ////}
        ////else {
        ////    blocking_layer.style.width = (((parseFloat(self.innerWidth) * inverse_px_ratio))) + "px";
        ////    blocking_layer.style.height = (((parseFloat(self.innerHeight) * inverse_px_ratio))) + "px";
        ////}
        blocking_layer.style.width = "calc(100% - 1px)"; //(((parseFloat(self.innerWidth) * inverse_px_ratio)) - 4) + "px";
        blocking_layer.style.height = "calc(100% - 1px)"; //parseFloat(document.documentElement.scrollHeight) + "px"; ////"calc(100% - 4px)"; //(((parseFloat(self.innerHeight) * inverse_px_ratio)) - 4) + "px";

        blocking_layer.style.zIndex = Math.floor(topLayer + 1);

        //for testing purposes, test mode can be turned on or off. Testing
        //the functionality requires observation. This is an easy way to do that.
        if (global_ui_interaction_screen_content_block_test_mode === true) {
            blocking_layer.style.display = "block";
            blocking_layer.style.opacity = 0.6;
            blocking_layer.style.borderStyle = "solid";
            blocking_layer.style.borderWidth = "2px";
            blocking_layer.style.borderColor = "#00f";
            blocking_layer.style.backgroundColor = "#fff";
            }
        else {
            blocking_layer.style.display = "block";
            blocking_layer.style.opacity = 0.0;
            blocking_layer.style.borderStyle = "none";
            blocking_layer.style.borderWidth = "0";
            blocking_layer.style.borderColor = "none";
            blocking_layer.style.backgroundColor = "none";
            }

        blocking_layer.setAttribute("id", "blocking_layer");
       // blocking_layer.setAttribute("src", "/chromosphere/images/blank.gif");
        blocking_layer.setAttribute("src", global_cached_blank_img.src);
        document.body.insertBefore(blocking_layer, document.body.childNodes[0]);

        blocking_layer.addEventListener("mouseup", function () {
            show_hide_blocking_layer();
        });

        //2024-08-16:
        //Keep This!
        //this code sets a touchscreen event listener so that when the user touches
        //the screen, and then untouches it, the blocking layer behaves as though
        //the mouse was clicked and released over it.
        //see file: 'ui_touch_functions.js'
        /*-----------------------------------------------------------------------*/
        add_touch_event_listeners_ui_blocker();
        /*-------------------------------------------------------------------------*/

        top.addEventListener("click", function () {
          cursor_is_out_of_bounds();
        });

        //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. Sometimes you click down and if your
        //mouse location moves in the process, it will call an ondragstart event. I'm adding this to 
        //see if I can alleviate that.
        blocking_layer.addEventListener("dragstart", function (event) {
            show_hide_blocking_layer();
            event.preventDefault();
            event.stopPropagation();
        });

       // THIS IS OLD: mouse_over_blocking_layer_hide_menus(); //this line has functionality linked to the menubar_4_h.js file in the topmenu folder
       // 2023-02-08, use: set_is_menu_active_false(); which is located inside the file view_menu_d.js
        set_is_menu_active_false(); //deactivate the main menu from showing submenus upon inline menu item onmouseover events. 
        all_stack_menus_allow_hide(); //some menu items may be set to persist visibility. Turn this off to allow all the menu items to be hidden 
        hide_all_stack_menus(); //function hides all stack menus of the main menu 
    }
    else {
        blocking_layer_obj.style.display = "block";
        blocking_layer_obj.style.position = "fixed";
        blocking_layer_obj.style.top = "0";
        blocking_layer_obj.style.left = "0";
        blocking_layer_obj.style.width = "calc(100% - 1px)"; // (parseFloat(self.innerWidth).toFixed()) + "px";
        blocking_layer_obj.style.height = "calc(100% - 1px)"; //parseFloat(document.documentElement.scrollHeight) + "px"; ////"calc(100% - 4px)"; //(parseFloat(self.innerHeight).toFixed()) + "px";
        blocking_layer_obj.style.zIndex = Math.floor(topLayer + 1);

        // 2023-02-08, use: set_is_menu_active_false(); which is located inside the file: view_menu_d.js
        set_is_menu_active_false(); //deactivate the main menu from showing submenus upon inline menu item mouseover events. 
        all_stack_menus_allow_hide(); //some menu items may be set to persist visibility. Turn this off to allow all the menu items to be hidden 
        hide_all_stack_menus(); //function hides all stack menus of the main menu 

    }

}


function show_hide_blocking_layer() {
    var blocking_layer = null;
    var is_visible = null;
    var topLayer = null;
    topLayer = getTopElemZIndex();
    blocking_layer = document.getElementById("blocking_layer");

    if (blocking_layer !== null) {
        is_visible = blocking_layer.style.display;
        if (is_visible == "none") {
            blocking_layer.style.display = "block";
        }
        else if (is_visible == "block") {
            blocking_layer.style.display = "none";
            remove_blocking_layer(); //-- 2021/06/27 actually, remove the blocking layer altogether to improve functionality

        }
        else {
            blocking_layer.style.display = "none";
            remove_blocking_layer(); //-- 2021/06/27 actually, remove the blocking layer altogether to improve functionality
        }
    }
    else {
        blocking_layer = new Image();

        blocking_layer.style.display = "none";
        blocking_layer.style.position = "fixed";
        blocking_layer.style.top = "0";
        blocking_layer.style.left = "0";
        blocking_layer.style.width = "calc(100% - 1px)"; // (parseFloat(self.innerWidth).toFixed()) + "px";
        blocking_layer.style.height = "calc(100% - 1px)"; //parseFloat(document.documentElement.scrollHeight) + "px"; //"calc(100% - 4px)"; //(parseFloat(self.innerHeight).toFixed()) + "px";

        blocking_layer.style.zIndex = Math.floor(topLayer + 1);

        //To test this feature, you must observe its behavior. Setting up a test mode
        //allows you to easily see the blocking layer. When test mode = true, the
        //blocking layer displays as opaque white
        if (global_ui_interaction_screen_content_block_test_mode === true) {
            blocking_layer.style.display = "block";
            blocking_layer.style.opacity = 0.8;
            blocking_layer.style.borderStyle = "solid";
            blocking_layer.style.borderWidth = "2px";
            blocking_layer.style.borderColor = "#00f";
            blocking_layer.style.backgroundColor = "#fff";
        }
        else {
            blocking_layer.style.display = "block";
            blocking_layer.style.opacity = 0.0;
            blocking_layer.style.borderStyle = "none";
            blocking_layer.style.borderWidth = "0";
            blocking_layer.style.borderColor = "none";
            blocking_layer.style.backgroundColor = "none";
        }

        blocking_layer.setAttribute("id", "blocking_layer");
        //blocking_layer.setAttribute("src", "/chromosphere/images/blank.gif");
        blocking_layer.setAttribute("src", global_cached_blank_img.src);
        document.body.appendChild(blocking_layer);

        blocking_layer.addEventListener("mouseup", function () {
            show_hide_blocking_layer();
        });

        top.addEventListener("click", function () {
            cursor_is_out_of_bounds();
            remove_blocking_layer(); //-- 2021/06/27 actually, remove the blocking layer altogether to improve functionality
        });
    }
}


function getTopElemZIndex() {
    var html = null;
    var obj = null;
    var topZIndex = null;
    var Z = null;
    var objZ = null;
    var elems = null;
    var i = 0;

    topZIndex = 0;

    //2024-08-18:
    //'document.all' is depreciated.
    //replacing 'document.all' with:
    elems = document.getElementsByTagName("*");
    ////elems = document.all;
    for (i = 0; i < elems.length; i++) {
        Z = elems[i].style.zIndex;
        if (Math.floor(Z) >= topZIndex) {
            topZIndex = Z;
        }
    }
    return topZIndex;
}





function cursor_is_out_of_bounds() { //when a user releases the mouse button outside the window, this function hides the blocking layer
    var cursorX = null;
    var cursorY = null;

    var blocking_layer = null;

    var blocking_layer_left = null;
    var blocking_layer_top = null;
    var blocking_layer_right = null;
    var blocking_layer_bottom = null;

    cursorX = global_mouse_coords_x; ////parseFloat(event.clientX);
    cursorY = global_mouse_coords_y; ////parseFloat(event.clientY);

    blocking_layer = document.getElementById("blocking_layer");

    if (blocking_layer != null) {
        blocking_layer_left = parseFloat(blocking_layer.style.left);
        blocking_layer_top = parseFloat(blocking_layer.style.top);
        blocking_layer_right = parseFloat(blocking_layer.style.right) - 4;
        blocking_layer_bottom = parseFloat(blocking_layer.style.bottom) - 4;
        if (cursorX < blocking_layer_left || cursorX > blocking_layer_right || cursorY < blocking_layer_top || cursorY > blocking_layer_bottom) {
            if (blocking_layer.style.display != "none") {
                blocking_layer.style.display = "none";
                remove_blocking_layer(); //-- 2021/06/27 actually, remove the blocking layer altogether to improve functionality
            }
        }
        else {
        }
    }
}


function remove_blocking_layer() {
    var blocker = null;
    blocker = document.getElementById("blocking_layer");
    if (blocker !== null) {
        blocker.parentNode.removeChild(blocker);
        blocker = null;
    }
}

/* THIS IS OLD, BUT SAVING IT IN CASE NEEDED 2023-02-08
//when the mouse/cursor moves over the blocking layer, hide all main menu items
function mouse_over_blocking_layer_hide_menus() {

    //#### NOTE:
    //The functionality below is located in the /topmenu/menubar_4_h.js JavaScript file.
    //The following event listener is added to the title box that calls a function that hides any visible stack menus of the main menu that may be visible.
    //1.) add an event listener to the title box object where clicking the mouse down hides all stack menus of the main menu.
    //2.) allows all stack menu items to be hidden
    //3.) hides all stack menus that may be visible

    document.getElementById("blocking_layer").addEventListener("mouseover", function () {
        all_stack_menus_allow_hide(); //some menu items may be set to persist visibility. Turn this off to allow all the menu items to be hidden 
        hide_all_stack_menus(); //function hides all stack menus of the main menu 
    });
    //#### END NOTE
}
*/