// it is really a many-pointed polygon, but look smooth enough to be a circle.
   var CircleOverlay = function(latLng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
       this.latLng = latLng;
       this.radius = radius;
       this.strokeColor = strokeColor;
       this.strokeWidth = strokeWidth;
       this.strokeOpacity = strokeOpacity;
       this.fillColor = fillColor;
       this.fillOpacity = fillOpacity;
   }

   // Implements GOverlay interface
   CircleOverlay.prototype = GOverlay;

   CircleOverlay.prototype.initialize = function(map) {
       this.map = map;
   }

   CircleOverlay.prototype.clear = function() {
       if(this.polygon != null && this.map != null) {
           this.map.removeOverlay(this.polygon);
       }
   }

   // Calculate all the points and draw them
   CircleOverlay.prototype.redraw = function(force) {
       var d2r = Math.PI / 180;
       circleLatLngs = new Array();
       var circleLat = this.radius * 0.014483;  // Convert statute miles into degrees latitude
       var circleLng = circleLat / Math.cos(this.latLng.lat() * d2r);
       var numPoints = 40;
      
       // 2PI = 360 degrees, +1 so that the end points meet
       for (var i = 0; i < numPoints + 1; i++) {
           var theta = Math.PI * (i / (numPoints / 2));
           var vertexLat = this.latLng.lat() + (circleLat * Math.sin(theta));
           var vertexLng = this.latLng.lng() + (circleLng * Math.cos(theta));
           var vertextLatLng = new GLatLng(vertexLat, vertexLng);
           circleLatLngs.push(vertextLatLng);
       }
      
       this.clear();
       this.polygon = new GPolygon(circleLatLngs, this.strokeColor, this.strokeWidth, this.strokeOpacity, this.fillColor, this.fillOpacity);
       this.map.addOverlay(this.polygon);
   }

   CircleOverlay.prototype.remove = function() {
       this.clear();
   }

   CircleOverlay.prototype.containsLatLng = function(latLng) {
       // Polygon Point in poly
       if(this.polygon.containsLatLng) {
           return this.polygon.containsLatLng(latLng);
       }
   }

   CircleOverlay.prototype.setRadius = function(radius) {
       this.radius = radius;
   }

   CircleOverlay.prototype.setLatLng = function(latLng) {
       this.latLng = latLng;
   }

  function drawCircle() {
      circleRadius = document.getElementById('miles').value;
      //centerPoint = map.getCenter();
      centerPoint = (new GLatLng(seslat,seslng));
      circle = new CircleOverlay(centerPoint, circleRadius, "#336699", 1, 1, '#336699', 0.25);
      map.addOverlay(circle);
   }

    var circle = null;
    var circleRadius = 1; // Miles
    var map = null;
    var geocoder = null;


    function initialize() {
      if (GBrowserIsCompatible()) {
        //Draw Map
         map = new GMap2(document.getElementById("map_canvas"));
         map.disableDragging();
         map.disableScrollWheelZoom();
         map.setCenter(new GLatLng(seslat,seslng), 13);
         geocoder = new GClientGeocoder();
      }
      sCalc(0);
    }


    function zoomInOut(z) {
            map.clearOverlays();
            var miles = 2;
            if (z == 120) { 
                miles = 128;
                zoomlvl = 7
            } else if (z == 100) {
                miles = 64;
                zoomlvl = 8;
            } else if (z == 80) {
                miles = 32;
                zoomlvl = 9;
            } else if (z == 60) {
                miles = 16;
                zoomlvl = 10;
            } else if (z == 40) {
                miles = 8;
                zoomlvl = 11;
            } else if (z == 20) {
                miles = 4;
                zoomlvl = 12;
            } else if (z == 0) {
                miles = 2;
                zoomlvl = 13;
            }
            document.getElementById('miles').value = miles;
            document.getElementById('smiles').value = miles;
            map.setCenter(new GLatLng(seslat,seslng), zoomlvl);
            //drawCircle();
            sCalc(0);
          //  globalCall('ajax','/map/ajax/index','a='+document.getElementById('smiles').value);
    }

function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
              } else {
                map.clearOverlays();
                drawCircle();
                sCalc(0);
                var mylocHtml = "Your Location";
                map.setCenter(point, 13);
                map.addOverlay(createMarker(point,0,mylocHtml,'marker0.png'));
                map.openInfoWindowHtml(point,mylocHtml);
            }
          }
        );
      }
    }



   function hideMapInfoWindow() {
      var mapInfoWindow = document.getElementById('mapInfoWindow');
      mapInfoWindow.style.display = "none";
      mapInfoWindow.innerHTML = "";
   }

   function mapInfoWindow(html) {
      var mapInfoWindow = document.getElementById('mapInfoWindow');
      mapInfoWindow.style.display = "block";
      mapInfoWindow.innerHTML = "<div style='position:absolute;right:10px;top:5px'><a href='#' onclick='hideMapInfoWindow();return false'>close</a></div>"+html;
   }

    // Creates a marker at the given point
    // Clicking the marker will hide it
    function createMarker(latlng, num, myHtml, markerIcon) {
      // Create a base icon for all of our markers that specifies the
      // shadow, icon dimensions, etc.
      var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.shadow = "/images/mapmarkers/markershadow.png";
      baseIcon.iconSize = new GSize(18, 32);
      baseIcon.shadowSize = new GSize(42, 32);
      baseIcon.iconAnchor = new GPoint(12, 32);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      
      // Create our 'tiny' marker icon
      var blueIcon = new GIcon(baseIcon);
      blueIcon.image = '/images/mapmarkers/'+markerIcon;
      
      // Set up our GMarkerOptions object
      markerOptions = { icon:blueIcon };

      var marker = new GMarker(latlng,markerOptions);
      marker.value = num;
      div = document.getElementById('a'+num);
      GEvent.addDomListener(div,"click", function() {
        //map.openInfoWindowHtml(latlng, myHtml);
        mapInfoWindow(myHtml);
        });
      GEvent.addListener(marker,"click", function() {
//        map.openInfoWindowHtml(latlng, myHtml);
        mapInfoWindow(myHtml);
        });

      return marker;
    }


function drawMe() {
     // Create a base icon for all of our markers that specifies the
      // shadow, icon dimensions, etc.
      var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.shadow = "/images/mapmarkers/markershadow.png";
      baseIcon.iconSize = new GSize(18, 32);
      baseIcon.shadowSize = new GSize(42, 32);
      baseIcon.iconAnchor = new GPoint(12, 32);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);

      // Create our 'tiny' marker icon
      var blueIcon = new GIcon(baseIcon);
      blueIcon.image = '/images/mapmarkers/marker0.png';

      // Set up our GMarkerOptions object
      markerOptions = { icon:blueIcon };

      var mylocHtml = "Your Location";
      var latlng = new GLatLng(seslat,seslng);
      var marker = new GMarker(latlng,markerOptions);
      myHtml = "Your Location";
      marker.value = 0;
      GEvent.addListener(marker,"click", function() {
        map.openInfoWindowHtml(latlng, myHtml);
      });

      map.addOverlay(marker);
      //map.openInfoWindowHtml(latlng,mylocHtml);
}


// NOTE::There are variables being used in here that are important from php session variables called seslat,seslng make sure
//       if any layout is changed those sess variables are assigned to the javascript globals just mentioned.