var gmap;
var gmapIcon;

// Setup events that need to happen on load.
Event.observe(window, 'load', function() {
  gmapShow($('latitude').value, $('longitude').value);
  gmapLoadIcon();
});

// Loads the marker icon
function gmapLoadIcon()
{
  gmapIcon = new GIcon();
  gmapIcon.image = 'http://idx.securenet-it.com/1.3/images/gmap/mm_20_blue.png';
  gmapIcon.shadow = 'http://idx.securenet-it.com/1.3/images/gmap/mm_20_shadow.png';
  gmapIcon.iconSize = new GSize(12, 20);
  gmapIcon.shadowSize = new GSize(22, 20);
  gmapIcon.iconAnchor = new GPoint(6, 20);
  gmapIcon.infoWindowAnchor = new GPoint(5, 1);
}

// Show the map
function gmapShow(latitude, longitude)
{
  if (GBrowserIsCompatible()) {
    gmap = new GMap2(document.getElementById("gmap"));
    gmap.addControl(new GSmallMapControl());
    gmap.addControl(new GMapTypeControl());
    gmap.setCenter(new GLatLng(latitude, longitude), 13);
    gmap.addOverlay(new GMarker(gmap.getCenter()));
  }
}

// Adds the overlay
function gmapCommercialAddOverlay(p)
{
  var tabOne = '';
  tabOne = tabOne + '<div style="width: 300px;">';
  tabOne = tabOne + '  <table>';
  tabOne = tabOne + '    <tr>';
  tabOne = tabOne + '      <td><img src="' + p.image + '" width="75" /></td>';
  tabOne = tabOne + '      <td>' + p.address + '<br />' + p.city + ', ' + p.state + ' ' + p.zip + '<br />MLS #' + p.mlnumber + '</td>';
  tabOne = tabOne + '    </tr>';
  tabOne = tabOne + '  </table>';
  tabOne = tabOne + '  <table>';
  tabOne = tabOne + '    <tr>';
  tabOne = tabOne + '      <td><strong>View Property:</strong></td>';
  tabOne = tabOne + '      <td><a href="/idx/commercial/' + p.mlnumber + '">Click Here</a></td>';
  tabOne = tabOne + '    </tr>';
  tabOne = tabOne + '  </table>';
  tabOne = tabOne + '</div>';
  
  var tabTwo = '';
  tabTwo = tabTwo + '<div style="width: 300px;">';
  tabTwo = tabTwo + '  <table>';
  tabTwo = tabTwo + '    <tr>';
  tabTwo = tabTwo + '      <td>Price:</td>';
  tabTwo = tabTwo + '      <td>$' + p.price + '</td>';
  tabTwo = tabTwo + '      <td>Sq Ft.</td>';
  tabTwo = tabTwo + '      <td>' + p.sqft + '</td>';
  tabTwo = tabTwo + '    </tr>';
  tabTwo = tabTwo + '  </table>';
  tabTwo = tabTwo + '  <table>';
  tabTwo = tabTwo + '    <tr>';
  tabTwo = tabTwo + '      <td><strong>View Property:</strong></td>';
  tabTwo = tabTwo + '      <td><a href="/idx/commercial/' + p.mlnumber + '">Click Here</a></td>';
  tabTwo = tabTwo + '    </tr>';
  tabTwo = tabTwo + '  </table>';
  tabTwo = tabTwo + '</div>';
  
  gmap.addOverlay(gmapCommercialCreateMarker(new GLatLng(p.latitude, p.longitude), tabOne, tabTwo));
}

// Creates a marker for a commercial listing
function gmapCommercialCreateMarker(point, tabOne, tabTwo)
{
  var marker = new GMarker(point, gmapIcon);
  var infoTabs = [
    new GInfoWindowTab("Main", tabOne),
    new GInfoWindowTab("Details", tabTwo)
  ];
  
  GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowTabsHtml(infoTabs);
  });
  
  return marker;
}

