var map;
var geocoder;
var BikeRoutePolyline;
var routeBeginMarker;
var markerText = new Array();
var markerPoint = new Array();
var routePointOverlay = new Array();
var markerOverlay = new Array();
var routePoint = new Array();
var totalDistance = 0;
var removeMarker="";
var mapCenterLat="";
var mapCenterLat=33.783356;
var mapCenterLng=-84.368348;
var mapZoom=13;

var routePointLat = new Array();
var routePointLng = new Array();
var markerPointLat = new Array();
var markerPointLng = new Array();



function panToAddress(address) {
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + " was not found. Please try again.");
      } else {
        map.setCenter(point, map.getZoom());
      }
    }
  );
return false;
}


function updateMarkerText(index) {
  var markerTextarea = 'markerTextarea' + index;
  markerTextarea = markerTextarea.toString();
  markerText[index] = document.getElementById(markerTextarea).value;
return;
}

function updateDistanceDisplay() {

  var utd = totalDistance/1609.344;
  var oab = document.getElementById('outAndBack');
  if(oab.checked==1) {
    utd = 2*utd;
  } 
  document.getElementById('distanceDisplay').value=(utd).toFixed(2) + " miles";
  //This updates the display that lets user decide whether to use the milage from the map, or to input their own
  if(document.getElementById('map_miles')) {
	document.getElementById('map_miles').value=(utd).toFixed(2);
  }

return;
}

function clearAllOverlays() {
  if(confirm("Are you sure that would like to clear all elements from the map?")) {
    markerText.splice(0);
    markerPoint.splice(0);
    routePoint.splice(0);
    totalDistance = 0;
    updateDistanceDisplay();
    map.clearOverlays();
  }
return;
}

function deleteMarker(index) {
  if(index=="removeLast") {
    map.closeInfoWindow();
    var markerOverlayPop = markerOverlay.pop();
    map.removeOverlay(markerOverlayPop);
    markerText.pop();
    markerPoint.pop();  
  }
  else {
    if(confirm("Are you sure that you would like to remove this marker?")) {
      map.closeInfoWindow();
      map.removeOverlay(markerOverlay[index]);
      markerText[index]="";
      markerPoint[index]="";
      markerOverlay[index]="";
    }
  }
return;
}

function calculateTotalDistance() {
  totalDistance = 0.00;
  if(routePoint.length>1) {
    for(x=0;x<routePoint.length-1;x++) {
      totalDistance = totalDistance + routePoint[x].distanceFrom(routePoint[x+1]);
    }
  }
}

function drawBikeRoutePolyline() {
  if(typeof(BikeRoutePolyline) != "undefined"){map.removeOverlay(BikeRoutePolyline);}
  BikeRoutePolyline = new GPolyline(routePoint, "#0000ff", 4, .4);
  map.addOverlay(BikeRoutePolyline);
  updateDistanceDisplay();
}


function undoAction() {

    map.removeOverlay(routePointOverlay[routePointOverlay.length-1]);
    routePointOverlay.pop();
    calculateTotalDistance();
    routePoint.pop();
    drawBikeRoutePolyline();
}


function createMarker(point, index) {

    var markerOptions = { draggable:true };
    var newMarker =  new GMarker(point, markerOptions);

    //newMarker.openInfoWindowHtml("<div id=\"markWinInfo\"><form><div style=\"font-size:12px;\">Type below to add marker info:<div><textarea style=\"height:50px; width:200px;\" id=\"markerTextarea"+index+"\" onkeyup=\"updateMarkerText("+index+")\">"+markerText[index]+"</textarea></form><div style=\"font-size:12px;\"><a href=\"javascript:deleteMarker("+index+")\">remove marker</a></div>");
    //newMarker.closeInfoWindow();

    GEvent.addListener(newMarker, "click", function() {newMarker.openInfoWindowHtml("<div id=\"markWinInfo\"><form><div style=\"font-size:12px;\">Type below to add marker info:<div><textarea style=\"height:50px; width:200px;\" id=\"markerTextarea"+index+"\" onkeyup=\"updateMarkerText("+index+")\">"+markerText[index]+"</textarea></form><div style=\"font-size:12px;\"><a href=\"javascript:deleteMarker("+index+")\">remove marker</a></div>");});	    
    GEvent.addListener(newMarker, "dragstart", function() {newMarker.closeInfoWindow();});	    
    GEvent.addListener(newMarker, "dragend", function() {markerPoint[index]=newMarker.getPoint();});    

    markerOverlay.push(newMarker);

return newMarker;
}

