var loadMap = function(id, lat, lng, listings) {
  var centerLat
     ,centerLng
     ,mapCenter
     ,mapOptions
     ,map;

  if (lat && lng) {
  	// check for valid lat & lng parameter values
    centerLat = lat;
    centerLng = lng;
  }
  else if (listings && listings[0].location.lat && listings[0].location.lon) {
    // use the first entry of the property list if available
    centerLat = listings[0].location.lat;
    centerLng = listings[0].location.lon;
  }
  else {
    // if there is no lat & lng or no listings then there is no map to draw
    return;
  }

  if (!zoom) {
    // if the zoom level is not defined globally, set a local value
    var zoom = 13;
  }

  mapCenter = new google.maps.LatLng(centerLat, centerLng);
  mapOptions = {
	 center: mapCenter
	,zoom: zoom
	,mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById(id), mapOptions);

  if (listings && listings.length > 0) {
    for (var i = 0; i < listings.length; i++) {
      listings[i].MARKER = newMarker(listings[i], map);
    }
  }
  return map;
};

var newMarker = function(listing, map) {
	var listingPosition
	    ,markerOptions
	    ,marker
	    ,infoWindowOptions
	    ,infoWindow;

    listingPosition = new google.maps.LatLng(listing.location.lat, listing.location.lon);
    markerOptions = {
       position: listingPosition
      ,map: map
    }
    marker = new google.maps.Marker(markerOptions);

    infoWindowOptions = {
       position: listingPosition
      ,content: listingPopup(listing)
    };
    infoWindow = new google.maps.InfoWindow(infoWindowOptions);
    google.maps.event.addListener(marker, 'click', function(pos) {
      infoWindow.open(map);
    });

    return marker;
}

var listingPopup = function(listing) {
  var content
     ,visitor = ''
     ,courtesy = ''
     ,reciprocityLogoCode = '';

  if (listing.access_level == '') {
    visitor = 'Need the address or want access to every property listed in this area? <a href="/signup.php?type=guest" target="_blank" style="color:#ffffff;">Click here</a>';
  }

  courtesy = 'Courtesy of ' + listing.brokerage + ' - ' + listing.agents_name;

  if (listing.board == 'VAN') {
    reciprocityLogoCode = '<img src="/images/RMOimages/mls_board/VAN/mlsrlogosmall_results.gif" />';
  }
  content = ' \
    <table cellspacing="2" cellpadding="2" border="0" width="350" style="line-height:normal !important;"> \
    <tbody> \
      <tr> \
        <td valign="top"> \
          <a href="' + listing.uri + '" target="_blank"> \
            <img src="' + listing.photo + '" height="100" width="137" style="border-color:#CCCCCC" /> \
          </a> \
        </td> \
        <td valign="top" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#595959;"> \
          <strong>' + listing.neighborhood + ' $' + listing.price + '</strong> \
          ' + reciprocityLogoCode + ' <br/> \
          ' + listing.description.blurb + '... \
          <a href="' + listing.uri + '" target="_blank">(more)</a> \
        </td> \
      </tr> \
      <tr> \
        <td> \
          <table cellspacing="2" cellpadding="2" border="0" width="137"> \
          <tbody> \
            <tr> \
              <td style="background-color: #f4f4f4;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;" width="60"> \
                MLS&reg; #: \
              </td> \
              <td style="background-color: #eaeaea;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;"> \
                ' + listing.mls_num + ' \
              </td> \
            </tr> \
            <tr> \
              <td style="background-color: #f4f4f4;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;"> \
                Style: \
              </td> \
              <td style="background-color: #eaeaea;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;"> \
                ' + listing.style + ' \
              </td> \
            </tr> \
            <tr> \
              <td style="background-color: #f4f4f4;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;"> \
                Size: \
              </td> \
              <td style="background-color: #eaeaea;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#000000;"> \
                ' + listing.description.size + ' sqft. \
              </td> \
            </tr> \
          </tbody> \
          </table> \
        </td> \
        <td style="font-family: Verdana ; font-style:italic; font-size: 9px; color:#666666;"> \
          This data is not guaranteed accurate by the ' + listing.board_name + '.<br/><br/> \
          ' + courtesy + '. \
        </td> \
      </tr> \
      <tr> \
        <td colspan="2" bgcolor="#999999" style="font-family: Verdana;font-size: 12px;font-weight:bold;color:#ffffff;"> \
          ' + visitor + ' \
        </td> \
      </tr> \
    </tbody> \
    </table> \
  ';
  return content;
};

$(document).ready(function() {
  if (!mapId)
    var mapId = 'map_canvas';
  if (document.getElementById(mapId))
    loadMap(mapId, lat, lng, listings);
});