var bubbleEnabled = false;
var bubbleShowTimer;
var bubbleHideTimer;
var bubbleTimerDelay = 100;
var obj;
var modName;

function writeModInfoBubble(){

	var addBubble = document.getElementById("rightCCLarge");

	var newElem = document.createElement('div');
	newElem.id='modInfoBubble';
	newElem.onmouseout=function(e) { hideBubble(e||event); };
	newElem.onmouseover=function(e) { cancelHide(e||event); };
	moreElem = addBubble.appendChild(newElem);

	/*var arrowLelem = document.createElement('img');
	arrowLelem.id='arrowLeft';
	arrowLelem.className='transp';
	arrowLelem.src=imgDir+'arrow_left.png';

	moreElem.appendChild(arrowLelem);
  */

	var frameLelem  = document.createElement('img');
	frameLelem.id='frameLeft';
	frameLelem.className='transp';
	frameLelem.src=imgDir+'frame_left.png';

	moreElem.appendChild(frameLelem);

	var frameTelem  = document.createElement('img');
	frameTelem.id='frameTop';
	frameTelem.className='transp';
	frameTelem.src=imgDir+'frame_top.png';

	moreElem.appendChild(frameTelem);

	var innerElem = document.createElement('div');
	innerElem.id='modInfoBubbleDetails';

	moreElem.appendChild(innerElem);

	var frameRelem  = document.createElement('img');
	frameRelem.id='frameRight';
	frameRelem.className='transp';
	frameRelem.src=imgDir+'frame_right.png';

	moreElem.appendChild(frameRelem);

	var frameBelem  = document.createElement('img');
	frameBelem.id='frameBottom';
	frameBelem.className='transp';
	frameBelem.src=imgDir+'frame_bottom.png';

	moreElem.appendChild(frameBelem);

	/*var arrowRelem  = document.createElement('img');
	arrowRelem.id='arrowRight';
	arrowRelem.className='transp';
	arrowRelem.src=imgDir+'arrow_right.png';

	moreElem.appendChild(arrowRelem);
  */

}


