// JavaScript Document

var myTooltip;
var mouseoverTooltip = false;
var timeoutId = 0;
var tooltipWidth = 400;
var divY;

/**
 * Initialize the tool tip
 * @param string elementClass is the name of the class that groups all elements that will have a tooltip appear when hovered over
 * @param string toolTipId is the name given to the div that becomes the tooltip, this fdiv is created in Javascript and does not exist in the document otherwise
 * @param integer myToolTipWidth is the width of the tooltip popup, it defaults to 400 if not specified
 */
function initTooltip(elementClass,toolTipId,myToolTipWidth) {
	if(!elementClass || !toolTipId)
		return;

	if(myToolTipWidth)
		tooltipWidth = myToolTipWidth;

	var bod = document.getElementsByTagName("body")[0];

	var toolTipDiv = document.createElement("div");
	//create the container and overlay div elements
	toolTipDiv.id = toolTipId;
	if(BrowserDetect.browser=="Explorer" && BrowserDetect.version<=6)
		toolTipDiv.style.width = (tooltipWidth+5)+'px';
	toolTipDiv.innerHTML = "<div class=\"hd\">&nbsp;</div><div class=\"bd\">&nbsp;</div><div class=\"ft\">&nbsp;</div> ";
	bod.appendChild(toolTipDiv);
	myTooltip = new YAHOO.widget.Overlay(toolTipId, {visible:false} );
	myTooltip.render(document.body);

	var elements = YAHOO.util.Dom.getElementsByClassName(elementClass);
	for(i=0;i<elements.length;i++)
		YAHOO.util.Event.addListener(elements[i], 'mouseover', fnHover, elements[i], true);
	for(i=0;i<elements.length;i++)
		YAHOO.util.Event.addListener(elements[i], 'mouseout', fnOut, elements[i], true);

	YAHOO.util.Event.addListener(toolTipDiv, 'mouseover', overTooltip, toolTipDiv, true);
	YAHOO.util.Event.addListener(toolTipDiv, 'mouseout', offTooltip, toolTipDiv, true);
}


function overTooltip(e) {
	clearTimeout(timeoutId);
	mouseoverTooltip = true;
}

function offTooltip(e) {
	mouseoverTooltip = false;
	fnOut(e);
}

function fnHover(e) {

	divY = e.clientY;
	if(!this || !myTooltip)
		return;

	var divId = this.id;

	clearTimeout(timeoutId);

	var  contentText = getContentText(divId);
	showToolTip(divId, contentText, divY);


}

function showToolTip(divId, contentText, mouseY){
	myTooltip.setHeader('&nbsp;');
	myTooltip.setBody(contentText);
	myTooltip.setFooter('&nbsp;');
	
	
	//prepare the dimensions that would need to be calculated for positioning of the div depending on the window  size
	var divX = YAHOO.util.Dom.getX(divId);
	divY = YAHOO.util.Dom.getY(divId);
	
	var viewWidth = YAHOO.util.Dom.getViewportWidth();
	var viewHeight = YAHOO.util.Dom.getViewportHeight();
	//var tooltipHeight = (YAHOO.util.Dom.getY(YAHOO.util.Dom.getElementsByClassName('ft')[0]) - YAHOO.util.Dom.getY(YAHOO.util.Dom.getElementsByClassName('bd')[0]))+35;
	
	if(document.getElementById("playerGameStats")){
		var div = "playerGameStats";	
	}
	else if(document.getElementById("outriderImage")) {
		var div = "outriderImage";
	} else if(document.getElementById("outriderStaffImage")) {
		var div = "outriderStaffImage";
	} else if(document.getElementById("playerStats")) {
		var div = "playerStats";
	}
	
	var tooltipHeight = ((YAHOO.util.Dom.getRegion(div).bottom - YAHOO.util.Dom.getRegion(div).top)+35);
	
	// forcing IE 6 to only show the image
	// Yes yes the rest of the browsers will do it correctly
	/*if(BrowserDetect.browser=="Explorer" && BrowserDetect.version<=6) 	{
		document.getElementById("playerGameStats").style.width="166px";
	}*/
	

	var yposition = '';
	var xposition = '';
	var arrow_image = '';

	//alert(divY);
	//if there is not enough room for the tool tip to display, then it is displaying below the hover link so arrow is at bottom
	//alert(document.getElementById("outriderImage"));
	if((viewHeight - mouseY) < tooltipHeight)
		yposition = 'top';
	else
		yposition = 'bottom';

	if((viewWidth - (divX+20)) < tooltipWidth)
		xposition = 'left';
	else
		xposition = 'right';

	if(yposition=='bottom' && xposition=='left') {
			arrow_image = 'overlay__arrow_righttop.gif';
	} else if(yposition=='bottom' && xposition=='right') {
			arrow_image = 'overlay__arrow_lefttop.gif';
	} else if(yposition=='top' && xposition=='left') {
			arrow_image = 'overlay__arrow_rightbottom.gif';
	} else if(yposition=='top' && xposition=='right') {
			arrow_image = 'overlay__arrow_leftbottom.gif';
	}

//alert((viewHeight - divY) +'   '+ tooltipHeight);
	//position the arrows and stats box accordingly
	if(yposition=='top') {
		myTooltip.setFooter('<img src=\"/common/images/interface/'+arrow_image+'\" id=\"statsArrow\" alt=\"\" />');
		document.getElementById('statsArrow').style.top = '-43px';
		myTooltip.cfg.setProperty("y", (divY-tooltipHeight)+37);
	}
	else if(yposition=='bottom') {
		myTooltip.setHeader('<img src=\"/common/images/interface/'+arrow_image+'\" id=\"statsArrow\" alt=\"\" />');
		if(BrowserDetect.browser=="Explorer" && BrowserDetect.version<=6) {
			document.getElementById('statsArrow').style.top = '43px';
			myTooltip.cfg.setProperty("y", divY-30);
		} else {			
			document.getElementById('statsArrow').style.top = '-7px';
			myTooltip.cfg.setProperty("y", divY+20);
		}

	}

	if(xposition=='right') {
		document.getElementById('statsArrow').style.left = '-25px';
		//alert(YAHOO.util.Dom.getRegion(divId).right - YAHOO.util.Dom.getRegion(divId).left);
		if(div=="outriderImage")			
			myTooltip.cfg.setProperty("x", divX+100);
		else
			myTooltip.cfg.setProperty("x", divX+160);
	}
	else if(xposition=='left') {
		if(div=="outriderImage")			
			document.getElementById('statsArrow').style.left = (tooltipWidth+2)+'px';
		else
			document.getElementById('statsArrow').style.left = (tooltipWidth+6)+'px';
		myTooltip.cfg.setProperty("x", (divX-(tooltipWidth+50)));
	}

	document.getElementById('statsArrow').style.position = 'relative';
	document.getElementById('statsArrow').style.zIndex = '120';
	//myTooltip.cfg.setProperty('context',[divId, "tl", "br"]);

	myTooltip.show();
}

function fnOut(e) {
	if(mouseoverTooltip==false)
		timeoutId = setTimeout('hideTooltip()',1000);
}

function hideTooltip() {
	myTooltip.hide();
}