"use strict";

//function helper_captions_begin() {
//    var box = null;
//    var titleTxt = null;

//    //addCaptionEventListeners();

//    box = document.getElementById("helper_caption_box"); //if box already exists, remove it.
//    if (box !== null) {
//        box.parentNode.removeChild(box);
//    }

//    box = make_caption_box(); //make captions box

//    document.body.insertBefore(box, document.body.firstChild);


//    //hide_caption_box();


//    document.body.addEventListener("mouseout", function (event) {
//        box = document.getElementById("helper_caption_box");
//        if (box !== null) {
//            if ((event.clientY) > -6 && (Math.abs(event.clientY - 6) + Math.abs(box.offsetHeight)) < parseFloat(top.innerHeight).toFixed(0)) {
//            box.style.top = parseFloat(event.clientY - 6).toFixed(0).toString() + "px";
//            }
//            if ((event.clientX) > -16 && (Math.abs(event.clientX - 16) + Math.abs(box.offsetWidth)) < parseFloat(top.innerWidth).toFixed(0)) {
//            box.style.left = parseFloat(event.clientX - 16).toFixed(0).toString() + "px";
//            }
//        }

//        titleTxt = event.target.getAttribute("data-title");
//        if (titleTxt !== null) {
//            document.getElementById("helper_caption_box").style.opacity = 1.0;
//            box.innerText = titleTxt; //event.target.getAttribute("data-title");
//            //global_caption_box_timer = setInterval(fadeCaptionBox(box.id), 1);
//            //box.style.opacity = 0.3;
//        }
//        else if (titleTxt === null) {
//            //box.innerText = null;
//            document.getElementById("helper_caption_box").style.opacity = 0.0;
//        }
//        //event.stopImmediatePropagation();
//        //event.stopPropagation();
//        //event.preventDefault();
//    });



//}

/*
function fadeCaptionBox(elem_id) {
    var elem = null;
    elem = document.getElementById(elem_id);
    if (elem !== null) {
        //alert(elem.style.opacity);
        if (parseFloat(elem.style.opacity) > 0 && parseFloat(elem.style.opacity) <= 1.0) {
            elem.style.opacity = parseFloat(elem.style.opacity) - 0.01;
        }
        else {
            elem.style.opacity = 0;
            clearInterval(global_caption_box_timer);
            global_caption_box_timer = null;
        }
    }
}

*/




    //################# for helper captions functions ######################
/*
 * 
 * IMPORTANT: Some helper caption functions also exist in file create_window_[X].js
 * 
 */
    //################# end note for helper captions functions #############

function add_caption(elem, title, desc) {
    if (elem !== null) {
        elem.setAttribute("data-title", title.toString());
        elem.setAttribute("data-desc", desc.toString());
        set_caption(elem);
    }
    return elem;
}

function make_caption_box() {
    
    var box = null;

    if (document.getElementById("helper_caption_box") !== null) {
        box = document.getElementById("helper_caption_box");
        //box.parentNode.removeChild(box);
    } else {
        box = document.createElement("div");
        box.setAttribute("id", "helper_caption_box");
        box.style.borderStyle = "solid";
        box.style.borderWidth = "0.5px";
        //box.style.borderColor = "#339";
        box.style.borderColor = "#222";
        box.style.borderRadius = "3px";
        box.style.boxShadow = "2px 2px 7px #222";
        box.style.backgroundColor = "#e9e9e9";
        box.style.color = "rgb(51,51,51)";
        box.style.position = "absolute";
        box.style.padding = "4px";
        box.style.paddingLeft = "5px";
        box.style.paddingRight = "5px";
        box.style.margin = "25px";
        box.style.zIndex = 100000001110;
        //alert(box.style.zIndex);
        box.style.height = "auto";
        box.style.width = "auto";
        box.style.minWidth = "150px";
        box.style.opacity = 0;
        box.style.fontFamily = "Microsoft Sans Serif, Arial, Sans-Serif, Verdana";
        box.style.fontSize = "10pt";
        box.style.fontWeight = 500;
        box.style.whiteSpace = "nowrap";
        box.style.lineHeight = "130%";

        box.style.borderStyle = "solid";
        box.style.borderColor = "rgb(51,51,51)";
        //box.style.borderWidth = "1px";

        //box.style.wordBreak = "keep-all";
        box.style.letterSpacing = "0.03em"; 

        box.style.userSelect = "none";

        //2024-04-22:
        //by default, set the display property to "none" so
        //that the helper captions box does not display
        //an empty box.
        box.style.display = "none";

        //alert(box.style.display);
        //box.setAttribute("data-title", "Helper Caption Box");
        //box.innerHTML = "<img src=\"/chromosphere/images/blank.gif\" style=\"opacity:1.0;width:180px;height:27px;background-color:#dfdfdf;\" />";
        //box.innerText = event.target.getAttribute("data-title");

        //2023-11-20:
        //Changed the captions box to be stored inside its own DOM container
        //object. 
        //If the DOM helper captions container does not exist, create it, 
        //and place container into the DOM as a child node of the body.
        //This fixes a bug which causes the helper captions to never display.
        //(display: none; opacity: 0;)
        //Previously, the helper captions box was stored inside the
        //"chromosphere_objects_container" *object which is a DOM object that
        //is not visible. It is permanently set to displayed as 'none', and its opacity is 0. 
        //This prevents any child nodes (i.e. the helper captions box) from being visible.
        //
        //*or stored inside the body object if the "chromosphere_objects_container" does not exist
        append_to_helper_captions_container(box);


        //set the CSS X, Y, animation for helper captions box
        //see file at transformations/transformations.js
        most_customizable_config_elem_for_animation(box.id, "top, left", "0.4", "0.01");
      //most_customizable_config_elem_for_animation(elem_id, css_property, duration, delay)
        //return box;
    }
}


