function ObsurfationWaves( canvas, $width, $height ){
  this.running = false
  this.numberOfWaves = 5;
  this.waveGap = 20;
  this.width = ObsurfationWaves.width = $width;
  this.height = ObsurfationWaves.height = $height;
  this.ctx = canvas.getContext('2d');
  this.colour = "29,233,182";
  this.wavesArray = new Array();
  this.beginingY = 35;
  var alpha = .2;

  while(this.numberOfWaves--) {
    this.wavesArray.push(new ObsurfationWave(canvas, this.beginingY, this.colour, alpha));
    this.beginingY += this.waveGap;
    alpha += .2;
  }

  this.update = function(){
    var bL = this.wavesArray.length;
    while( bL-- ) {
      this.wavesArray[ bL ].update();
    }
  }

  this.draw = function(){
    this.ctx.clearRect(0,0,this.width, this.height);
    this.ctx.save();
    var bL = this.wavesArray.length;
    while( bL-- ){
      this.wavesArray[ bL ].draw();
    }
    this.ctx.restore();
  }

  this.tick = function() {
    if (this.running) {
      var that = this;
      this.update();
      this.draw();
      window.requestAnimationFrame(function() {
        that.tick();
      })
    }
  }

  this.start = function() {
    this.running = true;
    this.tick();
  }

  this.stop = function() {
    this.running = false
  }
}

function ObsurfationWave(canvas, $y, $colour, alpha){
  this.ctx = canvas.getContext('2d');
  this.force = 0;
  this.wavePower = 40;
  this.count = $y;
  this.y = $y;
  this.alpha = alpha;

  this.update = function() {
    this.force = Math.sin(this.count);
    this.count += 0.08;
  }

  this.draw = function(){
    this.ctx.fillStyle = "rgba("+$colour+", "+this.alpha+")";
    this.ctx.beginPath();
    this.ctx.moveTo(0, this.y);
    this.ctx.quadraticCurveTo(ObsurfationWaves.width / 4, this.y + ( this.wavePower * this.force ), ObsurfationWaves.width / 2, this.y);
    this.ctx.quadraticCurveTo(ObsurfationWaves.width * 0.75, this.y - ( this.wavePower * this.force ), ObsurfationWaves.width, this.y);
    this.ctx.lineTo(ObsurfationWaves.width, ObsurfationWaves.height);
    this.ctx.lineTo(0, ObsurfationWaves.height);
    this.ctx.lineTo(0, this.y);
    this.ctx.closePath();
    this.ctx.fill();
  }
}


canvas = document.getElementById('waves')
waves = new ObsurfationWaves(canvas, canvas.width, canvas.height)
waves.start()