// 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 || "#888888";
    }

Rectangle.prototype = new GOverlay();

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";
      div.style.background = "#ffffff";
      div.style.filter="alpha(opacity=50)";
      div.style.opacity="0.5";
      // 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.zIndex = "11";

    }

 

    Rectangle.prototype.updatebounds = function(bounds){
      this.bounds_=bounds;
      //alert(bounds.getSouthWest());
      this.redraw(true);

}

    

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

// set transparency 
Rectangle.prototype.setOpacity = function(opct) {
    opct1 = "alpha(opacity=" + parseInt(parseFloat(opct) * 100) + ")";
    //alert(trsp + "  " + trsp1);
    this.div_.style.filter=opct1;
    this.div_.style.opacity=opct;
    this.div_.style.zIndex = "11";
}


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