/*   MapOverlay.js */
MapOverlay.prototype = new google.maps.OverlayView();
function MapOverlay(bounds, image, 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);
}
MapOverlay.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 = "none";
	div.style.position = "absolute";
	
	// Create an IMG element and attach it to the DIV.
	var img = document.createElement("img");
	img.src = this.image_;
	img.style.width = "100%";
	img.style.height = "100%";
	div.appendChild(img);
	
	// 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);
}

MapOverlay.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';
}

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

MapOverlay.prototype.hide = function() {
  if (this.div_) {
	//this.div_.style.visibility = "hidden";
	$(this.div_).fadeOut("slow");
  }
}

MapOverlay.prototype.show = function() {
  if (this.div_) {
	//this.div_.style.visibility = "visible";
	$(this.div_).fadeIn("slow");
  }
}