function Ebubble(map, image, size, insize, inset, anchor, noCloseOnClick)
{
	this.div_    = null;
	this.map_    = map;
	this.bounds_ = map.getBounds();
	this.image_  = image;
	this.size_   = size;
	this.insize_ = insize;
	this.inset_  = inset;
	this.anchor_ = anchor;
	this.infoWindowFocus = false;
	this.noCloseOnClick_ = noCloseOnClick;
	this.setMap(map);
}

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

Ebubble.prototype.onAdd = function ()
{
   var that = this;

   // internal variables
   this.visible = false;
   // browser - specific variables
   this.ie = false;
   var agent = navigator.userAgent.toLowerCase();
   if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ this.ie = true} else {this.ie = false}

   // 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.
   this.div1 = document.createElement("div");
   this.div1.style.position = "absolute";
   this.div1.style.display="none";
   
  if (this.ie && this.image.indexOf(".png")>-1) 
  {
	var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image_+"', sizingMethod='scale');";
    this.div1.innerHTML = '<div style="height:' +this.size_.height+ 'px; width:'+this.size_.width+'px; ' +loader+ '" ></div>';
							/*+ '<div id="maps_close_button"><img src="/images/delete.png" alt="" title="close"/></div>';*/
  } 
  else 
  {
	this.div1.innerHTML = '<img id="map_image" src="' + this.image_ + '" width="' + this.size_.width +'" height="' + this.size_.height +'">';
							/*+ '<div id="maps_close_button"><img src="/images/delete.png" alt="" title="close"/></div>';*/
  }

  // === Close the bubble if the map moves ===
  google.maps.event.addListener(map, "dragstart", function() 
  {
	that.hide();
  });

  google.maps.event.addListener(map, "moveend", function() 
  {
	  that.hide();
  });
 

  

  // === Listen for clicks and mousedowns ===
  google.maps.event.addDomListener(this.div1,"click", function()
  {
	 if (!that.noCloseOnClick_) { 
		 that.hide(); 
		  google.maps.event.trigger(that,"click");
	 }
  });

  google.maps.event.addDomListener(this.div1,"mousedown", function() 
  {
	if (!that.noCloseOnClick_) { that.hide();
	google.maps.event.trigger(that,"click"); }
  });
 


  this.div2 = document.createElement("div");
  this.div1.appendChild(this.div2);
  this.div2.style.position = "absolute";
  this.div2.style.left = this.inset_.x + "px";
  this.div2.style.top = this.inset_.y + "px";
  this.div2.style.width = this.insize_.width + "px";
  this.div2.style.height = this.insize_.height + "px";

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

  // 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.overlayLayer.appendChild(this.div1);
  document.body.appendChild(this.div1);

  var map_image = document.getElementById('map_image');
  if(map_image)
	{
		$(this.div2).bind("mouseenter", function () { that.infoWindowFocus = true; });

		$(this.div2).bind("mouseleave", function() 
		{
			that.infoWindowFocus = false;
			that.hide();
		});	
	}

   var close_button = document.getElementById('maps_close_button');
  if(close_button)
	{
		google.maps.event.addDomListener(close_button,"click", function() 
		{
			that.infoWindowFocus = false;
			that.hide();
		});
	}
}

Ebubble.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();

//  if(!this.bounds_) 
	  this.bounds_ = this.map_.getBounds();

  // 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 + 16) + 'px';
  div.style.top = (ne.y + 16) + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = 120+'px';// (sw.y - ne.y) + 'px';
}

Ebubble.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

// Note that the visibility property must be a string enclosed in quotes
Ebubble.prototype.hide = function() {
  if (this.div_) {
    this.div_.style.visibility = "hidden";
  }
}

Ebubble.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = "visible";
  }
}

Ebubble.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility == "hidden") {
      this.show();
    } else {
      this.hide();
    }
  }
}

Ebubble.prototype.toggleDOM = function() {
  if (this.getMap()) {
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
}

Ebubble.prototype.openOnMap = function (point, html, offset_)
{		
	this.offset = offset_ || new google.maps.Point(0,32);
	this.point  = point;

	//div2.style.backgroundColor = "#0000ff";
	this.div2.innerHTML = html;
	 
	// pixel relative to map world
	var overlayProjection = this.getProjection();

	var p = overlayProjection.fromLatLngToContainerPixel(point); //fromLatLngToDivPixel(point);
	 
	// map world relative to map container
	var panes = this.getPanes();
	
	var mapPane = panes.mapPane;

	var dragObject = mapPane.parentNode;

	var x = p.x + parseInt(dragObject.style.left);
	var y = p.y + parseInt(dragObject.style.top);
	 
	// map container relative to the page
	y += this.map_.getDiv().offsetTop;
	x += this.map_.getDiv().offsetLeft;
	 
	// offset by the requested anchor position
	y -= this.anchor_.y;
	x -= this.anchor_.x;
	 
	// offset by the specified offset position
	y -= this.offset.y;
	x -= this.offset.x;
	 
	 
	// Apply those values
	this.div1.style.left = x+"px";
	this.div1.style.top = (y+10)+"px";
	 
	// make it visible
	this.visible = true;
	this.show();	
}

Ebubble.prototype.openOnMarker = function(marker,html) 
{	
  //var vx = marker.getIcon().anchor.x; //- marker.getIcon().infoWindowAnchor.x;
  //var vy = marker.getIcon().anchor.y; //- marker.getIcon().infoWindowAnchor.y;
  var projection =	this.getProjection();	
  //alert(vx+":"+vy);
  var p			 =  marker.getPosition();
  this.openOnMap(p, html, null); //new GPoint(vx,vy)
}
 
 Ebubble.prototype.show = function() {
	
  this.div1.style.display="";
  this.div2.style.display="";
  this.visible = true;
 }

 Ebubble.prototype.hide = function() 
 {
	if(!this.infoWindowFocus)
	{
		this.div1.style.display="none";
	    //this.div2.style.display="none";
		this.visible = false;
	}
  }
 
  Ebubble.prototype.isHidden = function() {
  return !this.visible;
  }
 
  Ebubble.prototype.supportsHide = function() {
  return true;
  }