/* HOW TO CREATE BUBBLE? IMPORTANT : DO NOT call this script inside html

tag. This script writes some divs to the page, so should be used in html header of the page Call it anywhere after the tag. STEP1. Include following code on the page '); document.write(''); document.write(''); document.write('

'); document.write(''); //This dummy iframe prevents IE6 to show slect boxes through the popup div document.write(''); //NARROW BUBBLE HTML code - this is the div that shows up as bubble--> document.write(''); //bubbleType = 1 for wide //bubbleType = 2 for narrow function HideHoverBubble(bubbleType) { var suffix; if(bubbleType == 1) //1 = WIDE, 2 = narrow { suffix = "wide"; } else { suffix = "narrow"; } var hoverBox = document.getElementById("_hoverBubbleBox-" + suffix); hoverBox.style.display = "none"; var dummyIframe = document.getElementById("_dummyIframeForHoverBubble"); dummyIframe.style.display = "none"; } function HideHoverBubbleWide() { HideHoverBubble(1); } function HideHoverBubbleNarrow() { HideHoverBubble(2); } //WIDE BUBBLE function ShowHoverBubbleWide(idOfConentDiv, anchorItem, xOffset, yOffset) { ShowHoverBubble(idOfConentDiv, anchorItem, 1, xOffset, yOffset); //2 for narrow, 1 for wide } //NARROW BUBBLE function ShowHoverBubbleNarrow(idOfConentDiv, anchorItem, xOffset, yOffset) { ShowHoverBubble(idOfConentDiv, anchorItem, 2, xOffset, yOffset); //2 for narrow, 1 for wide } // bubbleType : 2 for narrow, 1 for wide function ShowHoverBubble(idOfConentDiv, anchorItem, bubbleType, xOffset, yOffset) { var suffix; if (bubbleType == 1) //WIDE { suffix = "wide"; } else { suffix = "narrow"; } var hoverBox = document.getElementById("_hoverBubbleBox-" + suffix); var descriptionDiv = document.getElementById(idOfConentDiv); var hoverBubbleTopDiv = document.getElementById("_hoverBubbleTop-" + suffix); var hoverBubbleBottomDiv = document.getElementById("_hoverBubbleBottom-" + suffix); var anchorItemPos = GetObjectPosition(anchorItem); var hoverBoxPosX = anchorItemPos.x + 5; var hoverBoxPosY = anchorItemPos.y + 30; if (isNaN(xOffset)){ xOffset = 0;} if (isNaN(yOffset)){ yOffset = 0;} hoverBoxPosX = hoverBoxPosX + xOffset; hoverBoxPosY = hoverBoxPosY + yOffset; document.getElementById('_bubbleContent-' + suffix).innerHTML = descriptionDiv.innerHTML; hoverBox.style.top = hoverBoxPosY + "px"; hoverBox.style.left = hoverBoxPosX + "px"; hoverBox.style.display = "block"; hoverBubbleTopDiv.className = suffix + "-hoverBubble-top"; hoverBubbleBottomDiv.className = suffix + "-hoverBubble-bottom"; var dummyIframe = document.getElementById("_dummyIframeForHoverBubble"); dummyIframe.style.width = hoverBox.offsetWidth; dummyIframe.width = hoverBox.offsetWidth; //firefox doesn't read from style height/ width for iframe dummyIframe.style.height = hoverBox.offsetHeight - 33; dummyIframe.height = hoverBox.offsetHeight - 33; dummyIframe.style.top = (hoverBoxPosY + 32) + "px"; dummyIframe.style.left = (hoverBoxPosX -1) + "px"; dummyIframe.style.zIndex = hoverBox.style.zIndex - 1; dummyIframe.style.display = "block"; //Determine position top or bottom var isIE = document.all?true:false; var windowHeight = 0; var hoverBoxHeight = hoverBox.offsetHeight; if(isIE){ windowHeight = document.documentElement.clientHeight;} else { windowHeight = window.innerHeight;} //Is there enough space in the screen to show bubble in bottom position? //If not then show the buble top var positionObject = GetScrollPosition(); var scrollTopPosition = positionObject.y; if((hoverBoxHeight + hoverBoxPosY) > (windowHeight + scrollTopPosition )) { hoverBoxPosY = hoverBoxPosY - hoverBoxHeight - 30; hoverBox.style.top = hoverBoxPosY + "px"; dummyIframe.style.height = hoverBoxHeight - 33; dummyIframe.height = hoverBoxHeight - 33; dummyIframe.style.width = hoverBox.offsetWidth; dummyIframe.width = hoverBox.offsetWidth; dummyIframe.style.top = (hoverBoxPosY + 14) + "px"; hoverBubbleTopDiv.className = suffix + "-hoverBubble-top-inverted"; hoverBubbleBottomDiv.className = suffix + "-hoverBubble-bottom-inverted"; } }