var posx,posy;
function detectMouseCoordinates(mEvent)
{    
    posx=getEventX(mEvent);
    posy=getEventY(mEvent);
}


function getEventX(mEvent)
{    
    var x=0;
    if(mEvent.pageX) {
          x=mEvent.pageX;
    } else if(mEvent.clientX) {
          x = mEvent.clientX + document.documentElement.scrollLeft;
    }
    
    return x;
}

function getEventY(mEvent)
{    
    var y=0;
    if(mEvent.pageY) {
          y=mEvent.pageY;
    } else if(mEvent.clientY) {
          y = mEvent.clientY + document.documentElement.scrollTop;
    }

    return y;
}

function showTooltip(component, mEvent) 
{
    showCustomTooltip(component, mEvent, "TooltipWindow");
}

function showCustomTooltip(component, mEvent, styleClass)
{
	var tooltip = null;
    if (!isDetailsShowing()) {
        tooltip = getTargetDiv(component, mEvent, styleClass);
    }
    if (tooltip != null){
    	showDiv(tooltip, mEvent);
    }
}

function getTargetDiv(component, mEvent, styleClass)
{
	var tooltip = null;
    if (!isDetailsShowing()) {
        //See if a tooltip node exists. If not, create one and append it in the main body tag
        if(!document.getElementById("tooltipDiv")) {
            var sHtml = '<div id="tooltipDiv" class="' + styleClass + '" style="position:absolute;left:0px;top:0px;z-index:1000;visibility:hidden;">' +
                        '</div>';
            appendHTML(document.body, sHtml);
        }
    
        // get the tooltip div and the tooltip text
        tooltip = document.getElementById("tooltipDiv");
        var text = component.getAttribute("tooltip");
        
        // position & show the tooltip div with the tooltip text
        if (tooltip && text) {
            // set the style class
            tooltip.className = styleClass;
            
            // clear out height & width so it auto-sizes based on the html
            tooltip.style.height = "";
            tooltip.style.width = "";
        
            // set the inner html to the text passed in
            tooltip.innerHTML = text;

            tooltip;
        }
    }
    return tooltip;
}



function showDetails(component, mEvent)
{
    showCustomDetails(component, mEvent, "DetailsWindow");
}

function showCustomDetails(component, mEvent, styleClass) {
    showLayerCustomDetails(component, mEvent, styleClass, 0);
}


var detailsLayerId;
function showLayerCustomDetails(component, mEvent, styleClass, layerId)
{
    closeTooltip();

    //See if a details node exists. If not, create one and append it in the main body tag
    if(!document.getElementById("detailsDiv")) {
        var sHtml = '<div id="detailsDiv" class="' + styleClass + '" style="position:absolute;left:0px;top:0px;z-index:1000;visibility:hidden;">'+
                        '<div id="detailsHdrDiv" style="text-align:right;">'+        
                            '<span onmousedown="closeDetails();" style="text-align:right;color:black;font-weight:bold;font-size:10px;height:10px;cursor:pointer;">'+
                                'X'+ 
                            '</span>&nbsp;'+
                        '</div>'+
                        '<div id="detailsTextDiv" style="overflow:auto;">'+        
                        '</div>'+
                    '</div>';
        appendHTML(document.body, sHtml);
    }

    // get the details div and the details text
    var details = document.getElementById("detailsDiv");
    var text = component.getAttribute("details");
    
    // position & show the details div with the details text
    if (details && text) {
        // set the style class
        details.className = styleClass;
    
        var detailsHdr = document.getElementById("detailsHdrDiv");
        var detailsText = document.getElementById("detailsTextDiv");

        // clear out height & width so it auto-sizes based on the html
        detailsText.style.height = "";
        detailsText.style.width = "";
        detailsHdr.style.height = "10px";
        detailsHdr.style.width = "10px";
        details.style.height = "";
        details.style.width = "";
    
        // set the inner html to the text passed in
        detailsText.innerHTML = text;

        // check if I need to reduce the size
        detailsText.style.width = details.offsetWidth+"px";
        detailsHdr.style.width = detailsText.offsetWidth+"px"; // keep header same size as text div
        if (details.offsetHeight > document.body.clientHeight*(2/3)) {
            detailsText.style.height = (document.body.clientHeight*(2/3))+"px";
            details.style.height = (document.body.clientHeight*(2/3))+"px";
            detailsText.style.width = (details.offsetWidth+10)+"px"; // add for vert scrollbar
            detailsHdr.style.width = (detailsText.offsetWidth)+"px"; // keep header same size as text div
        }
        if (details.offsetWidth > document.body.clientWidth*(1/2)) {
            detailsText.style.width = (document.body.clientWidth*(1/2))+"px";
            detailsHdr.style.width = (detailsText.offsetWidth)+"px"; // keep header same size as text div
            details.style.width = (document.body.clientWidth*(1/2))+"px";
        }

        // show the details div now
        showDiv(details, mEvent);
        
        detailsLayerId = layerId;
    }
}

