if (Garmin == undefined) var Garmin = {};
if (Garmin.Foto == undefined) Garmin.Foto = {};



/** Extends GOverlay to display photo query bounding box on map.
 * It outlines a lat/lng bounds on the map. It has a border of the given 
 * weight and color.
 */
Garmin.Foto.FocusRectangle = Class.create();
Garmin.Foto.FocusRectangle.prototype = Object.extend(new GOverlay(), {

	/** Creates the DIV representing this rectangle.
	 * initialize is called twice in different contexts:
	 * 1) by the prototype constructor method (map should be null)
	 * 2) by Google Maps when map renders (map will not be null)
	 * @param {GMap2} map Google Map instance
	 * @param {GLatLngBounds} bounds rectangular area on map
	 * @param {String} opt_weight CSS border weight: thin, medium 
	 * @param {String} opt_color CSS border color
	 * @param {String} opt_style CSS border style: solid, dotted, dashed
	 */
	initialize: function(map, bounds, opt_weight, opt_color, opt_style) {
		if (map) {
			// Create the DIV representing our rectangle
			var div = document.createElement("div");
			div.style.border = this.weight_ + " " + this.style_ + " " + this.color_;
			div.style.position = "absolute";
			this.map = map;
			this.div = div;
			if (!this.bounds_)
				map.getBounds();
			// 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);
		} else {
			this.bounds_ = bounds;
			this.weight_ = opt_weight || "thin";
			this.style_ = opt_style || "dotted";
			this.color_ = opt_color || "#888888";
		}
	},
	
	/** Remove the main DIV from the map pane */
	remove: function() {
		if (this.div)
			this.div.parentNode.removeChild(this.div);
	},

	/** Copy our data to a new FocusRectangle */
	copy: function() {
		return new Garmin.Foto.FocusRectangle(null, this.bounds_, this.weight_, this.color_, this.style_);
	},

	/** Redraw the rectangle based on the current projection and zoom level */
	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) - 1) + "px";
		this.div.style.top = (Math.min(c2.y, c1.y) - 1) + "px";
	}

});