var goodIcon = new GIcon();
goodIcon.image = "icons/happy_face_green.png";
goodIcon.iconSize = new GSize(20, 20);
goodIcon.iconAnchor = new GPoint(10, 10);
goodIcon.infoWindowAnchor = new GPoint(20, 10);

var badIcon = new GIcon();
badIcon.image = "icons/sad_face_red.png";
badIcon.iconSize = new GSize(20, 20);
badIcon.iconAnchor = new GPoint(10, 10);
badIcon.infoWindowAnchor = new GPoint(20, 10);

function getUrlParameter(paramName) 
{
	var sURL = window.document.URL.toString();
	
	if (sURL.indexOf("?") > 0)
	{
		var arrParams = sURL.split("?");
			
		var arrURLParams = arrParams[1].split("&");
		
		var i = 0;
		for (i=0;i<arrURLParams.length;i++)
		{
			var sParam =  arrURLParams[i].split("=");

                  if (sParam[0] == paramName) { return sParam[1]; }
		}
	}
}

function getXmlElement(xmlDoc, elementName, prefix, suffix, defaultValue) {
    if (xmlDoc.documentElement.getElementsByTagName(elementName)[0]
      && xmlDoc.documentElement.getElementsByTagName(elementName)[0].firstChild.nodeValue != "") {
        return prefix 
            + xmlDoc.documentElement.getElementsByTagName(elementName)[0].firstChild.nodeValue
            + suffix;
    } else {
        return defaultValue;
    }
}

function getXmlElementInNode(node, elementName, prefix, suffix, defaultValue) {
    if (node.getElementsByTagName(elementName)[0]) {
        return prefix 
            + node.getElementsByTagName(elementName)[0].firstChild.nodeValue
            + suffix;
    } else {
        return defaultValue;
    }
}


function makePolyline(markers) {
        // The format we expect is:
        // <markers>
        //   <marker lat="37.441" lng="-122.141"/>
        //   <marker lat="37.322" lng="-121.213"/>
        // </markers>

        var color = "#000000";

        if ( arguments.length > 1) {
            color = arguments[1];
        }

        var info = "";

        if ( arguments.length > 2) {
            info = arguments[2];
        }

        var points = [];
        var polyline = null;
        if (markers.length > 0) {
            var startPoint = new GPoint(parseFloat(markers[0].getAttribute("lng")),
                parseFloat(markers[0].getAttribute("lat")));
            map.addOverlay(createMarker(startPoint, info));

            for (var i = 0; i < markers.length; i++) {
                point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                    parseFloat(markers[i].getAttribute("lat")));
                points.push(point);
                if (markers[i].getAttribute("mark")) {
                    map.addOverlay(createMarker(point, info));
                }
            }

            polyline = new GPolyline(points, color, 3);
            map.addOverlay(polyline);

            i = markers.length - 1;
            var endPoint = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                parseFloat(markers[i].getAttribute("lat")));
            map.addOverlay(createMarker(endPoint, info));
        }

        return points;
}

function zoomToMidPoint(startPoint, endPoint) {
    var routeMidPoint= new GPoint(
        (startPoint.x + endPoint.x) /2,
        (startPoint.y + endPoint.y) /2);
    map.centerAndZoom(routeMidPoint, 6);
}

function makeDetails(xmlDoc) {

        var details = "<h2><span class=\"first_part\">route</span><span class=\"last_part\">details</span></h2>";
        details += "<p>";
        details += getXmlElement(xmlDoc, "start", "from ", " ", "");
        details += getXmlElement(xmlDoc, "finish", "to ", ".", "");
        details += "</p>";
        details += "<p>";
        details += getXmlElement(xmlDoc, "purpose", "Purpose: ", "<br>", "");
        details += getXmlElement(xmlDoc, "distance", "Distance: ", "<br>", "");
        details += getXmlElement(xmlDoc, "out_time", "Outward journey at ", getXmlElement(xmlDoc, "out_duration", " takes ", "", ""), "");
        details += "<br/>";
        details += getXmlElement(xmlDoc, "return_time", "Return journey at ", getXmlElement(xmlDoc, "return_duration", " takes ", "", ""), "");
        details += "</p>";
        details += getXmlElement(xmlDoc, "landmarks", "<p>Landmarks: ", "</p>", "");
        details += getXmlElement(xmlDoc, "intersection", "<p>Intersection with other transport modes: ", "</p>", "");
        details += getXmlElement(xmlDoc, "good_bits", "<p>Bits with good cycle provision: ", "</p>", "");
        details += getXmlElement(xmlDoc, "bad_bits", "<p>Bits with bad cycle provision: ", "</p>", "");
        details += getXmlElement(xmlDoc, "improve_1", "<p>The following would make the journey better:<ul><li>", "</li>", "");
        details += getXmlElement(xmlDoc, "improve_2", "<li>", "</li>", "");
        details += getXmlElement(xmlDoc, "improve_3", "<li>", "</li>", "");
        details += "</ul>";
        details += getXmlElement(xmlDoc, "other_info", "<p>More information: ", "</p>", "");
        details += getXmlElement(xmlDoc, "name", "<p>Submitted by ", " ", "<p>Submitted by anonymous user ");
        details += getXmlElement(xmlDoc, "from", "from ", ".</p>", "</p>");


        return details;
}