// Show a tooltip that is contained it its own div
function showDivTooltip(component, mEvent)
{
	if ( (component) && (component.innerHTML != "") ) {
		showDiv(component, mEvent);
	}
}

var cursorOffsetXLeft = 8;
var cursorOffsetXRight = 8;
var cursorOffsetYAbove = 8;
var cursorOffsetYBelow = 16;
function showDiv(targetDiv, mEvent) {
    // set the x and y of the mouse
    detectMouseCoordinates(mEvent);

    // get size info    
    var elementWidth = targetDiv.offsetWidth; // div width
    var elementHeight = targetDiv.offsetHeight; // div height
    var clientWidth = document.body.clientWidth; // browser width
    var clientHeight = document.body.clientHeight; // browser height
    
    var centeredY = false;
    
    // Check to see if div will get cut off at bottom
    if((posy + cursorOffsetYBelow + elementHeight)  > clientHeight) {
        if((posy - (cursorOffsetYAbove + elementHeight)) > 0) {
            targetDiv.style.top = (posy - (cursorOffsetYAbove + elementHeight)) + "px"; // set div y position above cursor
        } else {
            centeredY = true;
            targetDiv.style.top = (clientHeight/2-elementHeight/2)+"px"; // set the div y position to be centered in the area
        }    
    } else {
        targetDiv.style.top = (posy + cursorOffsetYBelow) + "px"; //set div y position below cursor
    }    
    
    // Check to see if tooltip will show off the right of browser
    if((posx + elementWidth + cursorOffsetXRight) > clientWidth) {
        if (!centeredY) {
            var overhangX = (posx + elementWidth) - clientWidth;
            targetDiv.style.left = (posx - overhangX) + "px"; //set div x position as far to the right as possible
        } else {
            targetDiv.style.left = (posx - (cursorOffsetXLeft + elementWidth)) + "px"; //set div x position to the left
        }
    } else {
        targetDiv.style.left = (posx + cursorOffsetXRight) + "px"; //set div x position to the right
    }
    
    targetDiv.style.visibility = "visible"; //make div visible
}


function closeTooltip()
{
    var tooltip = document.getElementById("tooltipDiv");
    closeDiv(tooltip);
}


function closeDetails()
{
    var details = document.getElementById("detailsDiv");
    closeDiv(details);
}


function closeDetailsForLayer(layerId)
{
	if (layerId && layerId != 0 && layerId == detailsLayerId) {
		closeDetails();
	}
}


function closeDiv(targetDiv)
{
    if (targetDiv) { 
        hideDiv(targetDiv);
        targetDiv.outerHTML="";
    }
}


function hideDiv(targetDiv)
{
    if (targetDiv) { 
        targetDiv.style.visibility = "hidden";
        targetDiv.style.top = "-2000px";
        targetDiv.style.left = "-2000px";
    }
}


function isTooltipShowing() 
{
    var tooltip = document.getElementById("tooltipDiv");
    return isDivShowing(tooltip);
}


function isDetailsShowing() 
{
    var details = document.getElementById("detailsDiv");
    return isDivShowing(details);
}


function isDivShowing(targetDiv) {
    if (targetDiv && targetDiv.style.visibility == "visible") {
        return true;
    } else {
        return false;
    }
}