function doshowInfo() {
	if(bubbleEnabled){

		var bubble = document.getElementById("modInfoBubble");

		if (bubble) {

                var yBubblePos, yPos = 0;
                var xBubblePos, xPos = 0;

		var pos = dojo.style.getAbsolutePosition(obj);
		xPos = pos.x;
		yPos = pos.y;

                updateBubble(obj);


                var imgWidth =  parseInt(obj.offsetWidth);

                //var arrowRight = document.getElementById("arrowRight");
                //var arrowLeft = document.getElementById("arrowLeft");
                var frameLeft = document.getElementById("frameLeft");
                var frameRight = document.getElementById("frameRight");
                var frameTop = document.getElementById("frameTop");
                var frameBottom = document.getElementById("frameBottom");
                var modInfoBubbleDetails = document.getElementById("modInfoBubbleDetails");
		            //var arrowWidth = parseInt(arrowRight.width);

		//var mainPanel = document.getElementById("mainC");
		//if (!mainPanel) { mainPanel = document.getElementById("rightCCLarge");}

		//var middleX = (parseInt(mainPanel.offsetWidth)*2)/3 + imgWidth;
                var middleX = 500;
		var bubbleOnLeft = false;

		//TO do: move bubble up for module at lower rows
		var pageHeight = document.getElementsByTagName("html")[0].clientHeight;
		//if (pageHeight) {alert(pageHeight.clientHeight);}

		//set offset for left/right
                if (xPos > middleX){
                        bubbleOnLeft = true;
                }

                //      set the pixel offset for left/right
                if(bubbleOnLeft){
						var myOffset = modInfoBubbleDetails.offsetWidth;
                        if(myOffset>500)myOffset=(myOffset/2)-60;
                        xBubblePos = xPos - parseInt(myOffset);
                		yBubblePos = yPos;
                        //arrowRight.style.visibility = 'visible';
                        //arrowLeft.style.visibility = 'hidden';
                }else{
                		xBubblePos = xPos + imgWidth;
                		yBubblePos = yPos;
                        //arrowRight.style.visibility = 'hidden';
                        //arrowLeft.style.visibility = 'visible';

                }

                bubble.style.left = xBubblePos+ 'px';
                bubble.style.top = yBubblePos+ 'px';

                //resize bubble depending on Mod name and length of desc text
                var heading = bubble.getElementsByTagName("h3")[0];
                var descTextObj = dojo.html.getElementsByClass("approvDetails",bubble,"span")[0];

                //widen bubble if module name longer then 20 chars
                var hText = heading.firstChild.firstChild.innerHTML;

			                  modInfoBubbleDetails.style.width = 217+'px';
                        frameRight.style.left = 240+"px";
                        frameTop.style.width = 244+ "px";
                        frameBottom.style.width = 244+"px";


                //alert("length is: "+hText.length);
                /*if ((hText.length > 18) && (hText.length < 21)) {

                        modInfoBubbleDetails.style.width = 240+"px";
                        frameRight.style.left = 270+"px";
                        frameTop.style.width = 274+ "px";
                        frameBottom.style.width = 274+"px";

                        if (arrowRight.style.visibility == "visible") {
                                arrowRight.style.left = 277+"px";
                        }
                } else if (hText.length > 20) {

                        modInfoBubbleDetails.style.width = 260+"px";
                        frameRight.style.left = 290+"px";
                        frameTop.style.width = 294+ "px";
                        frameBottom.style.width = 294+"px";

                        if (arrowRight.style.visibility == "visible") {
                                arrowRight.style.left = 297+"px";
                        }

		} else {

			modInfoBubbleDetails.style.width = 210+'px';
                        frameRight.style.left = 240+"px";
                        frameTop.style.width = 244+ "px";
                        frameBottom.style.width = 244+"px";

                        if (arrowRight.style.visibility == "visible") {
                                arrowRight.style.left = "247px";
                        }
		          }*/

		//line up shadowed frame around bubble
		var xInner, yInner;
		xInner = modInfoBubbleDetails.offsetWidth;
		yInner = modInfoBubbleDetails.offsetHeight;

		if (yInner != 0) {
			frameBottom.style.top = (frameTop.offsetTop + yInner + 8)+"px";
			frameLeft.style.height = (yInner + 13)+"px";
			frameRight.style.height = (yInner + 13)+"px";
 		}

		bubble.style.visibility = 'visible';
		bubble.style.display = 'block';
			}
	}
}

function showInfo(newObj, modBubbleName) {
	cancelHide();
	obj = newObj;
	modName = modBubbleName;
	clearTimeout(bubbleShowTimer);
	bubbleShowTimer = window.setTimeout('doshowInfo()', bubbleTimerDelay);
}

function updateBubble(obj){
        if(bubbleEnabled && modName){
                //find node with information content
                var modInfoBubbleContent = document.getElementById(modName);
                var modInfoBubbleDetails = document.getElementById("modInfoBubbleDetails");
                modInfoBubbleDetails.innerHTML = modInfoBubbleContent.innerHTML;
           		var modInfoBubble = document.getElementById("modInfoBubble");
                modInfoBubble.style.visibility = 'visible';
                modInfoBubble.style.display = 'block';
        }
}

var hideTimer=null;

function hideBubble(e) {

	hideTimer=window.setTimeout("doHideBubble()",250);

}

function cancelHide(e) {
	window.clearTimeout(hideTimer);
}


function doHideBubble() {
		if(bubbleEnabled && document.getElementById("modInfoBubble")){
	   	var modInfoBubble = document.getElementById("modInfoBubble");
		modInfoBubble.style.visibility = "hidden";
	  	modInfoBubble.style.display = 'none';
	   	//document.getElementById("arrowRight").style.visibility = "hidden";
	   	//document.getElementById("arrowLeft").style.visibility = "hidden";
		}
}