function makeTitle(xmlDoc) {
        return "<span class=\"first_part\">"
            + getXmlElement(xmlDoc, "start", "from ", " ", "your")
            + "</span><span class=\"last_part\">"
            + getXmlElement(xmlDoc, "finish", "to ", "", "route")
            + "</span>";
}

function makeLink(xmlDoc, xmlFile) {
        return getXmlElement(xmlDoc, "start", "from ", "<br/> ", "")
            + getXmlElement(xmlDoc, "finish", "to ", "<br/>", "")
            + '<a href="show_route.php?xmlFile=' + xmlFile + '">View details</a>';
}

function makeSpotDetails(spot) {
        var details = "<h5>" + getXmlElementInNode(spot, "road", "", "", "Road not given");
        details += getXmlElementInNode(spot, "location", ": ", "", "");
        details += getXmlElementInNode(spot, "direction", " (", ")", "");
        details += getXmlElementInNode(spot, "date", " ", "", "");
        details += "</h5>";
        details += getXmlElementInNode(spot, "rating", "<p>Rating: ", "</p>", "");
        details += getXmlElementInNode(spot, "info", "<p>", "</p>", "");
        details += getXmlElementInNode(spot, "improve", "<p>How to improve: ", "</p>", "");
        details += "<p>Submitted by " + getXmlElementInNode(spot, "name", "", "", "anonymous");
        details += getXmlElementInNode(spot, "from", " from ", "", "") + "</p>";

        comments = spot.getElementsByTagName("comment");

        for (i = 0;  i < comments.length; ++i) {
            details += "<h5>Comment from " + getXmlElementInNode(comments[i], "name", "", "", "anonymous");
            details += getXmlElementInNode(comments[i], "from", " from ", "", "") 
            details += getXmlElementInNode(comments[i], "date", " ", "", "");
            details += "</h5>";
            details += "<p>" + getXmlElementInNode(comments[i], "message", "", "", "") + "</p>";
        }

        return details;
}

var request;
function readFile(fileName, readystatechangefunction) {
    request = GXmlHttp.create();
    request.open('GET', fileName, true);
    request.onreadystatechange = readystatechangefunction;
    request.send(null);
}

var request2;
function readFile2(fileName, readystatechangefunction) {
    request2 = GXmlHttp.create();
    request2.open('GET', fileName, true);
    request2.onreadystatechange = readystatechangefunction;
    request2.send(null);
}

var map;
function initMap(mapName) {
    if (!GBrowserIsCompatible()) {
        document.getElementById(mapName).innerHTML = "Sorry, your browser is not compatible with Google Maps";
    } else {
        map = new GMap(document.getElementById(mapName));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_NORMAL_MAP); // G_NORMAL_MAP, G_HYBRID_TYPE, or G_SATELLITE_TYPE
 
        var mountStreetGPoint= new GPoint(-2.245642, 53.478507);
        map.centerAndZoom(mountStreetGPoint, 6);
    }
}

function initMapAndComments() {
        initMap("map");

        showMapAndComments("journeys/" + getUrlParameter("xmlFile"));
}

function showMapAndComments(xmlFileName) {
        // The format we expect is:
        // <markers>
        //   <marker lat="37.441" lng="-122.141"/>
        //   <marker lat="37.322" lng="-121.213"/>
        // </markers>

        readFile(xmlFileName, function() {
            if (request.readyState == 4) {
                var xmlDoc = request.responseXML;
                var markers = xmlDoc.documentElement.getElementsByTagName("marker");

                var points = makePolyline(markers);

                if (points.length > 0) {
                    zoomToMidPoint(points[0], points[points.length - 1]);
                }

                document.getElementById("detailsDiv").innerHTML = makeDetails(xmlDoc);
                document.getElementById("titleDiv").innerHTML = makeTitle(xmlDoc);
            }
        });
}

function initSpotMapAndComments() {
        initMap("map");

        var id = getUrlParameter("id");

        readFile("spots.xml", function() {
            if (request.readyState == 4) {
                var xmlDoc = request.responseXML;
                var spots = xmlDoc.documentElement.getElementsByTagName("spot");

                for (var i = 0; i < spots.length; i++) {
                    if (spots[i].getAttribute("id") == id) {
                        var marker = spots[i].getElementsByTagName("marker")[0];
                        var point = new GPoint(parseFloat(marker.getAttribute("lng")),
                            parseFloat(marker.getAttribute("lat")));
                        map.addOverlay(createMarker(point, ""));
                        document.getElementById("detailsDiv").innerHTML += makeSpotDetails(spots[i]);
                    }
                }

                map.centerAndZoom(point, 2);
            }
        });
}

function createMarker(point, html) {
  var marker = new GMarker(point);

  if (html != "") {
      GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
      });
  }

  return marker;
}

function createIconMarker(point, icon, html) {
  var marker = new GMarker(point, icon);

  if (html != "") {
      GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
      });
  }

  return marker;
}