/********************************************************************************
***  DESCRIPTION: AJAX, SJAX, and dHTML functions                             ***
***  DEVELOPERS: Thomas Gorgolione                                            *** 
***  VERSION: 4.0 (beta)                                                      *** 
***  LAST MODIFIED:  Mar. 21, 2008                                            *** 
********************************************************************************/

// Initial Processing and Variables ----------------------------------------------------------------

// preload some images that go with this library...
preloadImage("/images/pointyUp.gif");
preloadImage("/images/pointyDown.gif");
preloadImage("/images/loading.gif");
preloadImage("/images/closeSm.gif");
preloadImage("/images/closeSmBlk.gif");
preloadImage("/images/tooltipTLC.gif");
preloadImage("/images/tooltipTB.gif");
preloadImage("/images/tooltipTRC.gif");
preloadImage("/images/tooltipLB.gif");
preloadImage("/images/tooltipRB.gif");
preloadImage("/images/tooltipBLC.gif");
preloadImage("/images/tooltipBB.gif");
preloadImage("/images/tooltipBRC.gif");
preloadImage("/images/tooltipPL.gif");
preloadImage("/images/tooltipPBL.gif");
preloadImage("/images/tooltipPB.gif");
preloadImage("/images/tooltipPBR.gif");
preloadImage("/images/tooltipPR.gif");
preloadImage("/images/tooltipPTR.gif");
preloadImage("/images/tooltipPT.gif");
preloadImage("/images/tooltipPTL.gif");

// check to see what browser we're using
var ie6 = (navigator.userAgent.indexOf("MSIE 6") != -1) ? true : false;
ie6 = (navigator.userAgent.indexOf("Opera") != -1) ? false : ie6; // if we're dealing with Opera in disguise, make sure we know this...
var ie7 = (navigator.userAgent.indexOf("MSIE 7") != -1) ? true : false;
var ie8 = (navigator.userAgent.indexOf("MSIE 8") != -1) ? true : false;
var firefox = (navigator.userAgent.indexOf("Gecko") != -1) ? true : false; // it's better to determine by the rendering engine, so we can even determine unknown browsers...
var safari = (navigator.userAgent.indexOf("AppleWebKit") != -1) ? true : false;
var opera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

// for dialogs
document.body.dialogLst = new Array();

document.body.onclick = function (e) {
	// get the coordinates of the mouse click
	var eventInfo = e ? e : window.event;
	var posX = eventInfo.pageX ? eventInfo.pageX : (eventInfo.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
	var posY = eventInfo.pageY ? eventInfo.pageY : (eventInfo.clientY + document.body.scrollTop + document.documentElement.scrollTop);
	var finalTarget = eventInfo.target ? eventInfo.target : eventInfo.srcElement;
	
	var i = 0
	var isBoxClicked;
	
	while (i < document.body.dialogLst.length) {
		
		isBoxClicked = posX < document.getElementById(document.body.dialogLst[i]).offsetLeft && posX ? false : true;
		isBoxClicked = posX > (document.getElementById(document.body.dialogLst[i]).offsetLeft + document.getElementById(document.body.dialogLst[i]).offsetWidth) ? false : isBoxClicked;
		isBoxClicked = posY < document.getElementById(document.body.dialogLst[i]).offsetTop ? false : isBoxClicked;
		isBoxClicked = posY > (document.getElementById(document.body.dialogLst[i]).offsetTop + document.getElementById(document.body.dialogLst[i]).offsetHeight) ? false : isBoxClicked;

		if (finalTarget != document.getElementById(document.body.dialogLst[i]).dlgLinkSource && !isBoxClicked && document.getElementById(document.body.dialogLst[i]).style.display != "none" && document.getElementById(document.body.dialogLst[i]) != undefined) {
			dialogClose(document.body.dialogLst[i]);
			document.body.dialogLst.splice(i, 1); // remove the item from the dialog list
		}
		
		else
			i++;
	}
}

// Some little stuff ---------------------------------------------------------------------------

// return the appropriate request for the right browser
function getNewRequest() { 
	try { return new XMLHttpRequest(); } catch (e) {}
	try { return new ActiveXObject("MSXML3.XMLHTTP"); } catch (e) {}
	try { return new ActiveXObject("MSXML2.XMLHTTP.3.0"); } catch (e) {}
	try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
	try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} 
}

