function refreshMarker()
{
  map.clearOverlays();
  marker = null;
  var myLatLng = getProperLatLng();
  marker = new GMarker(myLatLng, {draggable: true});
  map.addOverlay(marker);
  var myLat = (marker.getLatLng()).lat();
  var myLng = (marker.getLatLng()).lng();
  map.panTo(new GLatLng(myLat, myLng));
  displayLatLng(myLat, myLng);
  GEvent.addListener(marker, 'dragend', function()
  {
    displayLatLng((this.getLatLng()).lat(), (this.getLatLng()).lng());
//    displayInfoWindow();
  });
//  GEvent.addListener(marker, 'mouseover', function(){
//    displayInfoWindow();
//  });
  GEvent.addListener(marker, 'drag', function(){
    displayLatLng((this.getLatLng()).lat(), (this.getLatLng()).lng());
  });
  GEvent.addListener(map, 'click', function(overlay, latlng){
    putMarkerOnLatLng(latlng);
  });
}

function getProperLatLng()
{
  var latlng = getLatLngFromForm();
  if((latlng.lat() === 0) && (latlng.lng() === 0))
  {
    latlng = map.getCenter();
  }
  return latlng;
}

function getMarkerIcon(imageUrl, shadowUrl, iconSizeX, iconSizeY, shadowSizeX, shadowSizeY)
{
  var myIcon = new GIcon();
  var xCenter = iconSizeX/2;

  myIcon.image = imageUrl;
  myIcon.shadow = shadowUrl;
  myIcon.iconSize = new GSize(iconSizeX, iconSizeY);
  myIcon.shadowSize = new GSize(shadowSizeX, shadowSizeY);
  myIcon.iconAnchor = new GPoint(xCenter, iconSizeY);
  myIcon.infoWindowAnchor = new GPoint(xCenter, 0);
  myIcon.infoShadowAnchor = new GPoint(xCenter, 0);

  return myIcon;
}

function displayInfoWindow()
{
  var title = document.getElementById(textfieldIdForTitle).value;
  var location = document.getElementById(textfieldIdForLocation).value;
  marker.openInfoWindowHtml(title + '<br />' + location);
}

function getLatLngFromForm()
{
  var lat = document.getElementById(idForLatitude).value;
  var lng = document.getElementById(idForLongitude).value;
  var latlng = new GLatLng(lat, lng, true);
  return latlng;
}

function putMarkerOnCenter()
{
  map.removeOverlay(marker);
  marker.setLatLng(map.getCenter());
  map.addOverlay(marker);
  displayLatLng((marker.getLatLng()).lat(), (marker.getLatLng()).lng());
}

function putMarkerOnLatLng(newLatLng)
{
  map.removeOverlay(marker);
  marker.setLatLng(newLatLng);
  map.panTo(newLatLng);
  map.addOverlay(marker);
  displayLatLng((marker.getLatLng()).lat(), (marker.getLatLng()).lng());
}

function displayLatLng(lat, lng)
{
    document.getElementById(idForLatitude).value = lat;
    document.getElementById(idForLongitude).value = lng;
}

function applyManualInput(position)
{
  var newLatLng = getLatLngFromForm();
  if(validLatLng(newLatLng))
  {
    putMarkerOnLatLng(newLatLng);
  }
  else
  {
    displayLatLng((marker.getLatLng()).lat(), (marker.getLatLng()).lng());
  }
}

function validLatLng(latLng)
{
  var lat = latLng.lat();
  var lng = latLng.lng();

  if(isValidLatLng(lat) && isValidLatLng(lng))
  {
    return true;
  }
  else
  {
    return false;
  }
}

function isValidLatLng(num)
{
  if(!isNaN(num))
  {
    if((-180 < num) && (num < 180))
    {
      return true;
    }
  }
  return false;
}


