// *****************************************************
// *****************************************************
// Internal function to create a marker with pop-up text
//
function createMarker(point, name) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "mouseover", function() {
    marker.openInfoWindowHtml(name);
  });
  GEvent.addListener(marker, "mouseout", function() {
    marker.closeInfoWindow(name);
  });
  map.addOverlay(marker);
  return marker;
}

function createPoint(point){
  var newIcon = MapIconMaker.createFlatIcon({width: 8, height: 8});
  var marker = new GMarker(point, {icon: newIcon});
  map.addOverlay(marker);
  return marker;
}

// Create map object
//
var zoomlevel = 8;
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);


//	Load and parse GPX file
//	Builds .gpx filename based on html file
//
var request = GXmlHttp.create();
request.open("GET", URL, true);

request.onreadystatechange = function() {
  if (request.readyState == 4) {
		var gpxDoc = request.responseXML;
		if( !gpxDoc ) {
			alert("Could not load GPX document " + URL);
		} else if( !gpxDoc.documentElement ) {
			alert("Document " + URL + "\nwas not recognized by the XML loader");
		} else if( gpxDoc.documentElement.childNodes.length < 3 ) {
			alert("The XML loader could not parse document " + URL);
		} else {
			//
			//	Parse document <bounds>.  Open map.  Guess at zoom level.
			//
			minlat 		= 0;
			minlon 		= 0;
			maxlat 		= 0;
			maxlon 		= 0;
			bounds = gpxDoc.documentElement.getElementsByTagName("bounds");
			if( bounds && bounds.length )
				{
				minlat = parseFloat(bounds[0].getAttribute("minlat"));
				minlon = parseFloat(bounds[0].getAttribute("minlon"));
				maxlat = parseFloat(bounds[0].getAttribute("maxlat"));
				maxlon = parseFloat(bounds[0].getAttribute("maxlon"));
				}
			deltalat=(maxlat-minlat > 0 ? (maxlat-minlat)/3 : -(maxlat-minlat)/3);
			deltalon=(maxlon-minlon > 0 ? (maxlon-minlon)/4 : -(maxlon-minlon)/4);
			delta = (deltalat > deltalon ? deltalat : deltalon);

			zoomlat		= minlat+(maxlat-minlat)/2;
			zoomlon		= minlon+(maxlon-minlon)/2;
			if(delta < 0.01){
				zoomlevel = 3;
			}else if(delta < 0.02){
				zoomlevel = 4;
			}else if(delta < 0.04){
				zoomlevel = 5;
			}else if(delta < 0.08){
				zoomlevel = 6;
			}else if(delta < 0.16){
				zoomlevel = 7;
			}else if(delta < 0.32){
				zoomlevel = 8;
			}
			map.centerAndZoom(new GPoint(zoomlon,zoomlat),zoomlevel);
			bounds = [];

			//	Parse waypoints in <wpt></wpt> tags
			//
			var wpt;
			wpt = gpxDoc.documentElement.getElementsByTagName("wpt")
			if( wpt ) {
				for (var i = 0; i < wpt.length; i++) {

					point = new GPoint(parseFloat(wpt[i].getAttribute("lon")),
									   parseFloat(wpt[i].getAttribute("lat")));

					// Extract <name></name> tag
					tname  = "";
					element = wpt[i].getElementsByTagName("name");
					if( element.length ) {
						tname   = element[0].firstChild.nodeValue;
						}

					createMarker(point, tname)
					}
				}
			wpt = [];

			//	Parse points in <pt></pt> tags
			//
			var pt;
			pt = gpxDoc.documentElement.getElementsByTagName("pt")
			if( pt ) {
				for (var i = 0; i < pt.length; i++) {

					point = new GPoint(parseFloat(pt[i].getAttribute("lon")),
									   parseFloat(pt[i].getAttribute("lat")));

					// Extract <name></name> tag
//					tname  = "";
//					element = wpt[i].getElementsByTagName("name");
//					if( element.length ) {
//						tname   = element[0].firstChild.nodeValue;
//						}
//
					createPoint(point)
					}
				}
			pt = [];

			//	Parse tracks in <trk></trk>
			//
			var trk;
			trk = gpxDoc.documentElement.getElementsByTagName("trk");
			if (trk) {
				// Process each route
				//
				for (var i = 0; i < trk.length; i++) {
					tcolor="red";
					var cmt=trk[i].getElementsByTagName("cmt");
					if(cmt.length>0){
						var col=cmt[0].firstChild.nodeValue;
						if(col){
							if(col == "black"){
								tcolor="black";
							}else if(col == "red"){
								tcolor="red";
							}else if(col == "blue"){
								tcolor="blue";
							}else if(col == "yellow"){
								tcolor="yellow";
							}else{
								tcolor="red";
							}
						}
					}
					tcolor="red";
					twidth=1;
					topacity=.7;
					// Process each point of each route, string
					// them into a single polyline
					//
					var trkseg;
					trkseg=trk[i].getElementsByTagName("trkseg");
					if (trkseg) {
						points = [];
						for (var j=0; j<trkseg.length; j++){
							var trkpt = trkseg[j].getElementsByTagName("trkpt");
							for (var k = 0; k < trkpt.length; k++) {
								points.push(new GPoint(
									parseFloat(trkpt[k].getAttribute("lon")),
									parseFloat(trkpt[k].getAttribute("lat"))));
							}
							map.addOverlay(new GPolyline(points, tcolor, twidth, topacity));
							points = [];
						}
						trkpt = [];
					}
				}
			}
		} // gpxDoc
	} // readyState
   } // function