// simple image preloader...
function preloadImage(fileLoc) {
	temp = new Image();
	temp.src = fileLoc;
}

// straight up wait function
function pause(milliseconds) {
	var clockIn = new Date();
	for (var clock = new Date(); clock.valueOf() <= (clockIn.valueOf() + milliseconds); clock = new Date());
}

// Returns specified page's HTML output (uses SJAX)
function getPageOutput(pageLocation) {
	// determine what method is useable for ajax
	ajaxRequest = getNewRequest();	
	ajaxRequest.open("GET", pageLocation, false);
	ajaxRequest.send(null);
	return ajaxRequest.responseText;
}


// Main AJAX/SJAX Functions ------------------------------------------------------------------
function dialogClose(dlgName) {
	//var dlgNameBg = dlgName + "Bg";
	
	// if there are any child tooltips, hide them
	if (document.getElementById(dlgName).childTooltips != undefined) {
		while(tipName = document.getElementById(dlgName).childTooltips.pop())
			tooltipClose(tipName);
	}
	
	document.getElementById(dlgName).style.display = "none";
	//document.getElementById(dlgNameBg).style.display = "none";
}



// grab HTML output from webpage and create a non-modal dialog box 
// sizeX (width of dialog) and pointy (option to display a small pointer at the top or bottom of box) is optional
function doDialogFromPage(posX, posY, pageLocation, dlgName, dlgLink, sizeX, pointy) {	
	
	// if the dialog hasn't already been created, or it has and it's hiding, create/show the dialog
	if((document.getElementById(dlgName) == null) || (document.getElementById(dlgName).style.display == "none"))
	{
		if(document.getElementById(dlgName) == null)
		{	
			if (pointy == undefined)
				pointy = "none";
				
			if (sizeX == undefined)
				sizeX = 300;
				
			var docWidth = (document.documentElement.scrollWidth < document.body.scrollWidth) ? document.body.scrollWidth : document.documentElement.scrollWidth;
			var docHeight = (document.documentElement.scrollHeight < document.body.scrollHeight) ? document.body.scrollHeight : document.documentElement.scrollHeight;
			docHeight = (docHeight < document.documentElement.offsetHeight) ? document.documentElement.offsetHeight : docHeight;
			
			var dlgNameBg = dlgName + "Bg";
			var bgStyle = "position: absolute; top: 0px; left: 0px; width: " + docWidth + "px; height: " + docHeight + "px; z-index: 10; background-color: #ffffff; opacity: 0.75; -moz-opacity: 0.75; filter: alpha(opacity=75)";
			var bgClick = "dialogClose(\"" + dlgName + "\")";
			
			var styleText = "position: absolute; width: " + sizeX + "px; top: " + (posY + 10) + "px; left: " + posX + "px; z-index: 15";
			
			// function to keep the dialog fixed and center on the screen
			/*var bgKeepSize = function() {
				// find the viewport window width/height; we'll need that to determine the background size
				var viewWidth = (ie6 || ie7 || ie8) ? document.documentElement.clientWidth : document.body.clientWidth;
				var viewHeight = (ie6 || ie7 || ie8) ? document.documentElement.clientHeight : document.body.clientHeight;
				
				// if there's no values, the user is probably using Netscape 6/7
				if (viewWidth == 0 && viewHeight == 0) {
					viewWidth = window.innerWidth;
					viewHeight = window.innerHeight;
				}
				
				// get the values of some elements on the page, and determine size on that
				// but if the viewport is larger than the height dimensions we have, use the viewport height
				document.getElementById(dlgNameBg).style.width = document.getElementById("topHeader").scrollWidth;
				document.getElementById(dlgNameBg).style.height = (viewHeight > document.getElementById("siteContainer").scrollHeight) ? viewHeight : document.getElementById("siteContainer").scrollHeight;
			}*/
			
			// add new content to page...
			try {
			//	var windowDiv = document.createElement("<div id='" + dlgNameBg + "' style='" + bgStyle + "' onclick='" + bgClick + "'/>");
				var windowDiv2 = document.createElement("<div id='" + dlgName + "' style='" + styleText + "' />");
			}
			
			catch (e) {
			//	var windowDiv = document.createElement("div");
				var windowDiv2 = document.createElement("div");
				
				/*windowDiv.setAttribute("id", dlgNameBg);
				windowDiv.setAttribute("style", bgStyle);
				windowDiv.setAttribute("onclick", bgClick);*/
				
				windowDiv2.setAttribute("id", dlgName);
				windowDiv2.setAttribute("style", styleText);				
			}
						
			//document.body.appendChild(windowDiv);
			document.body.appendChild(windowDiv2);
			
			windowDiv2.dlgLinkSource = dlgLink; // set a property for this dialog that reveals the clickable element that caused this dialog to appear
			
			/* If the user wants, we can put in a little pointer on the top or bottom of 
			   the box.  The user must specify where the pointer goes by the pointy 
			   attribute.
			   
			   The values are null, topRight, topCenter, topLeft, botRight, boCenter, botLeft */
			var htmlStuff = "";
			
			if (pointy == "topRight")
				htmlStuff += "<div style=\"text-align:right; margin-right: 4px;\"><img src=\"/images/pointyUp.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			else if (pointy == "topCenter")
				htmlStuff += "<div style=\"text-align:center;\"><img src=\"/images/pointyUp.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			else if (pointy == "topLeft")
				htmlStuff += "<div style=\"text-align:left; margin-left: 4px;\"><img src=\"/images/pointyUp.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			htmlStuff += "<div id=\"" + dlgName + "Inner\" style=\"border: 1px solid #456C99; background-color: #ffffff;\"><center><br><img src=\"/images/loading.gif\" border=\"0\"/><br><br></center></div>"; // html output
			
			if (pointy == "botRight")
				htmlStuff += "<div style=\"text-align:right; margin-right: 4px;\"><img src=\"/images/pointyDown.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			else if (pointy == "botCenter")
				htmlStuff += "<div style=\"text-align:center;\"><img src=\"/images/pointyDown.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			else if (pointy == "botLeft")
				htmlStuff += "<div style=\"text-align:left; margin-left: 4px;\"><img src=\"/images/pointyDown.gif\" width=\"17\" height=\"9\" border=\"0\" style=\"width: 17px;\"/></div>";
			
			windowDiv2.innerHTML = htmlStuff;
			
			// determine what method is useable for ajax
			ajaxRequest = getNewRequest();
			
			// when the page is loaded, do some calculations on where the div should go...
			ajaxRequest.onreadystatechange = function() {
				var innerDlg = dlgName + "Inner";
								
				if(ajaxRequest.readyState == 4) {
					
					document.getElementById(innerDlg).innerHTML = "";
					document.getElementById(innerDlg).style.backgroundColor = "#E4EBF1";
					document.getElementById(innerDlg).innerHTML = ajaxRequest.responseText;
				}
			};
				
			ajaxRequest.open("GET", pageLocation, true);
			ajaxRequest.send(null);
			
			//var doCalculate2 = setInterval(bgKeepSize, 10);
			
			// create or add to an array that lists all the dialogs that are created for this dialog
			document.body.dialogLst.push(dlgName);
		}
		
		else if (document.getElementById(dlgName).style.display == "none") {
			
			//var dlgNameBg = dlgName + "Bg";
			
			//document.getElementById(dlgNameBg).style.display = "block";
			document.getElementById(dlgName).style.top = posY + 10;
			document.getElementById(dlgName).style.left = posX;
			document.getElementById(dlgName).style.display = "block";

			// create or add to an array that lists all the dialogs that are created for this dialog
			document.body.dialogLst.push(dlgName);
		}
	}	
}


