"use strict";

//This is a global variable for the animation feature. Uncomment when testing.
//var global_animations_on = null;


//Set the default CSS animation properties to an object using a predetermined set of values. 
//This function is created to add CSS animations to objects quickly and easily, without having
//to set the parameters. 
function default_config_elem_for_animation(elem_id) {
    var element = null;
    var animations_on = null;

    //alert(elem_id);

    animations_on = global_animations_on; //see if there are animations implemented by referencing a global variable. See globals.js

    if (animations_on === true) {
    element = document.getElementById(elem_id);
        if (element !== null) {
            element.style.transitionProperty = "left, top, width, height, box-shadow"; //if any of these CSS properties of an object changes, they will animate.
            element.style.transitionDuration = "0.3" + "s"; //set the time in seconds
            element.style.transitionDelay = "0.007" + "s"; //set the delay before starting the animation
            element.style.transitionTimingFunction = "cubic-bezier(0, .55, .45, 1)"; //designate a curve by which the nature of the animation occurs
        }
    }
}



//This function configures an object for animation where duration and delay can be set.
//to animate all CSS properties
function custom_config_all_elems_for_animation(elem_id, duration, delay) {
    var element = null;
    var animations_on = null;

    animations_on = global_animations_on; //grabs the global boolean variable telling use if animations are set to on, or off.

    if (animations_on === true) {
        element = document.getElementById(elem_id); //get the element by referencing its ID

        if (element !== null) {
            element.style.transitionProperty = "all"; //"all" sets up animations to occur in all CSS property changes
            element.style.transitionDuration = duration + "s"; //duration in seconds. An 's' is appended to this number to designate seconds as units
            element.style.transitionDelay = delay + "s"; //this is the delay that occurs before starting an animation sequence
            element.style.transitionTimingFunction = "cubic-bezier(0, .55, .45, 1)"; //A curve which determines the fashion in which an object's animation rate of change is increased, or decreased
        }
    }
}


//This function configures an object for animation where CSS property, duration and delay can be set.
//to animate all CSS properties
function most_customizable_config_elem_for_animation(elem_id, css_property, duration, delay) {
    var element = null;
    var animations_on = null;

    animations_on = global_animations_on; //grabs the global boolean variable telling use if animations are set to on, or off.

    if (animations_on === true) {
        element = document.getElementById(elem_id); //get the element by referencing its ID

        if (element !== null) {
            element.style.transitionProperty = css_property; //"all" sets up animations to occur in all CSS property changes
            element.style.transitionDuration = duration + "s"; //duration in seconds. An 's' is appended to this number to designate seconds as units
            element.style.transitionDelay = delay + "s"; //this is the delay that occurs before starting an animation sequence
            element.style.transitionTimingFunction = "cubic-bezier(0, .55, .45, 1)"; //A curve which determines the fashion in which an object's animation rate of change is increased, or decreased
        }
    }
}


//This function removes any CSS transition/animation that may be assigned to an object,
//thus preventing any animations from ocurring.
//Setting the duration and delay to 0 will prevent the animation from occuring.
//This function is often called when the animation/transition completes.
function remove_elem_animations(elem_id) {
    var element = null;
        element = document.getElementById(elem_id);

        if (element !== null) {
            element.style.transitionProperty = "none"; //all changes to an object's style are not to be animated
            element.style.transitionDuration = "0s"; //0 seconds in duration prevents the animation from occuring
            element.style.transitionDelay = "0s"; //set the delay before the animation to 0 seconds
            //element.style.backgroundColor = "rgb(255,0,0)"; //Change the background color for testing
            element.style.transitionTimingFunction = "unset"; //remove the bezier curve that varies an animation's rate of change'      
        }
}