/******************************************************************************

This is tooltip.js.

The functions and variables contained within this document are used to
create and access the pseudo-layered tooltip functionality.

******************************************************************************/

/* SUPPORT IMAGES */

var shadowImagePath        = "//www.geappliances.com/images/common/tooltipShadowBG.gif";
var blockingLayerImagePath = "//www.geappliances.com/images/common/blockingBG.gif";
var arrowUpImagePath       = "//www.geappliances.com/images/common/tooltipArrowUp.gif";
var arrowDownImagePath     = "//www.geappliances.com/images/common/tooltipArrowDown.gif";
var arrowWidth             = "24px";
var arrowHeight            = "22px";

/************************** DO NOT EDIT BELOW THIS LINE **********************/

/* required global vars */
var scrnwidth = screen.width;
var scrnheight = screen.height;
var isMouseoverVar = false;

var preloadShadow, preloadBlockingLayer, preloadArrowUp, preloadArrowDown;

if (shadowImagePath) {
	preloadShadow = new Image();
	preloadShadow.setAttribute('src', shadowImagePath);
}
if (blockingLayerImagePath) {
	preloadBlockingLayer = new Image();
	preloadBlockingLayer.setAttribute('src', blockingLayerImagePath);
}
if (arrowUpImagePath) {
	preloadArrowUp = new Image();
	preloadArrowUp.setAttribute('src', arrowUpImagePath);
}
if (arrowDownImagePath) {
	preloadArrowDown = new Image();
	preloadArrowDown.setAttribute('src', arrowDownImagePath);
}

/******************************************************************************
Use this function of "showTooltip" when the situation calls for a
'mouseover tooltip'.  The corresponding 'mouseout' should call the
function 'delayHideMouseoverTooltip'.

The divWidth argument can be a number of pixels, or null if you want
to allow CSS to control the width of the tooltip instead.
******************************************************************************/
function showNonStickyTooltip (divID, divWidth, event, linkObj) {
	clearMouseoverHideDelay();
		
	isMouseoverVar = true;	
		
	// link obj dimensions
	var linkObjWidth = linkObj.offsetWidth;
	var linkObjHeight = linkObj.offsetHeight;
	
	// link obj positions
	var linkObjX = linkObj;
	var linkObjXpos = 0;
	if (linkObjX.offsetParent) {
		while (1) {
			linkObjXpos += linkObjX.offsetLeft;
			if (!linkObjX.offsetParent) {
				break;
			}
			linkObjX = linkObjX.offsetParent;
		}
	}
	else if (linkObjX.x) {
		linkObjXpos += linkObjX.x;
	}
	
	var linkObjY = linkObj;
	var linkObjYpos = 0;
	if (linkObjY.offsetParent) {
		while (1) {
			linkObjYpos += linkObjY.offsetTop;
			if (!linkObjY.offsetParent) {
				break;
			}
			linkObjY = linkObjY.offsetParent;
		}
	}
	else if (linkObjY.y) {
		linkObjYpos += linkObjY.y;
	}
	
	// test that linkObj is not in scrolling element (and adjust accordingly)
	overflowTestNode = linkObj;
	while (overflowTestNode.parentNode && overflowTestNode.tagName != "BODY") {
		if (overflowTestNode.scrollTop > 0) {
			overflowTestNodeScrollTop = overflowTestNode.scrollTop;
			overflowTestNodeScrollLeft = overflowTestNode.scrollLeft;
			
			linkObjYpos = linkObjYpos - overflowTestNodeScrollTop;
			linkObjXpos = linkObjXpos - overflowTestNodeScrollLeft;
		}
		
		overflowTestNode = overflowTestNode.parentNode;
	}
	
	
	
	// set link center
	linkObjCenterX = linkObjXpos + (linkObjWidth / 2);
	linkObjCenterY = linkObjYpos + (linkObjHeight / 2);
	
	// attaching mouse out event listeners to trigger
	if (document.addEventListener) {
		linkObj.addEventListener('mouseout',delayHideMouseoverTooltip,false);
	}
	else {
		linkObj.onmouseout = delayHideMouseoverTooltip;
	}
	
	//run standard tooltip function
	showTooltip(divID, divWidth, event);
	
	// attaching event listeners to tooltip
	if (document.addEventListener) {
		currentTooltip.addEventListener('mouseover',clearMouseoverHideDelay,false);
		currentTooltip.addEventListener('mouseout',delayHideMouseoverTooltip,false);
	}
	else {
		currentTooltip.onmouseover = clearMouseoverHideDelay;
		currentTooltip.onmouseout = delayHideMouseoverTooltip;
	}
	
	// attaching event listeners to arrow (if necessary)
	if (/\barrowTooltip\b/.test(currentTooltip.className)) {
		if (document.addEventListener) {
			tooltipArrow.addEventListener('mouseover',clearMouseoverHideDelay,false);
			tooltipArrow.addEventListener('mouseout',delayHideMouseoverTooltip,false);
		}
		else {
			tooltipArrow.onmouseover = clearMouseoverHideDelay;
			tooltipArrow.onmouseout = delayHideMouseoverTooltip;
		}
	}
}

