//Variables
var tip;
var _this;
var variant;
var text;
var positioningElement;
var hash;
var forceOutView;
var toolTipArrow;
var tipDims;
var parentDims;
var arrowDims;
var closeBox = "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='416' height='416' viewBox='0 0 416 416'><path d='M251.869 207.985l148.759-148.759c12.137-12.137 12.137-31.752 0-43.884s-31.752-12.137-43.884 0l-148.759 148.79-148.759-148.697c-12.137-12.137-31.752-12.137-43.884 0s-12.137 31.752 0 43.884l148.759 148.697-148.759 148.759c-12.137 12.137-12.137 31.752 0 43.884 6.053 6.053 13.995 9.093 21.942 9.093s15.894-3.044 21.942-9.093l148.759-148.79 148.759 148.697c6.053 6.053 13.995 9.093 21.942 9.093s15.894-3.044 21.942-9.093c12.137-12.137 12.137-31.752 0-43.884l-148.759-148.697z'></path></svg>"

//Build Tool Tip
_p("body").on("tool-tip", function (e) {
    _this = e.detail.target;
    variant = e.detail.variant;
    text = e.detail.text;
    positioningElement = e.detail.positioningElement;
	hash = text.hashCode();
	forceOutView = e.detail.forceOutView; //not standard on most tool tips. Made this specifically to handle instance of "bundle and save" disclosure in qs-mma that gets hidden by scrolling menu. Don't think it's really applicable in most situations

    //console.log(positioningElement)
    if (positioningElement.hasAttribute('tooltip-open')) {
         //true adds fade effect
        closeToolTip(_p("[tooltip-open] #ToolTipDialog"), e, true);
    } else {
        if (_p(".tool-tip").length > 0) {
            //set fade to false for openToolTip callback or else positioning calculations overlap and dialog box components end up in strange places
            closeToolTip(_p("[tooltip-open] #ToolTipDialog"), e, false, openToolTip); 
        } else {
            openToolTip();
        };
    }
});

function getUniqueTipId() {
    var tipId = "tip-" + Math.floor(0 + (999 - 0) * Math.random());

    if (document.getElementById(tipId) === null) {
        return tipId;
    } else {
        getUniqueTipId();
	}
}


function openToolTip() {
    //Check for positioning element, if undefined use body
    if (positioningElement === undefined || positioningElement === null) {
        positioningElement = "body";
    };

    var uniqueTipId = getUniqueTipId();

    //Append to positioningElement
    _p(positioningElement).append(`<div id="ToolTipDialog" class="tool-tip ${variant}" data-tool-tip="${hash}" role="dialog" tabindex="-1" aria-label="disclosure" aria-describedby="${uniqueTipId}"><div class="tip-scroll" id="${uniqueTipId}">${text}</div><button type="button" class="tooltip-close">${closeBox}<span class="sr-only">${dictionaryTokens.closeDialog}</span></button><div class="arrow"></div></div>`);
    //Set 'tooltip-open' attribute
    positioningElement.setAttribute("tooltip-open", "");

    //Bind Close Box
    _p(".tool-tip[data-tool-tip='" + hash + "']").find(".tooltip-close").on("click", function (e) {
        e.preventDefault();
        closeToolTip(_p("[tooltip-open] #ToolTipDialog"), e, true);
    });

    //Bind tab and accessability features
    bindTabFeatures();

    //Shift focus to dialog box after 100ms
    setTimeout(function () {
        _p(tip).focus();
    }, 500);

    //Assign variables for position and resize functions
    tip = _p("[data-tool-tip='" + hash + "']");
    toolTipArrow = _p(".tool-tip .arrow");

    //Calculate dialog and arrow position
    positionToolTip();
    checkEdges();
    positionArrow();
};

//Bind Window to close Tool Tip when clicking outside of Tool Tip Dialog
_p(window).on('click', function (e) {
    if (_p("[tooltip-open]").length > 0 && _p(e.target).closest("[tooltip-trigger]", true).length == 0) {
        closeToolTip(_p("[tooltip-open] #ToolTipDialog"), e, true);
    };
});

//Resize and position calculation functions
_p().throttleResize(resizeFunctions);
function resizeFunctions() {
    if (_p("[data-tool-tip='" + hash + "']").length > 0) {
        positionToolTip();
        checkEdges();
        positionArrow();
    };
};

function positionToolTip() {
    //Get dimensions of dialog box, parent and arrow
    tipDims = tip.dimensions();
    //parentDims = tip.closest("[tooltip-trigger]", true).dimensions();
    parentDims = _p(positioningElement).dimensions();
    arrowDims = toolTipArrow.dimensions();

    //Calculate top and left positions
    var left = -(tipDims["width"] / 2);
    var top = -(tipDims["height"] + arrowDims["height"]);

    //Set top and left positions on dialog box
    tip.css("left", left + "px");
    tip.css("top", top + "px");
};

