var map;
	var arrMarkers = [];

	function mapInit(){
		var mapOptions = {
			mapTypeId: google.maps.MapTypeId.TERRAIN
		};
		map = new google.maps.Map(document.getElementById("maps"), mapOptions);
		
	}
	
	function load_markers(place, builder){
		if(place === undefined){
			place = '';
		}
		
		if(builder === undefined){
			builder = '';
		}
	
		$.getJSON("include/map_json.php?place=" + place + "&builder=" + builder, {}, function(data){
			var bounds = new google.maps.LatLngBounds();
			var infowindow = new google.maps.InfoWindow;
			
			
		
			$.each(data, function(i, item){
				var latlng = new google.maps.LatLng(item.lat, item.lng);
				bounds.extend(latlng);
				
				var urlName = item.naam;
				
				//$("#markers").append('<li><a href="#" rel="' + i + '">' + item.naam + '</a></li>');
				
				var image = new google.maps.MarkerImage(
				  	'images/gmaps-icon.png',
					new google.maps.Size(18.0, 23.0),
					new google.maps.Point(0, 0),
					new google.maps.Point(9.0, 11.0)
				);
				
				var shadow = new google.maps.MarkerImage(
					'images/gmaps-shadow.png',
					new google.maps.Size(30.0, 23.0),
					new google.maps.Point(0, 0),
					new google.maps.Point(9.0, 11.0)
				);
				
				var marker = new google.maps.Marker({
					icon: image,
					shadow: shadow,							
					position: latlng,
					map: map
				});
				arrMarkers[i] = marker;
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.setContent("<div style=\"width: 272px; overflow: hidden;\"><h4>"+ item.naam +"</h4><div style=\"height: 70px; width:70px; padding:5px;float:left;\"><a href=\"bouwplaats/" + item.id + "\"><img align=\"left\" src=\"docs/Image/bouwplaatsen/"+ item.image +"\" /></a></div><div style=\"padding:5px;float:left;\">"+ item.straat + "&nbsp;" + item.nummer +"<br/>" + item.postcode + "&nbsp;" + item.plaats + "<br /><a href=\"bouwplaats/" + item.id + "\">&raquo; ga naar deze bouwplaats</a></div></div><br /><img src=\"images/new_problem.gif\" alt=\"Nieuw probleem\" /><a href=\"http://www.verbeterdebouwplaats.nl/" + item.lat +  "/" + item.lng +  "/" + item.urlnaam + "\">Nieuw probleem</a> | <img src=\"images/new_idea.gif\" alt=\"Nieuw idee\" /><a href=\"http://www.verbeterdebouwplaats.nl/" + item.lat +  "/" + item.lng +  "/" + item.urlnaam + "\">Nieuw idee</a>");
					infowindow.open(map, marker);
					//Cufon.replace('h4');
				});
				google.maps.event.addListener(map, 'click', function() {
					infowindow.close();
				});
			});
			
			map.fitBounds(bounds);
		});
	}
	
	function clear_markers() {
		if (arrMarkers) {
			for (i in arrMarkers) {
				arrMarkers[i].setMap(null);
			}
		}
	}
	
	$(function(){
		// initialize map (create markers, infowindows and list)
		mapInit();
		load_markers();
		
		// "live" bind click event
		$("#place_select").live("change", function(){
			var place_select = $('#place_select').val();
			$('#builder_select').val('');
		
			clear_markers();
			load_markers(place_select, '');
		});
		
		$("#builder_select").live("change", function(){
			var builder_select = $('#builder_select').val();
			$('#place_select').val('');
		
			clear_markers();
			load_markers('', builder_select);
		});
	});