// JavaScript Document

//<![CDATA[
var map;

// 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, opt_weight, opt_color) {
	this.bounds_ = bounds;
	this.weight_ = opt_weight || 2;
	this.color_ = opt_color || "#CC0000";
}

function createMarker(point,html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
	return marker;
}

function load() {
	if (GBrowserIsCompatible()) {
		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.weight_ + "px solid " + this.color_;
			div.style.position = "absolute";

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

		// 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.weight_, this.color_, this.backgroundColor_, 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.weight_) + "px";
			this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
		}

		map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(51.424969,-0.220714), 15);
		
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());

		// Display a rectangle in the center of the map at about a quarter of
		// the size of the main map
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngDelta = (northEast.lng() - southWest.lng()) / 2.1;
		var latDelta = (northEast.lat() - southWest.lat()) / 2.1;
		var rectBounds = new GLatLngBounds(
			new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
			new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
		map.addOverlay(new Rectangle(rectBounds));

		map.setCenter(new GLatLng(51.425541,-0.220751), 15);
		// Display a rectangle in the center of the map at about a quarter of
		// the size of the main map
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngDelta = (northEast.lng() - southWest.lng()) / 2.1;
		var latDelta = (northEast.lat() - southWest.lat()) / 2.1;
		var rectBounds = new GLatLngBounds(
			new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
			new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
		map.addOverlay(new Rectangle(rectBounds));
	}
}

window.onload = load;

window.onunload = GUnload;

	//]]>