request.send(null);


/**
 * @name MapIconMaker
 * @version 1.1
 * @author Pamela Fox
 * @copyright (c) 2008 Pamela Fox
 * @fileoverview This gives you static functions for creating dynamically
 *     sized and colored marker icons using the Charts API marker output.
 */

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @name MarkerIconOptions
 * @class This class represents optional arguments to {@link createMarkerIcon},
 *     {@link createFlatIcon}, or {@link createLabeledMarkerIcon}. Each of the
 *     functions use a subset of these arguments. See the function descriptions
 *     for the list of supported options.
 * @property {Number} [width=32] Specifies, in pixels, the width of the icon.
 *     The width may include some blank space on the side, depending on the
 *     height of the icon, as the icon will scale its shape proportionately.
 * @property {Number} [height=32] Specifies, in pixels, the height of the icon.
 * @property {String} [primaryColor="#ff0000"] Specifies, as a hexadecimal
 *     string, the color used for the majority of the icon body.
 * @property {String} [cornerColor="#ffffff"] Specifies, as a hexadecimal
 *     string, the color used for the top corner of the icon. If you'd like the
 *     icon to have a consistent color, make the this the same as the
 *     {@link primaryColor}.
 * @property {String} [strokeColor="#000000"] Specifies, as a hexadecimal
 *     string, the color used for the outside line (stroke) of the icon.
 * @property {String} [shadowColor="#000000"] Specifies, as a hexadecimal
 *     string, the color used for the shadow of the icon.
 * @property {String} [label=""] Specifies a character or string to display
 *     inside the body of the icon. Generally, one or two characters looks best.
 * @property {String} [labelColor="#000000"] Specifies, as a hexadecimal
 *     string, the color used for the label text.
 * @property {Number} [labelSize=0] Specifies, in pixels, the size of the label
 *     text. If set to 0, the text auto-sizes to fit the icon body.
 * @property {String} [shape="circle"] Specifies shape of the icon. Current
 *     options are "circle" for a circle or "roundrect" for a rounded rectangle.
 * @property {Boolean} [addStar = false] Specifies whether to add a star to the
 *     edge of the icon.
 * @property {String} [starPrimaryColor="#FFFF00"] Specifies, as a hexadecimal
 *     string, the color used for the star body.
 * @property {String} [starStrokeColor="#0000FF"] Specifies, as a hexadecimal
 *     string, the color used for the outside line (stroke) of the star.
 */

/**
 * This namespace contains functions that you can use to easily create
 *     dynamically sized, colored, and labeled icons.
 * @namespace
 */
var MapIconMaker = {};