function createDraggableRoutePoint(point, index) {

 if(index>0) {

   var routeTransparentIcon = new GIcon();
   routeTransparentIcon.image = "../images/markers/transparentMarker.png";
   routeTransparentIcon.iconSize = new GSize(12, 12);
   routeTransparentIcon.iconAnchor = new GPoint(6, 6);

   var markerOptions = { icon:routeTransparentIcon, draggable:true, bouncy:true, dragCrossMove:true};
   var routeMarker = new GMarker(point, markerOptions);

   GEvent.addListener(routeMarker, "mouseover", function() {routeMarker.setImage("../images/markers/whiteCircleMarker.png");})
   GEvent.addListener(routeMarker, "mouseout", function() {routeMarker.setImage("../images/markers/transparentMarker.png");});
   GEvent.addListener(routeMarker, "dragstart", function() {routePoint[index]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();});
   GEvent.addListener(routeMarker, "drag", function() {routePoint[index]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();});	    
   GEvent.addListener(routeMarker, "dragend", function() {routePoint[index]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();});

   routePointOverlay.push(routeMarker);
 }
 else {
   var beginRouteIcon = new GIcon();
   beginRouteIcon.image = "../images/markers/startRouteMarker.png";
   beginRouteIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
   beginRouteIcon.iconSize = new GSize(20, 34);
   beginRouteIcon.shadowSize = new GSize(37, 34);
   beginRouteIcon.iconAnchor = new GPoint(9, 34);
   beginRouteIcon.infoWindowAnchor = new GPoint(9, 2);
   beginRouteIcon.infoShadowAnchor = new GPoint(18, 25);

   var markerOptions1 = { icon:beginRouteIcon, draggable:true };
   var routeMarker = new GMarker(point, markerOptions1);


   GEvent.addListener(routeMarker, "click", function() {routeMarker.openInfoWindowHtml("This is where the ride begins.");});
   GEvent.addListener(routeMarker, "dragstart", function() {routeMarker.closeInfoWindow();routePoint[0]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();});
   GEvent.addListener(routeMarker, "drag", function() {routePoint[0]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();});	    
   GEvent.addListener(routeMarker, "dragend", function() {routePoint[0]=routeMarker.getPoint();drawBikeRoutePolyline();calculateTotalDistance();}); 	    

   routePointOverlay.push(routeMarker);
 }

return routeMarker;
}



    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("GmapCanvas"));
	geocoder = new GClientGeocoder();
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(mapCenterLat, mapCenterLng), mapZoom);

	//Give the default mapCenter and mapZoom to the hidden inputs
	if(document.getElementById('mapCenter')){document.getElementById('mapCenter').value=map.getCenter();}
	if(document.getElementById('mapZoom')) {document.getElementById('mapZoom').value=map.getZoom();}



	//If we are recreating a map, create the marker point array
	for(x=0;x<markerPointLat.length;x++) {
	  markerPoint.push(new GLatLng(markerPointLat[x],markerPointLng[x]));
	}

	//If we are recreating a map, layover the markers
	for(x=0;x<markerPoint.length;x++) {
    	  map.addOverlay(createMarker(markerPoint[x], x));
	}

	//If we are recreating a map, pull the lat and lng for routes and create route points array
	for(x=0;x<routePointLat.length;x++) {	
	  routePoint.push(new GLatLng(routePointLat[x], routePointLng[x]));
	}

	//If we are recreating a map, layover the route points
	for(x=0;x<routePoint.length;x++) {
    	  map.addOverlay(createDraggableRoutePoint(routePoint[x], x));
	}

	//If we are recreating a map, go ahead and calculate the Distance and create the polyline 
	if(routePoint.length>1) {
    	  calculateTotalDistance();
   	  drawBikeRoutePolyline();
	}


	GEvent.addListener(map, "moveend", function() {document.getElementById('mapCenter').value=map.getCenter();});
	GEvent.addListener(map, "zoomend", function() {document.getElementById('mapZoom').value=map.getZoom();});
        GEvent.addListener(map, "click", function(overlay, point) {


if(document.getElementById('overlayType').value=="route") {

  if(overlay) {
    return;
  } 
  else {
    routePoint.push(point);
    map.addOverlay(createDraggableRoutePoint(point, (routePoint.length-1)));
    calculateTotalDistance();
    drawBikeRoutePolyline();
  }
}

else {

          if (overlay) {
	     return;
          } else {

	 
  	    if(map.getInfoWindow().isHidden() == false) {
		map.closeInfoWindow();
	    }
	    else {

 	    markerOptions = { draggable:true };
            var newMarker =  new GMarker(point, markerOptions);
	    map.addOverlay(newMarker);
            markerText.push('');
	    var markerIndex = markerText.length-1;

	    var markerHTML = "<div id=\"markWinInfo\"><form><div style=\"font-size:12px;\">Type below to add marker info:<div><textarea style=\"height:50px; width:200px;\" id=\"markerTextarea"+markerIndex+"\" onkeyup=\"updateMarkerText("+markerIndex+")\">"+markerText[markerIndex]+"</textarea></form><div style=\"font-size:12px;\"><a href=\"javascript:deleteMarker("+markerIndex+")\">remove marker</a></div>";

            newMarker.openInfoWindowHtml("<div id=\"markWinInfo\"><form><div style=\"font-size:12px;\">Type below to add marker info:<div><textarea style=\"height:50px; width:200px;\" id=\"markerTextarea"+markerIndex+"\" onkeyup=\"updateMarkerText("+markerIndex+")\">"+markerText[markerIndex]+"</textarea></form><div style=\"font-size:12px;\"><a href=\"javascript:deleteMarker("+markerIndex+")\">remove marker</a></div>");

	    GEvent.addListener(newMarker, "click", function() {newMarker.openInfoWindowHtml("<div id=\"markWinInfo\"><form><div style=\"font-size:12px;\">Type below to add marker info:<div><textarea style=\"height:50px; width:200px;\" id=\"markerTextarea"+markerIndex+"\" onkeyup=\"updateMarkerText("+markerIndex+")\">"+markerText[markerIndex]+"</textarea></form><div style=\"font-size:12px;\"><a href=\"javascript:deleteMarker("+markerIndex+")\">remove marker</a></div>");});	    
	    GEvent.addListener(newMarker, "dragstart", function() {newMarker.closeInfoWindow();});	    
	    GEvent.addListener(newMarker, "dragend", function() {markerPoint[markerIndex]=newMarker.getPoint();});    

	    markerOverlay.push(newMarker);
	    markerPoint.push(point);

	    }
	  }

}

        });

      }
    }