function readAllFarmsFromXML(url, map)
{
//alert('got to here');
//alert(url);

  // Read the data from example.xml
  var request = GXmlHttp.create();
  request.open("GET", url, true);
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var xmlDoc = GXml.parse(request.responseText);
      // obtain the array of markers and loop through it
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                
      for (var i = 0; i < markers.length; i++)
				{
        // obtain the attribues of each marker
        var lat					   = GXml.value(markers[i].getElementsByTagName("latitude")[0]);
        var lng 					 = GXml.value(markers[i].getElementsByTagName("longitude")[0]);
        var farmName  		 = GXml.value(markers[i].getElementsByTagName("farmName")[0]);
        var shire 				 = GXml.value(markers[i].getElementsByTagName("shire")[0]);
        var annualRainfall = GXml.value(markers[i].getElementsByTagName("annualRainfall")[0]);

        var point = new GLatLng(lat,lng);
        // var html = farmName;
        // var label = farmName;
       
        // create the marker
        var marker = createMarker(point,farmName,shire);
        map.addOverlay(marker);
      }
   }
 }
 request.send(null);
}


function readAllPoisFromXML(url, map, newIcons)
{
//alert('got to here');
//alert(url);
var bounds = new GLatLngBounds();

  // Read the data from example.xml
  var request = GXmlHttp.create();
  request.open("GET", url, true);
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var xmlDoc = GXml.parse(request.responseText);
      // obtain the array of markers and loop through it
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                
       //alert(markers.length);
                
      for (var i=0; i < markers.length; i++)
      {
        // obtain the attribues of each marker
        var lat		    = GXml.value(markers[i].getElementsByTagName("latitude")[0]);
        var lng 		= GXml.value(markers[i].getElementsByTagName("longitude")[0]);
        var poiName    	= GXml.value(markers[i].getElementsByTagName("poiName")[0]);
        var poiType		= GXml.value(markers[i].getElementsByTagName("poiType")[0]);
        var poiColour   = GXml.value(markers[i].getElementsByTagName("poiColour")[0]);
        var windowUrl   = GXml.value(markers[i].getElementsByTagName("windowUrl")[0]);
        var html        = GXml.value(markers[i].getElementsByTagName("html")[0]);
        //var mapMarkerOptions = GXml.value(markers[i].getElementsByTagName("mapMarkerOptions")[0]);
        
        //alert(poiName);

        var newLat = Number(lat);
        var newLng = Number(lng);
        var color = String(poiColour);
        var newWindowUrl = String(windowUrl);
        
        //alert(newLat + ' ' + newLng);
        
        var point = new GLatLng(newLat,newLng);
       
        // create the marker
        //var marker = createColourMarker(point, newIcons[poiType], newWindowUrl);
        var marker = createColourMarkerNormalWindow(point, newIcons[poiType], html);
        map.addOverlay(marker);

        // ==== Each time a point is found, extent the bounds ato include it =====
        bounds.extend(point);
      } // end for
      
      if (markers.length > 1)
      {
    	  map.setZoom(map.getBoundsZoomLevel(bounds) -1);  
      } // end if
      
      map.setCenter(bounds.getCenter());
   }
 }
 request.send(null);
}


function readAllPoisForDirectionsFromXML(url, map, newIcons, bounds)
{
//alert('got to here');
//alert(url);

  // Read the data from example.xml
  var request = GXmlHttp.create();
  request.open("GET", url, true);
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var xmlDoc = GXml.parse(request.responseText);
      // obtain the array of markers and loop through it
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");
                
       //alert(markers.length);
                
      for (var i=0; i < markers.length; i++)
		  {
        // obtain the attribues of each marker
        var lat					     = GXml.value(markers[i].getElementsByTagName("latitude")[0]);
        var lng 				  	 = GXml.value(markers[i].getElementsByTagName("longitude")[0]);
        var poiName    	  	 = GXml.value(markers[i].getElementsByTagName("poiName")[0]);
        var poiType			  	 = GXml.value(markers[i].getElementsByTagName("poiType")[0]);
        var poiColour        = GXml.value(markers[i].getElementsByTagName("poiColour")[0]);
        var windowUrl        = GXml.value(markers[i].getElementsByTagName("windowUrl")[0]);
        var html        = GXml.value(markers[i].getElementsByTagName("html")[0]);
        //var mapMarkerOptions = GXml.value(markers[i].getElementsByTagName("mapMarkerOptions")[0]);
        
        //alert(poiName);

        var newLat = Number(lat);
        var newLng = Number(lng);
        var color = String(poiColour);
        var newWindowUrl = String(windowUrl);
        
        //alert(newLat + ' ' + newLng);
        
        var point = new GLatLng(newLat,newLng);
       
        // create the marker
        var marker = createColourMarkerNormalWindow(point, newIcons[poiType], html);
        map.addOverlay(marker);

        // ==== Each time a point is found, extent the bounds ato include it =====
        bounds.extend(point);
      }
      
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
   }
 }
 request.send(null);
}


