var slot = 0;
var grib = null;

var overlay;


function GribOverlay(sss) {
//	alert("contructor");
	this.sss_ = sss;
	this.setMap(map);
}
GribOverlay.prototype = new google.maps.OverlayView();

GribOverlay.prototype.onAdd = function() {
	//alert("adding");
	  // 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.


	  // 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();

	 grib[slot].z.each(function(barb) {
		  /*var img = document.createElement("img");
		  img.src = "img/wind/barb" + barb.d + "-" + barb.s + ".png";
		  img.style.position = "absolute";
		  img.style.opacity = 0.4;
		  panes.overlayLayer.appendChild(img);
		  barb.img = img;*/

		  if (barb.s > -1) {
			  var img = document.createElement("div");
			  img.style.position = "absolute";
			  img.style.width="50px";
			  img.style.height="50px";
			  img.style.backgroundImage="url(img/wind/BIG.png)";
			  img.style.backgroundPosition="-" +barb.s+"px " + "-" + barb.d + "px";
			  
			  panes.overlayLayer.appendChild(img);
			  barb.img = img;
		  }
		  
	});

	 
}



GribOverlay.prototype.draw = function() {
	//alert("drawing");
	  
	  var overlayProjection = this.getProjection();

	  grib[slot].z.each(function(barb) {
		  if (barb.s > -1) {
		  	var centre = overlayProjection.fromLatLngToDivPixel(new google.maps.LatLng(barb.a,barb.o));
			barb.img.style.left = centre.x-25 + "px";
			barb.img.style.top =centre.y-25 + "px";
		  }
	 });
	  $('gribClock').innerHTML=grib[slot].d;
}



GribOverlay.prototype.onRemove = function() {

	grib[this.sss_].z.each(function(barb) {
		if (barb.s > -1) {
			barb.img.parentNode.removeChild(barb.img);
			barb.img=null;
		}
		});
	  
	}







function forward() {
	if (slot < grib.length-1) {
		overlay.setMap(null);
		slot++;
		overlay = new GribOverlay(slot);
	}
}
function backward() {
	if (slot > 0) {
		overlay.setMap(null);
		slot--;
		overlay = new GribOverlay(slot);
	}
}



function loadGribData() {
	$('gribClock').innerHTML="loading...";
	new Ajax.Request('/GRIB/whatever.grb',
			  { method:'get',
			    parameters: {random: rN()},
	   			onSuccess: gribResponse });
	
}

function gribResponse(t) {
	grib = eval('(' + t.responseText + ')');
	overlay = new GribOverlay(slot);
	$('gribLoadButton').style.display="none";
	$('gribForwardButton').style.display="";
	$('gribBackwardButton').style.display="";
}