/**
* @fileOverview
* @author Zoltan Toth
* @version 0.1
*/

/**
* @description
* Vanilla Javascript tooltip.
*
* @class
* @param {string} [options.theme=dark] - Selects one of the pre-defined tooltip styles - light or dark.
* @param {number} [options.dist=10] - Specifies the distance in pixels from trigger to tooltip.
* @param {number} [options.delay=0] - Specifies how long the tooltip remains visible after the mouse leaves the trigger.
*/

Tooltip = function() {

    var theme = "dak";
    var delay = 50;
    var dist  = 15;

    document.querySelectorAll('[data-tooltip').forEach((item,index) => {
        item.addEventListener("mouseover", function(e) {
            var tooltip = document.createElement("div");
            tooltip.className = "b-tooltip";
            tooltip.innerHTML = e.target.getAttribute('data-tooltip');
            document.body.appendChild(tooltip);
            var pos = e.target.getAttribute('data-position') || "center top",
                posHorizontal = pos.split(" ")[0];
                posVertical = pos.split(" ")[1];
            positionAt(e.target, tooltip, posHorizontal, posVertical);
        });
    });
    
    document.body.addEventListener("mouseout", function(e) {
        if (e.target.hasAttribute('data-tooltip')) {
            setTimeout(function() {
                document.body.removeChild(document.querySelector(".b-tooltip"));
            }, delay);
        }
    });

    /**
     * Positions the tooltip.
     * 
     * @param {object} parent - The trigger of the tooltip.
     * @param {object} tooltip - The tooltip itself.
     * @param {string} posHorizontal - Desired horizontal position of the tooltip relatively to the trigger (left/center/right)
     * @param {string} posVertical - Desired vertical position of the tooltip relatively to the trigger (top/center/bottom)
     * 
     */
    function positionAt(parent, tooltip, posHorizontal, posVertical) {
        var parentCoords = parent.getBoundingClientRect(), left, top;

        switch (posHorizontal) {
            case "left":
                left = parseInt(parentCoords.left) - dist - tooltip.offsetWidth;
                if (parseInt(parentCoords.left) - tooltip.offsetWidth < 0) {
                    left = dist;
                } 
                break;
                
            case "right":
                left = parentCoords.right + dist;
                if (parseInt(parentCoords.right) + tooltip.offsetWidth > document.documentElement.clientWidth) {
                    left = document.documentElement.clientWidth - tooltip.offsetWidth - dist;
                }
                break;

            default:
            case "center":
                left = parseInt(parentCoords.left) + ((parent.offsetWidth - tooltip.offsetWidth) / 2);
        }
        
        switch (posVertical) {
            case "center":
                top = (parseInt(parentCoords.top) + parseInt(parentCoords.bottom)) / 2 - tooltip.offsetHeight / 2;
                break;
                
            case "bottom":
                top = parseInt(parentCoords.bottom) + dist;
                break;

            default:
            case "top":
                top = parseInt(parentCoords.top) - tooltip.offsetHeight - dist;
        }       

        left = (left < 0) ? parseInt(parentCoords.left) : left;
        top  = (top < 0) ? parseInt(parentCoords.bottom) + dist : top;

        tooltip.style.left = left + "px";
        tooltip.style.top  = top + pageYOffset + "px";
    }
};