// file: main.js

var boxes = document.querySelectorAll('.textbox');
var resetButton = document.querySelector('#btn-reset');

for (var i=0; i < boxes.length; i++) {
  var box = new LimitedTextbox(boxes[i], boxes[i].dataset.maxlength);
  resetButton.addEventListener('click', box.reset.bind(box));
}

// file: panel.js
function Panel(el, parent) {
  this.el = {
    root: el,
    title: el.querySelector('.title'),
    val: el.querySelector('.val')
  };
  this.parent = parent;
}

Panel.prototype.start = function() {
  this.el.title.textContent = this.titleText;
  this.display(this.parent.currentTextLength());
};

Panel.prototype.display = function(textLength) {
  this.el.val.textContent = this.getDisplayValue(textLength);
};
// file: panels/current-length.js
function CurrentLengthPanel(el, parent) {
  Panel.call(this, el, parent);
}

CurrentLengthPanel.prototype = Object.create(Panel.prototype);

CurrentLengthPanel.prototype.titleText = 'Current Length: ';

CurrentLengthPanel.prototype.getDisplayValue = function(textLength) {
  return textLength;
};
// file: limited-textbox.js
function LimitedTextbox(el, maxLength) {
  Utils.injectHtmlTemplate(el, 'tmpl-textbox');
  this.maxLength = maxLength;
  this.el = {
    root: el,
    textarea: el.querySelector('textarea'),
    panel: el.querySelector('.panel')
  };
  this.maxLength = maxLength;

  this.panels = [
    new RemainingPanel(this.el.panel, this),
    new CurrentLengthPanel(this.el.panel, this)
  ];
  this.activePanelIndex = 0;
  this.panels[this.activePanelIndex].start();

  // set HTML maxLength attribute so text area will actually be limited
  this.el.textarea.maxLength = this.maxLength;

  // add the event handler
  this.el.textarea.addEventListener('input', this.updateRemainingText.bind(this));
  this.el.panel.addEventListener('click', this.togglePanel.bind(this));
}

LimitedTextbox.prototype.togglePanel = function() {
  this.activePanelIndex = (this.activePanelIndex + 1) % this.panels.length;
  this.panels[this.activePanelIndex].start();
};

LimitedTextbox.prototype.currentTextLength = function() {
  return this.el.textarea.value.length;
};

LimitedTextbox.prototype.updateRemainingText = function() {
  var currentLength = this.el.textarea.value.length;
  this.display(currentLength);
};

LimitedTextbox.prototype.display = function(textLength) {
  this.panels[this.activePanelIndex].display(textLength);
};

LimitedTextbox.prototype.reset = function() {
  this.el.textarea.value = '';
  this.display(0);
};
// file: remaining-panel.js
function RemainingPanel(el, parent) {
  Panel.call(this, el, parent);
  this.maxLength = parent.maxLength;
}

RemainingPanel.prototype = Object.create(Panel.prototype);

RemainingPanel.prototype.titleText = 'Characters Remaining: ';

RemainingPanel.prototype.getDisplayValue = function(textLength) {
  return this.maxLength - textLength;
};

// file: utils.js

var Utils = {};

Utils.injectHtmlTemplate = function(el, templateId) {
  var html = document.getElementById(templateId).innerHTML;
  el.innerHTML = html;
};