function mergePins() {
	var zoomPin = new Array();
	zoomPin[1] = '<li id="bremertonLinkZoom"><a href="#bremerton" title="Bremerton"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[2] = '<li id="brownsvilleLinkZoom"><a href="#brownsville" title="Brownsville"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[3] = '<li id="indianolaLinkZoom"><a href="#indianola" title="Indianola"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[4] = '<li id="keyportLinkZoom"><a href="#keyport" title="Keyport"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[5] = '<li id="kingstonLinkZoom"><a href="#kingston" title="Kingston"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[6] = '<li id="manchesterLinkZoom"><a href="#manchester" title="Manchester"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[7] = '<li id="poulsboLinkZoom"><a href="#poulsbo" title="Poulsbo"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[8] = '<li id="silverdaleLinkZoom"><a href="#silverdale" title="Silverdale"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[9] = '<li id="tracytonLinkZoom"><a href="#tracyton" title="Tracyton"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	zoomPin[10] = '<li id="watermanLinkZoom"><a href="#waterman" title="waterman"><img src="/core/map_point.png" alt="map pointer" /></a></li>';
	var allPins = "";
	for (k = 1; k < zoomPin.length; k++) {
	    var toAdd = zoomPin[k];
		allPins = allPins + toAdd;
	}
	return allPins;
}


function createDiv() {
	var newDiv = document.createElement("div");
	var getMap = document.getElementById("map");
	var zoomPins = mergePins();
	newDiv.id = "zoomed";
	newDiv.className = "hidden";
	newDiv.innerHTML = '<a href="#" id="closeLink">-</a>' + zoomPins;
	getMap.insertBefore(newDiv, getMap.firstChild);
}

function createZoomLink() {
	var newLink = document.createElement("a");
	var getMap = document.getElementById("map");
	newLink.id = "zoomLink";
	newLink.title = "Click To Enlarge"
	newLink.href = "#";
	newLink.innerHTML = '<span class="zoomSpan">+</span>';
	getMap.insertBefore(newLink, getMap.firstChild);
}


function getHTML(linkId) {
	var getListings = document.getElementById("listings") 
	var getLI = getListings.getElementsByTagName("li");
	for (i=0; i < getLI.length; i++) {
		if (linkId.indexOf(getLI[i].id)!= -1) {
			return getLI[i].innerHTML;
		}
	}
}

function setupLinks() {
	if (document.getElementById && document.getElementsByTagName)  {
	
		//code below sets up zoom functionality
		createDiv();
		createZoomLink();
	 	document.getElementById("zoomLink").onclick = function() {
	 		if(navigator.appName == "Microsoft Internet Explorer") {
				document.getElementById("map").className = "ie zoomed";	 		
			}
	 		document.getElementById("zoomed").className="";
			return false;
		}
		document.getElementById("closeLink").onclick = function() {
		if(navigator.appName == "Microsoft Internet Explorer") {
				document.getElementById("map").className = "ie";
			}
			document.getElementById("zoomed").className="hidden";
			return false;
		}
		// Code below sets up map pin behavior
		var getLinks = document.getElementById("mapInner").getElementsByTagName("li");
		for (i=0; i < getLinks.length; i++) {
			var getInner = getHTML(getLinks[i].id);
			var newDiv = document.createElement("div");
			newDiv.className = "hovered";
			newDiv.innerHTML = getInner;
			getLinks[i].appendChild(newDiv);
			getLinks[i].onmouseover =  function() {
				this.className = "over";
			}
			getLinks[i].onmouseout= function() {
				this.className = "";
			}
		}
		var getZoomLinks = document.getElementById("zoomed").getElementsByTagName("li");
		for (j=0; j < getZoomLinks.length; j++) {
			var getInner = getHTML(getZoomLinks[j].id);
			var newDiv = document.createElement("div");
			newDiv.className = "hovered";
			newDiv.innerHTML = getInner;
			getZoomLinks[j].appendChild(newDiv);
			getZoomLinks[j].onmouseover= function() {
				this.className = "over";
			}
			getZoomLinks[j].onmouseout= function() {
				this.className = "";
			}
		}
	}
}

function zIndexFix() {
	if(navigator.appName == "Microsoft Internet Explorer") {
		document.getElementById("map").className = "ie";
		document.getElementById("closeLink").innerHTML = "&nbsp";
	}
}

setupLinks();
zIndexFix();
