var map;
var eviction_list = [];
$(document).ready(function() {
    var latlng = new google.maps.LatLng(-41.286707,174.777031);
    var myOptions = {
      zoom: 5,
      center: latlng,
      navigationControl: true,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
	
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    $.getJSON('/load_project.php', {
		type: '',
		product: ''}, function(json) {
			evictMarkers();
			setMarkers(map, json);
			//$(":checkbox").attr("checked", true);
	});

});
 
function evictMarkers(clearAll) {
	//uncheck all checkboxes
	if(clearAll) {
		$(":checkbox").attr("checked", false);
	}
    // clear all markers
    $(eviction_list).each(function () {
         this.setMap(null);
    });

    // reset the eviction array 
    eviction_list = [];
}


function show_markers(element) {
	if($(":checked").length>0) {
		//get what regions are checked
		var type="";
		$('#location_control input:checkbox:not(:checked)').each(function() {
		   type = type + ($(this).val())+",";
		});
		//get what products are checked
		var products="";
		$("#product_control input:checkbox:not(:checked)").each(function() {
		   products = products + ($(this).val())+",";
		});
		//load data and show markers on map
		$.getJSON('/load_project.php', {
			type: type,
			product: products}, function(json) {
				evictMarkers();
				setMarkers(map, json);
		});
	} else {
		//if they have unchecked all boxes then clear the map of all markers
		evictMarkers();
	}
}

function setMarkers(map, locations) {
	// Add markers to the map
	
	// Marker sizes are expressed as a Size of X,Y
	// where the origin of the image (0,0) is located
	// in the top left of the image.
	
	// Origins, anchor positions and coordinates of the marker
	// increase in the X direction to the right and in
	// the Y direction down.
	var image = new google.maps.MarkerImage('/images/pointer.png',
	  // This marker is 20 pixels wide by 32 pixels tall.
	  new google.maps.Size(20, 20),
	  // The origin for this image is 0,0.
	  new google.maps.Point(0,0),
	  // The anchor for this image is the base of the flagpole at 0,32.
	  new google.maps.Point(10, 20));
	var shadow = new google.maps.MarkerImage('/images/pointer.png',
	  // The shadow image is larger in the horizontal dimension
	  // while the position and offset are the same as for the main image.
	  new google.maps.Size(20, 20),
	  new google.maps.Point(0,0),
	  new google.maps.Point(10, 20));
	  // Shapes define the clickable region of the icon.
	  // The type defines an HTML <area> element 'poly' which
	  // traces out a polygon as a series of X,Y points. The final
	  // coordinate closes the poly by connecting to the first
	  // coordinate.
	var shape = {
	  coord: [1, 1, 1, 20, 20, 20, 20 , 1, 1, 1],
	  type: 'poly'
	};
	for (var i = 0; i < locations.length; i++) {
		var project = locations[i];
		var myLatLng = new google.maps.LatLng(project['long'], project['lat']);
		var marker = new google.maps.Marker({
		    position: myLatLng,
		    map: map,
		    shadow: shadow,
		    icon: image,
		    shape: shape,
		    title: project['title'],
		    zIndex: project['z']
		});
		eviction_list.push(marker);
		google.maps.event.addListener(marker, 'click', buildClickHandler(marker, project['popup']));
		
	}
	function buildClickHandler(marker, content_info) {
		var infowindow = new google.maps.InfoWindow({
		   	 content: content_info
		});	
    	return function() {
    		infowindow.open(map,marker);
    		google.maps.event.addListener(map, "click", function() { 
       		if (infowindow) { 
            	infowindow.close(); 
       		} 
	    }); 
    	};
	}
}