// JavaScript Document
    var map;
    var geocoder;
	var sidebarEntry = new Array();
	var postalCode = queryString('postalcode');
	
	if(postalCode == false || postalCode == null || postalCode==0 || postalCode == ''){
		postalCode = "";
	}

    function init() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(37, -95), 3);
		document.getElementById('addressInput').value = postalCode;
		if (postalCode != "") {
		    searchLocationsNear(postalCode);
		}		
      }
    }

   function searchLocationsNear() {
     var radius = document.getElementById('radiusSelect').value;
	 var postalcode = document.getElementById('addressInput').value;
	 var searchUrl = 'locations.ashx?postal_code='+postalcode+'&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 = '';
	     sidebarEntry = new Array();
	     if (markers.length == 0) {
	         sidebar.innerHTML = '<strong>Please enter a Postal/Zip Code.</strong>';
	         map.setCenter(new GLatLng(37, -95), 3);
	         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')));
	         if (markers[i].getAttribute('phone') != null) {
	             var phone = markers[i].getAttribute('phone');
	         } else {
	             var phone = '';
	         }
	         var marker = createMarker(point, name, address, phone);
	         map.addOverlay(marker);
	         sidebarEntry[i] = createSidebarEntry(marker, name, address, phone, distance);
	         bounds.extend(point);
	     }

	     for (var i = 0; i < sidebarEntry.length; i++) {
	         sidebar.appendChild(sidebarEntry[i]);
	     }

	     map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

	 });
   }

    function createSidebarEntry(marker, name, address, phone, distance) {
      var div = document.createElement('div');
	  var html = '<div style="max-width:200px; padding: 0 0 15px 0;  font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;line-height:16px;">'+
		'<div id="name" style="font-weight:bold; font-size:12px;">'+name+'</div>'+
    	'<div id="dist" style="font-weight:bold;">Distance: '+distance.toFixed(1)+' mi</div>'+
	    '<div id="address">'+address.split(',')[0] +'<br/>'+address.split(',')[1]+', '+address.split(',')[2]+'</div>'+
	    '<div id="tele">'+phone+'</div>'+
	    '<div id="mapIt" style="color:#CC6600; text-decoration:underline;border-bottom:thin solid #999;padding:0 0 5px 0;">Show on map</div>'+
		'</div>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      return div;
    }
	
    function createMarker(point, name, address, phone) {
      var marker = new GMarker(point);
	  var div = document.createElement('div');
	  var html = '<div style=" font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;line-height:16px; text-align:right; padding-top:10px;">'+
		'<div id="name" style="font-weight:bold; font-size:12px;">'+name+'</div>'+
	    '<div id="address">'+address.split(",")[0] +'<br/>'+address.split(",")[1]+', '+address.split(",")[2]+'</div>'+
	    '<div id="tele">'+phone+'</div>'+
		'</div>'+
	   	'<div id="dir" style="text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;line-height:12px; padding-top:10px;"><b>Get Directions:<br />'+
    	'<span style="font-size:9px;color:#333;">Start Address:</span><br />'+
		'<input type="hidden" id="to" value="' + address + '"/>'+
		'<input type="text" id="from" value=""/>'+
		'<input type="button" onclick="getDirections(document.getElementById(\'to\').value,document.getElementById(\'from\').value)" value="GO"/></div>'
      div.innerHTML = html;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(div);
      });
      return marker;
    }

    function getDirections(toAddy, fromAddy) {
        if (toAddy.indexOf("<br />") > -1) {
            toAddy = toAddy.substr(toAddy.indexOf("<br />") + 6);
        }

	    var goTo = toAddy.replace(/ /g,"+");
	    var goFrom = fromAddy.replace(/ /g,"+");
		window.location.href= "directions.aspx?to="+goTo+"&from="+goFrom;
	}
	
	
	
	window.onload = init;
	window.onunload = GUnload;