"use strict";


//allow the user to control whether they want
//to use UI animations, or not.
//This function turns animation on.
function set_global_animations_on() {
    global_animations_on = true;
}

//allow the user to control whether they want
//to use UI animations, or not.
//This function turns animation off. 
function set_global_animations_off() {
    global_animations_on = false;
}

//A clock that grabs the animation time length in milliseconds ((duration + delay) * 1000).
//the clock starts running when the CSS animation/transition is executed.
//This allows you to wait till the end of the animation sequence before executing code.
//At the end of a CSS transition sequence, this can allow you to turn off animations
//for an object when they are no longer needed.
function duration_and_delay_animation_clock(elem_id) {
    var element = null;
    
    element = document.getElementById(elem_id);
    if (element !== null) {

        var duration = null;
        var delay = null;
        var total_time = null;
        var some_extra_time = null;

        some_extra_time = 25; //25 milliseconds

        duration = element.style.transitionDuration;
        delay = element.style.transitionDelay;

        duration = parseFloat(duration.replace("s", "")); //get the duration time of the transform in seconds
        delay = parseFloat(delay.replace("s", "")); //get the animation delay before it begins

        //if time values are both numeric
        if (typeof duration === "number" && !isNaN(duration) === true) {
            if (typeof delay === "number" && !isNaN(delay) === true) {
                total_time = parseFloat(duration + delay); //add up the total time for the animation to complete
                total_time = (total_time * 1000); //convert to milliseconds (seconds * 1000 = milliseconds)
                total_time = parseFloat(total_time + some_extra_time); //Just as a buffer, add a tiny bit of time to that the animation's time span'

                if (typeof total_time === "number" && !isNaN(total_time) === true) {
                    setTimeout(function () {
                        //When the animation/transition completes, this code is called.
                        remove_elem_animations(elem_id); //Remove CSS animation properties. This turns off an objects animations.

                        if (global_cached_blank_img) {
                            //if we have the global cached image (blank.gif) stored globally it speeds things up.
                            element.src = global_cached_blank_img.src;
                            //element.style.backgroundColor = "rgb(255,255,0)"; //change bg color when testing
                        }
                        else {
                            //if we don't have the globally cached image available
                            element.src = "/chromosphere/images/blank.gif?" + Math.random().toString(); //load the blank image from which isn't already in cache'
                            //element.style.backgroundColor = "rgb(255,0,0)"; //for testing, this changes the background color of the object
                        }
                    }, total_time); //total_time is our delay, which matches the time duration of the animation
                }
            }
        }
    }
}


//2024-04-19:
//set default animations on every window, and
//remove animations on every window's table
//interface
function set_animation_on_all_windows() {

    var wins = null;
    var wins_count = null;
    var win = null;
    var i = null;

    wins = document.getElementsByName("web_window");
    if (wins !== null) {
        if (wins.length > 0) {
            wins_count = wins.length;
            for (i = 0; i < wins_count; i++) {
                win = wins[i];
                if (win !== null) {
                    //2024-04-19:
                    //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. remove any CSS animations from the window's interface
                    //to prevent the window's tabble from lagging during move/resize, etc.
                    //See file: 'window_2.js'
                    set_animations_default(win.id);
                    remove_elem_animations(win.id + "_tbl_0000");
                }
            }
        }
    }
}


//This functions is mostly used for testing. When testing animations, use this code to visualize the function in the web browser
function execute_animation(elem_id) {
    return;
    var element = null;

    element = document.getElementById(elem_id);
    if (element !== null) {
        duration_and_delay_animation_clock(element.id);
        if (parseFloat(element.style.top) === 0) {
            move_object_y(element.id, 250);
            move_object_x(element.id, 250);
            resize_object_w(element.id, 300);
            resize_object_h(element.id, 300);
            //element.style.backgroundColor = 'rgb(0,0,255)';
        }
        else {
            move_object_y(element.id, 0);
            move_object_x(element.id, 0);
            resize_object_w(element.id, 25);
            resize_object_h(element.id, 25);
            //element.style.backgroundColor = 'rgb(0,255,0)';
        }
    }
}


