// this needs to be refactored

// the only difference in this and mapAnnotationEditor.js is in the drawLayer function
// in this version it makes the polygons and polylines clickabe
// in the editor version they are not so that overlapping can be created

    var map;
    var mapClickEventListener;
    
    var directions;
    
    var layers = new Array();
    var activeLayer;
    var activeLayerOverlays = [];
    
    var markerIcon = new GIcon(G_DEFAULT_ICON);    
	var availableIcons = [];	
	var availableGIcons = [];	
	var availableIconsLookup = [];

   
   

    var MarkerLayer = function() {
        this.mapAnnotationLayerId = 0;
        this.shapeType = 0;
        this.icon = 0;
        this.mapPoints = [];
        this.infoWindowHtml = "";
    }

    var PolylineLayer = function() { 
        this.mapAnnotationLayerId = 0;
        this.shapeType = 1;
        this.lineColor = "#000000"; 
        this.lineOpacity = 0.5; 
        this.lineWeight = 2; 
        this.mapPoints = []; 
    }

    var PolygonLayer = function() {
        this.mapAnnotationLayerId = 0;
        this.shapeType = 2;
        this.lineColor = "#000000"; 
        this.lineOpacity = 0.5; 
        this.lineWeight = 2;         
        this.fillColor = "#000000"; 
        this.fillOpacity = 0.5;         
        this.mapPoints = [];
    }


    function loadMap(mapAnnotationIdArray, centerLat, centerLng, zoom) {                   
        	    
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(centerLat,centerLng), zoom);  
        
        //map.addMapType(G_SATELLITE_3D_MAP);  
        
        //map.getEarthInstance(getEarthInstanceCB);            
                
        DWREngine.beginBatch();
        	MapAnnotation.getAllMapAnnotationIcons(finishGetAvailableIcons);   
        	MapAnnotation.getMapAnnotations(mapAnnotationIdArray, finishGetMapAnnotation);   
        DWREngine.endBatch();
    }

    var ge;
    function getEarthInstanceCB(object) {
      ge = object;
    }
    
	function loadMapWithDirections(mapAnnotationIdArray,centerLat, centerLng, zoom) {
		loadMap(mapAnnotationIdArray,centerLat, centerLng, zoom);
	    directions = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(directions, "error", handleErrors);		
	}  
        
    // load map for editing map annotation
    function loadMapForEditing(centerLat, centerLng, zoom) {                   
        
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(centerLat,centerLng), zoom);            
                
        var mapAnnotationId = document.forms["mapAnnotationEditForm"].mapAnnotationId.value;         
        if( mapAnnotationId != 0) {  
            // load and edit existing map annotation
            DWREngine.beginBatch();
            	MapAnnotation.getAllMapAnnotationIcons(finishGetAvailableIcons);   
            	MapAnnotation.getMapAnnotation(mapAnnotationId, finishGetMapAnnotation);
            DWREngine.endBatch();            
        }
        else {  
            // start a new map annotation
            MapAnnotation.getAllMapAnnotationIcons(finishGetAvailableIcons);   
            clearActiveLayer();
            updateLayersList();     
        }
    }    
    

    // Clears the active layer <DIV> and removes associated overlays from the map
    function clearActiveLayer() {               
        activeLayer = null;
        for (var i=0; i<activeLayerOverlays.length; i++) {
            map.removeOverlay(activeLayerOverlays[i]);
        }       
        activeLayerOverlays = [];
        
        var activeLayerDiv = document.createElement("div");
        activeLayerDiv.setAttribute("id","activeLayer");
        activeLayerDiv.appendChild(document.createTextNode("Select 'Add Layer' to define new layer."));
        
        var oldActiveLayerDiv = document.getElementById("activeLayer");
        document.getElementById("mapAnnotationEditor").replaceChild(activeLayerDiv, oldActiveLayerDiv);
    }    
        
    
    // Updates the summary info for all layers and displays it in the layers <DIV>.
    function updateLayersList() {               
        
        var layersList = document.createElement("div");
        layersList.setAttribute("id","layers");
        layersList.setAttribute("class","tundra");
        
        if(layers.length == 0) {
            layersList.appendChild(document.createTextNode("No shape layers have been added."));
        }
        else {
            for(var i=0; i<layers.length; i++) {
                var layerSummary = createLayerSummary(layers[i], i);
                layersList.appendChild(layerSummary);
            }
        }
        var oldLayersList = document.getElementById("layers");
        document.getElementById("mapAnnotationEditor").replaceChild(layersList, oldLayersList);
    }
    
    
    // create a table node which displays a layer summary
    function createLayerSummary(layer, layerIdx) {     
        var shapeTypeLabel;        
        switch(layer.shapeType) {
            case 0:
                shapeTypeLabel = "Marker";
                break;
            case 1:
                shapeTypeLabel = "Polyline";
                break;          
            case 2:             
                shapeTypeLabel = "Polygon";
                break;          
        }                       
        var layerTable = document.createElement("table");
        layerTable.className="tundra";  // for IE
        var layerTableBody = document.createElement("tbody");
        layerTable.appendChild(layerTableBody);
        
        // row 1        
        var tr1 = document.createElement("tr");
        var tr1_td1 = document.createElement("td");
        tr1_td1.setAttribute("rowSpan","2");
        tr1_td1.appendChild(createLayerSummaryIcon(layer));
        var tr1_td2 = document.createElement("td");
        tr1_td2.appendChild(document.createTextNode(shapeTypeLabel));
        tr1.appendChild(tr1_td1);
        tr1.appendChild(tr1_td2);
        layerTableBody.appendChild(tr1);
        
        // row 2
        var tr2 = document.createElement("tr");
        var tr2_td1 = document.createElement("td");
        /*
        var button_highlight = new dijit.form.Button({label: "Highlight", onClick: "highlightLayer();"});
        tr2_td1.appendChild(button_highlight.domNode);
        var button_edit = new dijit.form.Button({label: "Edit", onClick: "editLayer();"});
        tr2_td1.appendChild(button_edit.domNode);
        */
        var button_delete = new dijit.form.Button({label: "Delete", onClick: function() {deleteLayer(layerIdx);}});
        tr2_td1.appendChild(button_delete.domNode);
        tr2.appendChild(tr2_td1);
        layerTableBody.appendChild(tr2);
                        
        return layerTable;
    }

        
    function createLayerSummaryIcon(layer) {
	    var icon;
        switch(layer.shapeType) {
            case 0:
            	icon = document.createElement("img");       
            	icon.setAttribute("alt","icon");     	
        		icon.setAttribute("src",availableGIcons[layer.icon+''].image);               
                break;
            case 1:
                icon = document.createElement("span");
                icon.className = "colorPreview";
                icon.style.backgroundColor=layer.lineColor;    
                icon.style.color = layer.lineColor;    
                icon.appendChild(document.createTextNode("jgl"));
                break;          
            case 2:             
                icon = document.createElement("span");
                icon.className = "colorPreview";
                icon.style.backgroundColor=layer.fillColor;    
                icon.style.color = layer.fillColor;    
                icon.style.borderColor = layer.lineColor;
                icon.appendChild(document.createTextNode("jgl"));
                break;                          
        }               
        return icon;
    }

    function addLayer(shapeType) {   
        
        var shapeTypeLabel;

        clearActiveLayer();
        
        if(mapClickEventListener) {
            GEvent.removeListener(mapClickEventListener);
        }
        mapClickEventListener = GEvent.bind(map, 'click', this, mapClick);          
        
        var layerForm = document.createElement("form");
        layerForm.setAttribute("id","layerForm");
        layerForm.className = "tundra";
        
                
        switch(shapeType) {
            case 0:
                shapeTypeLabel = "Marker";
                activeLayer = new MarkerLayer(); 

                // select marker
                var markerDiv = document.createElement("div");
                markerDiv.setAttribute("id","markerDiv");
                layerForm.appendChild(markerDiv);
                markerDiv.appendChild(document.createTextNode("icon: "));

                // icon preview
                var iconPreviewDiv = document.createElement("div");
                iconPreviewDiv.setAttribute("id","iconPreviewDiv");
                                				
                // icon select dropdown list             
        		var iconSelectList = document.createElement("select");     
        		iconSelectList.onchange = function() {
            		markerIcon = availableGIcons[this.value];
            		markerIconPreviewImg.setAttribute("src",markerIcon.image);
            		activeLayer.icon = parseInt(this.value);  
            		redrawActiveLayer();    
        		}        		
        		markerDiv.appendChild(iconSelectList);
        		for(var i=0; i<availableIcons.length; i++) {
	        		var option = document.createElement("option");
	        		option.setAttribute("value", availableIcons[i].mapAnnotationIconId);
	        		option.appendChild(document.createTextNode(availableIcons[i].name));
	        		iconSelectList.appendChild(option);
        		}
        		var markerIconPreviewImg = document.createElement("img"); 				
        		markerDiv.appendChild(markerIconPreviewImg);

                // default icon settings and preview image to first available
				activeLayer.icon = availableIcons[0].mapAnnotationIconId;
				markerIconPreviewImg.setAttribute("src",availableGIcons[activeLayer.icon+''].image);       		
                
                break;
            case 1:
                shapeTypeLabel = "Polyline";
                activeLayer = new PolylineLayer();
                // line color
                var lineColorDiv = document.createElement("div");
                lineColorDiv.setAttribute("id","lineColorDiv");
                layerForm.appendChild(lineColorDiv);                                
                lineColorDiv.appendChild(document.createTextNode("line color: "));
                createColorPalette(lineColorDiv);                                              
                break;          
            case 2:             
                shapeTypeLabel = "Polygon";
                activeLayer = new PolygonLayer();
                // fill color
                var fillColorDiv = document.createElement("div");
                fillColorDiv.setAttribute("id","fillColorDiv");
                layerForm.appendChild(fillColorDiv);                                
                fillColorDiv.appendChild(document.createTextNode("fill color: "));
                createFillColorPalette(fillColorDiv);    
                // line color
                var lineColorDiv = document.createElement("div");
                lineColorDiv.setAttribute("id","lineColorDiv");
                layerForm.appendChild(lineColorDiv);                                
                lineColorDiv.appendChild(document.createTextNode("line color: "));
                createColorPalette(lineColorDiv);                            
                break;          
        }                        
        
        // create a button to save the active layer
        var saveActiveLayerButton = new dijit.form.Button({label: "Save " + shapeTypeLabel, onClick: saveActiveLayer});
        layerForm.appendChild(saveActiveLayerButton.domNode);
                
        // create a button to cancel the active layer editing
        var cancelActiveLayerButton = new dijit.form.Button({label: "Cancel", onClick: clearActiveLayer});
        layerForm.appendChild(cancelActiveLayerButton.domNode);

        // create a button to undo the last point
        var deleteLastPointButton = new dijit.form.Button({label: "Undo Last Point", onClick: deleteLastPoint});
        layerForm.appendChild(deleteLastPointButton.domNode);        
                
        document.getElementById("activeLayer").firstChild.nodeValue = shapeTypeLabel;
        document.getElementById("activeLayer").appendChild(layerForm);
    }    
    
    
    // Save the new layer in the layers and clear activeLayer
    function saveActiveLayer() {
        if(activeLayer.mapPoints.length == 0) {
            alert("No points have been defined for this layer.");       
        }
        else {
            layers.push(activeLayer);
            updateLayersList();
            clearActiveLayer();   
            redrawLayers();
        }
    }       
    
    
    function deleteLayer(layerIdx) {
        layers.splice(layerIdx, 1);
        updateLayersList();
        redrawLayers();
    }
    

        
        
