ImageOverlay.prototype = new google.maps.OverlayView();

/**
 * Constructs a new image overlay.
 * @constructor
 * @param {string} image The URL of the image.
 * @param {LatLngBounds} bounds The bounding box.
 * @param {Map} map The map to place on.
 */
function ImageOverlay(image, bounds, map) {
  // Now initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // We define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay
  this.setMap(map);

 // Is this IE, if so we need to use AlphaImageLoader

 var agent = navigator.userAgent.toLowerCase();
 this.ie = false ;
 if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)) {
   this.ie = true ;
 }

}

/**
 * Called when the overlay is added to the map.
 */
ImageOverlay.prototype.onAdd = function() {

  // Note: an overlay's receipt of onAdd() indicates that
  // the map's panes are now available for attaching
  // the overlay to the map via the DOM.

  // Create the DIV and set some basic attributes.
  var div = document.createElement('DIV');
  div.style.border = '0px solid';
  div.style.position = 'absolute';

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  // We add an overlay to a map via one of the map's panes.
  // We'll add this overlay to the overlayImage pane.
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
};

/**
 * Called when the overlay is drawn.
 */
ImageOverlay.prototype.draw = function() {

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();

  // Retrieve the southwest and northeast coordinates of this overlay
  // in latlngs and convert them to pixels coordinates.
  // We'll use these coordinates to resize the DIV.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's DIV to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';

  if (this.ie) {
    div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="scale", src="' + this.image_ + '")';

  } else {
    div.innerHTML = '';
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    div.appendChild(img);
  }
};

/**
 * Called when the overlay is removed from map.
 */
ImageOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

/**
 * Makes the overlay visible or not
 * @param {boolean} visible Desired visibility.
 */
ImageOverlay.prototype.setVisible = function(visible) {
  if (!this.div_) { return; }
  if (visible) {
    this.div_.style.display = 'block';
  } else {
    this.div_.style.display = 'none';
  }
};