var BubbleFadeOpacity = 0;
var BubbleFadeTimer;
var BubbleShowing = false;

function getRealLeft(imgElem) {
	xPos = eval(imgElem).offsetLeft;
	tempEl = eval(imgElem).offsetParent;
	while (tempEl != null) {
		xPos += tempEl.offsetLeft;
		tempEl = tempEl.offsetParent;
	}
	return xPos;
}

function getRealTop(imgElem) {
	yPos = eval(imgElem).offsetTop;
	tempEl = eval(imgElem).offsetParent;
	while (tempEl != null) {
		yPos += tempEl.offsetTop;
		tempEl = tempEl.offsetParent;
	}
	return yPos;
}


function showBubble(e, side)
{
	var theHotSpot;
	if(BubbleShowing == true)
		return;
		
	BubbleShowing == true;

	var evt = window.event || e //cross browser event object
	var theBubble = document.getElementById('bubble');
	var theBubbleContent = document.getElementById('bubblecontent');

	if (!evt.target)
	{
		theHotSpot = evt.srcElement; //IE
	} else {
		theHotSpot = evt.target; //Everything Else
	}


	var newTop = 0;
	var newLeft = 0;
	var theBubbleText = document.getElementById(theHotSpot.id + '-text');	
	theBubbleContent.innerHTML = theBubbleText.innerHTML;
	
	if (side == 'right')
	{
		theBubble.className = 'bubbleright';
		theBubbleContent.className = 'bubblecontentright';
		newTop = getRealTop(theHotSpot) - 211 + parseInt(theHotSpot.offsetHeight) + 45;
		newLeft = getRealLeft(theHotSpot) + parseInt(theHotSpot.offsetWidth);
	} else {
		theBubble.className = 'bubble';
		theBubbleContent.className = 'bubblecontent';
		newTop = getRealTop(theHotSpot) - 211 + parseInt(theHotSpot.offsetHeight) + 45;
		newLeft = getRealLeft(theHotSpot) - 273;
	}

	theBubble.style.top = newTop + 'px';
	theBubble.style.left = newLeft + "px";

	FadeOpacity = 0;
	BubbleFadeTimer = setInterval("FadeInBubble()", 15);
}

function hideBubble()
{
	clearInterval(BubbleFadeTimer);
	var theBubble = document.getElementById("bubble");
	theBubble.className = 'bubble';
	theBubble.style.display = 'none';
	BubbleShowing == false;
}

function FadeInBubble()
{
	var myBubble = document.getElementById('bubble').style;
	var IE = navigator.userAgent.indexOf("MSIE");

	// Set Fade Level for IE, Safari and Firefox
	myBubble.filter = "alpha(opacity=" + FadeOpacity + ")";
	myBubble.opacity = (FadeOpacity / 100);

	// Show the dialog box
	if (FadeOpacity == 0) { 
		myBubble.display = 'block';
	}
	// If we are done clear the timer
	if (FadeOpacity >= 100) { 
		clearInterval(BubbleFadeTimer);
		FadeOpacity = 99;
	}            
	if (FadeOpacity > 50)
	{
		myBubble.top = parseInt(myBubble.top) - 1 + "px";
	}

	if(IE >= 0) {
		FadeOpacity += 15;
	} else {
		FadeOpacity += 5;	
	}
}