/* jshint node: true, esnext: true */

document.addEventListener("DOMContentLoaded", function() {
  var charVocabulary =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:,!.?";/-=+&';

  var Splash = function(context, text, options, width, height) {
    options = options || {};
    this.ctx = context.getContext("2d");
    this.text = text;
    this.delay = options.delay || 10;
    this.startValue = this.progress = options.startValue || 0.2;
    this.endValue = options.endValue || 1.0;
    this.steps = options.steps || 200;
    this.step = 0;
  };

  Splash.prototype = {
    drawText: function(text) {
      this.ctx.canvas.width = this.ctx.canvas.width;
      this.ctx.textAlign = "center";
      this.ctx.fillStyle = "transparent";
      this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
      this.ctx.font = "120px CryphoGrotesk";
      this.ctx.fillStyle = "#ffffff";
      // this.ctx.shadowColor = "rgba(255,255,255,1)"
      this.ctx.shadowBlur = 10;
      this.ctx.fillText(
        text,
        this.ctx.canvas.width / 2,
        this.ctx.canvas.height / 2
      );
    },

    randomize: function() {
      var i,
        l = this.text.length,
        text = this.text,
        r;
      for (i = 0; i < l; i++) {
        r = Math.random();
        if (r > this.progress) {
          r = parseInt(Math.random() * charVocabulary.length, 10);
          text = text.substr(0, i) + charVocabulary[r] + text.substr(i + 1);
        }
      }
      return text;
    },

    _animate: function(self) {
      self.drawText(self.randomize());
      if (self.step < self.steps) {
        self.timeout = setTimeout(self._animate, self.delay, self);
        self.step++;
        self.progress = self.easeOutQuad(self.step);
      } else {
      }
    },

    easeOutQuad: function(t) {
      var b = this.startValue,
        c = this.endValue - this.startValue,
        d = this.steps;

      t /= d;
      return -c * t * (t - 2) + b;
    },

    start: function(options) {
      this.step = 0;
      this._animate(this);
    },

    stop: function() {
      clearTimeout(this.timeout);
    }
  };

  var steps = 10000 / 50;
  if (!sessionStorage.getItem("started")) {
    window.splash = new Splash(document.getElementById("splash"), "CRYPHO", {
      delay: 50,
      startValue: 0.3,
      endValue: 1.0,
      steps: steps
    });
    window.splash.start();
    sessionStorage.setItem("started", true);
  } else {
    window.splash = new Splash(document.getElementById("splash"), "CRYPHO", {
      delay: 0,
      startValue: 0.9,
      endValue: 1.0,
      steps: 2
    });
    window.splash.start();
  }
});