var oCrtDivBaloon, oCrtImgShape;
var oDivBaloon, oImgShape;
var nWidth = 118;
var nHeight = 60;

function showBaloon(e, oArea, nIndex )
{
		if (!oDivBaloon)
			oDivBaloon = document.getElementById("map_baloon");
		if (!oImgShape)
			oImgShape = document.getElementById("img_shape");
		
		if (oCrtDivBaloon || oCrtImgShape )
		{
			hideBaloon();
		}
			
		oImgShape.src = "images/site-map/shape_"+arrShape[nIndex]+".gif";
		oImgShape.useMap = "#site_map_"+arrShape[nIndex];
				
		oImgShape.style.left = parseInt(arrOutlineX[nIndex])+"px";
		oImgShape.style.top = parseInt(arrOutlineY[nIndex])+"px";
				
		oDivBaloon.style.left = arrBaloonX[nIndex]+"px";
		
		oDivBaloon.style.top = arrBaloonY[nIndex]+"px";
		
		oDivBaloon.style.zIndex = 1000;
		oDivBaloon.innerHTML = buildBaloonHtml(arrDisplay[nIndex], arrTitle[nIndex], arrDesc[nIndex]);
		
		oDivBaloon.style.display = "block";
				
		oCrtDivBaloon=oDivBaloon;
		oCrtImgShape=oImgShape;	
}
function hideBaloon()
{	

	oCrtDivBaloon.style.display = "none";
	oCrtImgShape.style.display = "none";
	oCrtImgShape.src = "images/spacer.gif";
	oCrtImgShape.useMap = "";
	
	oCrtDivBaloon = null;
	oCrtImgShape = null;

}
function initSiteMap()
{
	
	var oMap;
	
	oMap = document.getElementById("site_map");
	for (var i=0; i<oMap.areas.length; i ++ )
	{
		oMap.areas[i].onmouseover = new Function ("e", "showBaloon(e, this, "+i+")");
	}
	cacheImages();
}
function buildBaloonHtml(strDisplay, strTitle, strDesc)
{
	var strHtml;
		
	strHtml ="";
	
	switch (strDisplay)
	{
		case "left":
			strHtml = '<img src="images/baloon_arrow_r.gif" width="14" height="14" style="position: absolute; top: 22px; left: '+(nWidth-1)+'px;">';
			break;
			break;
		case "right":
			strHtml = '<img src="images/baloon_arrow_l.gif" width="14" height="12" style="position: absolute; top: 22px; left: -13px;">';
			break;
	}
	
	strHtml += '<table cellspacing="0" cellpadding="0" border="0" width="'+nWidth+'" height="'+(nHeight+16)+'"	> \
			<tr> \
				<td width="8" height="8" align="right"><img src="images/baloon_lt.gif"  width="8" height="8"></td> \
				<td><img src="images/baloon_t.gif" width="'+(nWidth-16)+'" height="8"></td> \
				<td width="8" height="8" align="right"><img src="images/baloon_rt.gif"  width="8" height="8"></td> \
			</tr> \
			<tr> \
				<td height="'+nHeight+'" background="images/baloon_l.gif" valign="top"><img src="images/baloon_l.gif" width="8" height="'+nHeight+'"></td> \
				<td valign="top" bgcolor="#ffffff"> \
				<div class="baloon_title">'+strTitle+'</div> \
				<div class="baloon_desc">'+strDesc+'</div> \
				</td> \
				<td background="images/baloon_r.gif"" valign="top"><img src="images/baloon_r.gif" width="8" height="'+nHeight+'"></td> \
			</tr> \
			<tr> \
				<td width="8" height="8" align="right"><img src="images/baloon_lb.gif"  width="8" height="8"></td> \
				<td><img src="images/baloon_b.gif" width="'+(nWidth-16)+'" height="8"></td> \
				<td width="8" height="8" align="right"><img src="images/baloon_rb.gif"  width="8" height="8"></td> \
			</tr> \
			</table>';
	
	return strHtml;
}