//    function mapClick(marker, clickedPoint) {
//        if (activeLayer) {
//       	alert(clickedPoint);
//        	if(clickedPoint==undefined){
//        		alert("undefined point");
//        		return;
//        	}
//            activeLayer.mapPoints.push(clickedPoint);
//            redrawActiveLayer();
//        }
//        else {
//            alert("Use 'Add Layer' to select a layer type before defining points.");    
//        }
//    }
    function mapClick(overlay, clickedPoint, overlaylatlng) {
        if (activeLayer) {
        	alert(clickedPoint);
        	//if(clickedPoint==undefined){
        	//	alert("undefined point");
        	//	return;
        	//}
        	if(overlay) {
        		alert(overlay);
        		activeLayer.mapPoints.push(overlaylatlng);
        	}        	
        	else {
        		activeLayer.mapPoints.push(clickedPoint);
        	}
            redrawActiveLayer();
        }
        else {
            alert("Use 'Add Layer' to select a layer type before defining points.");    
        }
    }        

    
    function redrawActiveLayer(){
        for (var i=0; i<activeLayerOverlays.length; i++) {
            map.removeOverlay(activeLayerOverlays[i]);
        }       
        activeLayerOverlays = [];
        if (activeLayer.mapPoints.length > 0) drawActiveLayer();
    }     
    
    function redrawLayers(){
        map.clearOverlays();
        for(var i=0; i<layers.length; i++) {
            drawLayer(layers[i]);
        }
        if (activeLayer) drawActiveLayer();
    }     



