/******************************************************************************
 * File Name: rect.js
 * Purpose: Code for Rectangle class - custom extension of GOverlay
 * Credit: Based on http://code.google.com/apis/maps/documentation/overlays.html#Custom_Overlays
 * Author: C.Bateman
 * Date Created: 28.Oct.2008
 * Revision History:
 * Date:		Modified By:	Description:
 *
 *****************************************************************************/


// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, stroke_weight, stroke_color, fill_color, opacity) { //bounds, stroke_weight, stroke_color, fill_color, opacity
	this.bounds_ = bounds;
	this.stroke_weight_ = stroke_weight || 2;
	this.stroke_color_ = stroke_color || "#888888";
	this.fill_color_ = fill_color || "#888888";
	this.opacity_ = opacity || 1;
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
	// Create the DIV representing our rectangle
	var div = document.createElement("div");
	div.style.border = this.stroke_weight_ + "px solid " + this.stroke_color_;
	div.style.position = "absolute";
	div.style.background = this.fill_color_;
	div.style.opacity = this.opacity_;
	div.style.filter = "alpha(opacity=" + this.opacity_ * 100 + ")";
	div.style.cursor = "pointer";
	
	
	// We have two listeners to check that the map isn't being dragged. If the 
	// overlay is in the same position when the mouse comes up as it was when
	// the mouse went down, we know it's a true click.
	var that = this;
	var downPoint;
	var upPoint;
	
	GEvent.addDomListener(div,"mousedown",function() {
		downPoint = map.fromLatLngToContainerPixel(that.bounds_.getNorthEast());
	});
	
	GEvent.addDomListener(div,"click",function(event) {
		upPoint = map.fromLatLngToContainerPixel(that.bounds_.getNorthEast());
		if (String(downPoint) == String(upPoint)) {
			GEvent.trigger(that, "click");
		}
	});
	
	
	// 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_OVERLAY_LAYER_PANE).appendChild(div);
	// map.getPane(G_MAP_MAP_PANE).appendChild(div);
	
	this.map_ = map;
	this.div_ = div;
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
	this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
	return new Rectangle(this.bounds_, this.stroke_weight_, this.stroke_color_, this.fill_color_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
	// 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());
	
	// 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.stroke_weight_) + "px";
	this.div_.style.top = (Math.min(c2.y, c1.y) - this.stroke_weight_) + "px";
}