var zoom = 16;
var mapMarkers = Array();
var mapCenter;
function getMap(postData, domElement) {
	domElement = domElement ? domElement : "gmap";
	$.ajax({
		type: "POST",
		url: rootUrl + "/campi/get_map/",
		data: postData,
		dataType: "xml",
		cache: false,
		success: function(xml){
			i = 0;
			$(xml).find("playground").each(function() {
				latitude = $(this).find("latitude").text();
				longitude = $(this).find("longitude").text();
				if (latitude && longitude) {
					var latlng = new GLatLng(latitude, longitude);
					mapCenter = ($(this).find("center").text() == 'yes') ? latlng : mapCenter;
					mapMarkers[i] = createMarker(latlng, createHtml(this));
					i++;
				}
			});
			numMarkers = mapMarkers.length;
			if (numMarkers) {
				var map = new GMap2(document.getElementById(domElement));
				map.addControl(new GSmallMapControl());
				map.addControl(new GMapTypeControl());
				if (mapCenter) {
					map.setCenter(mapCenter, zoom);
					for (i = 0; i < numMarkers; i++)
						map.addOverlay(mapMarkers[i]);
				} else {
					var bounds = new GLatLngBounds();
					map.setCenter(new GLatLng(0,0));
					for (i = 0; i < numMarkers; i++) {
						bounds.extend(mapMarkers[i].getLatLng());
						map.addOverlay(mapMarkers[i]);
					}
					cLat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
					cLng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
					map.setCenter(new GLatLng(cLat,cLng), map.getBoundsZoomLevel(bounds));
				}
			}
		}
	});
}

function createMarker(latlng, html) {
	var icon = new GIcon();
	icon.image = rootUrl + "/template/images/marker.png";
	icon.shadow = rootUrl + "/template/images/shadow_marker.png";
	icon.iconSize = new GSize(17, 32);
	icon.shadowSize = new GSize(57, 35);
	icon.iconAnchor = new GPoint(10, 32);
	icon.infoWindowAnchor = new GPoint(9, 2);
	icon.infoShadowAnchor = new GPoint(18, 25);
	
	var marker = new GMarker(latlng, icon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	
	return marker;
}

function createHtml(playground) {
	html = '<h1 style="margin-bottom: 5px; padding: 0px; width: auto; color: #0095d7; font-size: 14px; font-weight: bold; background-image: none">' + $(playground).find("name").text() + '</h1>';
	html += '<p style="color: #4c4c4c; font-size: 12px; font-style: italic">';
	html += $(playground).find("address").text();
	html += '<br />' + $(playground).find("location").text();
	html += '<br />' + $(playground).find("cap").text() + ' ' + $(playground).find("province").text() + '</p>';
	return html;
}