var popupBox = null;
var popupBoxWidth = 100;
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");
	show_Appelsec()
	for(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

		//	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.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(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(counter = 0; counter < wordsArray.length; ++counter) {
		if(wordsArray[counter].length > maxLength) {
			maxLength = wordsArray[counter].length;  
		}	//	end if wordsArray
	}	//	end for counter

		// split the longest single word into two if it has 16 or more characters
	var wordLengthLimit = 15;
	if(maxLength > wordLengthLimit) {
		var newFirstString = message.substring(0, message.lastIndexOf("-")); 
		var newLastString = message.substring(message.lastIndexOf("-") + 1); 
		var newMessage = newFirstString + "- " + newLastString;
		popupBox.innerHTML = '<span class="toolTipBox">' + newMessage + '</span>';
	} else {
		popupBox.innerHTML = '<span class="toolTipBox">' + message + '</span>';
	}	//	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');
	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