var centerLat=41.7192;
var centerLng=12.3020;
var rosa_dim_lat=0.018;	//lato della rosa dei venti
var rosa_dim_lon=0.024;
var rosa_img ='../images/rosadeiventi.png';
//var arrow_img='../images/wra-NNW.png';
rosaOverlay.prototype = new google.maps.OverlayView();
var overlay;
var arrowoverlay;
var SWbound = new google.maps.LatLng(centerLat-rosa_dim_lat,centerLng-rosa_dim_lon);
var NEbound = new google.maps.LatLng(centerLat+rosa_dim_lat,centerLng+rosa_dim_lon);
var bounds = new google.maps.LatLngBounds(SWbound,NEbound);
var map;
 function initialize() {
    var latlng = new google.maps.LatLng(centerLat,centerLng);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	//var boundaries = new GLatLngBounds(new GLatLng(SLat-rosa_dim_lat,SLon-rosa_dim_lon), new GLatLng(SLat+rosa_dim_lat,SLon+rosa_dim_lon));
	overlay = new rosaOverlay(bounds, rosa_img, map);
	//arrowoverlay = new rosaOverlay(bounds, arrow_img, map);
  }

function rosaOverlay(bounds, image, map) {

    // Now initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // We define a property to hold the image's div. We'll 
    // actually create this div upon receipt of the onAdd() 
    // method so we'll leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay
    this.setMap(map);
  }

  rosaOverlay.prototype.onAdd = function() {

    // Note: an overlay's receipt of onAdd() indicates that
    // the map's panes are now available for attaching
    // the overlay to the map via the DOM.

    // Create the DIV and set some basic attributes.
    var div = document.createElement('DIV');
    div.style.borderStyle = "none";
    div.style.borderWidth = "0px";
    div.style.position = "absolute";

    // Create an IMG element and attach it to the DIV.
    var img = document.createElement("img");
    img.src = this.image_;
    img.style.width = "100%";
    img.style.height = "100%";
    div.appendChild(img);

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayImage pane.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  rosaOverlay.prototype.draw = function() {

    // Size and position the overlay. We use a southwest and northeast
    // position of the overlay to peg it to the correct position and size.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the southwest and northeast coordinates of this overlay
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to resize the DIV.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's DIV to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
  }

  rosaOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }