// BackgroundImageForMarker - Overlay that adds a background image behind a marker.
//
// Usage:
//  var map = new GMap2(...);
//  var marker = new GMarker(...);
//  var background = new BackgroundImageForMarker(marker, 'bkg.png', new GSize(20,20), new GPoint(0,0));
//  map.addOverlay(marker);
//  map.addOverlay(background);
//  ...

function BackgroundImageForMarker(marker, image, size, offset) {
  this.image_     = image;
  this.size_      = size;
  this.offset_    = offset;
  this.marker_    = marker;
}

BackgroundImageForMarker.prototype = new GOverlay();

BackgroundImageForMarker.prototype.initialize = function(map) {
  var div = document.createElement("div");
  div.style.background  = "transparent url('" + this.image_ +"') top left no-repeat";
  div.style.position    = "absolute";
  div.style.zIndex      = GOverlay.getZIndex(this.marker_.getPoint().y) - 1;
  
  map.getPane(G_MAP_MARKER_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
};

BackgroundImageForMarker.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
};

BackgroundImageForMarker.prototype.copy = function() {
  return new BackgroundImageForMarker(this.marker_, this.image_, this.size_, this.offset_);
};

BackgroundImageForMarker.prototype.redraw = function(force) {
  if (!force) return;

  var markerPoint  = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
  var anchorOffset = this.marker_.getIcon().iconAnchor;

  this.div_.style.width   = this.size_.width  + "px";
  this.div_.style.height  = this.size_.height + "px";
  this.div_.style.left    = (markerPoint.x - anchorOffset.x + this.offset_.x) + "px";
  this.div_.style.top     = (markerPoint.y - anchorOffset.y + this.offset_.y) + "px";
};