function HMGoogleOverlay(url) {
  this.baseurl_ = url;
}


var HM_update_image_fcall;

HMGoogleOverlay.prototype.bounds_;
HMGoogleOverlay.prototype.baseurl_;
HMGoogleOverlay.prototype.url_;


HMGoogleOverlay.prototype = new GOverlay();

// Creates the DIV representing this overlay.
HMGoogleOverlay.prototype.initialize = function(map) {
  this.bounds_ = map.getBounds();
	
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])

  var div = null;
  var ie = false;
  if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
    div = document.createElement("span");
    ie = true;
  } else {
      div = document.createElement("img");
      div.src = "http://www.heatmapapi.com/images/spacer.png";
  }
  div.style.position = "absolute";
  div.onload = function() {
  	div.style.opacity = '1';  
  }
  div.id = '' + Math.floor(Math.random()*100);
  
  if(ie) {
      div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'"+this.url_+"\', sizingMethod=\'scale\')";
  } else {
      div.src = "http://www.heatmapapi.com/images/spacer.png";
  }
  map.getPane(G_MAP_MAP_PANE).appendChild(div);

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

  this.map_EVENT = GEvent.addListener(this.map_, "moveend", function (){eval(HM_update_image_fcall)});
}

function HMUpdateImage(img_id, url) {
	var img = document.getElementById(img_id);
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    
    if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'"+url+"\', sizingMethod=\'scale\')";
    } else {
        img.src = url;
    }
} 

HMGoogleOverlay.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
  if(this.map_EVENT)
  {
    GEvent.removeListener(this.map_EVENT);
    this.map_EVENT = null;  
  }
}

HMGoogleOverlay.prototype.copy = function() {
  return new HMGoogleOverlay(this.bounds_, this.url_);
}

HMGoogleOverlay.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  this.div_.style.opacity = '0';

  this.bounds_ = this.map_.getBounds();
  var southWest = this.bounds_.getSouthWest();
  var northEast = this.bounds_.getNorthEast();
  this.url_ = this.baseurl_ + "&lat1=" + northEast.lat() + "&lat2=" + southWest.lat() + "&lon1=" + southWest.lng() + "&lon2=" + northEast.lng();
  //this.url_ = this.baseurl_;

  HM_update_image_fcall = "HMUpdateImage('" + this.div_.id + "','" + this.url_ + "')";
 
  if(force) eval(HM_update_image_fcall);

  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
  this.div_.style.left = Math.min(c2.x, c1.x) + "px";
  this.div_.style.top = Math.min(c2.y, c1.y) + "px";
}