/* We are trying to get you to read documentation and figure things
 * out from there.  Look for your Answer in the Google Maps
 * documentation, the answer is right there! Most of this code
 * is right from there.
 */



// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
  // Create a lettered icon for this point using our icon class
	var letteredIcon = new GIcon(baseIcon);
	 
  //what other variables would an icon need to carry ?
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	

  
  
  //There must be an if, else if, else here
	if(index==6000){
		letteredIcon.image = "http://www.google.com/mapfiles/marker.png";
	}
	else if(index==0){
		letteredIcon.image = "http://www.google.com/mapfiles/dd-start.png";
	}
	else if(index== (points1.length-2)/2){
		letteredIcon.image = "http://www.google.com/mapfiles/dd-end.png";
	}
	else{
		letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
	}
  /* If I am the starting point
   * 	then letteredIcon.image = "http://www.google.com/mapfiles/dd-start.png";
   *    (you can use any icon you want as long as there is some difference for a start icon
   *    what else would you want to set about this icon?
   * Else if I am an end point
   * 	then my image is something else, and my other variables are something else
   * Else
   * 	then I am a normal icon and I use some other image
   */


  // Set up our GMarkerOptions object
  markerOptions = { icon:letteredIcon };
  var marker = new GMarker(point, markerOptions);

  GEvent.addListener(marker, "click", function() {
	  
	  //Again this should be another if, else if, else
	  //where start, end , intermediate icons do different things.
	  //Here is an example of what you may want to do
	  
	  if(index==6000){
			marker.openInfoWindowHtml("<h3 class= \"pointsubTitle\">Point</h3> <p class= \"coordinates\">Coordinates: ("+point.lat()+","+point.lng()+")</p>"); 
	  }
	  else if(index==0){
		marker.openInfoWindowHtml("<h2 class= \"pointTitle\">Start Point</h2> <h3 class= \"pointsubTitle\">Point "+letter+"</h3> <p class= \"coordinates\">Coordinates: ("+point.lat()+","+point.lng()+")</p>"); 
	  }
	  else if(index== (points1.length-2)/2){
		marker.openInfoWindowHtml("<h2 class= \"pointTitle\">End Point</h2> <h3 class= \"pointsubTitle\">Point "+letter+"</h3> <p class= \"coordinates\">Coordinates: ("+point.lat()+","+point.lng()+")</p>"); 
	  }
	  else{
		marker.openInfoWindowHtml("<h2 class= \"pointTitle\">Point "+(index+1)+"</h2><h3 class= \"pointsubTitle\">Point "+letter+"</h3> <p class= \"coordinates\">Coordinates: ("+point.lat()+","+point.lng()+")</p>"); 
	  }

    
  });
  return marker;
}


function load() {
      if (GBrowserIsCompatible()) {
	  
	  //Problem 1
        var map1 = new GMap2(document.getElementById("map1"));
		
        map1.setCenter(new GLatLng(points1[0], points1[1]), 16);
		map1.addControl(new GSmallMapControl());
		var pointtracker1 = 0;
		var arraytracker1 = 0;
		var vertices1 = new Array();
		
		while(arraytracker1 < points1.length){
			var point = new GLatLng(points1[arraytracker1],points1[arraytracker1+1]);
			var marker = createMarker(point, pointtracker1);
			map1.addOverlay(marker);
			vertices1[pointtracker1]= point;
			arraytracker1 = arraytracker1+2;
			pointtracker1++;
		}
		var polyline = new GPolyline(vertices1, "#0000CD", 10);
		map1.addOverlay(polyline);
		
		//Problem 2
		var map2 = new GMap2(document.getElementById("map2"));
		
		map2.setCenter(new GLatLng(points2[0],points2[1]),16);
		map2.addControl(new GSmallMapControl());
		var arraytracker2=0;
		var pointtracker2=0;
		while(arraytracker2 < points2.length){
			var point1 = new GLatLng(points2[arraytracker2],points2[arraytracker2+1]);
			var marker2 = createMarker(point1,6000);
			map2.addOverlay(marker2);
			arraytracker2 = arraytracker2+2;
			pointtracker2++;
		}
		
		var edgetracker2=0;
		while(edgetracker2<edges2.length){
			edgepoints = new Array();
			var point1 = new GLatLng(edges2[edgetracker2],edges2[edgetracker2+1]);
			var point2 = new GLatLng(edges2[edgetracker2+2],edges2[edgetracker2+3]);
			edgepoints[0]=point1;
			edgepoints[1]=point2;
			var polyline1= new GPolyline(edgepoints, "#0000CD", 10);
			map2.addOverlay(polyline1);
			edgetracker2 = edgetracker2+4;
		}
		
	}
       /* This is how you draw a polyline, what should the variable vertices be?
       * 
		var polyline = new GPolyline(vertices, "#0000CD", 10);
		map1.addOverlay(polyline);
	```*/
}