var popupBox = null;
var popupBoxWidth = 130;
var popupBoxHeight = -1;
var popupBoxVerticalOffset = 25;
var popupBoxFlipUpPadding = 5;
var mapContainerLeft = -1;
var mapContainerTop = -1;
var mapContainerRight = -1;
var mapContainerBottom = -1;
window.onload = function() {
// Create the mouseover and mouseout events for each area element
var areaElements = document.getElementsByTagName("area");
for(var counter = 0; counter < areaElements.length; counter++){
areaElements[counter].onmousemove = setPopupBox;
areaElements[counter].onmouseover = popup;
areaElements[counter].onmouseout = kill;
areaElements[counter].areaName = areaElements[counter].title;
areaElements[counter].title = "";
areaElements[counter].alt = "";
} // end for counter
// remove TITLE attribute from map IMG to fix IE bug
var mapContainer = document.getElementById('wcMap') || document.getElementById('tabMap');
var mapIMG = mapContainer.getElementsByTagName("img")[0];
mapIMG.title = "";
// create and style the popup box
if(document.createElement) {
popupBox = document.createElement('div');
popupBox.id = "popup";
document.body.insertBefore(popupBox, document.body.firstChild);
popupBox.style.position = "absolute";
popupBox.style.display = "none";
popupBox.style.zIndex = 999999;
popupBox.style.text = 900;
popupBox.style.top = "0px";
popupBox.style.left = "0px";
popupBox.style.width = popupBoxWidth + "px";
} // end if document.createElement
// set the coodinates of the map container
setMapContainer();
} // end window.onload
window.onunload = function() {
// remove the popup box if it is visible
kill();
// Remove the mouseover and mouseout events for each area element
var areaElements = document.getElementsByTagName("area");
for(var counter = 0; counter < areaElements.length; counter++){
areaElements[counter].onmousemove = null;
areaElements[counter].onmouseover = null;
areaElements[counter].onmouseout = null;
} // end for counter
} // end window.onunload
function popup() {
// do nothing if the popup box could not be created
if(!popupBox) {
return;
} // end if ! popupBox
// find out the most lengthy word of the popup string
var maxLength = -1;
var wordsArray = new Array();
var message = this.areaName;
wordsArray = message.split(' ');
for(var counter = 0; counter < wordsArray.length; ++counter) {
if(wordsArray[counter].length > maxLength) {
maxLength = wordsArray[counter].length;
} // end if wordsArray
} // end for counter
//popupBox.innerHTML = '' + message.replace(/-/g,'-') + '';
popupBox.innerHTML = '' + message.replace(/-/g,'-') + '';
// split the longest single word into two if it has 20 or more characters
var wordLengthLimit = 19;
/*
if(maxLength > wordLengthLimit) {
var newFirstString = message.substring(0, message.lastIndexOf("-"));
var newLastString = message.substring(message.lastIndexOf("-") + 1);
var newMessage = newFirstString + "- " + newLastString;
popupBox.innerHTML = '' + newMessage + '';
} else {
popupBox.innerHTML = '' + message + '';
} // end if maxLength
*/
// display the popup box
popupBox.style.display = "block";
popupBoxHeight = popupBox.offsetHeight;
} // end function popup
function kill() {
// do nothing if the popup box could not be created
if(!popupBox) {
return;
} // end if ! popupBox
// hide the popup box
popupBox.style.display = "none";
} // end function kill
function setMapContainer() {
// do nothing if the popup box could not be created
if(!popupBox) {
return;
} // end if ! popupBox
// find the map container and store it's dimension coordinates
//var mapContainer = document.getElementById('wcMap') || document.getElementById('tabMap');
//Istead of setting the larger wcMap div as the bounding box used the img inside the div
var mapContainer = '';
if(document.getElementById('wcMap')){
mapContainer = document.getElementById('wcMap').getElementsByTagName("img")[0];
} else {
mapContainer = document.getElementById('tabMap');
}
// var mapContainer = document.getElementById('wcMap').getElementsByTagName("img")[0] || document.getElementById('tabMap');
var x = -1;
var y = -1;
var element = mapContainer;
do {
x += element.offsetLeft || 0;
y += element.offsetTop || 0;
element = element.offsetParent;
} while (element)
mapContainerLeft = x;
mapContainerTop = y;
mapContainerRight = mapContainerLeft + mapContainer.offsetWidth;
mapContainerBottom = mapContainerTop + mapContainer.offsetHeight;
} // end function setMapContainer
function setPopupBox(areaEvent) {
// do nothing if the popup box could not be created
if(!popupBox) {
return;
} // end if ! popupBox
// get the current position of the mouse pointer
var x = -1;
var y = -1;
if(!areaEvent) {
areaEvent = window.event;
} // end if ! areaEvent
if(areaEvent.pageX) {
x = areaEvent.pageX;
y = areaEvent.pageY;
} else if(areaEvent.clientX) {
x = areaEvent.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
y = areaEvent.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
} // end if windowEvent.pageX
// set the position of the popup box according to the position of the mouse pointer
if(x) {
var tempX = x - (popupBoxWidth / 2);
if(popupBox.offsetLeft != x) {
if(tempX < mapContainerLeft) { // constrain the popup box to the inside left of the map
tempX = mapContainerLeft;
} // end if tempX
if((tempX + popupBoxWidth) > mapContainerRight) { // constrain the popup box to the inside right of the map
tempX = mapContainerRight - popupBoxWidth;
} // end if tempX
} // end if popupBox.offsetLeft
popupBox.style.left = tempX + "px";
} // end if x
if(y) {
var tempY = y + popupBoxVerticalOffset;
if(popupBox.offsetTop != y) {
if((tempY + popupBoxHeight + popupBoxFlipUpPadding) > mapContainerBottom) { // constrain the popup to the inside bottom of the map
tempY = tempY - (popupBoxVerticalOffset + popupBoxHeight + popupBoxFlipUpPadding);
} // end if tempY
} // end if popupBox.offsetTop
popupBox.style.top = tempY + "px";
} // end if y
} // end function setPopupBox