// JavaScript Document

var map = null;
var mapmanager = null;
var geocoder = null;

function MapSearch() {
  var address = $("#mapsearch").val();
  if ((geocoder) && (address)) {
	geocoder.getLatLng(
	  address,
	  function(point) {
		if (!point) {
		  alert("Location not found");
		} else {
		  map.setCenter(point, 13);
		}
	  }
	)
  }
}

$(document).ready(function(){

	var baseIcon = new GIcon();
		baseIcon.iconSize=new GSize(16,16);
		baseIcon.shadowSize=new GSize(16,16);
		baseIcon.iconAnchor=new GPoint(8,8);
		baseIcon.infoWindowAnchor=new GPoint(8,8);
	  
	var redicon = new GIcon(baseIcon, "http://worldbusk.org/mapicons/red.png");
	var blueicon = new GIcon(baseIcon, "http://worldbusk.org/mapicons/blue.png");
	var orangeicon = new GIcon(baseIcon, "http://worldbusk.org/mapicons/orange.png");
	var greenicon = new GIcon(baseIcon, "http://worldbusk.org/mapicons/green.png");

	if (GBrowserIsCompatible()) {
		var mapzoom = $('#mapzoom').val();
		if (!mapzoom) mapzoom=1;
		map = new GMap2(document.getElementById("map_canvas"));
		map.setCenter(new GLatLng(5.5,15.0), parseFloat(mapzoom));
		map.setUIToDefault();
        geocoder = new GClientGeocoder();
	}

	function createMarker(point,icon,html) {
		var marker = new GMarker(point,icon);
		if (html > "")
		{
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
		}
		return marker;
	}

	// Download the data from the database and load it on the map. The format we
	// expect is:
	// <markers>
	//   <marker lat="37.441" lng="-122.141"/>
	//   <marker lat="37.322" lng="-121.213"/>
	// </markers>
	GDownloadUrl("mapdata.php", function(data, responseCode) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++)
		{
			var lat = parseFloat(markers[i].getAttribute("lat"));
			var lng = parseFloat(markers[i].getAttribute("lng"));
			var icon = markers[i].getAttribute("icon");
			var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
			var point = new GLatLng(lat, lng);
			if (icon == "orange") {
				var marker = createMarker(point, orangeicon, html);
			} else
			if (icon == "green") {
				var marker = createMarker(point, greenicon);
			} else
			if (icon == "red") {
				var marker = createMarker(point, redicon, html);
			} else {
				var marker = createMarker(point, blueicon, html);
			}
			map.addOverlay(marker);
		}
	});

	$("#mapsearchbutton").click(function(event){
		MapSearch();
	});

});