$(document).ready(function () {
  var map = new GMap2($("#map").get(0));
  var burnsvilleMN = new GLatLng(44.797916, -93.278046);
  map.setCenter(burnsvilleMN, 8);

  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  var markers = [];
  for (var i = 0; i < 10; i++) {
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
          southWest.lng() + lngSpan * Math.random());
      marker = new GMarker(point);
      map.addOverlay(marker);
      markers[i] = marker;
  }
  $(markers).each(function (i, marker) {
      $("<li />")
          .html("Point " + i)
          .click(function () {
              displayPoint(marker, i);
          })
          .appendTo("#list");

      GEvent.addListener(marker, "click", function () {
          displayPoint(marker, i);
      });
  });

  $("#tabs").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

  function displayPoint(marker, index) {
      $("#tabs").hide();    
      var moveEnd = GEvent.addListener(map, "moveend", function () {
          var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
          $("#tabs").filter(".ui-tabs").tabs("destroy").end()
          .html("<ul> \
                   <li><a href='#tabs-1'>First</a></li> \
                   <li><a href='#tabs-2'>Second</a></li> \
                   <li><a href='#tabs-3'>Third</a></li> \
                   </ul> \
                   <div id='tabs-1'><h2>First</h2><p>TEST</p></div> \
                   <div id='tabs-2'><h2>Second</h2><p>TEST</p></div> \
                   <div id='tabs-3'><h2>Third</h2><p>TEST</p></div>")
          .tabs()
          .fadeIn() 
          .css({ top: markerOffset.y, left: markerOffset.x });


          GEvent.removeListener(moveEnd);
      });
      map.panTo(marker.getLatLng());
  }
});