if (this.$ == null) this.$ = function(v) { return document.getElementById(v); }

function PopulateMap() {

    var xmlHttp = GXmlHttp.create();
    xmlHttp.open("GET", "http://" + document.domain + "/map/mapdata.aspx", false);
    xmlHttp.send(null);
	
    xmlDoc = xmlHttp.responseXML;

    nodes = xmlDoc.documentElement.childNodes;
    
    //$("tab2").children[1].children[0].innerText = "All " + nodes.length;
    $("tab2").getElementsByTagName("a")[0].innerHTML = "All " + nodes.length;
    
    $("status").innerHTML = "populating 0 - 100...";
    window.setTimeout("Display(0, 100, false);", 100);
    
}

function Display(start, length, recursive) {
    var end = start + length;
    if (end > nodes.length) end = nodes.length;
    
    for (var i = start; i < end; i++) {
        if (nodes[i].nodeName == "person") {
            if (nodes[i].getAttribute("murderer") == null) {
                map.addOverlay(createMarker(nodes[i], markers[0]));
            } else {
                map.addOverlay(createMarker(nodes[i], markers[1]));
            }
        }
    }
    
    if (recursive == true && nodes.length > end) {
        $("status").innerHTML = "populating " + start + " - " + end + "...";
        window.setTimeout("Display(" + end + ", " + length + ", " + recursive + ");", 250);
    } else {
        $("status").innerHTML = "&nbsp;";
    }
}

// Creates a marker at the given point with the given number label
function createMarker(node, icon) {
  var marker = new GMarker(new GLatLng(node.getAttribute("lat"), node.getAttribute("lng")), icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowTabsHtml(
        [new GInfoWindowTab("about", GenerateArticleHtml(node)),
         new GInfoWindowTab("article", GenerateAboutHtml(node))]
    );
  });
  GEvent.addListener(marker, "mouseover", function() { showTooltip(marker, node); });
  GEvent.addListener(marker, "mouseout", function() { tooltip.style.visibility="hidden"; });
  return marker;
}

function GenerateAboutHtml(node) {
    var value =
        "<div class=\"mapinfo\" style=\"width:550px;\"><div class=\"img\">" +
            "<img src=\"/images/thumb.aspx?i=" + node.getAttribute("id") + "\" /><br />" +
            "<nobr>" + node.getAttribute("name") + "</nobr></div>" +
            "<b>" + node.getAttribute("title") + "</b><br />" + node.getAttribute("content") + "<br /><br />" +
            "<b><a href=\"" + node.getAttribute("url") + "\">read full article &gt;&gt;</a></b></div>";
    return value;
}

function GenerateArticleHtml(node) {
    var value =
        "<div class=\"mapinfo\"><div class=\"img\">" +
        "<img src=\"/images/thumb.aspx?i=" + node.getAttribute("id") + "\" /><br />" +
        "<nobr>" + node.getAttribute("name") + "</nobr></div>" + 
        "<b>Date:</b>&nbsp; " + node.getAttribute("date") + "<br />" +
        "<b>Location:</b>&nbsp; " + node.getAttribute("location") + "<br />" +
        "<b>" + node.getAttribute("m1") + ":</b>&nbsp; " + node.getAttribute("m2") + "<br /><br />" +
        "<b><a href=\"" + node.getAttribute("url") + "\">read full article &gt;&gt;</a></b></div>";
    return value;
}

function showTooltip(marker, node) {
    tooltip.innerHTML =
      "<div class=\"maphover\"><img src=\"/images/thumb.aspx?i=" + node.getAttribute("id") + "\" width=\"80\" height=\"80\" />" +
      "<br />" + node.getAttribute("name") + " (" + node.getAttribute("age") + ")<br /></div>";
    var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
    var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
    var anchor=marker.getIcon().iconAnchor;
    var width=marker.getIcon().iconSize.width;
    var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
    pos.apply(tooltip);
    tooltip.style.visibility="visible";
}