//<!--
	//Clusterer Options
	var blueStyles = [{
		url: 'http://www.smbaykeeper.org/lighthawk/images/cluster2_blue.png',
        height: 50,
        width: 50,
		'z-index': "50000",
        textColor: '#FF00FF'
      }];
	var clusterSize = 40;
	var markerArray = [];
	var boatClusterer = null;

	var maritimelimits = new GGeoXml("http://www.smbaykeeper.org/lighthawk/kml/maritime.kmz");
	var propipa = new GGeoXml("http://www.smbaykeeper.org/lighthawk/kml/BRTFIPA.kmz");
	var prop3a = new GGeoXml("http://www.smbaykeeper.org/lighthawk/kml/Round3_fishing.kmz");
	var prop3b = new GGeoXml("http://www.smbaykeeper.org/lighthawk/kml/Round3_conservation.kmz");
	var prop3c = new GGeoXml("http://www.smbaykeeper.org/lighthawk/kml/Round3_combined.kmz");
	
	var mapBounds = new GLatLngBounds(new GLatLng(32.4864662848, -120.494966939), new GLatLng(34.5540502389, -117.12913713));
	var mapMinZoom = 6;
	var mapMaxZoom = 13;
	var kelpMaxZoom = 14;
	var opacity = 0.60;
	var opacityLess = 0.50;
	var opacityMore = 0.75;
	
	var minMapScale = 0;
	var maxMapScale = 16; 
	
    var map = null;
    var start;
	var zoomlevel;
	
	var overlay1, overlay2, overlay3;
	
	//Custon icons:
	var blueIcon = MapIconMaker.createFlatIcon({width: 15, height: 15,  primaryColor: "#008CFF"});
	var iconCom = MapIconMaker.createFlatIcon({width: 15, height: 15, label:"c",  primaryColor: "#008CFF"});
	var iconNCom = MapIconMaker.createFlatIcon({width: 15, height: 15, label:" N ",  primaryColor: "#00E0FF"});
	var iconRec = MapIconMaker.createFlatIcon({width: 15, height: 15, label:"R",  primaryColor: "#01FFCA"});
	var iconTiny = MapIconMaker.createFlatIcon({width: 2, height: 2, primaryColor: "#fffa73"});

	  
	   //  ======== Toggle overlays ==========	  
	function toggleKml() {
		if(document.getElementById("overlay_ml").checked == true){
			map.addOverlay(maritimelimits);
			document.getElementById('legend-ml').style.display = 'inline';
		}else{
			map.removeOverlay(maritimelimits);
			document.getElementById('legend-ml').style.display = 'none';
		}
	}
	function switcher() {
		map.removeOverlay(overlay1);
		map.removeOverlay(overlay2);
		map.removeOverlay(overlay3);
	   if(document.getElementById('switch3').checked==true){
			map.addOverlay(overlay3);
			document.getElementById('legend-substrate').style.display = 'inline';
			
	   }else{
			map.removeOverlay(overlay3);
			document.getElementById('legend-substrate').style.display = 'none';
	   }
	   if(document.getElementById('switch2').checked==true){
			map.addOverlay(overlay2);
			document.getElementById('legend-asbs').style.display = 'inline';
	   }else{
			map.removeOverlay(overlay2);
			document.getElementById('legend-asbs').style.display = 'none';
	   }
	   if(document.getElementById('switch1').checked==true){
			map.addOverlay(overlay1);
			document.getElementById('legend-kelp').style.display = 'inline';
	   }else{
			map.removeOverlay(overlay1);
			document.getElementById('legend-kelp').style.display = 'none';
	   }
	}
	function switcherProps() {
		   if(document.getElementById('switchPropIPA').checked==true){
				map.addOverlay(propipa);
			}else{ map.removeOverlay(propipa);  }
		   if(document.getElementById('switchProp3a').checked==true){
				map.addOverlay(prop3a);
			}else{ map.removeOverlay(prop3a); }
		   if(document.getElementById('switchProp3b').checked==true){
				map.addOverlay(prop3b);
			}else{ map.removeOverlay(prop3b); }
		   if(document.getElementById('switchProp3c').checked==true){
				map.addOverlay(prop3c);
			}else{ map.removeOverlay(prop3c); }
	}	  
	  
	//  ======== A function to create the marker and set up the event window   ========
    function createMarker(point,name,html,iconType) {
		var marker = new GMarker(point, {icon: iconType, title: name});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
    }
	function displayMarkers(){
		var vt = "?type="+document.getElementById('vessel_type').value;
		var va = "&activity="+document.getElementById('vessel_activity').value;
		//var vd = "&date="+document.getElementById('vessel_date').value;
		var vs = "&dates="+get_options_value('vessel_dates');

		if (boatClusterer != null) {
			boatClusterer.clearMarkers();
		}
		if(document.getElementById("loadClusters").checked == true){
			clusterZoom = 12;
		}else{
			clusterZoom = 0;
		}
		var url="kml/vessels.php"+vt+va+vs;

		var request = GXmlHttp.create();
		request.open("GET", url, true);
		request.onreadystatechange = function() {
		if (request.readyState == 4) {
		  var xmlDoc = GXml.parse(request.responseText);
		  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
		  
		  document.getElementById('numberofpoints').value = markers.length;
		  
		  for (var i = 0; i < markers.length; i++) {
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var latlng = new GLatLng(lat,lng);
				var markerType = markers[i].getAttribute("type");
				var markerIcon = blueIcon;  //SET blueIcon AS DEFAULT ICON
				if(markerType == "Commercial Fishing"){ markerIcon = iconCom; }
				if(markerType == "Commercial Non-Fishing"){ markerIcon = iconNCom; }
				if(markerType == "Recreational"){ markerIcon = iconRec; }
				
				var markerVType = markers[i].getAttribute("vtype");
				var markerActivity = markers[i].getAttribute("activity");
				var markerDate = markers[i].getAttribute("date");
				var markerPhoto = markers[i].getAttribute("photo");
				var displayPhoto = "";
				if(markerPhoto.search(/jpg/)>2){
					displayPhoto = "<span class='photoWrapper'><img src="+markerPhoto+" alt="+markerVType+" /></span>";
				}else{
					displayPhoto = "<span class='photoWrapper'><img src='images/nophoto.jpg' alt="+markerVType+" /></span>";
				}
				var markerNote = markers[i].getAttribute("note");
				
				var display = "<div class='popupDiv'><p class='popupTitle'><b>"+markerVType+"</b><br/>";
				display += ""+markerType+" Boat</p><hr />";
				display += displayPhoto;
				display += "<p>Observed "+markerDate+"<br/>";
				display += "Activity: "+markerActivity+"<br/>";
				display += "Note: "+markerNote+"</p>";
				display += "</div>";
				
				var newMarker = createMarker(latlng, markerType, display, markerIcon);
				markerArray.push(newMarker);
		  }
		  boatClusterer = new MarkerClusterer(map, markerArray, {maxZoom: clusterZoom, gridSize: clusterSize, styles: blueStyles}); 
		  markerArray = []; 
		  
		}
	  }
		  request.send(null);
	}
    function locateAddress() {
      var address = document.getElementById("address").value;
      var geocoder = new GClientGeocoder();
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point, iconTiny);
              map.addOverlay(marker);
              marker.openInfoWindowHtml("<b>"+address+"</b>");
              start = point;
            }
          }
        );
      }
    }
	function get_options_value(id){
		var optArray = new Array();
		var selectRef = document.getElementById(id);
		for (var i = 0; i < selectRef.options.length; i++) {
			if (selectRef.options[i].selected) {
				optArray.push(selectRef.options[i].value);
			}
		}
		var optString = optArray.toString();
		optString = optString.replace(/,/g, ',');
		return optString;
	}	
	function switchExpand(){
		var sideLeft = document.getElementById("sideLeft");
		sideLeft.style.display = (sideLeft.style.display=="block" ? "none" : "block");
		var tdLeft = document.getElementById("splitLeft");
		tdLeft.style.width = (tdLeft.style.width=="275px" ? "0px" : "275px");
		var switcherOn = document.getElementById("switcherOn");
		switcherOn.style.display = (switcherOn.style.display=="block" ? "none" : "block");
		var switcherOff = document.getElementById("switcherOff");
		switcherOff.style.display = (switcherOn.style.display=="block" ? "none" : "block");
	}
	function accordian(block,title){
		var divTitle = document.getElementById(title);
		var divBlock = document.getElementById(block);
		divTitle.className = (divTitle.className=="titleOn" ? "titleOff" : "titleOn");
		divBlock.style.display = (divBlock.style.display=="block" ? "none" : "block");	
	}
  
	function jump(lat,lon){
		start = new GLatLng(lat, lon);
		map.setCenter(start, 16);
	}
	function jumptohome(){
		start = new GLatLng(33.6, -118.5);
		map.setCenter(start, 8);
	}
	function clearMap(){
		map.clearOverlays();
	}

	/** Main load function: **/
    function load() {
      if (GBrowserIsCompatible()) {
		
			map = new GMap2(document.getElementById("map_canvas"));
			map.addControl(new GLargeMapControl3D());
			map.addControl(new GHierarchicalMapTypeControl());
			map.addMapType(G_PHYSICAL_MAP);
			map.setMapType(G_PHYSICAL_MAP);
			
			//Set zoom limits so all layers appear at same zoom levels
			var mapTypes = map.getMapTypes(); 
			for (var i=0; i<mapTypes.length; i++) {
				mapTypes[i].getMinimumResolution = function() {return minMapScale;}
				mapTypes[i].getMaximumResolution = function() {return maxMapScale;}
			}

			start = new GLatLng(33.6, -118.5);
			map.setCenter(start, 8);
			map.enableContinuousZoom();
			map.enableScrollWheelZoom();
			map.addControl(new GOverviewMapControl(new GSize(200,150)));
		  
		 // ======== DragZoom control ==========
		  var otherOpts = { 
			  buttonStartingStyle: {background: '#fff', paddingTop: '4px', paddingLeft: '4px', border:'1px solid #999', marginTop:'5px'},
			  buttonHTML: '<img title="Drag Zoom In" src="images/zoomin_blue.gif" alt="Zoom in" />',
			  buttonStyle: {width:'25px', height:'23px'},
			  buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
			  buttonZoomingStyle: {background:'#EBEBEB',width:'75px', height:'100%'},
			  backButtonHTML: '<img title="Zoom Back Out" src="images/zoomback_blue.gif" alt="Zoom out" />',  
			  backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'23px'},
			  backButtonEnabled: true, 
			  overlayRemoveTime: 1500} 
		   map.addControl(new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20,295)));
		   


			GEvent.addListener(map,"zoomend",function() {
			  zoomlevel = map.getZoom(); 
			  if (zoomlevel < mapMinZoom || zoomlevel > mapMaxZoom ) {
				document.getElementById('switch2-span').style.color = '#aaaaaa';
				document.getElementById('switch3-span').style.color = '#aaaaaa';
				document.getElementById('legend-substrate').style.color = '#aaaaaa';
			  }else{
				document.getElementById('switch2-span').style.color = '#414141';
				document.getElementById('switch3-span').style.color = '#414141';
				document.getElementById('legend-substrate').style.color = '#414141';
			  }
			  if (zoomlevel < mapMinZoom || zoomlevel > kelpMaxZoom ) {
				document.getElementById('switch1-span').style.color = '#aaaaaa';
			  }else{
				document.getElementById('switch1-span').style.color = '#414141';
			  }
			});
		  
		  // ======== Tiled Overlays ==========
		  var mercator = new GMercatorProjection(mapMaxZoom+1);
		  var mercatorkelp = new GMercatorProjection(kelpMaxZoom+1);
						  
		  var tilelayer1 = new GTileLayer(GCopyrightCollection(''), mapMinZoom, kelpMaxZoom);
		  tilelayer1.getTileUrl = function(tile,zoom) {
			  if ((zoom < mapMinZoom) || (zoom > kelpMaxZoom)) {
				  return "http://www.maptiler.org/img/none.png";
			  } 
			  var ymax = 1 << zoom;
			  var y = ymax - tile.y -1;
			  var tileBounds = new GLatLngBounds(
				  mercatorkelp.fromPixelToLatLng( new GPoint( (tile.x)*256, (tile.y+1)*256 ) , zoom ),
				  mercatorkelp.fromPixelToLatLng( new GPoint( (tile.x+1)*256, (tile.y)*256 ) , zoom )
			  );
			  if (mapBounds.intersects(tileBounds)) {
				  return "tiles/kelp/"+zoom+"/"+tile.x+"/"+y+".png";
			  } else {
				  return "http://www.maptiler.org/img/none.png";
			  }
		  }
		  var tilelayer2 = new GTileLayer(GCopyrightCollection(''), mapMinZoom, mapMaxZoom);
		  tilelayer2.getTileUrl = function(tile,zoom) {
			  if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
				  return "http://www.maptiler.org/img/none.png";
			  } 
			  var ymax = 1 << zoom;
			  var y = ymax - tile.y -1;
			  var tileBounds = new GLatLngBounds(
				  mercator.fromPixelToLatLng( new GPoint( (tile.x)*256, (tile.y+1)*256 ) , zoom ),
				  mercator.fromPixelToLatLng( new GPoint( (tile.x+1)*256, (tile.y)*256 ) , zoom )
			  );
			  if (mapBounds.intersects(tileBounds)) {
				  return "tiles/asbs/"+zoom+"/"+tile.x+"/"+y+".png";
			  } else {
				  return "http://www.maptiler.org/img/none.png";
			  }
		  }
		  var tilelayer3 = new GTileLayer(GCopyrightCollection(''), mapMinZoom, mapMaxZoom);
		  tilelayer3.getTileUrl = function(tile,zoom) {
			  if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
				  return "http://www.maptiler.org/img/none.png";
			  } 
			  var ymax = 1 << zoom;
			  var y = ymax - tile.y -1;
			  var tileBounds = new GLatLngBounds(
				  mercator.fromPixelToLatLng( new GPoint( (tile.x)*256, (tile.y+1)*256 ) , zoom ),
				  mercator.fromPixelToLatLng( new GPoint( (tile.x+1)*256, (tile.y)*256 ) , zoom )
			  );
			  if (mapBounds.intersects(tileBounds)) {
				  return "tiles/substrate/"+zoom+"/"+tile.x+"/"+y+".png";
			  } else {
				  return "http://www.maptiler.org/img/none.png";
			  }
		  }
		  
		  
		  // IE 7-: support for PNG alpha channel
		  tilelayer1.isPng = function() { return true;};
		  tilelayer1.getOpacity = function() { return opacity; }
		  tilelayer2.isPng = function() { return true;};
		  tilelayer2.getOpacity = function() { return opacity; }
		  tilelayer3.isPng = function() { return true;};
		  tilelayer3.getOpacity = function() { return opacity; }
		  
		  overlay1 = new GTileLayerOverlay( tilelayer1 );  //kelp
		  overlay2 = new GTileLayerOverlay( tilelayer2 );  //asbs
		  overlay3 = new GTileLayerOverlay( tilelayer3 );  //substrate
		  
		  switcher();
		  switcherProps();
		  toggleKml();
		  displayMarkers();
	  
      }else {
		alert("Sorry, the Google Maps API is not compatible with this browser");
      }
    }
	//  -->