var fadeTimeoutInMillis = 50;
var tooltipId = "tooltipArea";
var tooltipOffset = 10;

var tooltipFadeInTimeoutIntervalId;
var tooltipFadeOutTimeoutIntervalId;

function showTooltipWithTextContent(text, tooltipWidth, e){
    //populate tooltip
    document.getElementById("tooltipContent").innerHTML = text;


    //show tooltip
    showTooltip(tooltipWidth, e);
}

function showTooltipWithOuterContent(contentElementId, tooltipWidth, e){
    //populate tooltip
    document.getElementById("tooltipContent").innerHTML = document.getElementById(contentElementId).innerHTML;

    //show tooltip
    showTooltip(tooltipWidth, e);
}

function showTooltipWithFunction(functionName, tooltipWidth, e){
    //call function to populate tooltip
    functionName();

    //show tooltip
    showTooltip(tooltipWidth, e);
}

function getWindowWidthSize(){

    //   1. If window.innerHeight/Width is provided, that is fully trustworthy, use that (Hooray!).
    //   2. Else if document.documentElement.clientHeight/Width is provided and either one is greater than 0, use that.
    //   3. Else use document.body.clientHeight/Width.

    var width = document.body.clientWidth;
    if(window.innerWidth != null){
        width = window.innerWidth;
    } else if(document.documentElement.clientWidth != null && document.documentElement.clientWidth > 0){
        width = document.documentElement.clientWidth;
    }

    return width;
}

function increaseTooltipWidth(increaseWidth){
    var it = document.getElementById(tooltipId);
    var width;
    if (hasMaxLengthBrowserSupport()) {
        width = it.style.maxWidth.substring(0, it.style.maxWidth.length - 2);
    } else {
        width = it.style.width.substring(0, it.style.width.length - 2);
    }
    var newWidth = parseInt(width) + increaseWidth;

    //check new size does not cause problems
    if (it.style.left != ""){
        var left = parseInt(it.style.left.substring(0, it.style.left.length - 2));
        var right = document.documentElement.scrollWidth - left + tooltipOffset;

        var extraPixels = left + newWidth + 20 - getWindowWidthSize();
        if(extraPixels > 0){
            it.style.left = ("");
            it.style.right = ((right + tooltipOffset) + "px");
        }
    }


    if (hasMaxLengthBrowserSupport()) {
        it.style.width = "auto";
        it.style.maxWidth = (newWidth + "px");
    } else {
        it.style.width = (newWidth + "px");
    }


}

function hasMaxLengthBrowserSupport(){
	var supportsMaxLenght = true;
	var userAgent = navigator.userAgent;

	if (/MSIE (\d+\.\d+);/.test(userAgent)){ //test for MSIE x.x;
		var ieversion=new Number(RegExp.$1); // capture x.x portion and store as a number
		if (ieversion < 8) {
			supportsMaxLenght = false;
		}
	}

	return supportsMaxLenght;
}

function showTooltip(tooltipWidth, e)  {
    if (tooltipFadeInTimeoutIntervalId == null){
        if (tooltipFadeOutTimeoutIntervalId != null){
            tooltipFadeOutTimeoutIntervalId = clearInterval(tooltipFadeOutTimeoutIntervalId);
        }

        var ev = (e == null ? window.event : e);
        var left = ev.clientX + document.documentElement.scrollLeft;
        var right = document.documentElement.scrollWidth - ev.clientX;
        var top = ev.clientY + document.documentElement.scrollTop;

        var it = document.getElementById(tooltipId);

        var extraPixels = left + tooltipWidth + 20 - getWindowWidthSize();
        if(extraPixels > 0){
            it.style.left = ("");
            it.style.right = ((right + tooltipOffset) + "px");
        } else {
            it.style.right = ("");
            it.style.left = ((left + tooltipOffset) + "px");
        }

        it.style.top = ((top + 1) + "px");

        if (hasMaxLengthBrowserSupport()) {
            it.style.width = "auto";
            it.style.maxWidth = (tooltipWidth + "px");
        } else {
            it.style.width = (tooltipWidth + "px");
        }

        tooltipFadeInTimeoutIntervalId = setInterval("fadeIn('" + tooltipId  + "')", fadeTimeoutInMillis);
    }
}

function hideTooltip(e) {
    if (tooltipFadeOutTimeoutIntervalId == null){
        if (tooltipFadeInTimeoutIntervalId != null){
            tooltipFadeInTimeoutIntervalId = clearInterval(tooltipFadeInTimeoutIntervalId);
        }

        if (shouldHideTooltipElement(tooltipId, e)) {
            tooltipFadeOutTimeoutIntervalId = setInterval("fadeOut('" + tooltipId  + "')", fadeTimeoutInMillis);
        }
    }
}

function fadeIn(tooltipId){
    var it = document.getElementById(tooltipId);
    if (it.style.opacity == null || it.style.opacity ==''){
        it.style.opacity = 0;
        it.style.filter = "alpha(opacity = " + (parseFloat(it.style.opacity) * 100) + ")";
    }

    if (it.style.opacity < 0.8){
        it.style.opacity = (parseFloat(it.style.opacity) + 0.1);
        it.style.filter = "alpha(opacity = " + (parseFloat(it.style.opacity) * 100) + ")";
    } else {
        tooltipFadeInTimeoutIntervalId = clearInterval(tooltipFadeInTimeoutIntervalId);
    }
}

function fadeOut(tooltipId){
    var it = document.getElementById(tooltipId);

    if (it.style.opacity > 0){
        it.style.opacity = (parseFloat(it.style.opacity) - 0.1);
        it.style.filter = "alpha(opacity = " + (parseFloat(it.style.opacity) * 100) + ")";
    } else {
        tooltipFadeOutTimeoutIntervalId = clearInterval(tooltipFadeOutTimeoutIntervalId);
        clearTooltip(it);
    }
}

//return true if the mouse position is outside the tooltip element
function shouldHideTooltipElement(elementId, e) {
    var it = document.getElementById(elementId);

    //obtain the mouse position
    var ev = (e == null ? window.event : e);
    var x = ev.clientX;
    var y = ev.clientY;

    //obtain the tooltip's coordinates
    var tooltipLeft = it.offsetLeft;
    var tooltipTop = it.offsetTop;
    var width = it.offsetWidth;
    var height = it.offsetHeight ;

    return (x < tooltipLeft || x > (tooltipLeft + width) || y < tooltipTop || y > (tooltipTop + height));
}

function clearTooltip(tooltip){
    document.getElementById("tooltipContent").innerHTML = "";
    tooltip.style.width = "0px";
}