// JavaScript Document

function buttonOn(buttonID,imgName) 
{ 
	imgOn = eval(imgName +"On.src");
	document[buttonID].src = imgOn;  
}
function buttonOff(buttonID,imgName) 
{ 
	imgOff = eval(imgName + "Off.src");
	document[buttonID].src = imgOff;  
}

function MM_openBrWindow(theURL,winName,features) 
{ //v2.0
  window.open(theURL,winName,features);
}


function window_onblur() {
	intWindow = window.setInterval("closeme()", 1000)
}

function window_onfocus()
{
	self.focus();
}

function closeme()
{
	window.clearInterval(intWindow)
	window.close();
}

function MM_openBrWindow(theURL,winName,features) 
{ //v2.0
  window.open(theURL,winName,features);
}

var titleArray = new Array();
titleArray[0] = "Phoenix Diamond - The Phoenix";
titleArray[1] = "Phoenix Diamond - The Phoenix";
titleArray[2] = "Phoenix Diamonds - Hidden Pixel!";

//TOOLTIP BODY TEXT
var bodyArray = new Array();
bodyArray[0] = "The phoenix is a mythical sacred firebird in ancient Egyptian mythology, and in myths derived from it. Said to live for 500 or 1461 years (depending on the source), the phoenix is a bird with beautiful gold and red plumage. At the end of its life-cycle the phoenix builds itself a nest of cinnamon twigs that it then ignites; both nest and bird burn fiercely and are reduced to ashes, from which a young phoenix arises.";
bodyArray[1] = "The phoenix is a mythical sacred firebird in ancient Egyptian mythology, and in myths derived from it. Said to live for 500 or 1461 years (depending on the source), the phoenix is a bird with beautiful gold and red plumage. At the end of its life-cycle the phoenix builds itself a nest of cinnamon twigs that it then ignites; both nest and bird burn fiercely and are reduced to ashes, from which a young phoenix arises.";
bodyArray[2] = "You've found the hidden pixel!!! Email us and let us know who you are!!";

//TOOLTIP DISPLAY LINK
var linkArray = new Array();
linkArray[0] = "Phoenix Wiki";
linkArray[1] = "Phoenix Wiki";
linkArray[2] = "Contact Us";

//TOOLTIP URL
var urlArray = new Array();
urlArray[0] = "http://en.wikipedia.org/wiki/Phoenix_(mythology)";
urlArray[1] = "http://en.wikipedia.org/wiki/Phoenix_(mythology)";
urlArray[2] = "http://www.phoenix-diamonds.com/contact";

//TOOLTIP OFFSET
var xOffsetArray = new Array();
xOffsetArray[0] = 0;
xOffsetArray[1] = 0;
xOffsetArray[2] = 0;


var yOffsetArray = new Array();
yOffsetArray[0] = 0;
yOffsetArray[1] = 0;
yOffsetArray[2] = 0;



//TOOLTIP BOX DEFAULT WIDTH
var toolTipDefaultWidth = 276;

//TOOLTIP STYLING
// 	Allows you to adjust the tooltip background color for the 
//	roll-over and roll-off states, the font used for the tooltip,
// 	the colors of the title and display URL links for the roll-over
//	and roll-off states and whether or not the links should be
// 	underlined at any point.
//-------------- 
var tooltipBkgColor = "#FFF";
var tooltipHighlightColor = "#FFFFE0";
var tooltipFont = "Verdana, Arial, Helvetica";
var tooltipTitleColorOff = "#000";
var tooltipTitleColorOn = "#000";
var tooltipURLColorOff = "#008000";
var tooltipURLColorOn = "#008000";
var tooltipTitleDecorationOff = "none";
var tooltipTitleDecorationOn = "underline";
var tooltipURLDecorationOff = "none";
var tooltipURLDecorationOn = "underline";


// Rounded Border of Table for Frame
var tableHeader = '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-top: 1px solid black; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 6px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 4px; border-width:0 2px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 2px; border-width:0 2px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 2px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 1px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 1px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'
	tableHeader += '<b style="font-size:1px;display:block;height:1px;background:#FF741D; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin: 0 0px;"></b>'

// PROCEDURAL FUNCTIONS
var hideID = 0;
var lastToolNum = 0;
var tooltipXOffset = 10;
var tooltipYOffset = 1;