function checkEdges() {
	//Reset flip class
	tip.removeClass("flip");

	//Check <body> width
	var bodyWidth = document.getElementsByTagName("body")[0].offsetWidth;

	switch (forceOutView) {
		case "top":
			isOutViewTop = true;
			break;
		case "left":
			isOutViewLeft = true;
			break;
		case "right":
			isOutViewRight = true;
			break;
		default: 
			//Check if dialog box is out of view
			var isOutViewTop = parentDims["top"] <= (tipDims["height"] + arrowDims["height"]);
			var isOutViewLeft = tip.dimensions("left") <= 0;
			var isOutViewRight = tip.dimensions("right") > bodyWidth;
	}

    if (tip.closest("[data-tooltip=below]").length) {
        isOutViewTop = true;
    }

	//Check if mobile (both left and right of dialog off screen)
	var isMobile = bodyWidth <= 450;

	//If outViewTop flip
	if (isOutViewTop) {
		var newTop = parentDims["height"] + arrowDims["height"];
		tip.css("top", newTop + "px");
		tip.addClass("flip");
	};

	//If mobile center dialog box
	if (isMobile) {
		var newLeft = - parentDims["left"] + (bodyWidth / 2) - (tipDims["width"] / 2);
		tip.css("left", newLeft + "px");
	} else {
		//If out of view left move dialog into view area
		if (isOutViewLeft && !isOutViewRight) {
			newLeft = -arrowDims["width"];
			tip.css("left", newLeft + "px");
		};
		//If out of view right move dialog into view area
		if (isOutViewRight && !isOutViewLeft) {
			newLeft = -tipDims["width"] + arrowDims["width"];
			tip.css("left", newLeft + "px");
		};
	};


};

function positionArrow() {
    //Reset arrow position
    toolTipArrow.css("left", "0px");

    //Get new arrow dimensions
    arrowDims = toolTipArrow.dimensions();

    //Calculate arrow position
    var arrowPositionLeft;
    arrowPositionLeft = parentDims["left"] - arrowDims["left"] - (arrowDims["width"] / 2) + (parentDims["width"] / 2);

    //If arrow position calculation is to the left of dialog box, push to left edge
    if (arrowPositionLeft < 0) {
        arrowPositionLeft = 0;
    }

    //If arrow position calculation is to the right of dialog box, push to right edge
    if (arrowPositionLeft > tipDims["width"]) {
        arrowPositionLeft = tipDims["width"] - arrowDims["width"];
    }

    //Set new arrow position
    toolTipArrow.css("left", arrowPositionLeft + "px");
};


function bindTabFeatures() {
    //Accessability
    var _toolTipLinks = _p(".tip-body a");

    _p(".tool-tip .tooltip-close").tabGoTo(_p(".tool-tip").find(focusableList).first());

    if (_toolTipLinks.length > 0) {
        //If there are links in Tool Tip, set tab on links
        _p(".tool-tip").tabGoBack(".tool-tip .tooltip-close");
        _toolTipLinks.first().tabGoBack(".tool-tip");
        _p(".tool-tip .tooltip-close").tabGoBack(_toolTipLinks.last());

    } else {
        //If there are no links in Tool Tip
        _p(".tool-tip .tooltip-close").tabGoBack(".tool-tip");
        _p(".tool-tip").tabGoBack(".tool-tip .tooltip-close");
    };

    _p(".tool-tip").on('keydown', function (e) {
        var keyCode = e.which || e.keyCode;
		if (keyCode == key["escape"]) {
			event.preventDefault();
			event.stopPropagation();
            closeToolTip(_p("[tooltip-open] #ToolTipDialog"), e, true);
        };

        //Prevent IE from attempting to sumbit form when user presses "enter" on tool tip dialog
        if (keyCode == key["enter"] && e.target.tagName.toLowerCase() !== "a") {
            e.preventDefault();
        };
    });

    //Allow close box to use "enter" key
    _p(".tool-tip[data-tool-tip='" + hash + "']").find(".tooltip-close").on("keydown", function (e) {
        var keyCode = e.which || e.keyCode;
        if (keyCode == key["enter"]) {
            e.stopPropagation();
        };
    });
};

//Close tool-tip element
function closeToolTip(toolTip, e, fade, callback) {
    //if statement prevents user from clicking multiple times and causing errors
    if (_p("[tooltip-open] #ToolTipDialog").length > 0) {
        var fadeTimer;
        var opacityAmt = 1;

        if (fade) {
            fadeTimer = 30;
        } else {
            fadeTimer = 0;
        }

        //Remove 'tooltip-open' attribute
        _p("[tooltip-open]").removeAttr("tooltip-open");

        var fadeOut = setInterval(function () {

            if (toolTip.css("opacity") > 0) {
                opacityAmt += -0.1;
                toolTip.css("opacity", opacityAmt);
            } else {
                clearInterval(fadeOut);

                //shift focus back to parent unless closed from click outside of dialog box
                if (e.target.parentNode.className == "tooltip-close" || e.target.className == "tooltip-close" || e instanceof KeyboardEvent) {
                    _this.focus();
                };

                //Remove Tool Tip
                toolTip.remove();

                //Fire callback function if defined
                if (callback) {
                    callback();
                }
            }
        }, fadeTimer);
    }
};