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

    function load() {
      if (GBrowserIsCompatible()) {
			geocoder = new GClientGeocoder();
			map = new GMap2(document.getElementById('map'));
			map.enableScrollWheelZoom();
			map.addControl(new GLargeMapControl3D());
			map.setCenter(new GLatLng(40, -100), 2);
			map.addMapType(G_PHYSICAL_MAP);
			
			var hControl = new GHierarchicalMapTypeControl();
			hControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", true);
			map.addControl(hControl);

		// Add ContextMenuControl to the map
			map.addControl(new ContextMenuControl());
      }
    }

   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' Please enter a location to continue.');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }

   function searchLocationsNear(center) {
     var radius = document.getElementById('radiusSelect').value;
 	 var address2 = document.getElementById('addressInput').value;
     var searchUrl = 'phpsqlajax_genxml.php?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 = '<div style=\"background:#e5d9ed; padding:10px; width:630px;\"><p>You requested all Chapters within <strong>' + radius + '</strong> miles of <strong>' + address2 + '</strong>.<br><em>Click on an icon to see details or to be directed to their website.</em></p><p>To expand or narrow the distance of your search, select a new distance  <input type="hidden" id="addressInput" size="30" value="' + address2 + '" /><select id="radiusSelect"><option value="">-- Select a Distance --</option><option value="5" onclick="searchLocations()">5 miles</option><option value="10" onclick="searchLocations()">10 miles</option><option value="25" onclick="searchLocations()">25 miles</option><option value="50" onclick="searchLocations()">50 miles</option><option value="100" onclick="searchLocations()">100 miles</option><option value="150" onclick="searchLocations()">150 miles</option><option value="200" onclick="searchLocations()">200 miles</option><option value="250" onclick="searchLocations()">250 miles</option><option value="500" onclick="searchLocations()">500 miles</option></select><p><a href="dmd.chapters.php"><strong>-or- Search a New Location</strong></a></p></div><hr /><p><em><strong>Below are the Chapters that fit your search. Click on their name below or on the markers to the right to highlight a particular chapter.</strong></em></p>';
       if (markers.length == 0) {
         sidebar.innerHTML = '<div style=\"background:#e5d9ed; padding:5px; width:630px;\">You requested all Chapters within <strong>' + radius + '</strong> miles of <strong>' + address2 + '</strong>.<br /><em>Unfortunately we found no results that matched.</em><p><a href="dmd.chapters.php"><strong>Search a New Location</strong></a></p></div>';
         map.setCenter(new GLatLng(40, -100), 2);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var school = markers[i].getAttribute('school');
         var address = markers[i].getAttribute('address');
		 var greek = markers[i].getAttribute('greek');
		 var installation = markers[i].getAttribute('installation');
		 var website = markers[i].getAttribute('website');
         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, school, greek, installation, address, website);
         map.addOverlay(marker);

         var sidebarEntry = createSidebarEntry(marker, school, greek, installation, address, website, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }
	
	var iconDMD = new GIcon(); 
    iconDMD.image = 'img/mm_20_key.png';
    iconDMD.shadow = 'img/mm_20_shadow.png';
    iconDMD.iconSize = new GSize(24, 40);
    iconDMD.shadowSize = new GSize(44, 40);
    iconDMD.iconAnchor = new GPoint(12, 40);
    iconDMD.infoWindowAnchor = new GPoint(10, 2);
	
    function createMarker(point, school, greek, installation, address, website) {
      var marker = new GMarker(point, iconDMD);
      var html = '<b>' + school + '</b> <br/>' + greek + '<br /><em>Installation:' + installation + '</em><br/>' + address + '<br /><a href="'+ website +'" target="_blank">Visit Our Website</a>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, school, greek, installation, address, website, distance) {
      var div = document.createElement('div');
      var html = '<a href=#map style=\"text-decoration:none; color:#000;\"><b>' + school + '</b>&nbsp;&ndash;&nbsp;Distance: ' + distance.toFixed(1) + ' miles<br/><em>' + greek + '</em>&nbsp;&ndash;&nbsp;Installation: ' + installation + '</a>&nbsp;&ndash;&nbsp;<a href="'+ website +'" target="_blank">Visit Our Website</a>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
	  div.style.padding = '10px 0px';
      div.style.borderBottom = 'solid #000 1px';
      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 = '#fff';
      });
      return div;
    }
    //]]>