var slot = 0;
var grib = null;

var overlay;


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

GribOverlay.prototype.onAdd = function() {
	
	 var panes = this.getPanes();

	 grib[slot].z.each(function(barb) {
	
		  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() {
  
	  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 + ')');
	if (grib.length > 0) {
		overlay = new GribOverlay(slot);
	} else {
		$('gribControl').hide();
	}
}