// testing...
	function createClickablePoly(poly, html) {
        if (html) {
          GEvent.addListener(poly,'click', function(point) { 
            map.openInfoWindowHtml(point,html); 
          }); 
        }
    }    
    
    
    function drawLayer(layer){
        switch(layer.shapeType) {
            case 0:
                markerOptions = { icon:availableGIcons[layer.icon+''] };  // must be a string to look up in associative array                  
                for (i=0; i<layer.mapPoints.length; i++) {  
	                var marker = new GMarker(layer.mapPoints[i], markerOptions);                       
                    map.addOverlay(marker);    
                    marker.bindInfoWindowHtml(layer.infoWindowHtml, markerOptions);
                }
                break;
            case 1:
            	//var polyline = new GPolyline(layer.mapPoints,layer.lineColor,layer.lineWeight,layer.opacity, {clickable: false});
            	var polyline = new GPolyline(layer.mapPoints,layer.lineColor,layer.lineWeight,layer.opacity, {clickable: true}); 
                map.addOverlay(polyline);
                createClickablePoly(polyline, layer.infoWindowHtml);
                break;
            case 2:                
                //var polygon_mapPoints = new Array.concat(layer.mapPoints, layer.mapPoints[0]);  doesn't work in IE
                var polygon_mapPoints = new Array();
                for (var i=0; i<=layer.mapPoints.length; i++) {
	                polygon_mapPoints.push(layer.mapPoints[i]);
                }
                polygon_mapPoints.push(layer.mapPoints[0]);
                //var polygon = new GPolygon(polygon_mapPoints,layer.lineColor,layer.lineWeight,layer.lineOpacity,layer.fillColor,layer.fillOpacity, {clickable: false}); 
                var polygon = new GPolygon(polygon_mapPoints,layer.lineColor,layer.lineWeight,layer.lineOpacity,layer.fillColor,layer.fillOpacity, {clickable: true});
                map.addOverlay(polygon);
                createClickablePoly(polygon, layer.infoWindowHtml);
                break;
            case 3:
            	//geoXml = new GGeoXml("http://localhost:8080/DP/kml/10272007_0400_manditory_evac_areas.kml");
            	var d = new Date();
            	//var kml_url = "http://graphs.calit2.uci.edu/dp-sandiego/kml/10272007_0400_manditory_evac_areas.kml";
            	var kml_url = layer.url;
            	geoXml = new GGeoXml(kml_url + "?refresh=" + d.getTime());            	
                map.addOverlay(geoXml);
                break;                
        }      
    }     


    function drawActiveLayer(){
        var layer = activeLayer;
        switch(activeLayer.shapeType) {
            case 0:                    
                markerOptions = { icon:availableGIcons[activeLayer.icon+''] };                    
                for (i=0; i<layer.mapPoints.length; i++) {                     
                    var marker = new GMarker(layer.mapPoints[i], markerOptions);
                    activeLayerOverlays.push(marker);
                    map.addOverlay(marker);    
                }
                break;
            case 1:
                var marker = new GMarker(layer.mapPoints[layer.mapPoints.length -1]);
                var polyline = new GPolyline(layer.mapPoints,layer.lineColor,layer.lineWeight,layer.opacity, {clickable: false});            
                activeLayerOverlays.push(marker);
                map.addOverlay(marker);
                activeLayerOverlays.push(polyline);
                map.addOverlay(polyline);
                break;
            case 2:                
                var marker = new GMarker(layer.mapPoints[layer.mapPoints.length -1]);
                //var polygon_mapPoints = new Array.concat(layer.mapPoints, layer.mapPoints[0]); doesn't work in IE
                var polygon_mapPoints = new Array();
                for (var i=0; i<=layer.mapPoints.length; i++) {
	                polygon_mapPoints.push(layer.mapPoints[i]);
                }
                polygon_mapPoints.push(layer.mapPoints[0]);
                var polygon = new GPolygon(polygon_mapPoints,layer.lineColor,layer.lineWeight,layer.lineOpacity,layer.fillColor,layer.fillOpacity, {clickable: false});
                activeLayerOverlays.push(marker);
                map.addOverlay(marker);
                activeLayerOverlays.push(polygon);
                map.addOverlay(polygon);
                break;
        }      
    }     
    
        
        
    function deleteLastPoint(){    
    	activeLayer.mapPoints.pop();
        redrawActiveLayer();
    }

    
    function updateLineColor(color) {
        
        var colorPreview = document.getElementById("lineColorPreview");
        colorPreview.style.backgroundColor = color;
        colorPreview.style.color = color;       
        colorPreview.replaceChild(document.createTextNode(color), colorPreview.firstChild);
        document.getElementById("lineColorSelector").removeChild(document.getElementById("lineColorSelector").firstChild);
        
        activeLayer.lineColor = color;  
        redrawActiveLayer();    
    }

    function updateFillColor(color) {
        
        var colorPreview = document.getElementById("fillColorPreview");
        colorPreview.style.backgroundColor = color;
        colorPreview.style.color = color;       
        colorPreview.replaceChild(document.createTextNode(color), colorPreview.firstChild);
        document.getElementById("fillColorSelector").removeChild(document.getElementById("fillColorSelector").firstChild);
        
        activeLayer.fillColor = color;  
        redrawActiveLayer();    
    }    
    
    
    function createColorPalette(attributeDiv) {                        
       
        // color preview box
        var lineColorPreview = document.createElement("span");
        lineColorPreview.setAttribute("id","lineColorPreview");
        lineColorPreview.className = "colorPreview";
        lineColorPreview.style.backgroundColor="#000000";    
        lineColorPreview.style.color = "#000000";    
        lineColorPreview.appendChild(document.createTextNode("#000000"));
        attributeDiv.appendChild(lineColorPreview);
        
        // link to open color palette 
        var lineColorSelectorDisplay = document.createElement("a");
        lineColorSelectorDisplay.setAttribute("href","#");
        lineColorSelectorDisplay.onclick = function() {
            lineColorSelector.appendChild(lineColorSelect.domNode); 
            return false;
        }
        lineColorSelectorDisplay.appendChild(document.createTextNode("change"));
        attributeDiv.appendChild(lineColorSelectorDisplay);
                
        // placeholder div for color palette control 
        var lineColorSelector = document.createElement("div");
        lineColorSelector.setAttribute("id","lineColorSelector");
        attributeDiv.appendChild(lineColorSelector);
        
        // color palette 
        var lineColorSelect = new dijit.ColorPalette({palette: "7x10"});        
        dojo.connect(lineColorSelect, "onChange", updateLineColor);                
    }
    
    function createFillColorPalette(attributeDiv) {                        
       
        // color preview box
        var fillColorPreview = document.createElement("span");
        fillColorPreview.setAttribute("id","fillColorPreview");
        fillColorPreview.className = "colorPreview";
        fillColorPreview.style.backgroundColor="#000000";    
        fillColorPreview.style.color = "#000000";    
        fillColorPreview.appendChild(document.createTextNode("#000000"));
        attributeDiv.appendChild(fillColorPreview);
        
        // link to open color palette 
        var colorSelectorDisplay = document.createElement("a");
        colorSelectorDisplay.setAttribute("href","#");
        colorSelectorDisplay.onclick = function() {
            fillColorSelector.appendChild(fillColorSelect.domNode); 
            return false;
        }
        colorSelectorDisplay.appendChild(document.createTextNode("change"));
        attributeDiv.appendChild(colorSelectorDisplay);
                
        // placeholder div for color palette control 
        var fillColorSelector = document.createElement("div");
        fillColorSelector.setAttribute("id","fillColorSelector");
        attributeDiv.appendChild(fillColorSelector);
        
        // color palette 
        var fillColorSelect = new dijit.ColorPalette({palette: "7x10"});        
        dojo.connect(fillColorSelect, "onChange", updateFillColor);                
    }    
     
    
    function finishGetMapAnnotation(mapAnnotation) {
	    // Loop through layers and convert map points to GLatLng objects and
    	// simplfy icon objects down to its ID for marker layers.
        for(var i=0; i<mapAnnotation.layers.length; i++) {

	        var oldMapPoints = mapAnnotation.layers[i].mapPoints;
            var newMapPoints = new Array();
            for(var j=0; j<oldMapPoints.length; j++) {
                newMapPoints.push(convertMapPoint(oldMapPoints[j]));
            }  
            mapAnnotation.layers[i].mapPoints = newMapPoints;
            
            if(mapAnnotation.layers[i].shapeType == 0) {
	            mapAnnotation.layers[i].icon = mapAnnotation.layers[i].icon.mapAnnotationIconId;	            
            }
        }
	    
		for(var i=0; i<mapAnnotation.layers.length; i++) {
			layers.push(mapAnnotation.layers[i]);			
		}
        
	    if(document.getElementById("mapAnnotationEditor")) {
        	clearActiveLayer();
        	updateLayersList();     
    	}
    	
        redrawLayers();             
    }   

    

    function convertMapPoint(oldMapPoint) {
        var newPoint = new GLatLng(oldMapPoint.latitude, oldMapPoint.longitude);        
        return newPoint;
    }
    
        
    
    // retrive all icons to use for marker layer 
    function finishGetAvailableIcons(icons) {
		// create the associative array availableGIcons with mapAnnotationId as key	
    	for(var i=0; i<icons.length; i++) {	    	
	    	var icon = new GIcon(G_DEFAULT_ICON);
	    	// BASEURL is expected to be defined in the jsp file as a global js var
	    	if(icons[i].path != null) icon.image = BASEURL + icons[i].path;
	    	if(icons[i].shadowPath != null) icon.shadow = BASEURL + icons[i].shadowPath;
	    	icon.iconSize = new GSize(icons[i].iconSizeWidth, icons[i].iconSizeHeight);
			icon.shadowSize = new GSize(icons[i].shadowSizeWidth, icons[i].shadowSizeHeight);
	    	icon.iconAnchor = new GPoint(icons[i].iconAnchorX, icons[i].iconAnchorY);
	    	icon.infoWindowAnchor = new GPoint(icons[i].infoWindowAnchorX, icons[i].infoWindowAnchorY);
	    				
	    	availableGIcons[icons[i].mapAnnotationIconId] = icon;
	    		    	
	    	icons[i].path = BASEURL + icons[i].path;
	    	availableIcons.push(icons[i]);
	    }    	
	}
    
    
    function savePoints() {
        document.forms['command'].layers.value=JSON.stringify(layers);        
        document.forms['command'].submit();
    }
    
    function debugLayers() {
        document.forms['command'].layers.value=JSON.stringify(layers);
    }
    
  function recenterMap(lat,lon) {
    map.panTo(new GLatLng(lat, lon));
  }

  function setDirections(fromAddress, toAddress, locale) {
    directions.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
  }

  function handleErrors(){
    if (directions.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
      alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.  Error code: " + directions.getStatus().code);
    else if (directions.getStatus().code == G_GEO_SERVER_ERROR)
      alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known. Error code: " + directions.getStatus().code);
    else if (directions.getStatus().code == G_GEO_MISSING_QUERY)
      alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.  Error code: " + directions.getStatus().code);
    else if (directions.getStatus().code == G_GEO_BAD_KEY)
      alert("The given key is either invalid or does not match the domain for which it was given. Error code: " + directions.getStatus().code);
    else if (directions.getStatus().code == G_GEO_BAD_REQUEST)
      alert("A directions request could not be successfully parsed. Error code: " + directions.getStatus().code);
    else alert("An unknown error occurred.");
  }