<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Select Map Area</title>
    <script type="text/javascript">
        function loadScript(url)
        {
           var e = document.createElement("script");
           e.src = url;
           e.type="text/javascript";
           document.getElementsByTagName("head")[0].appendChild(e); 
        }
    </script> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAa5Wygp1yOJnmy7DoGRTLzhTlgjuX9-r1wigUP_DESd5NTZVNMBRgq9lE73wRchL4EbHxQLI_tIc68g" type="text/javascript"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript">
        //<![CDATA[    
        if (typeof(google) != 'undefined')
        {
            // load scripts
            google.load("maps", "2"); 
            google.load("elements", "1", {packages : ["localsearch"]}); 
            loadScript("dragzoom.js");
        }
        //]]>    
    </script>
    <script src="usng.js" type="text/javascript"></script>    
    <script type="text/javascript">
        //<![CDATA[    
        var map = null;

        function toUTM(lat, lon) 
        {
          lat = parseFloat(lat);
          lon = parseFloat(lon);

          // convert lat/lon to UTM coordinates
          var coords = []
          LLtoUTM(lat, lon, coords)  
          var UTMEasting = Math.floor(coords[0]);
          var UTMNorthing = Math.floor(coords[1]);

          // southern hemispher case
          if (lat < 0) {
            // Use offset for southern hemisphere
            UTMNorthing += NORTHING_OFFSET; 
          }

          var UTM = getZoneNumber(lat, lon) +  UTMLetterDesignator(lat);
          
          if (!isNaN(UTMEasting) && !isNaN(UTMNorthing))
          {
            UTM += " "; 
             
              for ( i = String(UTMEasting).length; i < 7; i++) {
                UTM += "0";
              }
     
              UTM += UTMEasting + " ";
              
              for ( i = String(UTMNorthing).length; i < 7; i++) {
                UTM += "0";
              }
     
              UTM += UTMNorthing;
          }
          
          return (UTM);

        }
    
        function displayCoords() 
        {
            var bounds = map.getBounds();
            var ne = bounds.getNorthEast();
            var sw = bounds.getSouthWest();
            
            // top left
            var tllat = document.getElementById('TLLatitude');
            tllat.innerHTML = ne.lat().toString();

            var tllng = document.getElementById('TLLongitude');
            tllng.innerHTML = sw.lng().toString();

            var tlutm = document.getElementById('tlUTM');
            tlutm.innerHTML = toUTM(ne.lat(), sw.lng());

            // bottom right
            var brlat = document.getElementById('BRLatitude');
            brlat.innerHTML = sw.lat().toString();

            var brlng = document.getElementById('BRLongitude');
            brlng.innerHTML = ne.lng().toString();

            var brutm = document.getElementById('brUTM');
            brutm.innerHTML = toUTM(sw.lat(), ne.lng());
        }
        
        function resize()
        {
            var w = document.body.clientWidth;
            var h = document.body.clientHeight;

            if (w > 50 && h > 50)
            {
                var mapdiv = document.getElementById("map");        
        
                
                mapdiv.style.width = (w - 45) + 'px';
                mapdiv.style.height = (h - 200) + 'px';

                if (map != null) 
                {
                    map.checkResize();
                    
                    displayCoords();
                }
            }
         }
        
        function load() 
        {      
            if (typeof(google) == 'undefined')
            {
                document.getElementById('Unavailable').style.display = 'block';
                return;
            }
                
            if (GBrowserIsCompatible()) 
            {        
                map = new GMap2(document.getElementById("map"));        
                map.setCenter(new GLatLng(88,0), 0);   
                map.addControl(new GSmallMapControl());
                
                map.addMapType(G_NORMAL_MAP);
                map.addMapType(G_SATELLITE_MAP);
                map.addMapType(G_HYBRID_MAP);  
                map.addMapType(G_PHYSICAL_MAP); 
                
                map.addControl(new GMapTypeControl());
                map.addControl(new google.elements.LocalSearch());
                var otherOpts = 
                { 
                  buttonStartingStyle: {background: '#FFF', paddingTop: '4px', paddingLeft: '4px', border:'1px solid black'},
                  buttonHTML: '<img title=\'Drag Zoom In\' src=\'zoomin.gif\'>',
                  buttonStyle: {width:'25px', height:'23px'},
                  buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
                  buttonZoomingStyle: {background:'yellow',width:'75px', height:'100%'},
                  backButtonHTML: '<img title=\'Zoom Back Out\' src=\'zoomout.gif\'>',  
                  backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'23px'},
                  backButtonEnabled: true, 
                  overlayRemoveTime: 1500
                };

                map.addControl(new DragZoomControl({}, otherOpts, {}));
                
                GEvent.addListener(map, 'move', displayCoords);
                GEvent.addListener(map, 'moveend', displayCoords);

                document.getElementById('Unavailable').style.display = 'none';
                document.getElementById('SelectMapAreaTable').style.display = 'block';
                
                resize();
            }    
        }    
        
        function unload()
        {
            if (typeof(google) != 'undefined')
            {
                GUnload();
            }
        }
        
        window.onresize = resize; 
        //]]>    
    </script>
</head>
<body onload="load()" onunload="unload()">
    <span id="Unavailable">Google Maps Is Currently Unavailable.</span>
    <table cellpadding="0" cellspacing="4" id="SelectMapAreaTable" style="display:none;">
        <tr>
            <td style="white-space:nowrap;">
                <span id="TLLatitude" style="float:left;"></span><span style="float:left;">,&nbsp;</span><span id="TLLongitude" style="float:left;"></span>
            </td>
        </tr>
        <tr>
            <td style="white-space:nowrap;">
                <span id="tlUTM" style="float:left;"></span>
            </td>
        </tr>
        <tr>
            <td>
                <div id="map" style="width:650px; height:450px"></div>
            </td>
        </tr>
        <tr>
            <td style="white-space:nowrap;">
                <span id="BRLongitude" style="float:right;"></span><span style="float:right;">,&nbsp;</span><span id="BRLatitude" style="float:right;"></span>
            </td>
        </tr>
        <tr>
            <td style="white-space:nowrap;">
                <span id="brUTM" style="float:right;"></span>
            </td>
        </tr>
        <tr>
            <td align="center">
                <input type="submit" name="btnSubmit" value="Select Map Area" id="btnSubmit" />
            </td>
        </tr>
    </table>
    <noscript><p /><b>JavaScript must be enabled in order for you to use Google Maps.</b><p /> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
</body>
</html>