/******************************************************************************
Function that hides the mouseoverTooltip. This function is called in 
'delayHideMouseOverTooltip' and should not be called on its own
******************************************************************************/
function hideMouseoverTooltip (someObj) {
	if (someObj != this) {
		someObj = document.getElementById(divIDGlobal);
	}
	hideTooltip(someObj);
}

/******************************************************************************
This function runs 'hideMouseoverTooltip' after a delay (which is
cleared by 'clearMouseoverHideDelay' when user switches focus to the
actual tooltip. This function should be called onMouseOut of the
element which triggers the tooltip, as well as the tooltip itself and
its support elements (i.e. 'arrow' and 'shadow')
******************************************************************************/
function delayHideMouseoverTooltip () {
	mouseoverHideDelay = setTimeout(function () { hideMouseoverTooltip(); }, 350);
}

/******************************************************************************
This function clears the delay set in
'delayHideMouseoverTooltip'. This function should be called
onMouseOver of the tooltip itself and its support elements
(i.e. 'arrow' and 'shadow')
******************************************************************************/
function clearMouseoverHideDelay () {
	if (window.mouseoverHideDelay) {
		clearTimeout(mouseoverHideDelay);
	}
}

/******************************************************************************
This function unhides, sizes, and positions a specified "tooltip" div
on the click of a link.
 
All 'tooltips' for a given page should be have a class of "tooltipDiv"
and a unique ID.

The basic <a> tag to call this function is as follows, where the user
specifies the ID of the tooltip to be displayed and the width at which
the tooltip should be displayed:
 
    <a href="javascript:void(0);"
       onclick="showTooltip(divID, width, event); return false;">
 
* Optional classes on "tooltipDiv":
  - tooltipShadowLeft
  - tooltipShadowRight
  - hCenteredTooltip
  - vCenteredTooltip
  - useWhiteOutLayer
  - arrowTooltip

The divWidth argument can be a number of pixels.  If it's falsy or
left unspecified, CSS will control the width of the tooltip.

If the event argument is falsy or left unspecified, the tooltip is
horizontally and vertically centered on the screen.
******************************************************************************/
function showTooltip (divID, divWidth, event) {
	divIDGlobal = divID;
	hideAllTooltips();
	
	// if div with id of 'divID' exists, function will run normally, otherwise it will do nothing //
	if (document.getElementById(divID)) { 
			
		// get tooltip[x] //
		currentTooltip = document.getElementById(divID);
		if (divWidth) {
			currentTooltip.style.width = divWidth+"px";
		}
		currentTooltip.style.zIndex = 1005;
		
		// determine root (for determining scrolls and offsets)
		var root;
		if (document.body.scrollTop > 0 || document.body.scrollLeft > 0) {
			root = document.body; // Safari
		}
		else {
			root = document.documentElement; // IE and Mozilla
		}
		
		var ww = root.offsetWidth;		
		var wh = root.offsetHeight;
		var st = root.scrollTop;
		var sl = root.scrollLeft;
		var sh = root.scrollHeight;
		var sw = root.scrollWidth;
		var docWidth = document.body.offsetWidth;
		var grabbedDivHeight = currentTooltip.offsetHeight;
		var grabbedDivWidth = currentTooltip.offsetWidth;
		
		var mouseX, mouseY, xpt, ypt, arrowDirection, arrowXpt, arrowYpt;
		
		//get mouse coordinates
		if (event) {
			mouseX = event.clientX + sl;
			mouseY = event.clientY + st;
		}
		else {
			mouseX = 0;
			mouseY = 0;
		}
		
		// for mouseover tooltips, change detected mouse coordinates to center of link obj
		if (isMouseoverVar) {
			mouseX = linkObjCenterX;
			mouseY = linkObjCenterY;
		}
		
		//set initial tooltip position //
		xpt = mouseX - (grabbedDivWidth / 2);
		ypt = mouseY + 10;
		
		
		//set initial ARROW tooltip position //
		if (/\barrowTooltip\b/.test(currentTooltip.className)) {
			xpt = mouseX - (grabbedDivWidth / 2);
			ypt = mouseY - grabbedDivHeight - 15;
			arrowDirection = "Down";
		}
		
		
		// testing the document/window boundaries //
		
		if (xpt < 15) {
			xpt = 15;
		}
		if ((xpt + grabbedDivWidth) > (ww + sl)) {
			xpt = (ww + sl) - grabbedDivWidth - 15;
		}
		if (ww < grabbedDivWidth) {
			xpt = sl + 15;
		}	
		
		if ((ypt + grabbedDivHeight + 15) > sh) {
			ypt = ypt - grabbedDivHeight - 15;
		}
		
		// tooltip boundary checking (when using arrow variant) //
		if ((ypt - 5) < 0) {
			ypt = mouseY + 14;
			arrowDirection = "Up";
		}
		
		// hCenteredTooltip
		if (!event || /\bhCenteredTooltip\b/.test(currentTooltip.className)) {
			xpt = ((ww - grabbedDivWidth) / 2) + sl;
			
			// boundary checking
			if (xpt < (sl + 10)) {
				xpt = sl + 10;
			}
		}
		
		// vCenteredTooltip
		if (!event || /\bvCenteredTooltip\b/.test(currentTooltip.className)) {
			ypt = ((document.documentElement.clientHeight - grabbedDivHeight) / 2) + st;
			
			// boundary checking
			if (ypt < (st + 10)) {
				ypt = st + 10;
			}
		}
		
		//set definite tooltip[x] position //
		currentTooltip.style.left = xpt+"px"; 
		currentTooltip.style.top = ypt+"px";	
		
		// check for 'tooltipShadow' class and create shadow layer //
		if (/\btooltipShadowLeft\b/.test(currentTooltip.className) || /\btooltipShadowRight\b/.test(currentTooltip.className)) {
			var shadowYpt = ypt + 5;
			
			if (currentTooltip.className && /\btooltipShadowRight\b/.test(currentTooltip.className)) {
				shadowXpt = xpt + 5;
			}
			else if (currentTooltip.className && /\btooltipShadowLeft\b/.test(currentTooltip.className)) {
				shadowXpt = xpt - 5;
			}			
			
			tooltipShadow = document.createElement('div');
			tooltipShadow.id = "tooltipShadow";
			tooltipShadow.style.width = (grabbedDivWidth)+"px";
			tooltipShadow.style.height = (grabbedDivHeight)+"px";
			tooltipShadow.style.position = "absolute";
			tooltipShadow.style.top = shadowYpt+"px";
			tooltipShadow.style.left = shadowXpt+"px";
			tooltipShadow.style.zIndex = 999;
			if (shadowImagePath) {
				tooltipShadow.style.backgroundImage = "url("+shadowImagePath+")";
			}
			
			currentTooltip.parentNode.appendChild(tooltipShadow);
		}
		
		// check for 'useWhiteOutLayer' class and create shadow layer //
		if (/\buseWhiteOutLayer\b/.test(currentTooltip.className)) {
					
			// define whiteout //
			whiteout = document.createElement('div');
			whiteout.id = "whiteOutLayer";
			whiteout.style.width = sw+"px";
			whiteout.style.height = sh+"px";
			whiteout.style.position = "absolute";
			whiteout.style.top = "0px";
			whiteout.style.left = "0px";
			whiteout.style.zIndex = 998;
			if (blockingLayerImagePath) {
				whiteout.style.backgroundImage = "url("+blockingLayerImagePath+")";
			}
			
			// hide selects (since they burn through) -- with exception of selects WITHIN tooltip //
			selectArray = document.getElementsByTagName("select");
			for(i = 0; i < selectArray.length; i++) {
				selectTestNode = selectArray[i];
				while (selectTestNode.parentNode && !/\btooltipDiv\b/.test(selectTestNode.className)) {
					selectTestNode = selectTestNode.parentNode;
				}
				if (!selectTestNode.parentNode) {
					selectArray[i].style.visibility = "hidden";
				}
			}
			
			// add whiteout to page //
			document.body.appendChild(whiteout);
		}
		
		// check for 'arrowTooltip' class and create arrow layer //
		if (/\barrowTooltip\b/.test(currentTooltip.className)) {
			if (arrowDirection == "Down") {
				arrowYpt = mouseY - 18;
			}
			else if (arrowDirection == "Up") {
				arrowYpt = mouseY + 3;
			}
			
			
			arrowXpt = mouseX - 15;		
			if ((arrowXpt + 25) > (xpt + grabbedDivWidth)) {
				arrowXpt = xpt + grabbedDivWidth - 30;
			}
			if (arrowXpt < xpt) {
				arrowXpt = xpt + 5;
			}			
			
			
			tooltipArrow = document.createElement('img');
			tooltipArrow.id = "tooltipArrow";
			tooltipArrow.style.width = arrowWidth;
			tooltipArrow.style.height = arrowHeight;
			tooltipArrow.style.position = "absolute";
			tooltipArrow.style.top = arrowYpt+"px";
			tooltipArrow.style.left = arrowXpt+"px";
			tooltipArrow.style.zIndex = 2000;
			if (arrowDirection == "Down") {
				if (arrowDownImagePath) {
					tooltipArrow.src = arrowDownImagePath;
				}
			}
			else if (arrowDirection == "Up") {
				if (arrowUpImagePath) {
					tooltipArrow.src = arrowUpImagePath;
				}
			}
			
			currentTooltip.parentNode.appendChild(tooltipArrow);
		}
		
		// create a 'select'-blocking iframe //
		blockingIframe = document.createElement('iframe');
		blockingIframe.id = "blockingIframe";
		if (arrowDownImagePath) {
			blockingIframe.src = arrowDownImagePath;
		}
		blockingIframe.style.zIndex = 997;
		blockingIframe.style.width = grabbedDivWidth+"px";
		blockingIframe.style.height = grabbedDivHeight+"px";
		blockingIframe.style.position = "absolute";
		blockingIframe.style.border = "0";
		blockingIframe.style.left = xpt+"px"; 
		blockingIframe.style.top = ypt+"px";
		
		currentTooltip.parentNode.appendChild(blockingIframe);
		
		// show tooltip[x] //
		currentTooltip.style.visibility = "visible";
	}
}

/*** This function is used on the tooltip close button to hide the tooltip. ***/
function hideTooltip (nodeObj)	{
	while (!nodeObj.className || !/\btooltipDiv\b/.test(nodeObj.className))	{
		nodeObj = nodeObj.parentNode;
	}
	nodeObj.style.visibility = "hidden";
	tooltipShadowRemover();
	whiteOutLayerRemover();
	tooltipArrowRemover();
	blockingIframeRemover();
	isMouseoverVar = false;
}

/*** This function hides all open tooltips ***/
function hideAllTooltips () {
	// determine which divs are tooltips and hide any open tooltips //
	var tooltipDivArray = document.getElementsByTagName('div');
	for (var j = 0; j < tooltipDivArray.length; ++j) {
		var tooltipDiv = tooltipDivArray[j];
		if (!tooltipDiv.className || !/\btooltipDiv\b/.test(tooltipDiv.className)) {
			continue;
		}
		tooltipDiv.style.visibility = "hidden";
		tooltipShadowRemover();
		whiteOutLayerRemover();
		tooltipArrowRemover();
		blockingIframeRemover();
	}
}

/*** This function removes the tooltipShadow (if it exists) ***/
function tooltipShadowRemover () {
	if (document.getElementById('tooltipShadow')) {
		shadow = document.getElementById('tooltipShadow');
		shadow.parentNode.removeChild(shadow);
	}
}

/*** This function removes the whiteOutLayer (if it exists) ***/
function whiteOutLayerRemover () {
	if (document.getElementById('whiteOutLayer')) {
		whiteout = document.getElementById('whiteOutLayer');
		whiteout.parentNode.removeChild(whiteout);
	}
	
	selectArray = document.getElementsByTagName("select");
	for(i = 0; i < selectArray.length; i++) {
		selectArray[i].style.visibility = "inherit";
	}
}

/*** This function removes the tooltipArrow (if it exists) ***/
function tooltipArrowRemover () {
	if (document.getElementById('tooltipArrow')) {
		arrow = document.getElementById('tooltipArrow');
		arrow.parentNode.removeChild(arrow);
	}
}
/*** This function removes the blockingIframe ***/
function blockingIframeRemover () {
	if (document.getElementById('blockingIframe')) {
		blockingIframe = document.getElementById('blockingIframe');
		blockingIframe.parentNode.removeChild(blockingIframe);
	}
}

/*** This will cause any open tooltip to close if the page is resized. ***/
window.onresize = hideAllTooltips;