//<![CDATA[

if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallZoomControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
	map.setCenter(new GLatLng(34.1727, -81.8950), 16);
	map.setMapType(G_SATELLITE_TYPE)

	GEvent.addListener(map, "moveend", function() {
		var center = map.getCenter();
		document.getElementById("message").innerHTML = center.toString();
	});
			
	// Create our "tiny" marker icon
	var icon = new GIcon();
	icon.image = "http://mbmap.com/images/mm_20_haus.png";
	icon.shadow = "http://mbmap.com/images/mm_20_shadow.png";
	icon.iconSize = new GSize(20, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	icon.infoWindowAnchor = new GPoint(5, 1);
}

// 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 || 0;
  this.color_ = opt_color || "#888888";
}
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;
  //this.div_.style.height = "100px";
  this.div_.style.backgroundImage = "url(images/mapoverlayzl16.png)";
}

// 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 = "354px";
  this.div_.style.height = "198px";
  //this.div_.style.background-color = "#ccc";
  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";
}

// 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()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
    new GLatLng(34.1714, -81.8930),
    new GLatLng(34.1751, -81.901));
var rectInst = new Rectangle(rectBounds);
//rectInst.div_.style.height = "198px";
map.addOverlay(rectInst);

//]]>