/* map object */
var objMap;

/* xml o bject */
var objXML;
var objHttpRequest;

/* xmlhttprequest object */
var objRequest;

/* XslT object */
var objXslt;

/* base icon for markers */
var objIcon;

/* content divs */
var mapDiv;

var locations = new Array();

function AddToMap() {
   for (var i = 0; i < locations.length; i++) {
     var tmpMarker = locations[i].marker;
     objMap.addOverlay(tmpMarker);
   }
   objMap.addControl(new GLargeMapControl());
}

/* pan to the location at array index i */
function pan(i) {
  document.getElementById("status").innerHTML = "Panning...";
  var loc = locations[i];
  objMap.centerAndZoom(loc.point, 2);
  loc.marker.openInfoWindowHtml(loc.caption);
  document.getElementById("status").innerHTML = "";  
}

/* get the site data from the view and
   add points to the map for each site */
function PlotSites() {
  var viewName = "sites";
  var url = _serverUrl + "/" + _webDbName + "/" + viewName + "?ReadViewEntries&Count=-1";
  var statusDiv = document.getElementById("status");
  
    AjaxRequest.get(
    {
      'url': url
      , 'onSuccess':function(req) { GetViewData( req.responseXML );AddToMap();  }
      ,'onError':function(req){ alert('Error!\nStatusText='+req.statusText+'\nContents='+req.responseText);}
      ,'onLoading':function() { statusDiv.innerHTML = "Loading..."; }
     ,generateUniqueUrl:false
    }  
   )  
}

/* load the view data */
function GetViewData( xml ) {

  var statusDiv = document.getElementById("status");

  /* load the xml data into viewData objects */
  for ( var j = 0; j < xml.documentElement.getElementsByTagName("viewentry").length; j++ ) {

    /* store the view data as object properites 
       for filtering/sorting/etc. in the future */
    var i = locations.length;
    locations[i] = new Object;
    locations[i].name   = xmlToArray( xml, 0 )[j];
    locations[i].lat    = xmlToArray( xml, 1 )[j];
    locations[i].lon    = xmlToArray( xml, 2 )[j];
    locations[i].street = xmlToArray( xml, 3 )[j];
    locations[i].city   = xmlToArray( xml, 4 )[j];
    locations[i].state  = xmlToArray( xml, 5 )[j];
    locations[i].zip    = xmlToArray( xml, 6 )[j];
    locations[i].code   = xmlToArray( xml, 7 )[j];
    locations[i].htm    = xmlToArray( xml, 8 )[j];
    
    /* google map object properties ( icon, marker, point ) */ 
    var objPoint = new GPoint(locations[i].lon, locations[i].lat );
    locations[i].point = objPoint; 

    /* create an icon based on the code */
    var oIcon = new GIcon(objIcon);
    oIcon.image = _serverUrl + "/" + _webDbName + "/images/pins/pin" + locations[i].code + ".png";

    /* create a marker for the location based on point and location*/
    var oMarker = new GMarker( objPoint, oIcon);
    
    /* set the icon to the location */    
    locations[i].icon = oIcon; 
    
    /* html for the inside of the callout box */
    var html = "<div style=\"font-size:9pt;font-family:tahoma,verdana,sans-serif;\"><b>" + locations[i].name + "</b><br>";
    html += locations[i].street + "<br>" + locations[i].city + " " + locations[i].state + "  " + locations[i].zip;
    if ( locations[i].htm != "" ) {
      html += "<div style=\"border-top:1px solid #c0c0c0;\">" + locations[i].htm + "</div></div>";
    }
    locations[i].caption = html;
     
    /* add a click listener to display html in callout */
    addClick( oMarker,  html);
    
    /* add the marker object as a property */
    locations[i].marker = oMarker;
    
  }
  statusDiv.innerHTML = ""; 

  /* load the table */
  BuildTable();
}

function addClick( objMark, h ) {
    /* add a listener to show the infowindow on click */
    GEvent.addListener( objMark, "click", function() {
      objMark.openInfoWindowHtml(h);
    });
}

/* create table of sites for quick pan */
function BuildTable() {
 var htm = "<table id=\"tblPan\">";
 htm += "<tr><th colspan=\"2\">Key/Pan";
 for ( var i = 0; i < locations.length; i++ ) {
   htm += "<tr onclick=\"pan(" + i + ")\" style=\"cursor:pointer;\">" ;
   htm += "<td><img src=\"images/keys/key" + locations[i].code + ".gif\" alt=\"Code " + locations[i].code + "\">" 
   htm += "<td>" + locations[i].name;
 }
 
 htm += "</table>";

 document.getElementById("nav").innerHTML = htm;
 
}

/* draw initial map */
function doInit() {
/* create new map pointed at map div */
    objMap = new GMap(document.getElementById("map"));
/* load panel div */
   panelDiv = document.getElementById("sidepanel");
/* create a new xml factory */
    objXml = GXml;
/* create a new xslt factory */
    objXslt = GXslt;
/* setup a new http request factory */
    objHttpRequest = GXmlHttp;
/* create a base icon */
    objIcon = new GIcon();
    objIcon.shadow = "images/shadow50.png";
    objIcon.iconSize = new GSize(20, 34);
    objIcon.shadowSize = new GSize(37, 34);
    objIcon.iconAnchor = new GPoint(9, 34);
    objIcon.infoWindowAnchor = new GPoint(9, 2);
    objIcon.infoShadowAnchor = new GPoint(18, 25);

    objMap.addControl(new GMapTypeControl());
    objMap.addControl(new GLargeMapControl());

    /* center map on center point */
    objMap.centerAndZoom(new GLatLng(-12.431673,130.837877), 3);

    /* load the sites on the map and table */
    PlotSites();
    

}