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)
{
	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 tooltip div now
	showDiv(details, mEvent);
	}
}

// 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(component, mEvent)
{
	var details = document.getElementById("detailsDiv");
	closeDiv(details);
}


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;
	}
}

function appendHTML(target, html)
{
	if ( target.insertAdjacentHTML ) {
		target.insertAdjacentHTML("BeforeEnd", html);
	} else {
		var range = document.createRange();
		range.setStartAfter(target.lastChild);
		var docFrag = range.createContextualFragment(html);
		target.appendChild(docFrag);
	}
}