$(document).ready(function() {
  	
	$("#map_canvas").css({
		//height: 520,
		//width: 525
	});
	
	initialize();
	
	$("#zoekknop").click(function(){
		showAddress($("#address").val());
	});
  	
});



var map = null;
var geocoder = null;


function initialize() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(51.61579437, 5.14205393), 8);
	map.setUIToDefault();
	geocoder = new GClientGeocoder();
	
	//winkel icoon
	var winkelIcon = new GIcon(G_DEFAULT_ICON);
	winkelIcon.image = "xml/icon_winkel.png";
	winkelIcon.shadow = "xml/icon_schaduw.png";
	winkelIcon.shadowSize = new GSize(30, 40);	
	winkelIcon.iconSize = new GSize(26, 26);
	// Sla icon op in container
	markerOptions1 = { icon:winkelIcon };
	
	//restaurant icoon
	var restaurantIcon = new GIcon(G_DEFAULT_ICON);
	restaurantIcon.image = "xml/icon_restaurant.png";
	restaurantIcon.shadow = "xml/icon_schaduw.png";
	restaurantIcon.shadowSize = new GSize(30, 40);	
	restaurantIcon.iconSize = new GSize(26, 26);
	// Sla icon op in container
	markerOptions2 = { icon:restaurantIcon };
	
	
	
	// Read the data from example.xml
	  GDownloadUrl("xml/markers_xml.php", function(doc) {
		var xmlDoc = GXml.parse(doc);
		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
		  
		$(xmlDoc).find("marker").each(function(){
			var name = $(this).find('name').text();
			var address = $(this).find('address').text();
			var thisid = $(this).find('thisid').text();
			var categorie = $(this).find('categorie').text();
			var description = $(this).find('description').text();
			var ticketSale = $(this).find('ticketSale').text();
			
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			
			var latlng = new GLatLng(lat, lng);
			//map.addOverlay(new GMarker(latlng, markerOptions));
			
			if(categorie == 'Lekker van Streek verkooppunten'){
				map.addOverlay(createMarker(latlng, name, address, categorie, description, markerOptions1, ticketSale));
			} else {				
				map.addOverlay(createMarker(latlng, name, address, categorie, description, markerOptions2, ticketSale));
			}
			
		});
	  });
	
	
	
	
	
	
  }
}

function showAddress(address) {
  if (geocoder) {
	geocoder.getLatLng(
	  address,
	  function(point) {
		if (!point) {
		  alert(address + " niet gevonden");
		} else {
		  map.setCenter(point, 12);
		}
	  }
	);
  }
}




function createMarker(latlng, name, address, categorie, description, markerOptions, ticketSale) {
  var marker = new GMarker(latlng, markerOptions);
  GEvent.addListener(marker,"click", function() {
	var myHtml = "<div style='width:315px;'><b>" + name + " "+ticketSale+"<br>" + description + "<br><a href='?pagina=contact'>Uw adres ook op deze kaart?</a></div>";
	map.openInfoWindowHtml(latlng, myHtml);
  });
  return marker;
}