function createIconMarker(point, newIcon, html) {
  var marker = new GMarker(point, newIcon);
  GEvent.addListener(marker, "click", function() {
    marker.openExtInfoWindow(
                              map, 
                              "custom_info_window_red", 
                              html, 
                              {breakOffset: 3} 
                            );
  });
  
  GEvent.addListener(map, "extinfowindowclose", function() {
    map.setCenter(point);
  });  
  
  GEvent.addListener(map, "extinfowindowopen", function() {
    map.setCenter(point);
  });
  
  
  return marker;
}

function createColourMarker(point, newIcon, newWindowUrl) {
  var marker = new GMarker(point, newIcon);
  GEvent.addListener(marker, "click", function() {
    marker.openExtInfoWindow(
                              map, 
                              "custom_info_window_red", 
                              "<p>Loading Information...</p>", 
                              {breakOffset: 2, ajaxUrl: newWindowUrl} 
                            );
  });
  
  GEvent.addListener(map, "extinfowindowclose", function() {
    map.setCenter(point);
  });
  
  GEvent.addListener(map, "extinfowindowopen", function() {
    map.setCenter(point);
  });
  
  return marker;
}

function createColourMarkerNormalWindow(point, newIcon, html) {
  var marker = new GMarker(point, newIcon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  
  return marker;
}


  
  // ============ custom direction panel ==============
  function customPanel(map,mapname,dirn,div,poinames,poitypes) {
    var html = "";
      
    // ===== local functions =====

    // === waypoint banner ===
    function waypoint(point, type, address, name) {
      //alert('type: ' + type);
      var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
      html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
      html += '  <tr style="cursor: pointer;" onclick='+target+'>';
      html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
//      html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
      html += '       <img src="http://chart.apis.google.com/chart?cht=mm&chs=25x25&chco=ffffff,' + type + ',000000&chf=a,s,ffffff99&ext=.png" style="z-index: 999;" />';
      html += '    <\/td>';
      html += '    <td style="vertical-align: middle; width: 100%;">';
      html +=        address + ' - ' + name;
      html += '    <\/td>';
      html += '  <\/tr>';
      html += '<\/table>';
    }

    // === route distance ===
    function routeDistance(dist) {
      html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
    }      

    // === step detail ===
    function detail(point, num, description, dist) {
      var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
      html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
      html += '  <tr style="cursor: pointer;" onclick='+target+'>';
      html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
      html += '      <a href="javascript:void(0)"> '+num+'. <\/a>';
      html += '    <\/td>';
      html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
      html +=        description;
      html += '    <\/td>';
      html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
      html +=        dist;
      html += '    <\/td>';
      html += '  <\/tr>';
      html += '<\/table>';
    }

    // === Copyright tag ===
    function copyright(text) {
      html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
    }
    

    // === read through the GRoutes and GSteps ===
    //alert('poinames: ' + poinames);
    //alert('poi types: ' + poitypes);
    //alert('num routes: '. dirn.getNumRoutes());
    //alert('num poinames: '. count(poinames));

    for (var i=0; i<dirn.getNumRoutes(); i++) {
//      if (i==0) {
//        var type="play";
//      } else {
//        var type="pause";
//      }
      var route = dirn.getRoute(i);
      var geocode = route.getStartGeocode();
      var point = route.getStep(0).getLatLng();
      // === Waypoint at the start of each GRoute
      
      waypoint(point, poitypes[i], geocode.address, poinames[i]);
      routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

      for (var j=0; j<route.getNumSteps(); j++) {
        var step = route.getStep(j);
        // === detail lines for each step ===
        detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
      }
    }
    
    // === the final destination waypoint ===   
    var geocode = route.getEndGeocode();
    var point = route.getEndLatLng();
    waypoint(point, "stop", geocode.address, poinames[dirn.getNumRoutes()]);
             
    // === the copyright text ===
    copyright(dirn.getCopyrightsHtml());

    // === drop the whole thing into the target div
    div.innerHTML = html;

  } // ============ end of customPanel function ===========