//<![CDATA[
    var map;
    var geocoder;

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 10);
		
		var oIcon = new GIcon();
		oIcon.image = "http://www.findmethemovie.com/images/o_icon.png";
		oIcon.shadow = "http://www.findmethemovie.com/images/p_shadow.png";
		oIcon.iconSize = new GSize(32, 32);
		oIcon.shadowSize = new GSize(42, 32);
		oIcon.iconAnchor = new GPoint(16, 32);
		oIcon.infoWindowAnchor = new GPoint(16, 1);
		markerOptions = { icon:oIcon };
      }
    }

   function searchLocations() {
     var zip = document.getElementById('cZip').value;
     geocoder.getLatLng(zip, function(latlng) {
       if (!latlng) {
         alert(zip + ' not found');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }

   function searchLocationsNear(center) {
     var radius = document.getElementById('cDist').value;
     var searchUrl = 'storeLocatorScript.cfm?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('sidebar');
       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 address2 = markers[i].getAttribute('address2');
		 var phone = markers[i].getAttribute('phone');
		 var description = markers[i].textContent;
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var marker = createMarker(point, name, address, address2, phone, description);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, phone, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }

    function createMarker(point, name, address, address2, phone, description) {
      var marker = new GMarker(point, markerOptions);
      var html = '<p class="smallText"><b>' + name + '</b><br/>' + address + '<br/>' + address2 + '<br/>Phone: ' + phone +
	  '<br>' + description +
	  '<br><br><b>Get Directions</b><br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=25 MAXLENGTH=40 name="saddr" id="saddr" value="" class="dirField" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT" class="smallText">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + '"/>' + '</form></p>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, name, address, phone, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b>' + '<br/>' + address + '<br/>Phone: ' + phone;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
	  div.style.padding = '5px';
	  div.style.borderBottom = '1px solid #999999';
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '';
      });
      return div;
    }
    //]]>