<!--
    var map;
    var CenterLat = 31.25;
    var CenterLon = 36.5;
    var StartScale = 6;
    var IcnMagDot;
    var latlngs = [];
    var polyline;
    var polygon;
    var StudyArea;
    var Points = []; 
    var Markers = [];
    var RectPoints = [];
    var numPoints = 0;
    var rPoint;

    var aqua     = "#00FFFF";
    var black    = "#000000";
    var blue     = "#0000FF";
    var magenta  = "#FF00FF";
    var gray     = "#808080";
    var green    = "#008000";
    var lime     = "#00FF00";
    var maroon   = "#800000";
    var navy     = "#000080";
    var olive    = "#808000";
    var orange   = "#FF8800";
    var purple   = "#800080";
    var red      = "#FF0000";
    var silver   = "#C0C0C0";
    var teal     = "#008080";
    var white    = "#FFFFFF";
    var yellow   = "#FFFF00";

    //---------------------------------------------------------------------------------
    function init() 
    {
     changeDivSizes();
     if (GBrowserIsCompatible()) 
	{
	   map = new GMap2(document.getElementById("map"), {draggableCursor: 'hand'});
 	   map.addControl(new GLargeMapControl());
	   map.addControl(new GScaleControl());
           map.addMapType(G_PHYSICAL_MAP); 
           map.addControl(new GHierarchicalMapTypeControl());
           map.setCenter(new GLatLng(CenterLat, CenterLon), StartScale,G_HYBRID_MAP); 

	   // Set up the project study polygon...
	   var rPoint = new GLatLng(36.25, 32);
	   RectPoints.push(rPoint); 
	   var rPoint = new GLatLng(36.25, 40.25);
	   RectPoints.push(rPoint); 
	   var rPoint = new GLatLng(27, 40.25);
	   RectPoints.push(rPoint); 
	   var rPoint = new GLatLng(27, 32);
	   RectPoints.push(rPoint); 
	   var rPoint = new GLatLng(36.25, 32);
	   RectPoints.push(rPoint); 
	   StudyArea = new GPolyline(RectPoints,white,1,1);
	   map.addOverlay(StudyArea);

	   // This dot is for polygon vertices...
           IcnMagDot = new GIcon; 
	   IcnMagDot.image = "../images/PreInv.png";
	   IcnMagDot.iconSize = new GSize(5,5);
	   IcnMagDot.iconAnchor = new GPoint(3,3);
	   IcnMagDot.infoWindowAnchor = new GPoint(3,3); 

	   // This dot is for site points...
	   IcnRedDot = new GIcon; 
	   IcnRedDot.image = "../images/RedDot.png";
	   IcnRedDot.iconSize = new GSize(7,7);
	   IcnRedDot.iconAnchor = new GPoint(3,3);
	   IcnRedDot.infoWindowAnchor = new GPoint(3,3); 

           GEvent.addListener(map,'moveend',function() { removeMarkers(); updateMarkers(); });
	   GEvent.addListener(map,'mousemove',function(latlng) 
	      {	var myLat = latlng.lat(); 
		var myLon = latlng.lng(); 
		var myLoc = RoundTo(myLat,5) + ", " + RoundTo(myLon,5);
		document.form.Location.value = myLoc;} );

	   GEvent.addListener(map, 'click', handleMapClick);
	}
    }

    //----------------------------------------------------------
    // changeDivSizes -- Changes the div sizes to match screen
    //----------------------------------------------------------
    function changeDivSizes() {
      var myWidth = screen.width;
      var myHeight = screen.height;
      if (myWidth > 1280) {
          s = document.getElementById('frame');
          s.style.width= + myWidth - 70;
          s = document.getElementById('mapBlock');
          s.style.width= + myWidth - 620;
          s = document.getElementById('mapControls');
          s.style.width= + myWidth - 620;
          s = document.getElementById('map');
          s.style.width= + myWidth - 650;
          s.style.height= + myHeight - 500;
          s = document.getElementById('columnRight');
          s.style.height= + myHeight - 305;
      }
    }

    //-----------------------------------------------------------------------------------------
    // Displays site points if the map is zoomed in enough.
    //-----------------------------------------------------------------------------------------
    function updateMarkers() 
    {
    	//remove the existing points
	map.clearOverlays();
        map.addOverlay(StudyArea); // Add the study area back in...
	if (latlngs.length > 0) 
           {
            redrawPolyline(); // this is the digitized polygon, which we want to keep...
           }
	if (map.getZoom() > 9)
	   {
	    //create the boundary for the data
	    var bounds = map.getBounds();
	    var southWest = bounds.getSouthWest();
	    var northEast = bounds.getNorthEast();
	    var getVars = 'ne=' + northEast.toUrlValue() + '&sw=' + southWest.toUrlValue()

	    //log the URL for testing - remove comment slashes from next line...
	    //GLog.writeUrl('GMShowSites.php?'+getVars);

            //retrieve the points using Ajax
            var request = GXmlHttp.create();
            request.open('GET', 'GMShowSites.php?'+getVars, true);
            request.onreadystatechange = function() {
            if (request.readyState == 4) {
                var jscript = request.responseText;
                eval(jscript);
                var points;
                //create each point from the list
                numPoints=0;
                for (i in points)  {
                     var point = new GLatLng(points[i].lat,points[i].lng);
                     var marker = createMarker(point,points[i].Site);
                     Markers[numPoints] = marker;
                     map.addOverlay(Markers[numPoints]);
                     numPoints++;
                   } // end for
               } // end if
            } // end internal function call
            request.send(null);
	   } // end if map.getZoom block
   }

    //-----------------------------------------------------------------------------------------
    // remove the existing Site Points
    //-----------------------------------------------------------------------------------------
    function removeMarkers() {
        if (numPoints>0) 
           {
            for (var x=0;x<numPoints;x++) { map.removeOverlay(Markers.pop()); }
            Markers = [];
            numPoints = 0;
           }
    }

    //-----------------------------------------------------------------------------------------
    // Creates a marker whose info window displays the given number
    //-----------------------------------------------------------------------------------------
    function createMarker(point, html) 
    {
	var marker = new GMarker(point, IcnRedDot);
	GEvent.addListener(marker, 'click', function() {var markerHTML = html; marker.openInfoWindowHtml(markerHTML); });
	return marker;
   }

    //-----------------------------------------------------------------------------------------
    function ResetMap()
    {
	map.clearOverlays();
        map.addOverlay(StudyArea); // Add the study area back in...
	polyline="";
	polygon="";
	latlngs = [];
	Markers = [];
        updateMarkers();
    }

    //--------------------------------------------------
    function RoundTo(myVar, numDP)
    {
	myFactor =  Math.pow(10, numDP);
	return  Math.round(myVar * myFactor) / myFactor;
    }

    //---------------------------------------------------------------------------------
    function initializePoint(id) 
    {
	var marker = new GMarker(latlngs[id], IcnMagDot, { draggable:true }); 
	Markers.push(marker);
	var focusPoint = function() {
	map.panTo(latlngs[id]);
	return false;
	}
 
	GEvent.addListener(marker, 'click', focusPoint);
	map.addOverlay(marker);
	marker.enableDragging();
	GEvent.addListener(marker, 'dragend', function() {
	latlngs[id] = marker.getPoint();
	});
    }

    //---------------------------------------------------------------------------------
    function handleMapClick(marker, latlng) 
    {  try {var result = "test"; result = inPoly(latlng.lng(), latlng.lat());}
	    catch(err) {}
            if (result != false) 
	       {
	        if (!marker) 
		   {
		    latlngs.push(latlng);
		    initializePoint(latlngs.length - 1);
		    redrawPolyline();
		   }
	       }
           else 
               { if (result == false) {alert("Please click a location inside the shaded study area.");  } }
    }

    //---------------------------------------------------------------------------------
    function redrawPolyline() 
    {
	var pointCount = latlngs.length;
        latlngs.push(latlngs[0]);
        try {map.removeOverlay(polyline);}
	    catch(err) {}
        try {map.removeOverlay(polygon);}
	    catch(err) {}

        if (pointCount > 1)
            {
	     // Plot the polyline
	     polyline = new GPolyline(latlngs, magenta, 1, 0.8);
	     map.addOverlay(polyline);
            }
        if (pointCount > 2)
            {
	     // Plot the filled polygon
             // Add the first element to the end, to close the loop.
             polygon = new GPolygon(latlngs,magenta,1,1,magenta,.15);
	     map.addOverlay(polygon);
            }
	form.elements[0].value = latlngs;
	latlngs.pop();
    }

    //---------------------------------------------------------------------------------
    function DropLastPoint() 
    {
	if (latlngs.length > 1)
	   { map.removeOverlay(Markers.pop());
	     latlngs.pop();
	     redrawPolyline();
	   }
	else
	   { map.removeOverlay(Markers.pop());
	     latlngs = [];
	     Markers = [];
	   }
    }

   //------------------------------------------------------------------------------------
   function verify()
   {
	var themessage = "";
	if (document.form.elements[0].value=="") { themessage = themessage + "Please Digitize an Area of Interest on the Map.  ";}
	if (Markers.length < 3) { themessage = themessage + "The Area of Interest Must Have at Least Three Points.";}
	//alert if fields are empty and cancel form submit
	if (themessage == "") 
	{	document.form.submit(); }
	else 
	{
		alert(themessage);
		return false; 
	}
   }

 
   /*------------------------------------------------------------------------------------
   inPoly()
   Parameters:
   poly: array containing x/y coordinate pairs that
         describe the vertices of the polygon. Format is
         indentical to that of HTML image maps, i.e. [x1,y1,x2,y2,...]
         In this case, the test polygon is the DAAHL study area.
  
   px: the x-coordinate of the target point.
   py: the y-coordinate of the target point.

   Return value: true if the test point is within the polygon, false if not.
   ------------------------------------------------------------------------------------*/

   function inPoly(px,py)
   { // alert (px + "\n" + py);

     var poly = new Array();
     poly[0] = 32;
     poly[1] = 36.25;
     poly[2] = 40.25;
     poly[3] = 36.25;
     poly[4] = 40.25;
     poly[5] = 27;
     poly[6] = 32;
     poly[7] = 27;
     poly[8] = 32;
     poly[9] = 36.25;

     var npoints = poly.length; // number of points in polygon
     var xnew,ynew,xold,yold,x1,y1,x2,y2,i;
     var inside=false;

     if (npoints/2 < 3) { // points don't describe a polygon
          return false;
     }
     xold=poly[npoints-2];
     yold=poly[npoints-1];
     
     for (i=0 ; i < npoints ; i=i+2) {
          xnew=poly[i];
          ynew=poly[i+1];
          if (xnew > xold) {
               x1=xold;
               x2=xnew;
               y1=yold;
               y2=ynew;
          }
          else {
               x1=xnew;
               x2=xold;
               y1=ynew;
               y2=yold;
          }
          if ((xnew < px) == (px <= xold) && ((py-y1)*(x2-x1) < (y2-y1)*(px-x1))) {
               inside=!inside;
          }
          xold=xnew;
          yold=ynew;
     }
     return inside;
   }
//  End 
-->