var customIcons = {
	/*
	entry: {
		icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
	}
	*/
	entry: {
		icon: '/wp-content/plugins/interactivemap/images/beachball.png',
		shadow: '/wp-content/plugins/interactivemap/images/shadow-beachball.png'
	}
};

function load() {
	var map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(37.0625, -95.677068),
		zoom: 3,
		mapTypeId: 'roadmap'
	});
	var infoWindow = new google.maps.InfoWindow;

	// Change this depending on the name of your PHP file
	downloadUrl("/index.php?getxml=1", function(data) {
		var xml = parseXml(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		
		for (var i = 0; i < markers.length; i++) {
			var county = markers[i].getAttribute("county");
			var state = markers[i].getAttribute("state");
			var typeofpool = markers[i].getAttribute("typeofpool");
			var freechlorine = markers[i].getAttribute("freechlorine");
			var pH = markers[i].getAttribute("pH");			
			var type = markers[i].getAttribute("type");
			var point = new google.maps.LatLng(
				parseFloat(markers[i].getAttribute("lat")),
				parseFloat(markers[i].getAttribute("lng")));
			
			var html = "<div align=\"center\"><h2>HEALTHY POOLS</h2></div>";
			html += "<div><strong>Type of Pool:</strong> " + typeofpool + "</div>";
			html += "<div><strong>Chlorine Reading:</strong> " + freechlorine + "</div>";
			html += "<div><strong>pH Level:</strong> " + pH + "</div>";
			html += "<div><strong>Location:</strong> " + county + ", " + state + "</div>";
			html += markers[i].getAttribute("entriesLink");

			var icon = customIcons[type] || {};
			
			var shadow = new google.maps.MarkerImage(icon.shadow,
				new google.maps.Size(32,21),
				new google.maps.Point(0,0),
				new google.maps.Point(5,21));
				
			//var myIcon = new GIcon();
			//myIcon.image = 'markers/image.png';
			//icon.shadow = 'markers/shadow.png';
			//icon.iconSize = new GSize(21,21);
			//icon.shadowSize = new GSize(32,21);
			//myIcon.iconAnchor = new GPoint(21,21);
			//myIcon.infoWindowAnchor = new GPoint(11,0);
				
			
			var marker = new google.maps.Marker({
				map: map,
				position: point,
				icon: icon.icon,
				shadow: shadow
			});
			bindInfoWindow(marker, map, infoWindow, html);
		}
	});
}

function bindInfoWindow(marker, map, infoWindow, html) {
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
}

function downloadUrl(url, callback) {
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest;
	
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			request.onreadystatechange = doNothing;
			callback(request.responseText, request.status);
		}
	};

	request.open('GET', url, true);
	request.send(null);
}

function parseXml(str) {
	if (window.ActiveXObject) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	} else if (window.DOMParser) {
		return (new DOMParser).parseFromString(str, 'text/xml');
	}
}

function doNothing() {}