var step = 50;
var singleTimeout = null;

var animationCallbacks = [];

function tick () {
  var moreToDo = false;
  for (var i=animationCallbacks.length-1;i>=0;i--)
    if (animationCallbacks[i]()) {
      moreToDo = true;
    } else {
      animationCallbacks.splice(i,1);
    }
  if (moreToDo) singleTimeout = setTimeout(tick,step);
  else singleTimeout = null;
}

function addCallback (f) {
  animationCallbacks.push(f);
  if (singleTimeout==null) tick();
}

function Raindrop (x,y) {
  this.cx = x;
  this.cy = y;
  this.counter = 0;
  this.limit = 14;
  this.lag = 5;
  var target = this;
  addCallback(function(){return target.step();});
}

Raindrop.prototype.step = function () {
  if (this.counter>(this.limit+this.lag)) return false;
  if (this.counter==0) {
    this.e1 = document.createElement("div");
    this.e1.className = "ripple";
    this.place(this.e1,this.counter);
    waterSurface.appendChild(this.e1);
  } else {
    if (this.counter==this.lag) {
      this.e2 = document.createElement("div");
      this.e2.className="ripple";
      waterSurface.appendChild(this.e2);
    }
    this.place(this.e1,this.counter);
    this.place(this.e2,this.counter-this.lag);
  }
  this.counter++;
  return true;
};

Raindrop.prototype.place = function (e,t) {
  if (!e || !(e.parentNode)) return;
  var W = t * 4.2;
  var H = t * 1.2;
  e.style.left = Math.round(this.cx-W) + "px";
  e.style.width = Math.round(2*W) + "px";
  e.style.top = Math.round(this.cy-H) + "px";
  e.style.height = Math.round(2*H) + "px";
  if (t==this.limit-this.lag) e.style.borderColor = "#707070";
  if (t>=this.limit) e.parentNode.removeChild(e);
}

function Rainfall () {
  this.w = 500;
  this.h = 200;
  this.x = 0;
  this.y = 0;
  this.counter = 0;
  var target = this;
  addCallback(function(){return target.step();});
}

Rainfall.prototype.step = function () {
  if (++this.counter == 5) {
    this.counter = 0;
    new Raindrop(
      Math.round(this.x + Math.random()*this.w),
      Math.round(this.y + Math.random()*this.h));
  }
  return true;
}

Rainfall.prototype.setBounds = function(w,h,y,questionmark) {
  this.y = y;
  this.w = w;
  this.h = h - 30;
}


function Cloud () {
  this.elt = document.createElement("div");
  this.elt.className = "cloud";
  this.elt.style.top = Math.round(
    Math.random()*20 - 10) + "px";
  sky.appendChild(this.elt);
  this.drops = [];
  for (var i=0;i<10;i++) {
    var drop = document.createElement("div");
    this.elt.appendChild(drop);
    drop.style.left = (Math.random()*100) + "%";
    this.drops.push(drop);
  }
  this.counter = 0;
  this.phase = Math.random()*Math.PI*2;
  this.wavelength = 1000;
  var target = this;
  addCallback(function(){return target.step();});
}

Cloud.prototype.step = function() {
  this.elt.style.left = Math.round(
    (Math.sin(this.phase + (this.counter/this.wavelength))+1)
    * 600) + "px";
  var i;
  for (i=0;i<this.drops.length;i++) {
    if (Math.random()>0.90) {
      if (Math.random()>1) {
        this.drops[i].style.display = "none";
      } else {
        this.drops[i].style.display = "block";
        this.drops[i].style.left =
          (Math.random()*100) + "%";
      }
    }
  }
  this.counter++;
  return true;
}