var map,directions,bounds,dirStore,dirList,locationsList;
var markers = [];
// Create a base icon for all of our markers that specifies the shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

function getDir() {
	dirString = document.getElementById("dirFrom").value + " to " + getElementsByClass("lat", dirStore)[0].innerHTML + " " + getElementsByClass("long", dirStore)[0].innerHTML;
	directions.load(dirString);
	dirList.style.padding = "0 10px !important";
	return false;
}

function hideDir() {
	directions.clear();
	map.setZoom(map.getBoundsZoomLevel(bounds));
	locationsList.style.display = "block";
	directionsPanel.style.display = "none";
}

function createMarker(latlng, index) {
	// Create a lettered icon for this point using our icon class
	var icon = new GIcon(baseIcon);
	markerNum = (index > 99) ? "" : index+1;
	icon.image = "../images/pins/marker" + markerNum + ".png";
	var marker = new GMarker(latlng, icon);

	marker.value = index;
	GEvent.addListener(marker,"click", function() {
		for (var x=0; x<locationList.length; x++) {
			locationList[x].className = "";
		}
		locationList[index].className = (locationList[index].className == "selected") ? "" : "selected";
		map.openInfoWindowHtml(latlng, '<div class="mapBubble">' + locationList[index].innerHTML + '</div>');
		locationsList.scrollTop = locationList[index].offsetTop-199;
	});

	locationList[index].onclick = function() {
		for (var x=0; x<locationList.length; x++) {
			locationList[x].className = "";
		}
		this.className = (this.className == "selected") ? "" : "selected";
		marker.openInfoWindowHtml('<div class="mapBubble">' + locationList[index].innerHTML + '</div>');
	};

	markers.push(marker);
	return marker;
}

function makeMap() {
	//get location data
	if (GBrowserIsCompatible() && document.getElementById("map")) {
		//setup directions ids
		dirStore = document.getElementById("dirStore");
		dirList = document.getElementById("dirList");
		directionsPanel = document.getElementById("directions");
		locationsList = document.getElementById("locationsList");

		map = new GMap2(document.getElementById("map"));
		directions = new GDirections(map, dirList);
		map.addControl(new GSmallMapControl());
		map.addControl(new GScaleControl());
		var point = new GLatLng(40.1543,-74.0549);
		map.setCenter(point, 13);
		bounds = new GLatLngBounds();	
		locationList = getChildrenByTagName(document.getElementById("locationsList"), "li");
		for (var x=0; x<locationList.length; x++) {
			var lat = getElementsByClass("lat",locationList[x])[0].innerHTML;
			var lng = getElementsByClass("long",locationList[x])[0].innerHTML;
			var point = new GLatLng(lat,lng);
			map.addOverlay(createMarker(point, x));
			bounds.extend(point);
			dirBtn = getElementsByClass("dir",locationList[x])[0];
			if (dirBtn) {
				dirBtn.onclick = function() {
					directions.clear();
					dirStore.innerHTML = "";
					dirStore.appendChild(this.parentNode.parentNode.cloneNode(true));
					locationsList.style.display = "none";
					directionsPanel.style.display = "block";
					return false;
				}
			}
		}
		map.setZoom(map.getBoundsZoomLevel(bounds));
		var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat())/2;
		var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng())/2;
		map.setCenter(new GLatLng(clat,clng));
		if (locationList[0].className == "selected") {
			markers[0].openInfoWindowHtml('<div class="mapBubble">' + locationList[0].innerHTML + '</div>');
		}
		
	}
}
addLoadEvent(makeMap);
window.onunload = GUnload;