var map;
var kmlUrl = 'http://www.fairtradeaction.net/fairtradeaction.kml';
var now = new Date();
kmlUrl += '?now=' + now.getHours() + now.getMinutes();
var geoXml = new GGeoXml(kmlUrl);
var mapDiv;
var center = new GLatLng(20,25);
var zoom = 2;
var myMarker;

function load() {
 mapDiv = document.getElementById('map');
 if (GBrowserIsCompatible()) {
  map = new GMap2(mapDiv);
  map.enableContinuousZoom();
  // map.enableScrollWheelZoom();
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl());
  // map.addControl(new GOverviewMapControl());
  map.setCenter(center, zoom, G_HYBRID_MAP);
  map.addOverlay(geoXml);
  addForm();
 }
}

function addForm() {
 var f = document.getElementById('actcoords');
 if (f) {
  var d = document.createElement('div');
  d.setAttribute('class', 'myCoord');
  // var l = document.createElement('label');
  // var lt = document.createTextNode("... or");
  // l.appendChild(lt);
  var b = document.createElement('input');
  b.setAttribute('name', 'get');
  b.setAttribute('id', 'getButton');
  b.setAttribute('type', 'button');
  b.onclick = changeView;
  b.setAttribute('value', 'Get coordinates from map');
  // d.appendChild(l);
  d.appendChild(b);
  f.appendChild(d);
 }
}

function changeView() {
 var tmpCenter = map.getCenter();
 var tmpZoom = map.getZoom();
 map.closeInfoWindow();
 var b = document.getElementById('getButton');
 if (myMarker && myMarker.isHidden()) {
  map.removeOverlay(geoXml);
  myMarker.show();
  map.setCenter(center, zoom, G_HYBRID_MAP);
  center = tmpCenter;
  zoom = tmpZoom;
  map.addOverlay(myMarker);
  refreshMarker();
  b.setAttribute('value', 'Cancel - restore map to original state');
 }
 else if (myMarker) {
  myMarker.hide();
  map.removeOverlay(myMarker);
  map.addOverlay(geoXml);
  map.setCenter(center, zoom, G_HYBRID_MAP);
  b.setAttribute('value', 'Get coordinates from map');
  center = tmpCenter;
  zoom = tmpZoom;
 }
 else {
  map.removeOverlay(geoXml);
  center = tmpCenter;
  zoom = tmpZoom;
  getCoordsFromMap();
  b.setAttribute('value', 'Cancel - restore map to original state');
 }
}

function getCoordsFromMap() {
 var f = document.getElementById('myForm');
 if (f) {
  map.removeOverlay(geoXml);
  var point = map.getCenter();
  var lat = f.lat.value;
  var lng = f.lng.value;
  if (lat || lng) {
   point = new GLatLng(lat, lng);
   map.setCenter(point);
  }
  // var fticon = new GIcon();
  // fticon.image = 'http://www.fairtradeaction.net/i/ft.png';
  // fticon.iconSize = new GSize(32, 32);
  // fticon.iconAnchor = new GPoint(16, 16);
  // fticon.infoWindowAnchor = new GPoint(16, 16);
  // fticon.imageMap = new Array(-32, -32, 32, 32);
  // var myOpts = {draggable: true, icon: fticon, bouncy: false};
  var myOpts = {draggable: true};
  myMarker = new GMarker(point, myOpts);
  GEvent.addListener(map, 'dblclick', function(overlay, point) {
   myMarker.setPoint(point);
   endMove();
  });
  GEvent.addListener(myMarker, 'dragstart', function() {
   map.closeInfoWindow();
  });
  GEvent.addListener(myMarker, 'click', createInfo);
  GEvent.addListener(myMarker, 'dragend', endMove);
  map.addOverlay(myMarker);
  myMarker.openInfoWindowHtml('<p>Drag this marker to your location</p>');
 }
}

function endMove() {
  var f = document.getElementById('myForm');
  var point = myMarker.getPoint();
  f.lat.value = point.lat();
  f.lng.value = point.lng();
  createInfo();
}
function refreshMarker() {
  var f = document.getElementById('myForm');
  var point = new GLatLng(f.lat.value, f.lng.value);
  myMarker.setPoint(point);
  myMarker.enableDragging();
  map.setCenter(point);
  createInfo();
}
function createInfo() {
  var f = document.getElementById('myForm');
  var info = '<div>';
  var labels = f.getElementsByTagName('label');
  for (var i=0; i<labels.length; i++) {
   var iid = labels[i].getAttribute('for') || labels[i].htmlFor;
   var text = labels[i].childNodes[0].nodeValue;
   if (iid) {
    var ifield = document.getElementById(iid);
    if (ifield) {
     ifield.onchange = refreshMarker;
     if (ifield.value) {
      info += '<p class="actinfo"><strong>' + text + ':</strong> ' +
              ifield.value + '</p>\n';
     }
    }
   }
  }
  info += '</div>\n';
  myMarker.openInfoWindowHtml(info);
}
window.onload = load;
window.onunload = GUnload;