var map = null;
var geocoder = null;

function xhtml( id, name, date, venue_name, img ) {
   var output = '<div class="map-popup-wrapper">';
   output += '<div class="map-popup">';
   output += '<div class="event">';
   output += '<div class="photo">';
   output += '<p><a href="http://www.whatspoppin.net/event/' + id + '/"><img src="http://www.whatspoppin.net/'+img+'" alt="' + name + '" width="48px" /></a></p>';
   output += '</div>';
   output += '<div class="info">';
   //this text in the event info needs to be limited so you can set the height of Google's white box and position our div correctly.
	 output += '<h4><a href="http://www.whatspoppin.net/event/' + id + '/">'+name+'</a></h4>';
   output += '<p class="date">'+date+'</p>';
   output += '</div>';
   output += '<div class="options">';
   output += '<p>';
   output += '  <a href="http://www.whatspoppin.net/event/' + id + '/" class="details">View Details</a> ';
	 output += '  <a href="http://www.whatspoppin.net/event/' + id + '/#rsvp" class="rsvp">RSVP</a> ';
   output += '</p>';
   output += '</div>';
   output += '</div>';
   output += '</div>';
   output += '</div>';
   
   return output;
}


function createMarker(point, data) {  
  var blueIcon = new GIcon(G_DEFAULT_ICON);
  blueIcon.image = "http://www.whatspoppin.net/images/map/node_event_marker.png";
  blueIcon.iconSize = new GSize(28, 32);

  markerOptions = { icon:blueIcon };
 marker = new GMarker(point, markerOptions);

  GEvent.addListener(marker, "click", function() {
     this.openInfoWindowHtml(data);
  });
  

  return marker;
}

function set_center(zip) {
  geocoder.getLatLng(
    zip,
    function(point) {
       if (point) {
         map.setCenter(point, 10);
       }
    }
  );
}

function add_event(address, data) {
  geocoder.getLatLng(
    address,
    function(point) {
       if (point) {
         map.addOverlay(createMarker(point, data));
       }
    }
  );
}