/**********************************************************************
FILE: Was ImageOverlay.js
Original code came from
http://code.google.com/apis/maps/documentation/examples/overlay-custom.html
and from John Coryat's code.
http://www.usnaviguide.com/ws-2008-02/
and 
http://www.usnaviguide.com/ws-2008-02/countyoverlay.htm
***********************************************************************/

function ImageOverlay(imageUrl, bounds, addZoom, opt_weight, opt_color) 
{
    //alert("Entering ImageOverlay()");
	this.url_ = imageUrl;
	this.bounds_ = bounds;
	this.addZ_ = addZoom; //Add the zoom to the image as a parameter
	this.weight_ = opt_weight || 2; //original Google Maps
	//this.weight_ = opt_weight || 0;
	this.color_ = opt_color || "#888888"; //original Google Maps
	//this.color_ = opt_color || "#FFFFFF";
	
	// Is this IE? If so, we need to use AlphaImageLoader
	this.ie = false;
	var agent = navigator.userAgent.toLowerCase();
	if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1))
	{
		this.ie = true ;
	}
	//alert("Leaving ImageOverlay()");
	
}//end ImageOverlay()

ImageOverlay.prototype = new GOverlay();

ImageOverlay.prototype.initialize = function(map) 
{
    //alert("Entering initialize()");
	// Create the DIV representing our rectangle
	var div = document.createElement("div");
	div.style.position = "absolute";
	//http://www.w3schools.com/Dom/met_element_setattribute.asp
	div.setAttribute('id',this.id) ;
	// Our rectangle is flat against the map, so we add our selves to the
	// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
	// below the marker shadows)
	map.getPane(G_MAP_MAP_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
	if( this.percentOpacity )
	{
		this.setOpacity(this.percentOpacity) ;
	}
	//I think this is what was creating the gray border
	div.style.border = this.weight_ + "px solid " + this.color_;
	//alert("Leaving initialize()");
}//end initialize()

// Remove the main DIV from the map pane
ImageOverlay.prototype.remove = function() 
{
    //alert("Entering remove()");
	this.div_.parentNode.removeChild(this.div_);
	delete(this.map) ;
	delete(this.div) ;
	//alert("Leaving remove()");
}//end remove()

// Copy our data to a new ImageOverlay
ImageOverlay.prototype.copy = function() 
{
    //alert("Entering copy()");
	return new ImageOverlay(this.url_, this.bounds_, this.addZ_);
    //alert("Leaving copy()");
}//end copy()

// Redraw the rectangle based on the current projection and zoom level
ImageOverlay.prototype.redraw = function(force) 
{
    //alert("Entering redraw()");
	// We only need to redraw if the coordinate system has changed
	if (!force) return;
	
	// Calculate the DIV coordinates of two opposite corners of our bounds to
	// get the size and position of our rectangle
	var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
	var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
	//alert("c1: " + c1 + "\nc2: " + c2);
	
	
	// 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) - this.weight_) + "px";
	this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
	
	var imgName = this.url_;
	var imgWidth = Math.abs(c2.x - c1.x) + "px";
	var imgHeight = Math.abs(c2.y - c1.y) + "px";
	var msg = '<img src="' + imgName + '" width="' + imgWidth + '" height="' + imgHeight + '" />';
	//alert(msg);
	this.div_.innerHTML = msg;
    //alert("Leaving redraw()" + msg);
}//end redraw()


//opacity = percent; 100 = none, 25 = almost see-through
ImageOverlay.prototype.setOpacity = function(opacity)
{
	if (opacity < 0) opacity = 0;
	if(opacity > 100) opacity = 100;
	var c = opacity/100;
	var d = document.getElementById( this.id );
	if (typeof(d.style.filter) == 'string') d.style.filter = 'alpha(opacity:' + opacity + ')';
	if (typeof(d.style.KHTMLOpacity) == 'string') d.style.KHTMLOpacity = c;
	if (typeof(d.style.MozOpacity) == 'string') d.style.MozOpacity = c;
	if (typeof(d.style.opacity) == 'string') d.style.opacity = c ;
}//setOpacity