//******************************************************************************************************************************************/
//		dynamic popup bubble based on the overlib library
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
//			*****HTML Template*****
//			*You must build the look and feel of the bubble into the following html format.
//			*Be sure to replace each html commented section (<!-- -->) with the appropriate value.
/*
			<div id="<!--  -->" style='display:none;width:<!--  -->;'>
				<span id='<!--  -->'>
					<img src='<!-- image for arrow, or tail of the bubble -->' width='<!--  -->' height='<!--  -->'>
				</span>
				<table border='0' cellpadding='0' cellspacing='0' class='orange_txt' style="width:<!--  -->;">
					<tr>
						<td><img src='<!-- image for upper left corner of the bubble -->' width='<!--  -->' height='<!--  -->'></td>
						<td background='<!-- image for top side of the bubble -->'></td>
						<td><img src='<!-- image for upper right corner of the bubble -->' width='<!--  -->' height='<!--  -->'></td>
					</tr>
					<tr>
						<td width='<!--  -->' background='<!-- image for left side of the bubble -->'></td>
						<td bgcolor='<!-- background color of the bubble content -->'>
							<!--  Bubble Content Goes Here -->
						</td>
						<td width='<!--  -->' background='<!-- image for right side of the bubble -->'></td>
					</tr>
					<tr>
						<td><img src='<!-- image for lower left corner of the bubble -->' width='<!--  -->' height='<!--  -->'></td>
						<td background='<!-- image for bottom side of the bubble -->'></td>
						<td><img src='<!-- image for lower right corner of the bubble -->' width='<!--  -->' height='<!--  -->'></td>
					</tr>
				</table>
			</div>
*/
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
//		****Required Arguments****
//		@posElm 			->	The id or reference to the element to which the bubble tail will point.(The bubble is positioned relative to this element)
//		@htmlElm			->  The id or reference to a div element containing the bubble html.(Referrs to the div in the html template above)
//		@tailELm			->	The id or reference to a span element containing the tail image.(Referrs to the span in the html template above)
//		@type				->	The side of the bubble that the tail will come out of: 0-top, 1-right, 2-bottom, 3-left.
//		@bubbleXOffset		->	Number of pixels to move the bubble element.(right-posative numbers, left-negative numbers) 
//		@bubbleYOffset		->	Number of pixels to move the bubble element.(down-posative numbers, up-negative numbers) 
//		@tailOffset			->	Number of pixels from the bubble corner that the tail should appear.
//		@tailOverlap		->	Number of pixels the tail image should overlap the bubble html.
//
//		****Optional Arguments****  (These follow the same syntax for optional arguments in overlib)
//		"DELAY"					->	delay time for popup in miliseconds
//		(not working yet)"TIMEOUT"				->	Makes popup dissapear after the requested delay
//
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
function createBubble(posElm, htmlElm, tailElm, type, bubbleXOffset, bubbleYOffset, tailOffset, tailOverlap) {
	var posObj, 				//object or element used for reference position
			htmlObj,			//object or element that the html is retrieved from
			tailObj,			//object or element containing the tail image
			posX, 				//horizontal position of element
			posY, 				//vertical postition of element
			tableWidth,			//Width of the table that comprises the bubble
			html,				//html to pass to the overLib function
			bDelay				//delay time for popup in miliseconds
			;
	if(typeof posElm=="string") { posObj = document.getElementById(posElm); }
	else if(typeof posElm=="object") { posObj = posElm; }
	else { return false; }
	if(typeof htmlElm=="string") { htmlObj = document.getElementById(htmlElm); }
	else if(typeof htmlElm=="object") { htmlObj = htmlElm; }
	else { return false; }
	if(typeof tailElm=="string") { tailObj = document.getElementById(tailElm); }
	else if(typeof tailElm=="object") { tailObj = tailElm; }
	else { return false; }
	posX = findElmPosX(posObj);
	posY = findElmPosY(posObj);
	htmlObj.style.display = "";
		tableWidth = parseInt(htmlObj.offsetWidth);
		tailImgWidth = parseInt(tailObj.offsetWidth);
		tailImgHeight = parseInt(tailObj.offsetHeight);
	htmlObj.style.display = "none";
	//tableWidth = parseInt(htmlObj.style.width);
	//tailImgWidth = parseInt(tailObj.style.width);
	//tailImgHeight = parseInt(tailObj.style.height);
	bDelay = 0;
	bTimeout = 0;
	if(arguments.length > 8) {
		for(var x=8; x<arguments.length; x++) {
			switch(arguments[x]) {
				case "DELAY":
					if(arguments.length > x+1) {
						bDelay = parseInt(arguments[x+1]);
						x++;
					}
				break
				case "TIMEOUT":
					if(arguments.length > x+1) {
						bTimeout = parseInt(arguments[x+1]);
						x++;
					}
				break
				default: //alert("invalid parameter: "+arguments[x]+" - passed to createBubble() in popupBubble.js");
			}
		}
	}
	if(type == 0) {
		tailObj.style.position = "relative";
		tailObj.style.left = "+"+(tailOffset)+"px";
		tailObj.style.top = "+"+(tailOverlap)+"px";		
		divWidth = tableWidth;		
		html = htmlObj.innerHTML;
		BposX = posX+bubbleXOffset;
		BposY = posY+bubbleYOffset;		
		overlib(html, FULLHTML, WIDTH, divWidth, FIXX, BposX, FIXY, BposY, DELAY, bDelay, TIMEOUT, bTimeout);
	} 
	else if(type == 1) {
		tailObj.style.position = "relative";
		tailObj.style.left = "+"+(tableWidth-tailOverlap)+"px";
		tailObj.style.top = "+"+(tailImgHeight+tailOffset)+"px";
		divWidth = tableWidth + (tailImgWidth/2);
		html = htmlObj.innerHTML;
		BposX = posX-divWidth+bubbleXOffset;
		BposY = posY-tailImgHeight+bubbleYOffset;
		overlib(html, FULLHTML, WIDTH, divWidth, FIXX, BposX, FIXY, BposY, DELAY, bDelay, TIMEOUT, bTimeout);
	}
	else if(type == 2) {
		tailObj.style.position = "relative";
		tailObj.style.left = "+"+(tailOffset)+"px";
		htmlObj.style.display = "";
		tailObj.style.top = "+"+(htmlObj.offsetHeight-tailOverlap)+"px";
		htmlObj.style.display = "none";
		divWidth = tableWidth;
		html = htmlObj.innerHTML;
		BposX = posX+bubbleXOffset;
		BposY = posY+bubbleYOffset;
		overlib(html, FULLHTML, WIDTH, divWidth, FIXX, BposX, FIXY, BposY, DELAY, bDelay, TIMEOUT, bTimeout);
	}
	else if(type == 3) {
		tailObj.style.position = "relative";
		tailObj.style.left = "-"+(tailImgWidth-tailOverlap)+"px";
		tailObj.style.top = "+"+(tailImgHeight+tailOffset)+"px";
		divWidth = tableWidth + (tailImgWidth/2);
		html = htmlObj.innerHTML;
		BposX = posX+bubbleXOffset;
		BposY = posY-tailImgHeight+bubbleYOffset;
		overlib(html, FULLHTML, WIDTH, divWidth, FIXX, BposX, FIXY, BposY, DELAY, bDelay, TIMEOUT, bTimeout);
	}
	//myOverDiv = document.getElementById("overDiv");
	//myOverDiv.style.border = "1px solid black";	
}	

function findElmPosX(obj) {
	var curleft = 0;
	if(obj.offsetParent){
			while(1) {
				curleft += obj.offsetLeft;
				if(!obj.offsetParent)
					break;
				obj = obj.offsetParent;
			}
	}else if(obj.x){
			curleft += obj.x;
	}
	return curleft;
}

function findElmPosY(obj) {
	var curtop = 0;
	if(obj.offsetParent)
			while(1) {
				curtop += obj.offsetTop;
				if(!obj.offsetParent)
					break;
				obj = obj.offsetParent;
			}
	else if(obj.y)
			curtop += obj.y;
	return curtop;
}