//Adds event listeners to the object referenced by its ID for
//the purpose of animation / transition
function set_animation_event_listeners(elem_id) {
    var element = null;
    
    element = document.getElementById(elem_id);
    if (element !== null) {
        if (global_animations_on === true) {
            //If the global variable 'global_animations_on' set to true -- animations are allowed
            element.addEventListener("mouseenter", function () {
                //2023-09-22:
                //The code below sets animation on the element.
                //commented out for now.
                //Configure the element CSS for animation
                ////default_config_elem_for_animation(elem_id); //This sets the CSS transform settings to make this object ready for animation
            });
            element.addEventListener("mouseout", function () {
                //when an animation on an object occurs, the object moves
                //out from under the mouse cursor. Hence, the object calls the 'onmouseout'
                //event. That's why turning off CSS animations wouldn't work here.
            });
            element.addEventListener("mousedown", function () {
                //set the element so that when it is clicked on (mousedown) that it runs
                //an animation given that the object is set to perform animations, and that the public
                //variable 'global_animations_on' is set to true. Otherwise, no action is taken.
                ////execute_animation(elem_id);
            });
        }
    }
}


//2024-04-21:
//this function gets the CSS animation duration time of an
//element if it is set to a value. otherwise, the function
//returns a null value. if the duration is numeric, the 
//function returns a floating point numeric value in 
//units of seconds.
function get_element_animation_duration(elem) {
    var animation_duration = null;
    var return_value = null;

    if (elem !== null) {
        animation_duration = elem.style.transitionDuration.toString();
        animation_duration.replace("s", "");
        animation_duration.replace("S", "");
        animation_duration = parseFloat(animation_duration);
        if (typeof animation_duration === "number") {
            return_value = animation_duration;
        }
    }

   return return_value;
}

//2024-04-23:
//this function sets the CSS animation duration time of an
//element. the time argument (seconds) could be a number, or
//it could be a string (e.g. "5.3s"). otherwise, the function
//returns a null value.
function set_element_animation_duration(elem, seconds) {
    var animation_duration = null;
    var return_value = null;

    if (elem !== null) {
        if (!isNaN(seconds) === true) {
            animation_duration = seconds;
            animation_duration = Math.abs(animation_duration);
            elem.style.transitionDuration = animation_duration + "s";
        }
        else if (isNaN(seconds) === true) {
            if (typeof seconds === "string" && seconds.length > 0) {
                animation_duration = seconds.toLowerCase().trim();
                if (animation_duration.indexOf("s") > -1.0) {
                    animation_duration = animation_duration.replace("s", "");
                    if (!isNaN(animation_duration) === true) {
                        animation_duration = Math.abs(animation_duration);
                        elem.style.transitionDuration = animation_duration + "s";
                    }
                }
                else if (!isNaN(animation_duration) === true) {
                    animation_duration = Math.abs(animation_duration);
                    elem.style.transitionDuration = animation_duration + "s";
                }
            }
        }
    }
    ////alert("element animation duration is set to: " + elem.style.transitionDuration);

    return_value = animation_duration;

    return return_value;
}


//2024-04-23:
//this function sets the CSS animation delay time of an
//element. the time argument (seconds) could be a number, or
//it could be a string (e.g. "5.3s"). otherwise, the function
//returns a null value.
function set_element_animation_delay(elem, seconds) {
    var animation_delay = null;
    var return_value = null;

    if (elem !== null) {
        if (!isNaN(seconds) === true) {
            animation_delay = seconds;
            animation_delay = Math.abs(animation_delay);
            elem.style.transitionDelay = animation_delay + "s";
        }
        else if (isNaN(seconds) === true) {
            if (typeof seconds === "string" && seconds.length > 0) {
                animation_delay = seconds.toLowerCase().trim();
                if (animation_delay.indexOf("s") > -1.0) {
                    animation_delay = animation_delay.replace("s", "");
                    if (!isNaN(animation_delay) === true) {
                        animation_delay = Math.abs(animation_delay);
                        elem.style.transitionDelay = animation_delay + "s";
                    }
                }
                else if (!isNaN(animation_delay) === true) {
                    animation_delay = Math.abs(animation_delay);
                    elem.style.transitionDelay = animation_delay + "s";
                }
            }
        }
    }
    ////alert("element animation delay is set to: " + elem.style.transitionDelay);
    return_value = animation_delay;

    return return_value;
}