function displayStatus(string)
{
	window.status = string;
	return true;
}

function clearStatus()
{
	window.status = '';
	return true;
}

function getRealPos(ele,dir)
{
	if (dir=="x") 
	{
		pos = ele.offsetLeft;
	}
	else
	{
		pos = ele.offsetTop;
	}
	
	tempEle = ele.offsetParent;
	
	while(tempEle != null)
	{
		if (pos += (dir=="x") ) 
		{
			tempEle.offsetLeft
		}
		else
		{
			tempEle.offsetTop;
		}
		
		tempEle = tempEle.offsetParent;
	}
	return pos;
}

function getScrollY()
{
	if(window.pageYOffset != null) 
	{
		return window.pageYOffset;
	} 
	else
	{
		return document.body.scrollTop;
	}
}

function getScrollX()
{
	if(window.pageXOffset != null)
	{
		return window.pageXOffset;
	} 
	else 
	{
		return document.body.scrollLeft;
	}
}

function frameDelay()
{
	//close box
	changeStyle('tooltipBox', 'visibility', 'hidden');
	//clear ID
	clearInterval(hideID);
	//clear status message
	displayStatus(' ');
}

function clearFrameInterval()
{
	clearInterval(hideID);
}

function hideFrame()
{
	clearInterval(hideID);
	hideID = setInterval(frameDelay, 1250);

	//THIN DOUBLE UNDERLINE
	linkRefString = "link" + lastToolNum;
	changeStyle(linkRefString, 'borderBottomWidth', '1px');
}

function linkClick(indexNum)
{
	window.open(urlArray[indexNum]);
}

function highlightFrame(idString)
{
	document.getElementById(idString).style.filter = "alpha(opacity=100)";
	document.getElementById(idString).style.mozOpacity = "1";
	document.getElementById(idString).style.opacity = "1";
	
	for(var x=1;x<7;x++)
	{
		var tempID = "frameArea" + x;
		document.getElementById(tempID).style.background = tooltipHighlightColor;
	}
}

function unHighlightFrame(idString)
{
	document.getElementById(idString).style.filter = "alpha(opacity=90)";
	document.getElementById(idString).style.mozOpacity = ".9";
	document.getElementById(idString).style.opacity = ".9";
	
	for(var x=1;x<7;x++)
	{
		var tempID = "frameArea" + x;
		document.getElementById(tempID).style.background = tooltipBkgColor;
	}
}

