var map;
var geocoder;
var currentAddress;

var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

$(document).ready(function() {
  if (GBrowserIsCompatible()) {
     geocoder = new GClientGeocoder();
     map = new GMap2(document.getElementById('map'));
     map.addControl(new GLargeMapControl());
     map.setCenter(new GLatLng(40, -100), 4);
     map.enableScrollWheelZoom();
  }
});

$(document).unload(function() {
  GUnload();
});

function searchLocations(s) {
  var address = s || document.getElementById('addressInput').value;
  // HACK: Should avoid use of a global variable here.
  currentAddress = address;
  geocoder.getLatLng(address, function(latlng) {
    if (!latlng) {
      alert(address + ' not found');
    } else {
      searchLocationsNear(latlng);
    }
  });
}

function searchLocationsNear(center) {
  // TODO: Hard-coded radius!
  var radius = 25;

  var searchUrl = 'store_locator_search.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
  GDownloadUrl(searchUrl, function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName('marker');
    map.clearOverlays();

    var sidebar = document.getElementById('store_locator_results');
    sidebar.innerHTML = '';
    if (markers.length == 0) {
      sidebar.innerHTML = 'No results found.';
      map.setCenter(new GLatLng(40, -100), 4);
      return;
    }

    var bounds = new GLatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute('name');
      var address = markers[i].getAttribute('address');
      var distance = parseFloat(markers[i].getAttribute('distance'));
      var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng')));
      
      var marker = createMarker(i, point, name, address);
      map.addOverlay(marker);
      var sidebarEntry = createSidebarEntry(marker, name, address, distance);
      sidebar.appendChild(sidebarEntry);
      bounds.extend(point);
    }
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
  });
}

function createMarker(index, point, name, address) {
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var letterIcon = new GIcon(baseIcon);
  letterIcon.image = "img/markers/marker" + letter + ".png";
  
  var marker = new GMarker(point, { icon:letterIcon });
  var html = '<b>' + name + '</b> <br/>' + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

function createSidebarEntry(marker, name, address, distance) {
  var div = document.createElement('div');
  div.className = 'entry';

  var html = '<img alt="" src="' + marker.getIcon().image + '" style="float: left; margin-right: 10px;" /><strong>' + name + '</strong> (' + distance.toFixed(1) + ' mi.)<br/>' + address;
  div.innerHTML = html;

  GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click');
  });
  GEvent.addDomListener(div, 'mouseover', function() {
    //div.style.backgroundColor = 'white';
    div.style.textDecoration = 'underline';
  });
  GEvent.addDomListener(div, 'mouseout', function() {
    //div.style.backgroundColor = '';
    div.style.textDecoration = '';
  });
  return div;
}