//2024-04-21:
//this function gets the CSS animation delay time of an
//element if it is set to a value. otherwise, the function
//returns a null value. if the delay is numeric, the function
//returns a floating point numeric value in units of seconds. 
function get_element_animation_delay(elem) {
    var animation_delay = null;
    var return_value = null;

    if (elem !== null) {
        animation_delay = elem.style.transitionDelay.toString();
        animation_delay.replace("s", "");
        animation_delay.replace("S", "");
        animation_delay = parseFloat(animation_delay);
        if (typeof animation_delay === "number") {
            return_value = animation_delay;
        }
    }

    return return_value;
}


//2024-04-21:
//this function gets the CSS animation duration time,
//and the CSS animation delay time of an element in total.
//if the CSS duration and delay are valid numbers, they
//are added together to get the full animation time.
//otherwise, if either duration or delay does not have a
//numeric value, then the function sets the value of
//either/both parameters to 0. if the element is null,
//then the function returns a null value. if both
//duration and delay are numeric, the function returns
//a floating point numeric value in the unit of seconds. 
function get_total_animation_time(elem) {
    var duration = null;
    var delay = null;
    var total_time = null;
    var return_value = null

    if (elem !== null) {
        duration = get_element_animation_duration(elem);
        delay = get_element_animation_delay(elem);

        if (duration === null) {
            duration = 0.0;
        }
        else {
            duration = parseFloat(duration);
        }

        if (delay === null) {
            delay = 0.0;
        }
        else {
            delay = parseFloat(delay);
        }


        if (typeof duration === "number" && typeof delay === "number") {
            total_time = parseFloat(duration) + parseFloat(delay);
            return_value = total_time;
        }
    }

    return return_value;
}




//2024-04-22:
//a function that adds a CSS property to an element for animation.
function add_css_animation_property(elem, css_property) {
    var current_properties = null;
    var property_arrray = [];
    var return_value = null;
    var property_string = null;

    if (elem !== null) {
        if (typeof css_property === "string" && css_property.length > 0) {
            current_properties = elem.style.transitionProperty.toString();
            if (current_properties.length >= 0) {
                if (current_properties.indexOf(css_property) < 0) {
                    if (current_properties.indexOf(",") > -1.0) {
                        property_arrray = current_properties.split(",");
                        property_arrray.push(css_property);
                        property_string = property_arrray.join(",");
                    }
                    else {
                        property_arrray.push(css_property);
                        property_string = property_arrray.join(",");
                    }

                    elem.style.transitionProperty = property_string;
                    return_value = true;
                }
            }
            else {
                elem.style.transitionProperty = css_property;
                return_value = true;
            }
        }
    }
    //alert("new properties added: " + elem.style.transitionProperty);

    return return_value;
}



//2024-04-22:
//a function that removes a CSS property assigned to an element for animation.
function remove_css_animation_property(elem, css_property) {
    var current_properties = null;
    var property_array = [];
    var return_value = null;
    var property_string = null;
    var i = null;
    var property_string = null;
    var property_count = null;
    var revised_property_array = [];
    var remove_property = null;

    if (elem !== null) {
        if (typeof css_property === "string" && css_property.length > 0) {
            current_properties = elem.style.transitionProperty.toString();
            if (current_properties.length >= 0) {
                if (current_properties.indexOf(css_property) > -1.0) {
                    if (current_properties.indexOf(",") > -1.0) {
                        property_array = current_properties.split(",");
                    }
                    else {
                        property_array.push(css_property);
                    }
                    property_count = property_array.length;
                    for (i = 0; i < property_count; i++) {
                        property_string = property_array[i];
                        property_string = property_string.toLowerCase().trim();
                        remove_property = css_property.toLowerCase().trim();
                        if (property_string === remove_property) {
                            continue;
                        }
                        else {
                            revised_property_array.push(property_string);
                        }
                    }
                    elem.style.transitionProperty = revised_property_array.join(",");
                    return_value = true;
                }
            }
        }
    }
    //alert("new properties removed: " + elem.style.transitionProperty);

    return return_value;
}