// Adds the overlay
function gmapResidentialAddOverlay(p)
{
  var tabOne = '';
  tabOne = tabOne + '<div style="width: 300px;">';
  tabOne = tabOne + '  <table>';
  tabOne = tabOne + '    <tr>';
  tabOne = tabOne + '      <td><img src="' + p.image + '" width="75" /></td>';
  tabOne = tabOne + '      <td>' + p.address + '<br />' + p.city + ', ' + p.state + ' ' + p.zip + '<br />MLS #' + p.mlnumber + '</td>';
  tabOne = tabOne + '    </tr>';
  tabOne = tabOne + '  </table>';
  tabOne = tabOne + '  <table>';
  tabOne = tabOne + '    <tr>';
  tabOne = tabOne + '      <td><strong>View Property:</strong></td>';
  tabOne = tabOne + '      <td><a href="/idx/residential/' + p.mlnumber + '">Click Here</a></td>';
  tabOne = tabOne + '    </tr>';
  tabOne = tabOne + '  </table>';
  tabOne = tabOne + '</div>';
  
  var tabTwo = '';
  tabTwo = tabTwo + '<div style="width: 300px;">';
  tabTwo = tabTwo + '  <table>';
  tabTwo = tabTwo + '    <tr>';
  tabTwo = tabTwo + '      <td>Price:</td>';
  tabTwo = tabTwo + '      <td>$' + p.price + '</td>';
  tabTwo = tabTwo + '      <td>Heated Sq Ft.</td>';
  tabTwo = tabTwo + '      <td>' + p.sqft + '</td>';
  tabTwo = tabTwo + '    </tr>';
  tabTwo = tabTwo + '    <tr>';
  tabTwo = tabTwo + '      <td>Beds:</td>';
  tabTwo = tabTwo + '      <td>' + p.bedrooms + '</td>';
  tabTwo = tabTwo + '      <td align="right">Baths:</td>';
  tabTwo = tabTwo + '      <td>' + p.bathrooms + '</td>';
  tabTwo = tabTwo + '    </tr>';
  tabTwo = tabTwo + '  </table>';
  tabTwo = tabTwo + '  <table>';
  tabTwo = tabTwo + '    <tr>';
  tabTwo = tabTwo + '      <td><strong>View Property:</strong></td>';
  tabTwo = tabTwo + '      <td><a href="/idx/residential/' + p.mlnumber + '">Click Here</a></td>';
  tabTwo = tabTwo + '    </tr>';
  tabTwo = tabTwo + '  </table>';
  tabTwo = tabTwo + '</div>';
  
  var tabThree = '';
  tabThree = tabThree + '<div style="width: 300px;">';
  tabThree = tabThree + '  <table>';
  tabThree = tabThree + '    <tr>';
  tabThree = tabThree + '      <td align="right">Elementary School:</td>';
  tabThree = tabThree + '      <td>' + p.elem_school + '</td>';
  tabThree = tabThree + '    </tr>';
  tabThree = tabThree + '    <tr>';
  tabThree = tabThree + '      <td align="right">Middle School:</td>';
  tabThree = tabThree + '      <td>' + p.middle_school + '</td>';
  tabThree = tabThree + '    </tr>';
  tabThree = tabThree + '    <tr>';
  tabThree = tabThree + '      <td align="right">High School:</td>';
  tabThree = tabThree + '      <td>' + p.high_school + '</td>';
  tabThree = tabThree + '    </tr>';
  tabThree = tabThree + '  </table>';
  tabThree = tabThree + '</div>';
  
  gmap.addOverlay(gmapResidentialCreateMarker(new GLatLng(p.latitude, p.longitude), tabOne, tabTwo, tabThree));
}

// Creates a marker for a residential listing
function gmapResidentialCreateMarker(point, tab1, tab2, tab3)
{
  var marker = new GMarker(point, gmapIcon);
  var infoTabs = [
    new GInfoWindowTab("Main", tab1),
    new GInfoWindowTab("Details", tab2),
    new GInfoWindowTab("Schools", tab3)
  ];
  
  GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowTabsHtml(infoTabs);
  });
  
  return marker;
}

// Search for nearby listings
function gmapFindNearbyListings(idxClass, id, price)
{
  new Ajax.Request('/idx/ajax/dispatch.php',
    {
      method: 'get',
      parameters: { id: id, idxClass: idxClass, price: price, ajaxpage: 'gmapFindNearbyListings' },
      onSuccess: function(t) {
        
        // Extract the returned JSON
        var json = t.responseText.evalJSON();
        
        // Check that we were given at least 1 property
        if(json.length == 0) {
          alert('No nearby properties were returned.');
          return false;
        }
        
        // Loop over the returned properties and add the overlays
        json.each(function(item) {
          if(idxClass == 'commercial') {
            gmapCommercialAddOverlay(item);
          }
          else {
            gmapResidentialAddOverlay(item);
          }
        });
      },
      onFailure: function() {
        alert("An error occurred while processing your request.\n\nPlease try again.");
      }
    });
}