// Create a base icon for all of our markers that specifies the shadow, icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.image = "images/marker.png";
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);
baseIcon.infoShadowAnchor = new GPoint(18, 25);


// Creates the map frame and centers it on Mesquite
var panel;
function CreateMap(){
panel = document.getElementById("panel");
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-97.20703125, 38.41055825094609), 14);
return map;
}


function onLoad() {
var map = CreateMap();
// Download the data in the XML file and load it on the map.
var request = GXmlHttp.create();
request.open("GET", 'crimeweb.xml', true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markerElements = xmlDoc.documentElement.getElementsByTagName("marker");
markers = new Array( markerElements.length );
infoHtml = new Array( markerElements.length );


for (var i = 0; i < markerElements.length; i++) {
var Lat = parseFloat(markerElements[i].getAttribute("lat"));
var Lng = parseFloat(markerElements[i].getAttribute("lng"));
var Descr = markerElements[i].getAttribute("descr");
var Date = markerElements[i].getAttribute("date");
var Time = markerElements[i].getAttribute("time");
var Addr = markerElements[i].getAttribute("addr");
var Url = markerElements[i].getAttribute("url");
var State = markerElements[i].getAttribute("state");
var Img = markerElements[i].getAttribute("img");
var LocType = markerElements[i].getAttribute("loctype");
var AddlInfo = markerElements[i].getAttribute("addlinfo");
var Acreage = markerElements[i].getAttribute("acreage");
var TrailLength = markerElements[i].getAttribute("traillength");

markers[i] = new GMarker( new GPoint( parseFloat(Lng), parseFloat(Lat) ), baseIcon);

// Show the following HTML in the info window when it is clicked
infoHtml[i] = "<font face='verdana, tahoma' size='-1'><b>" + Descr + "</b><br/>" + Addr + "<br/>" + State + "<br/>";


//add url if it exists
if (markerElements[i].getAttribute("url") != null) {
infoHtml[i] += "<p><a href='" + Url + "' target=_new>" + "Click here" + "</a>" + " to view website.</p>";
}

infoHtml[i] += "</font>";


GEvent.addListener( markers[i], 'click', makeOpenerCaller(i) );
map.addOverlay( markers[i] );

var html = "<a href='javascript:opener(" + i + ")' style='color:#0000ff;'>" + Descr + "</a><br/>";
panel.innerHTML += html;

}
}
}
request.send(null);
}

// Creates a marker whose info window displays the given number
function createMarker(point, html) {
var marker = new GMarker(point, baseIcon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}


// Open the info box for the specified marker.
function opener(i){
markers[i].openInfoWindowHtml( infoHtml[i] );
}


// This returns a function closure that calls opener() with the specified arg.
function makeOpenerCaller( i ) {
return function() { opener( i ); };
}