//overlay prototype code from-- http://code.google.com/apis/maps/documentation/v3/overlays.html

function SketchingOverlay(bounds, image, map) {
  this.visible_ = true;
  // 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 add() method so we'll
  // leave it null for now.
  this.div_ = null;

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

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

//Poistioning + Scaling
SketchingOverlay.prototype.alignToScreen = function(){
	
	if (this.bounds_ == null){
		var overlayProjection = this.getProjection();
		
		var width; 
		var height;
		
		if (this.img_.naturalWidth){
		 	width = this.img_.naturalWidth;
		 	height = this.img_.naturalHeight;
		}else{
			width = this.img_.width;
			height = this.img_.height;
		}
		
		var sw = overlayProjection.fromContainerPixelToLatLng(new google.maps.Point(400, 0+height));
		var ne = overlayProjection.fromContainerPixelToLatLng(new google.maps.Point(400 + width, 0));
		
		this.bounds_  = new google.maps.LatLngBounds(sw, ne);
		this.img_.style.visibility = "visible";
		this.draw();
		 
	}

}

//initializing
SketchingOverlay.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.borderWidth = "0px";
  div.style.position = "absolute";

  // Create an IMG element and attach it to the DIV.
  var img = document.createElement("img");
  this.img_ = img;
 // img.style.width = "100%";
 // img.style.height = "100%";
  div.appendChild(img);

  //attach load event
  if (this.bounds_ == null){
  	img.style.visibility = "hidden";
  	var self = this;
//  	$(img).load(function(){self.alignToScreen();});
  		$(img).load(function(e){self.alignToScreen();});
  	
  	//img.addEventListener('load',function(){self.alignToScreen();},false); 
  }
 
 //start loading image
  img.src = this.image_;

$(img).ifixpng(); 
  // 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.overlayLayer.appendChild(div);
}


//drawing
SketchingOverlay.prototype.draw = function() {
	 if (this.bounds_ == null) return;

  // 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';

  if (isNaN(ne.x) || isNaN(ne.y) || isNaN(sw.x) || isNaN(sw.y)){
  	alert("Nan!");
  }else{
  
  	div.style.width = (ne.x - sw.x) + 'px';
  	div.style.height = (sw.y - ne.y) + 'px';
  }
 
  
	//set the visibility of the div
	//TODO pull out into seperate method
	if(this.visible_!=true){
		div.style.display = 'none';
	}else{
		div.style.display = 'inline';
	}
}

//removing
SketchingOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}