var previousHighlight = 0;
var oLastHotspot;
var iDelay = 800;
var bSet = false;
var bHotspotsLoaded = false;
var bUbertooltip = (window.tip) ? true : false;

function DrawHotspots(imageId)
{
	drawHotspots(imageId);
}

function DrawTents(sMapname)
{
	drawTents(sMapname);
}

function drawHotspots(imageId)
{
	var oImg			= document.getElementById(imageId);    
	var oTransImg	= document.getElementById("trans_img");
	var oCoords		= getImageCoords(oImg);
	var iXpos			= oCoords.x;
	var iYpos			= oCoords.y;
	
	if (oTransImg)
	{
		oTransImg.style.visibility = "visible";
		oTransImg.style.display    = "block";
		oTransImg.style.position   = "absolute";
		
		oTransImg.style.left       = iXpos + 'px';
		oTransImg.style.top        = iYpos + 'px';						
		for (i = 0; i < aHotspots.length; i++) 
		{
			oDiv = document.getElementById(aHotspots[i]);			
			oDiv.style.position = 'absolute';
			oDiv.style.left = iXpos + 'px';
			oDiv.style.top  = iYpos + 'px';
		}
	}
	bHotspotsLoaded = true;
}

function repositionFirefox(sImageId)
{
  var oImage = document.getElementById(sImageId);	// eerste kaartje     
  var oCoords = getImageCoords(oImage);						// coördinaten eerste plaatje.

  for (i = 0; i < aHotspots.length; i++) 
  {
    oDiv = document.getElementById(aHotspots[i]);
    oDiv.style.position = 'absolute';
    oDiv.style.left = (oCoords.x) + 'px';
    oDiv.style.top  = (oCoords.y) + 'px';
  }
}

function getImageCoords(oImage)
{
  var x = 0;
  var y = 0;
	var iBorderWidth = 0;      
  //Get map border width 
  if (typeof document.defaultView != "undefined" && typeof document.defaultView.getComputedStyle != "undefined")
		sBorderWidth = document.defaultView.getComputedStyle(oImage, "").getPropertyValue('border-left-width');
	else if (typeof oImage.currentStyle != "undefined")
		sBorderWidth = oImage.currentStyle.borderWidth;
	else
		sBorderWidth = oImage.style.borderWidth;

  if (sBorderWidth.length > 0)
  	iBorderWidth = parseInt(sBorderWidth.substring(0, 1));
	if (isNaN(iBorderWidth))
		iBorderWidth = 0;

	x = x + iBorderWidth;
	y = y + iBorderWidth;
  
  do {
    x += oImage.offsetLeft;
    y += oImage.offsetTop;
  }
  while (oImage = oImage.offsetParent);
  
  return {x: x, y: y};
}

function showMultipleHotspots(sIds, bShow)
{
	var aHotspots = sIds.split(',');
	for (i=0; i<aHotspots.length; i++) 
  {
  	bSet = false;
  	if (bShow)
      showHotspot('regio'+aHotspots[i]);
    else
      hideHotspot('regio'+aHotspots[i]);
  } 
}

function showHotspot(sHotspot)
{
	var oHotspot = document.getElementById(sHotspot);
	if (oHotspot)
	{ 	
		if (bSet && oLastHotspot != oHotspot) 
		{
			oLastHotspot.style.visibility = 'hidden';
		} 
		if (bHotspotsLoaded)
		{  	       	
			oHotspot.style.visibility  = 'visible';
			oLastHotspot = oHotspot;
			bSet = true;   	
		}
	}
	return true;
}
   
function hideHotspot(sHotspot)
{	
	var oHotspot = document.getElementById(sHotspot);	
	if (oHotspot)
		oHotspot.style.visibility='hidden';
	return true;
}

