// New map on Paris
var map = new google.maps.Map($('.map').get(0), {
  center: new google.maps.LatLng(48.8742, 2.3470),
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  zoom: 16
});

// http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
function CustomMarker(latlng, map) {
  this.latlng_ = latlng;

  // Once the LatLng and text are set, add the overlay to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  var me = this;

  // Check if the div has been created.
  var $div = this.$div;
  if (!$div) {
    // Create a overlay text DIV
    $div = this.$div = $('<div class="marker" title="foo">★</div>').css({position: 'absolute'});

    // Then add the overlay to the DOM
    var panes = this.getPanes();
    panes.overlayImage.appendChild($div[0]);
  }

  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    $div.css({
      left: point.x + 'px',
      top: point.y + 'px'
    });
  }

  //this.position();
};
CustomMarker.prototype.position = function () {
  //console.log('position!');

  var map = this.map;
  var mapEl = map.getDiv();
  var bounds = map.getBounds();
  var pos = this.getPosition();

  if (!bounds.contains(pos)) {
    /*var posLat = pos.lat();
    var posLng = pos.lng();

    // top/right
    var ne = bounds.getNorthEast();
    var onRight = posLng >= ne.lng();
    var onTop = posLat >= ne.lat();

    // left/bottom
    var sw = bounds.getSouthWest();
    var onLeft = posLng <= sw.lng();
    var onBottom = posLat <= sw.lat();

    var klass = [];
    onLeft && (klass.push('left'));
    onTop && (klass.push('top'));
    onRight && (klass.push('right'));
    onBottom && (klass.push('bottom'));*/

    if (!this.$div.data('tooltip')) {
      this.$div.tooltip({
        content: 'hey!',
        position: {
          my: "center top", // tooltip
          at: "center bottom",
          within: mapEl,
          collision: "fit"
        },
        show: false,
        hide: false,
        disabled: true
      });
    }

    if (!this.$div.data('tooltip')._find(this.$div).length) {
      //console.log('open');
      this.$div.tooltip('enable').tooltip('open');
    }
    var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());
    $('#'+this.$div.attr('aria-describedby')).position({
      my: "center top", // tooltip
      at: "center bottom",
      within: mapEl,
      of: this.$div,
      collision: "fit"
    }).html(~~distance+'m');


    //var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());

    //console.log('out', klass.join(', '), ~~distance);
  } else {
    if (this.$div.data('tooltip')) {
      this.$div.tooltip('disable').tooltip('close');
    }
  }
};
CustomMarker.prototype.remove = function() {
  // Check if the overlay was on the map and needs to be removed.
  if (this.$div) {
    this.$div.remove();
    this.$div = undefined;
  }
};
CustomMarker.prototype.getPosition = function() {
 return this.latlng_;
};


google.maps.event.addListenerOnce(map, 'idle', function(){
  var markers = []; window.markers = markers;
  var ne = map.getBounds().getNorthEast();
  var sw = map.getBounds().getSouthWest();
  var deltaLat = ne.lat() - sw.lat();
  var deltaLng = ne.lng() - sw.lng();
  for (var i = 0; i<1000; i++) {
    markers.push(new CustomMarker(new google.maps.LatLng(sw.lat() + Math.random()*deltaLat, sw.lng() + Math.random()*deltaLng), map));
  }

  var markerCluster = new MarkerClusterer(map, markers); window.markerCluster = markerCluster;

  /*google.maps.event.addListener(map, 'bounds_changed', _.debounce(function () {
    google.maps.event.addListenerOnce(map, 'idle', function () {
      var i = markers.length;
      while (--i) {
        markers[i].position();
      }
    });
  }, 10));*/
});


// map.getBounds().contains(marker.getPosition())