/*
You might have recognized a grumpy Calvin from 'Calvin and Hobbes' :)
Rain adapted from http://codepen.io/Sheepeuh/pen/cFazd - Credits go to Rodolphe Delapierre
*/

// Load keyframes when page is fully loaded
function loadKeyFrames(elem) {
  var args = [].slice.apply(arguments);
  args.forEach(function(elem) {
    document.getElementById(elem).id = elem + '-loaded';
  });
}
window.addEventListener('load', function() {
  loadKeyFrames('head', 'face', 'hair', 'hair-lines', 'body', 'stripes', 'left-hand', 'right-hand', 'umbrella');
}, false);

// Make Calvin angrier.
var svg = document.querySelector('svg');
var hint = document.querySelector('.hint');
var angry = document.querySelectorAll('.angry');
var pissMe = 0;

function angryMembers(color) {
  for (var i = 0; i < angry.length; i++) {
    angry[i].style.fill = color;
  }
}

svg.addEventListener('click', function() {
  pissMe++;
  switch(pissMe) {
    case 1:
      angryMembers('#ffb7b7');
      break;
    case 2:
      angryMembers('#ffa9a8');
      break;
    case 3:
      angryMembers('#fd8887');
      hint.innerHTML = "Okay, enough...";
      break;
    case 4:
      angryMembers('#fc6a68');
      break;
    case 5:
      angryMembers('#fb5b59');
      hint.innerHTML = "I think you should really stop.";
      break;
    case 6:
      angryMembers('#fa403e');
      break;
    case 7:
      angryMembers('#fb211e');
      hint.innerHTML = "Well done. Now he's mad.";
      break;
    case 15:
      hint.innerHTML = "You should relax...";
      break;
    case 30:
      angryMembers('#696fe5');
      hint.innerHTML = "Congrats, you've found the easter egg. You crazy clicker.";
      break;
  }
}, false);

// Thunder
var thunder = document.querySelector('.thunder');
window.setInterval(function() {
  var random = Math.floor(Math.random()*10);
  if (random > 7) {
    thunder.className += ' thunder--boomboom';
    window.setTimeout(function() {
      var regex = new RegExp('(?:\\s|^)' + 'thunder--boomboom' + '(?:\\s|$)');
      thunder.className = thunder.className.replace(regex, '');
    }, 360);
  }
}, 730);

// Rain
requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
})();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = 0;
var height = 0;

window.onresize = function onresize() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight - 80;
  mouse = {
    X : window.innerWidth - 40 - window.innerWidth / 2,
    Y : window.innerHeight - 265
  }

}

window.onresize();

var mouse;

var particules = [];
var gouttes = [];
var nombrebase = 5;
var nombreb = 2;

var controls = {
  rain : 2,
  Object : "Umbrella",
  alpha : 1,
  color : 500,
  auto : false,
  opacity : .5,
  saturation : 100,
  lightness : 100,
  back : 100,
  red : 125,
  green : 130,
  blue : 146,
  multi : false,
  speed : 2
};

function Rain(X, Y, nombre) {
  if (!nombre) {
    nombre = nombreb;
  }
  while (nombre--) {
    particules.push(
    {
      vitesseX : (Math.random() * 0.25),
      vitesseY : (Math.random() * 9) + 1,
      X : X,
      Y : Y,
      alpha : 1,
      couleur : "hsla(" + controls.color + "," + controls.saturation + "%, " + controls.lightness + "%," + controls.opacity + ")",
    })
  }
}

function explosion(X, Y, couleur, nombre) {
  if (!nombre) {
    nombre = nombrebase;
  }
  while (nombre--) {
    gouttes.push(
    {
      vitesseX : (Math.random() * 4-2 ),
      vitesseY : (Math.random() * -4 ),
      X : X,
      Y : Y,
      radius : 0.65 + Math.floor(Math.random() *1.6),
      alpha : 1,
      couleur : couleur
    })
  }
}

function rendu(ctx) {

  if (controls.multi == true) {
    controls.color = Math.random()*360;
  }

  ctx.save();
  ctx.fillStyle = 'rgba('+controls.red+','+controls.green+','+controls.blue+',' + controls.alpha + ')';
  ctx.fillRect(0, 0, width, height);

  var particuleslocales = particules;
  var goutteslocales = gouttes;
  var tau = Math.PI * 2;

  for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {

    ctx.globalAlpha = particulesactives.alpha;
    ctx.fillStyle = particulesactives.couleur;
    ctx.fillRect(particulesactives.X, particulesactives.Y, particulesactives.vitesseY/4, particulesactives.vitesseY);
  }

  for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {

    ctx.globalAlpha = gouttesactives.alpha;
    ctx.fillStyle = gouttesactives.couleur;

    ctx.beginPath();
    ctx.arc(gouttesactives.X, gouttesactives.Y, gouttesactives.radius, 0, tau);
    ctx.fill();
  }
    ctx.strokeStyle = "white";
    ctx.lineWidth   = 2;

    if (controls.Object == "Umbrella") {
      ctx.beginPath();
      ctx.arc(mouse.X, mouse.Y+10, 138, 1 * Math.PI, 2 * Math.PI, false);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "hsla(0,100%,100%,0)";
      ctx.stroke();
    }
  ctx.restore();

  if (controls.auto) {
    controls.color += controls.speed;
    if (controls.color >=360) {
      controls.color = 0;
    }
  }
}

function update() {

  var particuleslocales = particules;
  var goutteslocales = gouttes;

  for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {
    particulesactives.X += particulesactives.vitesseX;
    particulesactives.Y += particulesactives.vitesseY+5;
    if (particulesactives.Y > height-15) {
      particuleslocales.splice(i--, 1);
      explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
    }
    var umbrella = (particulesactives.X - mouse.X)*(particulesactives.X - mouse.X) + (particulesactives.Y - mouse.Y)*(particulesactives.Y - mouse.Y);
    if (controls.Object == "Umbrella") {
      if (umbrella < 20000 && umbrella > 10000 && particulesactives.Y < mouse.Y) {
        explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
        particuleslocales.splice(i--, 1);
      }
    }
  }

  for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {
    gouttesactives.X += gouttesactives.vitesseX;
    gouttesactives.Y += gouttesactives.vitesseY;
    gouttesactives.radius -= 0.075;
    if (gouttesactives.alpha > 0) {
      gouttesactives.alpha -= 0.005;
    } else {
      gouttesactives.alpha = 0;
    }
    if (gouttesactives.radius < 0) {
      goutteslocales.splice(i--, 1);
    }
  }

  var i = controls.rain;
  while (i--) {
    Rain(Math.floor((Math.random()*width)), -15);
  }
}

function Screenshot() {
  window.open(canvas.toDataURL());
}

(function boucle() {
  requestAnimFrame(boucle);
  update();
  rendu(ctx);
})();