function displayFrame(indexNum)
{
	var linkRefString = "link" + indexNum;
	var linkRef =  document.getElementById(linkRefString);

	//clear id
	clearInterval(hideID);

	//update global link number variable
	lastToolNum = indexNum;

	//DISPLAY TIP TITLE IN STATUS BAR
	var statusVar = titleArray[indexNum];
	displayStatus(statusVar);

	//COMPOSE TIP
	var displayString = '<div style="background-color:#FFFFFF">'
	displayString += '<table id="itxtTbl" name="itxtTbl" cellspacing="0" cellpadding="0" border="0" width="100%" style="width:100%;filter:alpha(opacity=90);moz-opacity:.90;opacity:.90;">';
	displayString += 	'<tr>'
	displayString += 		'<td>'
	displayString += 			tableHeader
	displayString += 		'</td>'
	displayString += 	'</tr>'
	displayString +=    '<tr>'
	displayString += 		'<td id="frameArea1" name="frameArea1" style="display:block; background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;">'
	displayString += 				'<table cellpadding="0" cellspacing="0" border="0" style="position:relative;width:100%;">'
	displayString += 					'<tr>'
	displayString += 						'<td style="padding-left:7px;padding-right:7px;padding-top:7px;padding-bottom:2px;vertical-align:top;text-align:left;">'
	displayString += 							'<a href="#" onMouseOver="this.style.textDecoration=\'' + tooltipTitleDecorationOn + '\';this.style.color=\'' + tooltipTitleColorOn + '\';window.status=\'' + titleArray[lastToolNum] + '\';return true;" onMouseOut="this.style.textDecoration=\'' + tooltipTitleDecorationOff + '\';this.style.color=\'' + tooltipTitleColorOff + '\';" onclick="return false;" style="font-size:11px;display:block;font-family:' + tooltipFont + ';color:' + tooltipTitleColorOff + ';text-decoration:' + tooltipTitleDecorationOff + ';"><b>' + titleArray[lastToolNum] + '</b></a>'
	displayString += 							'<span style="color:#000000;display:block;padding-top:7px;padding-bottom:7px;font-size:11px;display:block;font-family:' + tooltipFont + ';">' + bodyArray[lastToolNum] + '</span>'
	displayString += 							'<a href="' + urlArray[lastToolNum] + '" onMouseOver="this.style.textDecoration=\'' + tooltipURLDecorationOn + '\';this.style.color=\'' + tooltipURLColorOn + '\';window.status=\'' + titleArray[lastToolNum] + '\';return true;" onMouseOut="this.style.textDecoration=\'' + tooltipURLDecorationOff + '\';this.style.color=\'' + tooltipURLColorOff + '\';" onclick="return false;" onMouseOut="this.style.textDecoration=\'' + tooltipURLDecorationOff + '\';" style="font-size:10px;font-family:' + tooltipFont + ';color:' + tooltipURLColorOff + ';text-decoration:' + tooltipURLDecorationOff + ';">' + linkArray[lastToolNum] + '</a>'
	displayString += 						'</td>'
	displayString += 					'</tr>'
	displayString += 				'</table>'
	displayString += 		'</td>'
	displayString += 	'</tr>'
	displayString += 	'<tr>'
	displayString += 		'<td>'
	displayString += 			'<b name="frameArea2" id="frameArea2" style="font-size:1px;display:block;height:1px;background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 1px;"></b>'
	displayString += 			'<b name="frameArea3" id="frameArea3" style="font-size:1px;display:block;height:1px;background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 1px;"></b>'
	displayString += 			'<b name="frameArea4" id="frameArea4" style="font-size:1px;display:block;height:1px;background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 2px;"></b>'
	displayString += 			'<b name="frameArea5" id="frameArea5" style="font-size:1px;display:block;height:1px;background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 2px; border-width:0 2px;"></b>'
	displayString += 			'<b name="frameArea6" id="frameArea6" style="font-size:1px;display:block;height:1px;background:' + tooltipBkgColor + '; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 4px; border-width:0 2px;"></b>'
	displayString += 			'<b class="c1" style="font-size:1px;display:block;height:1px;background:#000000; border-left:1px solid #000000; border-right:1px solid #000000;overflow: hidden;margin:0 6px;"></b>'
	displayString += 		'</td>'
	displayString += 	'</tr>'
	displayString += '</table>';


	//RENDER TIP
	changeProperty('tooltipBox', 'innerHTML', displayString);

	//RESIZE TOOLTIP BOX
	var tempWidth = toolTipDefaultWidth + "px";
	changeStyle('tooltipBox', 'width', tempWidth);

	//POSITION TOOL TIP
	var toolTipBoxWidth = getPropertyValue('tooltipBox', 'offsetWidth')
	var toolTipBoxHeight = getPropertyValue('tooltipBox', 'offsetHeight');
	var linkPosX = getRealPos(linkRef,'x') + tooltipXOffset;
	var linkPosY = getRealPos(linkRef,'y') - toolTipBoxHeight + tooltipYOffset;

	//Account for page scrolling. Reposition tooltip as neccesary
	if((getScrollX() + document.body.clientWidth) < (linkPosX + toolTipBoxWidth))
	{
		var tempOffset = (linkPosX + toolTipBoxWidth) - (getScrollX() + document.body.clientWidth);
		linkPosX -= tempOffset + 6;
	}
	
	if(getScrollY() > linkPosY)
	{
		var tempName = document.getElementById("link" + lastToolNum);
		var tempOffset = tempName.offsetHeight;
		linkPosY += toolTipBoxHeight - (2*tooltipYOffset) + tempOffset + 4;
	}

	//allow for manual positioning override
	linkPosX += xOffsetArray[lastToolNum];
	linkPosY += yOffsetArray[lastToolNum];

	//Make it happen
	var linkPosXString = linkPosX + "px";
	var linkPosYString = linkPosY + "px";
	changeStyle('tooltipBox', 'left', linkPosXString);
	changeStyle('tooltipBox', 'top', linkPosYString);

	//THICK DOUBLE UNDERLINE
	changeStyle(linkRefString, 'borderBottomWidth', '3px');

	//REVEAL TIP
	changeStyle('tooltipBox', 'visibility', 'visible');
}