// Make the markers
var user = new GIcon();
user.image             = "../images/maps/map-userMarker.png";
user.shadow            = "../images/maps/map-shadow.png";
user.iconSize          = new GSize(18, 21);
user.shadowSize        = new GSize(25, 22);
user.iconAnchor        = new GPoint(6, 20);
user.infoWindowAnchor  = new GPoint(8, 5);

var friend = new GIcon();
friend.image             = "../images/maps/map-friendMarker.png";
friend.shadow            = "../images/maps/map-shadow.png";
friend.iconSize          = new GSize(18, 21);
friend.shadowSize        = new GSize(25, 22);
friend.iconAnchor        = new GPoint(6, 20);
friend.infoWindowAnchor  = new GPoint(8, 5);

var third = new GIcon();
third.image             = "../images/maps/map-thirdMarker.png";
third.shadow            = "../images/maps/map-shadow.png";
third.iconSize          = new GSize(18, 21);
third.shadowSize        = new GSize(25, 22);
third.iconAnchor        = new GPoint(6, 20);
third.infoWindowAnchor  = new GPoint(8, 5);

var home = new GIcon();
home.image             = "../images/maps/map-homeMarker.png";
home.shadow            = "../images/maps/map-homeShadow.png";
home.iconSize          = new GSize(27, 20);
home.shadowSize        = new GSize(35, 20);
home.iconAnchor        = new GPoint(6, 20);
home.infoWindowAnchor  = new GPoint(8, 1);

var icons = [];
icons[0] = user;
icons[1] = friend;
icons[2] = third;
icons[3] = home;

function createMarker(point,name,html,icontype) {
	var marker = new GMarker(point,icons[icontype]);
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	return marker;
}


function makeMap() {
	
// User's Friends Map
if (document.getElementById("map")){
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(40, -40), 2);
	}
}
	
// User's Sidebar Map
if (document.getElementById("mapSidebar")){
	if (GBrowserIsCompatible()) {
		var mapSidebar = new GMap2(document.getElementById("mapSidebar"));

// Test to see if user has set their location yet
		var lat = document.getElementById('homeLat').value;
		var lon = document.getElementById('homeLon').value;

// If user hasn't set location, set map to global view
		if (!lat || !lon){
			mapSidebar.setCenter(new GLatLng(30, -30), 4);

// If user has set location, zoom in and place marker
		} else {
			mapSidebar.setCenter(new GLatLng(lat, lon), 3);
			var point = new GLatLng(lat,lon);
			var marker = new GMarker(point,user);
			mapSidebar.addOverlay(marker);
		}
		
	}
}




// User's Location Map
if (document.getElementById("mapHome")){
	if (GBrowserIsCompatible()) {
		var mapHome = new GMap2(document.getElementById("mapHome"));

// Test to see if user has set their location yet
		var lat = document.getElementById('homeLat').value;
		var lon = document.getElementById('homeLon').value;

// If user hasn't set location, set map to global view
		if (!lat || !lon){
			mapHome.setCenter(new GLatLng(30, -30), 2);

// If user has set location, zoom in and place marker
		} else {
			mapHome.setCenter(new GLatLng(lat, lon), 6);
			var point = new GLatLng(lat,lon);
			var marker = new GMarker(point,user);
			mapHome.addOverlay(marker);
		}
		
		mapHome.addControl(new GLargeMapControl());
	}
}	


// Set mapHome to be clicky to catch user setting location
	GEvent.addListener(mapHome, "click", function(overlay, cpoint){
      mapHome.clearOverlays();
        if (cpoint) {
			mapHome.panTo(cpoint);
			var lat = cpoint.lat();
			var lon = cpoint.lng();
			document.getElementById('homeLat').value = lat;
			document.getElementById('homeLon').value = lon;
			var point = new GLatLng(lat,lon);
			var marker = new GMarker(point,user);
			mapHome.addOverlay(marker);
        }
    });
	

// Read the data from the .xml for friends
	var UserName = document.getElementById("UserName").value.toLowerCase();
	var UserName = "../maps/" + UserName + ".xml";
	var request = GXmlHttp.create();
	request.open("GET", UserName, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;

// obtain the array of markers and loop through it
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			var bounds = new GLatLngBounds();			
			for (var i = 0; i < markers.length; i++) {

// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var html = markers[i].getAttribute("html");
				var label = markers[i].getAttribute("label");
				var icontype = parseInt(markers[i].getAttribute("level"));

// create the markers
				var marker = createMarker(point,label,html,icontype);
				map.addOverlay(marker);
				bounds.extend(point);
			}
			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
			map.addControl(new GSmallMapControl());

      var lines = xmlDoc.documentElement.getElementsByTagName("line");

// read each line
          for (var a = 0; a < lines.length; a++) {

// get any line attributes
            var color = lines[a].getAttribute("color");
            var width  = parseFloat(lines[a].getAttribute("width"));

// read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,color,width));
          }
			
		}
	}
	request.send(null);
	
}

// Catch the Location form and zoom to the users search location

var geocoder = new GClientGeocoder();

function showAddress(address) {
  geocoder.getLatLng(
    address,
    function(cpoint) {
      if (!cpoint) {
        alert(address + " not found");
      } else {
				var mapHome = new GMap2(document.getElementById("mapHome"));
        mapHome.setCenter(cpoint, 13);
 				var marker = new GMarker(cpoint,user);
				mapHome.addOverlay(marker);
				var lat = cpoint.lat();
				var lon = cpoint.lng();
				document.getElementById('homeLat').value = lat;
				document.getElementById('homeLon').value = lon;
      }
    }
  );
}