var map;
var geocoder;
var baseIcon;

function load() {
	if (GBrowserIsCompatible()) {
		geocoder = new GClientGeocoder();
		// Set up map
		map = new GMap2(document.getElementById('map'));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		// Get Querystring "zip"
		var zip = getZipQueryString();
		geocoder.getLatLng(zip, function(latlng) {
			if (latlng) {
				searchLocationsNear(latlng);
			}
			else {
				map.setCenter(new GLatLng(40.4173, -82.9071), 7);
			}
		});
		// Set up marker
		baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.shadow = "gmap/hand_shadow.png";
		baseIcon.iconSize = new GSize(29, 52);
		baseIcon.shadowSize = new GSize(56, 52);
		baseIcon.iconAnchor = new GPoint(17, 48);
		baseIcon.infoWindowAnchor = new GPoint(15, 2);
	}
}

function getZipQueryString() {
	qStrings = window.location.search.substring(1);
	qStringsArray = qStrings.split("&");
	zip = '';
	for (i=0; i<qStringsArray.length; i++) {
		keyValue = qStringsArray[i].split("=");
		if (keyValue[0] == "zip") {
			zip = keyValue[1];
		}
	}
	return zip;
}

function searchLocations() {
 var address = document.getElementById('addressInput').value;
 geocoder.getLatLng(address, function(latlng) {
	 if (!latlng) {
		 alert(address + ' not found');
	 } else {
		 searchLocationsNear(latlng);
	 }
 });
}

function searchLocationsNear(center) {
 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'gmap/genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 GDownloadUrl(searchUrl, function(data) {
	 var xml = GXml.parse(data);
	 var markers = xml.documentElement.getElementsByTagName('marker');
	 map.clearOverlays();

	 var list = document.getElementById('resultsList');
	 list.innerHTML = '';
	 if (markers.length == 0) {
		 list.innerHTML = '<p>No results found.</p>';
		 map.setCenter(new GLatLng(40.4173, -82.9071), 7);
		 return;
	 }

	 var bounds = new GLatLngBounds();
	 for (var i = 0; i < markers.length; i++) {
		 var status = markers[i].getAttribute('status');
		 var name = markers[i].getAttribute('name');
		 var address1 = markers[i].getAttribute('address1');
		 var address2 = markers[i].getAttribute('address2');
		 var city = markers[i].getAttribute('city');
		 var state = markers[i].getAttribute('state');
		 var zip = markers[i].getAttribute('zip');
		 var phone = markers[i].getAttribute('phone');
		 var ext = markers[i].getAttribute('ext');
		 var website = markers[i].getAttribute('website');
		 var specialization = markers[i].getAttribute('specialization');
		 var grades = markers[i].getAttribute('grades');
		 var distance = parseFloat(markers[i].getAttribute('distance'));
		 var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
														 parseFloat(markers[i].getAttribute('lng')));
		 
		 var marker = createMarker(point, status, name, address1, address2, city, state, zip, phone, ext, website, specialization, grades);
		 map.addOverlay(marker);
		 var listEntry = createListEntry(marker, name, address1, address2, city, state, zip, distance);
		 list.appendChild(listEntry);
		 bounds.extend(point);
	 }
	 map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
 });
}

function createMarker(point, status, name, address1, address2, city, state, zip, phone, ext, website, specialization, grades) {
	// Set up custom icon
	var icon = new GIcon(baseIcon);
	if (status == "Y") {
		icon.image = "gmap/hand_red.png";
	}
	else {
		icon.image = "gmap/hand_grey.png";
	}
	icon.imageMap = [18,51,13,44,12,30,0,19,0,16,4,13,5,3,10,0,19,0,26,5,26,10,24,15,25,24,29,38,29,44,21,52,18,51];
	
	// Set up GMarkerOptions object
	markerOptions = { icon:icon };
	var marker = new GMarker(point, markerOptions);
	
	// Set up info box
	var html = '<div class="schoolinfo">' +
		'<div class="schoolname">' + name + '</div>' +
		'<div class="address">' + address1 +
		((address2) ? ('<br/>' + address2) : '') +
		'<br/>' + city + ', ' + state + ' ' + zip + '</div>' +
		((phone) ? ('<div class="phone">Phone: ' + phone +
			((ext) ? (' &nbsp;ext.' + ext) : '') + '</div>') : '') +
		((specialization) ? ('<div class="specialization">Specialization: ' + specialization + '</div>') : '') +
		((grades) ? ('<div class="grades">Grades: ' + grades + '</div>') : '') +
		((website) ? ('<div class="website"><a href="' + website +
		'" title="' + website + '" target="_blank">Visit school\'s website</a></div>') : '') +
		'<div class="spacer">&nbsp;</div></div>';
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html, {maxWidth:'350'});
	});
	
	return marker;
}

function createListEntry(marker, name, address1, address2, city, state, zip, distance) {
	var div = document.createElement('div');
	var html = '<span class="schoolName">' + name + '</span> <span class="distance">(' + distance.toFixed(1) + ')</span>';
	div.innerHTML = html;
	div.style.cursor = 'pointer';
	div.className = 'schoolEntry'; 
	GEvent.addDomListener(div, 'click', function() {
		GEvent.trigger(marker, 'click');
	});
	GEvent.addDomListener(div, 'mouseover', function() {
		div.style.backgroundColor = '#f5f5f5';
	});
	GEvent.addDomListener(div, 'mouseout', function() {
		div.style.backgroundColor = '#fff';
	});
	return div;
}