function set_caption(elem) {

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

        move_caption_box(this, event);
    }, false);

        elem.addEventListener("mousedown", function () {
            var box = document.getElementById("helper_caption_box");
            if (box !== null) {
                cancel_delay_fade_in_timer(); //cancel the timer that delays time and shows caption box. We do not need to display the caption box at this point
                box.style.opacity = 0.0;
                box.style.display = "none";
                box.parentNode.removeChild(box);
            }
            event.stopPropagation();
            event.preventDefault();
            return;
        }, false);


        elem.addEventListener("mouseout", function () {
            var box = document.getElementById("helper_caption_box");
            if (box !== null) {
                cancel_delay_fade_in_timer(); //cancel the timer that delays time and shows caption box. We do not need to display the caption box at this point
                box.style.opacity = 0.0;
                box.style.display = "none";
                box.parentNode.removeChild(box);
            }
            event.stopPropagation();
            event.preventDefault();
            return;
        }, false);

    return elem;
}





function move_caption_box(elem, event) {
    var pixel_ratio = null;
    var box = document.getElementById("helper_caption_box");
    var box_top = null;
    var box_left = null;
    var inverse_px_ratio = null;
    var px_ratio_diff = null;
    var title = null;
    var desc = null;
    //alert(event.target.id);
    
    pixel_ratio = parseFloat(get_pixel_ratio());
    inverse_px_ratio = get_inverse_pixel_ratio(pixel_ratio);
    //px_ratio_diff = subtract_pixel_ratio_from_1(inverse_px_ratio);

    //alert(px_ratio_diff);

    //2023-06-23: check to see if either description or title are null.
    //if either is null, don't show helper captions
    title = elem.getAttribute("data-title");
    desc = elem.getAttribute("data-desc");

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


    if (title !== null && desc !== null) {

        if (box !== null) {
            box.style.display = "block";
            cancel_delay_fade_in_timer(); //cancels any pending timers that may be active in fading in the helper captions box
            delay_fade_in_captions_box(); //delays time and fades-in the helper captions box

            //alert(inverse_px_ratio);
            if (inverse_px_ratio === 0.8) {
                //alert(inverse_px_ratio);
                box_top = (event.clientY / inverse_px_ratio);
                box_left = (event.clientX / inverse_px_ratio);
            }
            else {
                box_top = (event.clientY * inverse_px_ratio);
                box_left = (event.clientX * inverse_px_ratio);
            }
            box.style.top = (box_top - 9) + "px";
            box.style.left = (box_left - 18) + "px";
            //box.style.top = (parseFloat(event.clientY * pixel_ratio) + 10) + "px";
            //box.style.left = (parseFloat(event.clientX * pixel_ratio) + 21) + "px";
            box.innerHTML = "<div style=\"font-weight:600;font-size:9pt;\">" + elem.getAttribute("data-title") + "</div>" + elem.getAttribute("data-desc");
        }
        else {
            make_caption_box();
        }
    }
    event.stopPropagation();
    event.preventDefault();
    return;
}


function default_move_caption_box(elem, event) {
    var pixel_ratio = null;
    var box = document.getElementById("helper_caption_box");
    var box_top = null;
    var box_left = null;
    var inverse_px_ratio = null;
    var px_ratio_diff = null;

    //alert(event.target.id);

    pixel_ratio = parseFloat(get_pixel_ratio());
    inverse_px_ratio = get_inverse_pixel_ratio(pixel_ratio);
    px_ratio_diff = subtract_pixel_ratio_from_1(inverse_px_ratio);


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

        //alert(inverse_px_ratio);
        //box_top = parseFloat(event.clientY * pixel_ratio);
        //box_left = parseFloat(event.clientX * pixel_ratio);
        //box.style.top = (box_top - 9) + "px";
        //box.style.left = (box_left - 18) + "px";
        //box.style.top = (event.clientY - (parseFloat(event.clientY / inverse_px_ratio)) + 10) + "px";
        //box.style.left = (event.clientX - (parseFloat(event.clientX / inverse_px_ratio)) + 21) + "px";
        box.style.top = (event.clientY - 9) + "px";
        box.style.left = (event.clientX - 18) + "px";
        box.innerHTML = "<div style=\"font-weight:600;font-size:9pt;\">" + elem.getAttribute("data-title") + "</div>" + elem.getAttribute("data-desc");
    }
    else {
        make_caption_box();
    }
    event.stopPropagation();
    event.preventDefault();
    return;
}