// small function that handles the closing of model dialogs
function modalClose(dlgName){
	
	innerDlgName = dlgName + "Inner";
		
	// if there are any child tooltips, hide them
	if (document.getElementById(dlgName).childTooltips != undefined) {
		while(tipName = document.getElementById(dlgName).childTooltips.pop())
			tooltipClose(tipName);
	}
	
	document.getElementById(dlgName).style.display = "none";
	document.getElementById(innerDlgName).style.display = "none";
}


// grab HTML output from webpage and create a modal dialog box
// dialog contents will determine height, and dialog will be centered on the screen...
function doModalFromPage(sizeX, pageLocation, dlgName) {
	
	var doCalculate = 0;

	// if the dialog hasn't already been created, or it has and it's hiding, create/show the dialog
	if((document.getElementById(dlgName) == null) || (document.getElementById(dlgName).style.display == "none"))
	{
		if(document.getElementById(dlgName) == null)
		{	
			// ---- find the total document width/height for the inital backdrop stylesheet dimensions
			//      document.body.scrollWidth: IE/Firefox; document.body.offsetHeight: Netscape 6
			var docWidth = (document.documentElement.scrollWidth < document.body.scrollWidth) ? document.body.scrollWidth : document.documentElement.scrollWidth;
			var docHeight = (document.documentElement.scrollHeight < document.body.scrollHeight) ? document.body.scrollHeight : document.documentElement.scrollHeight;
			docHeight = (docHeight < document.documentElement.offsetHeight) ? document.documentElement.offsetHeight : docHeight;

			
			// we'll figure out the modal dialog window position later using keepCenter()
			
			// function to keep the dialog fixed and center on the screen
			var keepCenter = function() {
				// ---- find the viewport window width/height to get inital values for the dialog box position
				//      Firefox has a bug that reports incorrect dimensions of the page in document.documentElement.clientWidth, so we'll compensate...
				var viewWidth = (ie6 || ie7 || ie8) ? document.documentElement.clientWidth : document.body.clientWidth;
				var viewHeight = (ie6 || ie7 || ie8) ? document.documentElement.clientHeight : document.body.clientHeight;
				
				// if there's no values, the user is probably using Netscape 6/7
				if (viewWidth == 0 && viewHeight == 0) {
					viewWidth = window.innerWidth;
					viewHeight = window.innerHeight;
				}
				
				// resize the background div to page size --------------------------------	
				
				// get the values of some elements on the page, and determine size on that
				// but if the viewport is larger than the height dimensions we have, use the viewport height
				document.getElementById(dlgName).style.width = document.getElementById("topHeader").scrollWidth;
				document.getElementById(dlgName).style.height = (viewHeight > document.getElementById("siteContainer").scrollHeight) ? viewHeight : document.getElementById("siteContainer").scrollHeight;

				// find the center of the browser view area
				viewHeight = viewHeight/2;
				viewWidth = viewWidth/2;
				
				scrollTopDiff = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
				scrollLeftDiff = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
				
				// find the dialog's new coordinates by subtracting the center of the browser's view subtracted by half the width of the dialog plus
				// any scroll differences, then reposition it...  We're using a try catch here because there's a bug in IE 6&7 where IE freaks out when
				// the window is resized to something really small, causing the repositioning code not to work anymore
				try { document.getElementById(innerDlgName).style.top = (viewHeight - (document.getElementById(innerDlgName).offsetHeight/2)) + scrollTopDiff; } catch (e) {}
				try { document.getElementById(innerDlgName).style.left = (viewWidth - (document.getElementById(innerDlgName).offsetWidth/2)) + scrollLeftDiff; } catch (e) {}
				
				// if this is the first time it reappears
				if (document.getElementById(innerDlgName).style.visibility == "hidden")
					document.getElementById(innerDlgName).style.visibility = "visible";
			}
			
			// this dialog will have to be above all the other boxes - this is the background for the dialog
			var styleText = "background-color: #ffffff; width: " + docWidth + "px; height: " + docHeight + "px; top: 0px; left: 0px ; z-index: 1100; position: absolute; opacity: 0.75; -moz-opacity: 0.75; filter: alpha(opacity=75)";
			
			// the actual dialog: we'll initially hide this so we don't have the box show at a weird loacation initially 
			// since the box repositions after it shows
			var styleText2 = "visibility: hidden; border: 1px solid #456C99; background-color: #ffffff; width:" + sizeX + "px; position: absolute; z-index: 1101; top: 0px;";
			
			// create inner div name
			innerDlgName = dlgName + "Inner";
			
			// add new content to page...
			try {
				var windowDiv = document.createElement("<div id='" + dlgName + "' style='" + styleText + "' />");
				var windowDiv2 = document.createElement("<div id='" + innerDlgName + "' style='" + styleText2 + "' />");
			}
			
			catch (e) {
				var windowDiv = document.createElement("div");
				var windowDiv2 = document.createElement("div");
				
				windowDiv.setAttribute("id", dlgName);
				windowDiv.setAttribute("style", styleText);
				
				windowDiv2.setAttribute("id", innerDlgName);
				windowDiv2.setAttribute("style", styleText2);
			}
						
			document.body.appendChild(windowDiv);
			document.body.appendChild(windowDiv2);
			
			// create the inner div, which will be the actual window...
			windowDiv2.innerHTML = "<center><br><img src='/images/loading.gif' border='0'/><br><br></center>"; // html output
			
			// determine what method is useable for ajax
			ajaxRequest = getNewRequest();
			
			// when the page is loaded, do some calculations on where the div should go...
			ajaxRequest.onreadystatechange = function() {
								
				if(ajaxRequest.readyState == 4) {
					// close button will be attached to the top right of each window
					var closeDiv = "<a href=\"javascript: modalClose('" + dlgName + "')\"><img src=\"images/closeSm.gif\" border=\"0\" align=\"right\" style=\"margin: 5px 5px 5px 5px\"/></a>";
					document.getElementById(innerDlgName).innerHTML = closeDiv + ajaxRequest.responseText;					
				}
			};
				
			ajaxRequest.open("GET", pageLocation, true);
			ajaxRequest.send(null);
			
			// set the model dialog to be fixed on the center of the screen
			doCalculate = setInterval(keepCenter, 10);
		}
		
		else if (document.getElementById(dlgName).style.display == "none") {
			
			// refigure the innerDlg name
			var innerDlgName = dlgName + "Inner";
			
			document.getElementById(dlgName).style.display = "block";
			document.getElementById(innerDlgName).style.visibility = "hidden"; // the dialog doesn't reappear in the right spot initially, so hide it before it repositons
			document.getElementById(innerDlgName).style.display = "block";
		}
	}	
}