function sendMapDataToHiddenInputs() {

	var routePointsData="";
	var markerPointsData="";
	var markerTextsData="";

	for(x=0; x<routePoint.length; x++) {
	  routePointsData += routePoint[x]+"|";
	}

	for(x=0; x<markerPoint.length; x++) {
	  if(markerPoint[x]!="") {
	    markerPointsData += markerPoint[x]+"|";
	  }
	}

	for(x=0; x<markerText.length; x++) {
	  if(markerPoint[x]!="") {
	    markerTextsData += markerText[x]+"|--|--|";
	  }
	}

	document.getElementById('map_route_points').value=routePointsData;
	document.getElementById('map_marker_points').value=markerPointsData;
	document.getElementById('map_marker_texts').value=markerTextsData;
}





function checkAddBikeRideForm() {
	
	document.getElementById('submitRideButton').value="Submitting...";

	var f = document.addBikeRideForm;


	if(f.title.value=="") {
		alert("Please enter a title.");
		f.title.focus();
		document.getElementById('submitRideButton').value="Submit Ride!";
		return false;
	}
	if(f.description.value=="") {
		alert("Please enter the description.");
		f.description.focus();
		document.getElementById('submitRideButton').value="Submit Ride!";
		return false;
	}

	if(routePoint[0]=="" || routePoint.length<1) {
		alert("Please create a starting point on the map. (or map out your entire bicycle ride!)");
		document.getElementById('mapControlsToggleLink').focus();
		document.getElementById('submitRideButton').value="Submit Ride!";
		return false;
	}

	sendMapDataToHiddenInputs();


	if(f.select_milage[0].checked) {
	   if(f.map_miles.value=="" || f.map_miles.value=="0.00") {
		alert("Please enter the milage.");
		f.map_miles.focus();
		document.getElementById('submitRideButton').value="Submit Ride!";
		return false;
	   }
	}

	if(f.select_milage[1].checked) {
	   if(f.user_miles.value=="" || f.user_miles.value==0) {
		alert("Please enter the milage.");
		f.map_miles.focus();
		document.getElementById('submitRideButton').value="Submit Ride!";
		return false;
	   }
	}

document.addBikeRideForm.submit();
return true;	
}

function toggleRightMapControls() {
	var w = document.getElementById('totalAddMapArea').style.width;
	if(document.getElementById('GmapControlsContainer').style.display=="block") {
	  document.getElementById('GmapControlsContainer').style.display="none";
	  document.getElementById('totalAddMapArea').style.width="510px";
	  document.getElementById('mapControlsToggleLink').innerHTML="Show Map Controls";
	  document.getElementById('mapControlsToggleLink').title="Show the controls so that you can map your bicycle ride.";
	}
	else {
	  document.getElementById('GmapControlsContainer').style.display="block";
	  document.getElementById('totalAddMapArea').style.width="730px";
	  document.getElementById('mapControlsToggleLink').innerHTML="Hide Map Controls";
	  document.getElementById('mapControlsToggleLink').title="Hide the controls so that you can read the content in the right column.";
	}
}


function startMapping() {

	document.getElementById('changeGmapOpacityDiv').style.display="none";
	document.getElementById('GmapIntroDiv').style.display="none";
	toggleRightMapControls();
	document.getElementById('map_h4').innerHTML = 'Map: [<a href="javascript:void(0);" onclick="winder(\'http://www.intownbicycles.com/intown-bicycles-community/mapping-tool-help-video\', 700, 300);" title="Check out a quick video for help on how to use the mapping tool">help</a>]';
}