function hide_caption_box() {
    var box = null;

    box = document.getElementById("helper_caption_box");
    if (box !== null) {
        box.style.display = 'none';
    }
}



function offset_helper_caption_box() {
    var box = null;
    var screen_middle = null;
    var screen_center = null;
    var cursor_x = null;
    var cursor_y = null;
    var X_offset = null;
    var Y_offset = null;


    X_offset = 0;
    Y_offset = 0;

    var XY = [];

    XY[0] = 0;
    XY[1] = 0;

    screen_middle = parseFloat(window.innerHeight) / 2;
    screen_center = parseFloat(window.innerWidth) / 2;

    box = document.getElementById("helper_caption_box");
    if (box !== null) {
        get_coords();
        cursor_x = parseFloat(global_mouse_coords_x);
        cursor_y = parseFloat(global_mouse_coords_y);

        //if the cursor is located in the UPPER-LEFT quadrant of the browser window
        if (cursor_x < screen_center && cursor_y < screen_middle) {
            console.log("UPPER-LEFT");

            X_offset = (parseFloat(box.offsetWidth));
            Y_offset = (parseFloat(box.offsetHeight));
        }
        //if the cursor is located in the UPPER-RIGHT quadrant of the browser window
        else if (cursor_x > screen_center && cursor_y < screen_middle) {
            console.log("UPPER-RIGHT");
            X_offset = (parseFloat(box.offsetWidth)) * -1.0;
            Y_offset = (parseFloat(box.offsetHeight));
        }
        //if the cursor is located in the LOWER-RIGHT quadrant of the browser window
        else if (cursor_x > screen_center && cursor_y > screen_middle) {
            console.log("LOWER-RIGHT");
            X_offset = (parseFloat(box.offsetWidth)) * -1.0;
            Y_offset = (parseFloat(box.offsetHeight)) * -1.0;
        }
        //if the cursor is located in the LOWER-LEFT quadrant of the browser window
        else if (cursor_x < screen_center && cursor_y > screen_middle) {
            console.log("LOWER-LEFT");
            X_offset = (parseFloat(box.offsetWidth));
            Y_offset = (parseFloat(box.offsetHeight)) * -1.0;
        }
        else {
            //return no X, Y cursor offset
        }
        XY[0] = X_offset;
        XY[1] = Y_offset;
        return XY;
    }
}




function position_helper_caption_box(left, top) {
    var box = document.getElementById("helper_caption_box");
    var XY_offset = [];
    var X = null;
    var Y = null;
    var pos_x = null;
    var pos_y = null;
    var px_left = left;
    var px_top = top;


    if (box !== null) {
        XY_offset = offset_helper_caption_box(); //offsets the X,Y position of the helper caption box depending on which quadrant of the screen that the cursor is located within
        X = XY_offset[0];
        Y = XY_offset[1];

        //pos_x = parseFloat(px_left) + 9;
        //pos_y = parseFloat(px_top) + 18;

        pos_x = px_left + X;
        pos_y = px_top + Y;

        box.style.top = pos_y + "px";
        box.style.left = pos_x + "px";
    }
}



//This function sets a delay and fade-in transform effect for the helper captions box
function delay_fade_in_captions_box() {
    var box = document.getElementById("helper_caption_box");

        global_helper_captions_timer_id = setTimeout(function () {
            if (box !== null) {
                quick_fade_in(box.id); //this function is in another js file. It fades the helper captions box in.
            }
        }, 500);
}


//This function cancels the timer that delays and fades-in the helper captions box
function cancel_delay_fade_in_timer() {
    clearTimeout(global_helper_captions_timer_id);
}



function make_helper_captions_container() {
    var container = null;

    container = document.getElementById("helper_captions_container");
    if (container !== null) {
        return container;
    }
    else {
        container = document.createElement("div");
        container.setAttribute("id", "helper_captions_container");
        //document.body.insertBefore(container, document.body.firstChild);
        document.body.appendChild(container);
        return container;
    }
}



function append_to_helper_captions_container(box) {
    var container = null;

    container = document.getElementById("helper_captions_container");
    if (container !== null) {
        container.innerHTML = "";
        container.appendChild(box);
    }
    else {
        container = make_helper_captions_container();
        if (container !== null) {
            container.innerHTML = "";
            container.appendChild(box);
        }
        else {
            console.log("Error in helper_captions_i.js");
            console.log("-- The helper captions DOM container does not exist");
        }
    }
}