// Tentjes tekenen.
function drawTents(sMapname) 
{
	var oImage = document.getElementById(sMapname); // eerste kaartje     
	var oCoords = getImageCoords(oImage); 		 			// coördinaten eerste plaatje

	for (i = 0; i < aTentjes.length; i++) 
	{
		tent_left    	= aTentjes[i][0];
		tent_top     	= aTentjes[i][1];   
		tent_ca     	= aTentjes[i][4];
		tent_rgnr    	= aTentjes[i][5];
		tent_status  	= aTentjes[i][6];
		tent_url     	= aTentjes[i][7];
		tent_target		= aTentjes[i][8];
		sTooltip 	    = escape(aTentjes[i][9]);
		iDetailLink 	= aTentjes[i][11];

		if (oImage)
		{
			sTitle = '';
			sMouseover = '';
			sMouseout = '';

			if (iDetailLink == 1)
			{
				sMouseover = 'showCampInfo('+i+', event)';
				sMouseout  = 'hideCampInfo('+i+')';
			}
			else
			{
				if (bUbertooltip)
					sMouseover = 'showToolTip(\''+sTooltip+'\')';
				else
					sTitle = ' title="'+unescape(sTooltip)+'"';
			}

			oSpan = document.createElement('SPAN');
			oSpan.setAttribute("id", "cr" + tent_ca);
			oSpan.className = 'tent';
			oSpan.style.position = "absolute";
			oSpan.style.zIndex   = "3";
			oSpan.style.left     = (oCoords.x + tent_left) + 'px';
			oSpan.style.top      = (oCoords.y + tent_top ) + 'px';
			oSpan.innerHTML = '<a href="' + tent_url + '" target="' + tent_target + '"'+sTitle+' onfocus="blur()" onmouseout="hideHotspot(\'regio'+ tent_rgnr +'\'); '+sMouseout+'" onmouseover="showHotspot(\'regio'+ tent_rgnr +'\'); '+sMouseover+';"><img id="tent'+tent_ca+'" src="/maps/tent_'+tent_status+'.gif" border="0"></a>';
			
			document.body.appendChild(oSpan);
			if (tent_status == 5)
				oSpan.style.visibility = "hidden";
		}
	}
}

function repositionTents(sMapname)
{
	var oImage = document.getElementById(sMapname); // eerste kaartje     
	var oCoords = getImageCoords(oImage); 		 			// coördinaten eerste plaatje
	for (i = 0; i < aTentjes.length; i++) 
	{
		tent_left    	= aTentjes[i][0];
		tent_top     	= aTentjes[i][1];   
		tent_ca     	= aTentjes[i][4];
		oSpan = document.getElementById("cr" + tent_ca);
		if (oSpan)
		{
			oSpan.style.left     = (oCoords.x + tent_left) + 'px';
			oSpan.style.top      = (oCoords.y + tent_top ) + 'px';
		}
	}
}

/* Function rebuilded for Mootools compatibility */
function showCampInfo(iTent, event)
{
	var iMargin = 20;

	closeAllMenus(); //Alle openstaande menu's sluiten
	
	oDiv = $('menu_'+iTent);
	/* Checken of er voor deze camping al een context menu is.. zoja. tonen */
	if (oDiv)
	{
		oDiv.setStyle('visibility', 'visible');
	}
	/* Overlappende campings ophalen */
	else 
	{
		aLinks = new Array();
		var iCountCamp = 0;
		iLeft = aTentjes[iTent][0];
	  iTop  = aTentjes[iTent][1];
	  iCampId = aTentjes[iTent][4];
	  var oTent = $('cr'+iCampId);

		for (i=0; i<aTentjes.length; i++) 
	  {
	  	iLeftComp = aTentjes[i][0];
	  	iTopComp  = aTentjes[i][1];
	  	bOverlap = false;
	  	
	  	if (((iLeft-iMargin) <= iLeftComp) && ((iLeft+iMargin) >= iLeftComp) && ((iTop-iMargin) <= iTopComp) && ((iTop+iMargin) >= iTopComp))
	      bOverlap = true;
	    if (bOverlap)
	    {
	    	/* Camping aan array toevoegen */
				aLinks[iCountCamp] = i;
				iCountCamp++;
			}
		}
	
		/* Alleen doorgaan met context menu code als er meer dan 1 campings voldoen */
		if (iCountCamp > 1)  
		{
		  /* Create Context Menu Div */
		  var oMapImage = $('Map');
		  var oCoords = oMapImage.getCoordinates();
  	  
  	  oDiv = new Element('div', {'id': 'menu_' + iTent, 'class' : 'contextmenu', 'styles' : {'position' : 'absolute', 'left' : (oCoords.left + iLeft), 'top' : (oCoords.top + iTop), 'visibility' : 'visible'}}).injectInside(document.body);
		  oList = new Element('ul', {'class' : 'contextmenu'}).injectInside(oDiv);
		  for (var i = 0; i < aLinks.length; i++)
		  {
	  	  sUrl     = aTentjes[aLinks[i]][7];
	  	  sTarget  = aTentjes[aLinks[i]][8];
	  	  sTooltip = aTentjes[aLinks[i]][9];
	  	  /* List object maken */
	  	  oListitem = new Element('li', {'class' : 'contextmenu'}).injectInside(oList);
	  		oLink     = new Element('a', {'href': sUrl, 'target' : sTarget, 'class' : 'contextmenu'}).injectInside(oListitem);
				oLink.appendText(sTooltip);
		  }
		  
		  oDiv.addEvents({
				'mouseover': function(event) { 
					var oItem = (event.target == null) ? event.srcElement : event.target;
					//Set oItem to menu div
					if (oItem.nodeName.toLowerCase() != 'div') {
						oItem = getNode(oItem, 'div');
        	
					}
  	  		window.clearTimeout(oItem.timer);
				}.bind(this),
				'mouseout': function(event) { 
					var oItem = (event.target == null) ? event.srcElement : event.target;
					var oRelated = event.relatedTarget || event.toElement;
  	    	while (oRelated != oDiv && oRelated.nodeName != 'BODY')
  	    	{
  	    	  oRelated = oRelated.parentNode;
  	    	}
  	    	if (oRelated == oDiv) return;
  	    	
					//Set oItem to menu div
					if (oItem.nodeName.toLowerCase() != 'div') {
						oItem = getNode(oItem, 'div');
					}
  	    	
  	    	oItem.timer = setTimeout(
					  function() {
						  oItem.style.visibility = 'hidden';
					  }
					  , iDelay
					);
				}.bind(this)
			});
		  
  	}
  	else   
  	{
  		if (bUbertooltip)
		  	showToolTip(escape(aTentjes[iTent][9]));
		  else
		  {
		  	oTentLink = oTent.getFirst();
		  	oTentLink.setProperty('title', aTentjes[iTent][9]);
		  	oTooltip.addTooltipEvents(oTentLink);
		  	oTooltip.tipOver(event, oTentLink);
  		}
  	}
  }
}

