// 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, urlParams, opt_weight, opt_color) {
  this.bounds_ = bounds;
  this.weight_ = opt_weight || 2;
  this.color_ = opt_color || "#888888";
  this.urlParams_ = urlParams;
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {

//  var urlBase = "http://sigpac.mapa.es/sigpac/imagenes/aspimagedispatcher.aspx?function=getutmbitmap&Name=ORTOFOTOS&Tpc=0&Width=618&Height=421";
  var urlBase = "http://217.71.16.147/imageserver/aspimagedispatcher.aspx?function=getutmbitmap&Name=ORTOFOTOS&Tpc=0&Width=618&Height=421";

  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  // div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.border = "none";
  div.style.position = "absolute";
  
  // div.innerHTML = "<img src='spGateway.php?id=1" + this.urlParams_ + "' />";
  div.innerHTML = "<img src='" + urlBase + this.urlParams_ + "' />";

/*
  var sigpacImg = document.createElement("img");
  sigpacImg.style.border = "1px solid red";
  sigpacImg.style.position = "absolute";
  sigpacImg.setAttribute('src', urlBase + this.urlParams_);
  // sigpacImg.src = urlBase + this.urlParams_;
*/
  // 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.sigpacImg_ = sigpacImg;
}

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

  var sigpacImgs = this.div_.getElementsByTagName('img');
  var sigpacImg = sigpacImgs[0];
  sigpacImg.style.width = Math.abs(c2.x - c1.x) + "px";
  sigpacImg.style.height = Math.abs(c2.y - c1.y) + "px";
  sigpacImg.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  sigpacImg.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";

/*
  this.sigpacImg_.style.width = Math.abs(c2.x - c1.x) + "px";
  this.sigpacImg_.style.height = Math.abs(c2.y - c1.y) + "px";
  this.sigpacImg_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  this.sigpacImg_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
*/
}


/*
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
*/

// Display a rectangle in the center of the map at about a quarter of
// the size of the main map

function mostrarOverlay() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  
  var northWest = calc_utm(northEast.lat(), southWest.lng());
  var southEast = calc_utm(southWest.lat(), northEast.lng());
  var urlParams = '&x1=' + northWest.E + '&y1=' + northWest.N + '&x2=' + southEast.E + '&y2=' + southEast.N + '&Zone=' + southEast.Z;
// alert (urlParams);
  
  // alert (map.fromPixelToLatLng(new GPoint(0, 0), map.getZoom(), 'unbounded'));  	 

  var lngDelta = (northEast.lng() - southWest.lng()) / 4;
  var latDelta = (northEast.lat() - southWest.lat()) / 4;
/*  var rectBounds = new GLatLngBounds(
      new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
      new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
      */
  var rectBounds = new GLatLngBounds(
      new GLatLng(southWest.lat(), southWest.lng()),
      new GLatLng(northEast.lat(), northEast.lng()));
  map.addOverlay(new Rectangle(rectBounds, urlParams));
}