// JavaScript Document

/* Google Mape*/

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



function initialize() {
	if (GBrowserIsCompatible()) { 
		var map = new GMap2(document.getElementById("map_canvas")); 
		map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
		map.setUIToDefault(); 
		
		//var point = new GLatLng(37.4419, -122.1419);
		//map.addOverlay(new GMarker(point));
		
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngDelta = (northEast.lng() - southWest.lng()) / 3;
		var latDelta = (northEast.lat() - southWest.lat()) / 3;
		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));
		
		/*
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
		for (var i = 0; i < 10; i++) {
		var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
		southWest.lng() + lngSpan * Math.random());
		map.addOverlay(new GMarker(point));
		}
		*/
	} 
}