/**
 * Creates an icon based on the specified options in the
 *   {@link MarkerIconOptions} argument.
 *   Supported options are: width, height, primaryColor,
 *   strokeColor, and cornerColor.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createMarkerIcon = function (opts) {
  var width = opts.width || 32;
  var height = opts.height || 32;
  var primaryColor = opts.primaryColor || "#ff0000";
  var strokeColor = opts.strokeColor || "#000000";
  var cornerColor = opts.cornerColor || "#ffffff";

  var baseUrl = "http://chart.apis.google.com/chart?cht=mm";
  var iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + cornerColor.replace("#", "") + "," +
      primaryColor.replace("#", "") + "," +
      strokeColor.replace("#", "") + "&ext=.png";
  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = iconUrl;
  icon.iconSize = new GSize(width, height);
  icon.shadowSize = new GSize(Math.floor(width * 1.6), height);
  icon.iconAnchor = new GPoint(width / 2, height);
  icon.infoWindowAnchor = new GPoint(width / 2, Math.floor(height / 12));
  icon.printImage = iconUrl + "&chof=gif";
  icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif";
  iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + cornerColor.replace("#", "") + "," +
      primaryColor.replace("#", "") + "," +
      strokeColor.replace("#", "");
  icon.transparent = iconUrl + "&chf=a,s,ffffff11&ext=.png";

  icon.imageMap = [
    width / 2, height,
    (7 / 16) * width, (5 / 8) * height,
    (5 / 16) * width, (7 / 16) * height,
    (7 / 32) * width, (5 / 16) * height,
    (5 / 16) * width, (1 / 8) * height,
    (1 / 2) * width, 0,
    (11 / 16) * width, (1 / 8) * height,
    (25 / 32) * width, (5 / 16) * height,
    (11 / 16) * width, (7 / 16) * height,
    (9 / 16) * width, (5 / 8) * height
  ];
  for (var i = 0; i < icon.imageMap.length; i++) {
    icon.imageMap[i] = parseInt(icon.imageMap[i]);
  }

  return icon;
};


/**
 * Creates a flat icon based on the specified options in the
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: width, height, primaryColor,
 *     shadowColor, label, labelColor, labelSize, and shape..
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createFlatIcon = function (opts) {
  var width = opts.width || 32;
  var height = opts.height || 32;
  var primaryColor = opts.primaryColor || "#ff0000";
  var shadowColor = opts.shadowColor || "#000000";
  var label = MapIconMaker.escapeUserText_(opts.label) || "";
  var labelColor = opts.labelColor || "#000000";
  var labelSize = opts.labelSize || 0;
  var shape = opts.shape ||  "circle";
  var shapeCode = (shape === "circle") ? "it" : "itr";

  var baseUrl = "http://chart.apis.google.com/chart?cht=" + shapeCode;
  var iconUrl = baseUrl + "&chs=" + width + "x" + height +
      "&chco=" + primaryColor.replace("#", "") + "," +
      shadowColor.replace("#", "") + "ff,ffffff01" +
      "&chl=" + label + "&chx=" + labelColor.replace("#", "") +
      "," + labelSize;
  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = iconUrl + "&chf=bg,s,00000000" + "&ext=.png";
  icon.iconSize = new GSize(width, height);
  icon.shadowSize = new GSize(0, 0);
  icon.iconAnchor = new GPoint(width / 2, height / 2);
  icon.infoWindowAnchor = new GPoint(width / 2, height / 2);
  icon.printImage = iconUrl + "&chof=gif";
  icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif";
  icon.transparent = iconUrl + "&chf=a,s,ffffff01&ext=.png";
  icon.imageMap = [];
  if (shapeCode === "itr") {
    icon.imageMap = [0, 0, width, 0, width, height, 0, height];
  } else {
    var polyNumSides = 8;
    var polySideLength = 360 / polyNumSides;
    var polyRadius = Math.min(width, height) / 2;
    for (var a = 0; a < (polyNumSides + 1); a++) {
      var aRad = polySideLength * a * (Math.PI / 180);
      var pixelX = polyRadius + polyRadius * Math.cos(aRad);
      var pixelY = polyRadius + polyRadius * Math.sin(aRad);
      icon.imageMap.push(parseInt(pixelX), parseInt(pixelY));
    }
  }

  return icon;
};


/**
 * Creates a labeled marker icon based on the specified options in the
 *     {@link MarkerIconOptions} argument.
 *     Supported options are: primaryColor, strokeColor,
 *     starPrimaryColor, starStrokeColor, label, labelColor, and addStar.
 * @param {MarkerIconOptions} [opts]
 * @return {GIcon}
 */
MapIconMaker.createLabeledMarkerIcon = function (opts) {
  var primaryColor = opts.primaryColor || "#DA7187";
  var strokeColor = opts.strokeColor || "#000000";
  var starPrimaryColor = opts.starPrimaryColor || "#FFFF00";
  var starStrokeColor = opts.starStrokeColor || "#0000FF";
  var label = MapIconMaker.escapeUserText_(opts.label) || "";
  var labelColor = opts.labelColor || "#000000";
  var addStar = opts.addStar || false;

  var pinProgram = (addStar) ? "pin_star" : "pin";
  var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=";
  var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label +
      "'-2'f\\"  + "hv'a\\]" + "h\\]o\\" +
      primaryColor.replace("#", "")  + "'fC\\" +
      labelColor.replace("#", "")  + "'tC\\" +
      strokeColor.replace("#", "")  + "'eC\\";
  if (addStar) {
    iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" +
        starStrokeColor.replace("#", "") + "'0C\\";
  }
  iconUrl += "Lauto'f\\";

  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = iconUrl + "&ext=.png";
  icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34);
  return icon;
};


/**
 * Utility function for doing special chart API escaping first,
 *  and then typical URL escaping. Must be applied to user-supplied text.
 * @private
 */
MapIconMaker.escapeUserText_ = function (text) {
  if (text === undefined) {
    return null;
  }
  text = text.replace(/@/, "@@");
  text = text.replace(/\\/, "@\\");
  text = text.replace(/'/, "@'");
  text = text.replace(/\[/, "@[");
  text = text.replace(/\]/, "@]");
  return encodeURIComponent(text);
};