function hideCampInfo(iTent)
{
	if (bUbertooltip)
		hideToolTip();
	else
		oTooltip.tipOut();
}

function getNode(oObj, sNodeName)
{
	sNodeName = sNodeName.toLowerCase();

	if (oObj.nodeName.toLowerCase() != sNodeName) 
	{
		for (var oTmp = oObj; oTmp && oTmp.nodeName != null; oTmp = oTmp.parentNode) 
		{
			if (oTmp.nodeName.toLowerCase() == sNodeName) 
			{
				return oTmp;
			}
		}
	} 
	else 
	{
		return oObj;
	}
}

function closeAllMenus()
{
	for (var x=0; x<aTentjes.length; x++) 
	{
		oContextMenu = $('menu_'+x);
		if (oContextMenu)
		{
			oContextMenu.setStyle('visibility', 'hidden');
		}
	}
}

function toggleAreaTentsEurocampings(oCheckbox)
{
	for (i=0; i<aTentjes.length; i++) 
	{
		iCamping = aTentjes[i][4];
		iStatus  = aTentjes[i][6];
      		
		if (iStatus == 5)
		{
			oTent = document.getElementById("cr" + iCamping);
			if (oCheckbox.checked)
				oTent.style.visibility = "visible";
			else
				oTent.style.visibility = "hidden";
		} 
	}          
}

function toggleAreaTents(oCheckbox)
{
	iCampCount = 0;
	for (i=0; i<aTentjes.length; i++) 
	{
		iCamping = aTentjes[i][4];
		iStatus  = aTentjes[i][10];
		if (iStatus == 0)
		{
			oTent = document.getElementById("cr" + iCamping);
			oCampBlock = document.getElementById("ca_" + iCamping);
			if (oCheckbox.checked)
			{
				iCampCount++;
				oCampBlock.style.display = "block";
				oTent.style.visibility = "visible";
			}
			else
			{
				oCampBlock.style.display = "none";
				oTent.style.visibility = "hidden";
			}
		} 
	  else
		  iCampCount++;
	}  
	
	sCampCount = "1-"+iCampCount;
	document.getElementById("camp_range").innerHTML = sCampCount;       
	
	if (typeof(initPage) == 'function')
	{
		initPage();
	}
	
}

function highlightTent(tentId, highlight)
{
	sImgStandard = '/maps/tent_4.gif';
	sImgHighlight = '/maps/tent_highlight.gif';
	izIndexStandard = 3;
	izIndexHighlight = 4;
	if (previousHighlight > 0)
	{
		spanTent = document.getElementById('cr'+previousHighlight);
		spanTent.style.zIndex = izIndexStandard;
		spanTent.style.left = spanTent.offsetLeft + 6;
		spanTent.style.top = spanTent.offsetTop + 3;
		imgTent = document.getElementById('tent'+previousHighlight);
		imgTent.style.zIndex = izIndexStandard;
		imgTent.src = sImgStandard;
	}
	spanTent = document.getElementById('cr'+tentId);
	spanTent.style.zIndex = izIndexHighlight;
	imgTent = document.getElementById('tent'+tentId);
	imgTent.style.zIndex = izIndexHighlight;
	if (highlight)
	{
		spanTent.style.left = spanTent.offsetLeft - 6;
		spanTent.style.top = spanTent.offsetTop - 3;
		imgTent.src = sImgHighlight;
	}
	else
	{
		spanTent.style.left = spanTent.offsetLeft + 6;
		spanTent.style.top = spanTent.offsetTop + 3;
		imgTent.src = sImgStandard;
	}
	previousHighlight = tentId;
}