var map;    
var points = [];
var seen = [];
var zoomLevelSecondBatch = 4;
var zoomLevelHideMarkers = 13;
var numCities = 0;

function externalLinks() { 
  if (!document.getElementsByTagName) return; 
  var anchors = document.getElementsByTagName("a"); 
  for (var i=0; i<anchors.length; i++) { 
    var anchor = anchors[i]; 
    if (anchor.getAttribute("href") &&  anchor.getAttribute("rel") == "external") anchor.target = "_blank"; 
  } 
}
function goTo(rank) {
  var zoom = map.getZoom();
  if (zoom < zoomLevelHideMarkers) zoom = zoomLevelHideMarkers-1;
  map.setCenter(points[rank-1],zoom);  
}
function load(firstBatchSize, initNorth, initEast, initZoom, controls) {
  if (GBrowserIsCompatible()) {
    function createMarker(markEl,multiplier) {
      var marker;
      var point = new GLatLng(parseFloat(markEl.getAttribute("lat")), parseFloat(markEl.getAttribute("lng")));
      var rank = markEl.getAttribute("rank");
      points[rank-1] = point;
      seen[rank-1] = false;
      var text = markEl.getAttribute("text");
      var file = markEl.getAttribute("file");
      var size = parseFloat(markEl.getAttribute("size")) + 1.0;
      size = multiplier * Math.pow(parseFloat(markEl.getAttribute("size")), 1/3.0);
      var k = maxIconSize;
      for (var i = 0; i < iconSizesLength; i++) {
      	if (iconSizes[i] > size) {
      	  k = i;
      	  break;
      	}
      }
      var icon = icons[k];
      var altImage = altImages[k];
      marker = new GMarker(point, {icon: icon, clickable: true, title: text+" #"+rank});
      GEvent.addListener (marker, "click", function() {
        window.setTimeout (function() {map.panTo(point);}, 1000);
        var html = "<div style='background-color:#fff'><b>"+text+"</b>";
        if (map.getZoom() < zoomLevelHideMarkers-1) html += " [<a href='javascript:goTo("+rank+")'>zoom in<a>]";
        html += "</div><iframe name='gmap' frameborder='0' src='cities/"+file+".html' width='300' height='120'></iframe>";
        //var infoTabs = [  new GInfoWindowTab(text, html) ];          
        //marker.openInfoWindowTabsHtml(infoTabs);
        marker.openInfoWindowHtml(html);
        marker.setImage(altImage);
        if (document.getElementById("seen").innerHTML == "") document.getElementById("seen").innerHTML = "go to: ";
        if (!seen[rank-1]) document.getElementById("seen").innerHTML += "<a href='javascript:goTo("+rank+");'>" + text + "</a> ";
        seen[rank-1] = true;
      });
      return marker;
    }
    function message() {
      var zoomLevel = map.getZoom();
      var html ="";
      if (zoomLevel < zoomLevelSecondBatch) {
      	html = + firstBatchSize + " cities loaded.";
      	if (firstBatchSize < numCities) html += " Zoom in " +  (zoomLevelSecondBatch - zoomLevel) + " level(s) to see more cities.";
      }
      else if (zoomLevel < zoomLevelHideMarkers) {
        html = "All ";
        if (numCities>0) html += numCities;
        html += " cities loaded.";
      }
      else html = "markers hidden for unobscured view. Zoom out " +  (zoomLevel - zoomLevelHideMarkers + 1) + " level(s) to see markers.";
      return html;
    }
    var secondBatchSize = 0;
    map = new GMap2(document.getElementById("map"));
    if (controls == 1) {
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
    }
    map.enableScrollWheelZoom();
    map.setCenter(new GLatLng(initNorth, initEast), initZoom);
    map.setMapType(map.getMapTypes()[1]);
    var iconSizes = [3,4,5,6,7,8,9,10,11,12,13,14,15,16,18,20,22,24,26,28,30,32,36,40,44,48,52,56,60,64,72,80,88];
    var iconSizesLength = iconSizes.length;
    var maxIconSize = iconSizes[iconSizesLength-1];
    var icons = [];
    var altImages = [];
    for (var i = 0; i < iconSizesLength; i++) {
      var size = iconSizes[i];
      var halfSize = Math.round(size/2);
      icons[i] = new GIcon();
      icons[i].image = "pix/geo/s" + size + ".png";
      icons[i].shadow = null;
      icons[i].iconSize = new GSize(size, size);
      icons[i].iconAnchor = new GPoint(halfSize, halfSize);
      icons[i].infoWindowAnchor = new GPoint(halfSize, halfSize);
      altImages[i] = "pix/geo/s" + size + "g.png";
    }
    GDownloadUrl ("markers.xml", function(data) {
      var mgr = new GMarkerManager(map);
      var batch1 = [];
      var batch2 = [];
      var xml = GXml.parse(data);
      markerEls = xml.documentElement.getElementsByTagName("marker");
      secondBatchSize = markerEls.length;
      numCities = secondBatchSize;
      if (firstBatchSize > secondBatchSize) firstBatchSize = secondBatchSize;
      for (var i = 0; i < firstBatchSize; i++) batch1.push(createMarker(markerEls[i],1.0));
      for (var i = 0; i < secondBatchSize; i++) batch2.push(createMarker(markerEls[i],1.85));
      mgr.addMarkers(batch1, 0, zoomLevelSecondBatch - 1);
      mgr.addMarkers(batch2, zoomLevelSecondBatch, zoomLevelHideMarkers - 1);
      mgr.refresh();
    });
    GEvent.addListener (map, "zoomend", function() {document.getElementById("message").innerHTML = message();} );
    document.getElementById("message").innerHTML = "Welcome to the map. " + message() + " Click on a city to see details";
  }
  document.getElementById("seen").innerHTML = "";
}