function tooltipClose(ttName, rmChild, parentDlg) {
	clearInterval(document.getElementById(ttName).ctrFuncTimeout);  // make sure the function to center the tooltip doen't run since we're destroying the tooltip
	document.body.removeChild(document.getElementById(ttName)); // destroy tooltip... must destroy tooltip... grrrrrrr....
	if (rmChild != null) { // if we're told to remove this item from the childTooltips array
		parentDlgObj = document.getElementById(parentDlg);
		
		for (i = 0; i != parentDlgObj.childTooltips.length; i++) {
			if (ttName == parentDlgObj.childTooltips[i])
				var foundIndex = i;
		}
		
		parentDlgObj.childTooltips.splice(foundIndex, 1);
	}
}


// ***************************** Tool tip Function *****************************

// registration, textWidth, childOf, and isAboveModal are optional
function tooltip(posX, posY, tipName, html, registration, textWidth, childOf, isAboveModal) {
	
	// ie6 has a bug that sometimes hides images that are loaded via innerHtml, so we'll just
	// show them a alertbox instead
	if (ie6) {
		// replace br with newline
		var html = html.replace(/<br>/gi, '\n');
		var html = html.replace(/<br[^<>]+>/gi, '\n');
		
		// replace p tags with newline
		var html = html.replace(/<p>/gi, '\n');
		var html = html.replace(/<p[^<>]+>/gi, '\n');
		var html = html.replace(/<\/p>/gi, '\n');
		
		// replace div tags with newline
		var html = html.replace(/<div>/gi, '\n');
		var html = html.replace(/<div[^<>]+>/gi, '\n');
		var html = html.replace(/<\/div>/gi, '\n');
		
		// strip all other html tags
		var plainText = html.replace(/<[^<>]+>/gi, '');
		
		alert(plainText);
		return 0;
	}
	
	if (document.getElementById(tipName) != null)
		return 0; // don't create something that's already been recreated.
	
	if (textWidth == null)
		textWidth = 300;
	
	if (registration == null)
		registration = "topRight";
		
	var closeBtn = "";
	
	// if the tooltip is a child of a dialog register it with the parent dialog, so it will close
	// when the parent closes
	if (childOf != null) {
		var childOfInner = childOf + "Inner";
				
		// create new array that lists all the tooltips that are associated
		// with the dialog.  This will be used to close all opened tooltips when
		// the dialog is closed
		if (document.getElementById(childOf).childTooltips == undefined)
			document.getElementById(childOf).childTooltips = new Array();

		document.getElementById(childOf).childTooltips.push(tipName);
		
		// display a close button in the tooltip if it is modal
		
		// if the registration is top right, then the pointer will jut into 
		// the close button causing part of it to be rendered unclickable.
		// we'll solve this by moving the close button to the left on that
		// registration
		if (document.getElementById(childOf + "Bg") == undefined) {
			if (registration == "topRight")
				closeBtn = "<a href=\"javascript: tooltipClose('" + tipName + "', true, '" + childOf + "');\"><img src=\"/images/closeSmBlk.gif\" align=\"right\" style=\"margin: 0px 3px 5px 5px; border: 0px;\" /></a>";
			
			else
				closeBtn = "<a href=\"javascript: tooltipClose('" + tipName + "', true, '" + childOf + "');\"><img src=\"/images/closeSmBlk.gif\" align=\"right\" style=\"margin: 0px 0px 5px 5px; border: 0px;\" /></a>";
				
			// get the difference between the model dialog and the users click; we'll base any movement caluations on that...
			var diffX = posX - document.getElementById(childOfInner).offsetLeft;
			var diffY = posY - document.getElementById(childOfInner).offsetTop;
		}
	}
	
	else {
		// also create a close button if the tooltip is not a child of anything...
		if (registration == "topRight")
			closeBtn = "<a href=\"javascript: tooltipClose('" + tipName + "');\"><img src=\"/images/closeSmBlk.gif\" align=\"right\" style=\"margin: 0px 3px 5px 5px; border: 0px;\" /></a>";
	
		else
			closeBtn = "<a href=\"javascript: tooltipClose('" + tipName + "');\"><img src=\"/images/closeSmBlk.gif\" align=\"right\" style=\"margin: 0px 0px 5px 5px; border: 0px;\" /></a>";
	}

	var zIndex = isAboveModal ?  1200 : 12;
	var zIndex2 = zIndex + 1;
	var totalWidth = textWidth + 24;
	
	
	// each tooltip has it's own html, so we'll have to go through each situation here...
	// note that we initially position the tooptip, unlike the modal code.  That's because most times the tooltip won't use
	// the keepCenter() function because it won't be used with a modal as a parent.
	switch (registration) {
		case "topLeft":
			var innerWidth = totalWidth;
			totalWidth += 15;
			var ttX = posX + 7;
			var ttY = posY - 10;
			var style =	"position: absolute; left: " + ttX + "px; top: " + ttY + "px; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<div style=\"float: left; position: relative; z-index: " + zIndex2 + "; display: inline; top: 21px;\"><img src=\"/images/tooltipPTL.gif\" /></div>";
			ttContents += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:right;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {				
				var keepCenter = function () {
					document.getElementById(tipName).style.left = (document.getElementById(childOfInner).offsetLeft + diffX) + 7;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) - 10;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
						
		case "top":
			var innerWidth = totalWidth;
			var ttX = (posX - (totalWidth / 2)) + 12;
			var ttY = posY + 3;
			var style =	"position: absolute; left: " + ttX + "px; top: " + ttY + "px; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<div style=\"float: left; position: relative; z-index: " + zIndex2 + "; display: inline; top: 8px; left: 138px\"><img src=\"/images/tooltipPT.gif\" /></div>";
			ttContents += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:right;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {				
				var keepCenter = function () {					
					document.getElementById(tipName).style.left = ((document.getElementById(childOfInner).offsetLeft + diffX) - (totalWidth / 2)) + 12;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) + 3;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "topRight":
			var innerWidth = totalWidth;
			totalWidth += 13;
			var ttX = (posX - totalWidth) - 8;
			var ttY = posY - 5;
			var style =	"position: absolute; left: " + ttX + "px; top: " + ttY + "px; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<div style=\"float: right; position: relative; z-index: " + zIndex2 + "; display: inline; top: 18px;\"><img src=\"/images/tooltipPTR.gif\" /></div>";
			ttContents += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:left;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {		
				var keepCenter = function () {
					document.getElementById(tipName).style.left = ((document.getElementById(childOfInner).offsetLeft + diffX) - document.getElementById(tipName).offsetWidth) - 8;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) - 5;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "right":
			var innerWidth = totalWidth;
			totalWidth += 39;
			var ttX = posX - totalWidth;
			var ttY = posY - 21;
			var style =	"position: absolute; left: " + ttX + "px; top: " + ttY + "px; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<img src=\"/images/tooltipPR.gif\" style=\"float:right; position: absolute; right: 6px; top: 9px; display: inline; z-index: " + zIndex2 + "\" />";
			ttContents += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:left;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {		
				var keepCenter = function () {
					document.getElementById(tipName).style.left = (document.getElementById(childOfInner).offsetLeft + diffX) - document.getElementById(tipName).offsetWidth;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) - 21;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "bottomRight":
			var innerWidth = totalWidth;
			totalWidth += 13;
			var ttX = (posX - totalWidth) - 9;
			var refigure = 13; // set a flag to position after it's been set up, this flag contiains an additional value that will be used in refiguring the tooltip 
			var style =	"position: absolute; display: none; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:left;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			ttContents += "<div style=\"float: right; position: relative; z-index: " + zIndex2 + "; display: inline; bottom: 21px;\"><img src=\"/images/tooltipPBR.gif\" /></div>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {	
				var keepCenter = function () {
					document.getElementById(tipName).style.left = ((document.getElementById(childOfInner).offsetLeft + diffX) - document.getElementById(tipName).offsetWidth) - 9;
					document.getElementById(tipName).style.bottom = 0;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) - document.getElementById(tipName).offsetHeight;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "bottom":
			var innerWidth = totalWidth;
			var refigure = 2; // set a flag to position after it's been set up, this flag contiains an additional value that will be used in refiguring the tooltip 
			var ttX = (posX - (totalWidth / 2)) + 13;
			var style =	"position: absolute; display: none; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:right;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			ttContents += "<div style=\"float: left; position: relative; z-index: " + zIndex2 + "; display: inline; bottom: 8px; left: 138px\"><img src=\"/images/tooltipPB.gif\" /></div>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {				
				var keepCenter = function () {					
					document.getElementById(tipName).style.left = ((document.getElementById(childOfInner).offsetLeft + diffX) - (totalWidth / 2)) + 13;
					document.getElementById(tipName).style.bottom = 0;
					document.getElementById(tipName).style.top = ((document.getElementById(childOfInner).offsetTop + diffY) - document.getElementById(tipName).offsetHeight) + 2;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "bottomLeft":
			var innerWidth = totalWidth;
			totalWidth += 15;
			var refigure = 6; // set a flag to position after it's been set up, this flag contiains an additional value that will be used in refiguring the tooltip 
			var ttX = posX + 7;
			var style =	"position: absolute; display: none; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:right;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			ttContents += "<div style=\"float: left; position: relative; z-index: " + zIndex2 + "; display: inline; bottom: 21px;\"><img src=\"/images/tooltipPBL.gif\" id=\"test1\" /></div>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {				
				var keepCenter = function () {
					document.getElementById(tipName).style.left = (document.getElementById(childOfInner).offsetLeft + diffX) + 7;
					document.getElementById(tipName).style.bottom = 0;
					document.getElementById(tipName).style.top = ((document.getElementById(childOfInner).offsetTop + diffY) - document.getElementById(tipName).offsetHeight) + 6;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		case "left":
			var innerWidth = totalWidth;
			totalWidth += 39;
			var ttX = posX + 4;
			var ttY = posY - 21;
			var style =	"position: absolute; left: " + ttX + "px; top: " + ttY + "px; width: " + totalWidth + "px; z-index: " + zIndex;
			var ttContents = "<img src=\"/images/tooltipPL.gif\" style=\"position: absolute; left: 8px; top: 9px; display: inline; z-index: " + zIndex2 + "\" />";
			ttContents += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: " + innerWidth + "px; float:right;\">";
			ttContents += "<tr><td width=\"12\"><img src=\"/images/tooltipTLC.gif\" /></td><td style=\"background: url(/images/tooltipTB.gif) repeat-x\"></td><td width=\"12\"><img src=\"/images/tooltipTRC.gif\" /></td></tr>";
			ttContents += "<tr><td style=\"background: url(/images/tooltipLB.gif) left repeat-y\"></td><td style=\"background-color:#FFFFCE;\">" + closeBtn + html + "</td><td style=\"background: url(/images/tooltipRB.gif) right repeat-y;\"></td></tr>";
			ttContents += "<tr><td><img src=\"/images/tooltipBLC.gif\" /></td><td style=\"background: url(/images/tooltipBB.gif) repeat-x\"></td><td><img src=\"/images/tooltipBRC.gif\" /></td></tr>";
			ttContents += "</table>";
			
			// if the tooltip is a child of a modal dialog, create a keep center
			if (childOf != null && document.getElementById(childOf + "Bg") == undefined) {				
				var keepCenter = function () {
					document.getElementById(tipName).style.left = (document.getElementById(childOfInner).offsetLeft + diffX) + 4;
					document.getElementById(tipName).style.top = (document.getElementById(childOfInner).offsetTop + diffY) - 21;
					if (document.getElementById(tipName).style.visibility == "hidden")
						document.getElementById(tipName).style.visibility = "visible";
				}
			}
			break;
			
		default:
			alert("No suitable pointer position specified.");
			return 0; // halt execution
	}
	
	// add new tooltip to page...
	try {
		var tipDiv = document.createElement("<div id='" + tipName + "' style='" + style + "' />");
	}
	
	catch (e) {
		var tipDiv = document.createElement("div");
		
		tipDiv.setAttribute("id", tipName);
		tipDiv.setAttribute("style", style);
	}
	
	tipDiv.innerHTML = "";
	
	document.body.appendChild(tipDiv);
	document.getElementById(tipName).innerHTML = ttContents;
	
	if (refigure != null) {
		document.getElementById(tipName).style.visibility = "hidden";
		document.getElementById(tipName).style.display = "block";
		
		var ttY = (posY - document.getElementById(tipName).offsetHeight) + refigure;
		
		document.getElementById(tipName).style.top = ttY;
		document.getElementById(tipName).style.left = ttX;
		document.getElementById(tipName).style.visibility = "visible";
	}
	
	if (childOf != null && document.getElementById(childOf + "Bg") == undefined)
		document.getElementById(tipName).ctrFuncTimeout = setInterval(keepCenter, 10);
}