"use strict";

var LETTER_TIMEOUT = 35, PROMPT_TIMEOUT = 300;

var
  bubble = document.getElementById("bubble");

var config = {
  init: {
text:"Hai! Ask me questions!"
  }
};

function Bubble(elem) {
  this.elem = elem;
  this.mode = "text";
  this.text = "";
  this.options = [];
  this.callback = null;
  this.timeout = null;
  this.offset = 0;
}
Bubble.prototype.displayText = function(text, cb) {
  this.mode = "text";
  this.text = text;
  this.callback = cb;
  this.render();
};
Bubble.prototype.displayOptions = function(options, cb) {
  this.mode = "options";
  this.options = options;
  this.callback = cb;
  this.render();
};
Bubble.prototype.render = function() {
  var self = this;
  clearTimeout(this.timeout);
  this.elem.innerHTML = "";
  if(this.mode === "options") {
    var cont = document.createElement("div");
    cont.className = "bubble_options";
    this.options.forEach(function(opt) {
      var elem = document.createElement("div");
      elem.className = "bubble_option";
      elem.textContent = opt.label;
      elem.addEventListener("click", function(e) {
        self.elem.innerHTML = "";
        setTimeout(function() {
          self.callback(opt);
        }, PROMPT_TIMEOUT);
      });
      cont.appendChild(elem);
    });
    this.elem.appendChild(cont);
  }
  else if(this.mode === "text") {
    self.offset = 0;
    var looper = function() {
      self.offset++;
      self.elem.textContent += self.text[self.offset - 1];
      if(self.offset < self.text.length) {
        self.timeout = setTimeout(looper, LETTER_TIMEOUT);
      }
      else {
        setTimeout(function() {
          self.callback();
        }, PROMPT_TIMEOUT);
      }
    };
    this.timeout = setTimeout(looper, LETTER_TIMEOUT);
  }
};

var myBubble = new Bubble(bubble);

function main() {
  var entry = config[globalState];
  myBubble.displayText(entry.text, function() {
    yourBubble.displayOptions(entry.options, function(opt) {
      yourBubble.displayText(opt.label, function() {
        globalState = opt.state;
        main();
      });
    });
  });
}
main();