// I've added polygon and circle handling as well as set a background image rather
// than a border.

function prepImage(imgId) {
	// if the showimages argument is set to one
	// then display all of the images when the page loads
	// otherwise hide them all
	var showImages = false;
	if (arguments[1] == true){
		var showImages = true;
	}
	var img = document.getElementById(imgId);
	var mapName = img.getAttribute('usemap');
    if (mapName.substr(0,1) == '#') mapName = mapName.substr(1);
	var mapObj = document.getElementById(mapName);
	var areas = mapObj.getElementsByTagName('area');
	img.areas = [];
	var contentTag = document.getElementById('map-container');
	for (var j=areas.length-1;j>=0;j--) 
	{
		var coo = areas[j].getAttribute('coords').split(',');
		
		// for polygon image maps we'll have to find the top left
		// and bottom right co-ordinates
		switch (areas[j].getAttribute('shape').toLowerCase())
		{
			case 'poly' :
				if (coo.length < 4) break;
				var tempLeft = 0 , tempTop = 0, tempRight = 0, tempBottom = 0;
				for (var k=0; k<coo.length; k++) 
				{
					var tempPos = parseInt(coo[k]);
					// we need to figure out if this is an x or a y co-ordinate
					// x's are in even positions
					// y's are in odd 
					// so to get the right one
					// we'll just do a mod
					switch (k % 2) 
					{
						case 0 : 
						if (tempPos < tempLeft || tempLeft == 0) tempLeft = tempPos;
					    if (tempPos > tempRight) tempRight = tempPos;
					    break;
					  case 1 :
					    if (tempPos < tempTop || tempTop == 0) tempTop = tempPos;
					    if (tempPos > tempBottom) tempBottom = tempPos;
					    break;
					}
				}        
			
				// create top left and bottom right coordinates for the rect shape
			  	coo = [tempLeft, tempTop, tempRight, tempBottom];
				break;
			case 'rect' :
		  		coo = [coo[0], coo[1], coo[2], coo[3]];
				break;
			case 'point' :
				coo = [coo[0], coo[1], coo[0]+1, coo[1]+1];
				break;
			case 'circle' :
				coo = [coo[0], coo[1], coo[0], coo[1]];
				break;
		}
		
		// make sure we are getting our two co-ordinates
		if (coo.length != 4) break;
		
		var a = document.createElement('a');
		//a.associatedCoords = coo;
		var thisAreaPosition = getAreaPosition(img,coo);
		a.style.left = thisAreaPosition[0] + 'px';
		a.style.top = thisAreaPosition[1] + 'px';
		// this is a bug fix for IE..you have to set the "className" attribute
		// rather than the "class" attribute to change the name of the class
		// for this element. stupid IE.
		a.setAttribute('class', areas[j].getAttribute('class'));
		a.setAttribute('className', areas[j].getAttribute('className'));
		a.myTitle = areas[j].getAttribute('title');

		// display or hide annotations based on the class
		if ( a.className == 'match' || a.className == 'match-none' || showImages) {
			a.style.display = 'block';
		} else {
			a.style.display = 'none';
		}
		var href = areas[j].getAttribute('href');
		if (href) {
			a.href = href;
		} else {
			a.href = 'javascript: void(0)';
		}
		
		if(window.addEventListener){ // Mozilla, Netscape, Firefox
			a.addEventListener('mouseover', popTitle, false);
			a.addEventListener('mouseout', clearTitle, false);
		} else { // IE
			a.attachEvent('onmouseover', popTitle);
			a.attachEvent('onmouseout', clearTitle);
		}	
		
		img.areas[img.areas.length] = a;
		contentTag.appendChild(a);
	}
}

function popTitle(evt){
	var e_out;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "myTitle";
	// "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
	evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
	overlib(e_out);
}
  
function clearTitle(evt){
	var e_out;
	nd();
}

function getAreaPosition(img,coo) {
	var aleft = (img.offsetLeft - 15 + (parseInt(coo[0]) + parseInt(coo[2])) / 2);
	var atop = (img.offsetTop - 11 + (parseInt(coo[1]) + parseInt(coo[3])) / 2);

	return [aleft,atop];
}

function showSelected(selectBox) {
	
	selectValue = selectBox.options[selectBox.selectedIndex].value;
	contentTag = document.getElementById('map-container');	

	switch (selectValue) {
		case 'All' :
			for (i=0; i<contentTag.childNodes.length; i++) {
				node = contentTag.childNodes[i];
				if (node.className) {
					if (node.className.indexOf('link') > -1 || node.className.indexOf('location') > -1) {
						node.style.display = 'block';
					}
				}
			}
			break;
		case 'None' :
			for (i=0; i<contentTag.childNodes.length; i++) {
				node = contentTag.childNodes[i];
				if (node.className) {
					if (node.className.indexOf('link') > -1 || node.className.indexOf('location') > -1) {
						node.style.display = 'none';
					}
				}
			}
			break;
		case 'Churches' :
			for (i=0; i<contentTag.childNodes.length; i++) {
				node = contentTag.childNodes[i];
				if (node.className) {
					if (node.className.indexOf('church') > -1) {
						node.style.display = 'block';
					}
					else if (node.className.indexOf('link') > -1 || node.className.indexOf('location') > -1) {
						node.style.display = 'none';
					}
				}
			}
			break;
		case 'Streets' :
			for (i=0; i<contentTag.childNodes.length; i++) {
				node = contentTag.childNodes[i];
				if (node.className) {
					if (node.className.indexOf('street') > -1) {
						node.style.display = 'block';
					}
					else if (node.className.indexOf('link') > -1 || node.className.indexOf('location') > -1) {
						node.style.display = 'none';
					}
				}
			}
			break;
		case 'Sites' :
			for (i=0; i<contentTag.childNodes.length; i++) {
				node = contentTag.childNodes[i];
				if (node.className) {
					if (node.className.indexOf('site') > -1 || node.className.indexOf('livery') > -1) {
						node.style.display = 'block';
					}
					else if (node.className.indexOf('link') > -1 || node.className.indexOf('location') > -1) {
						node.style.display = 'none';
					}
				}
			}
			break;
		
	}
}