var pollChart = (function () {
  var _canvas;
  var _dataitems = [];
  var _itemTemplate = '<div class="label">{0}</div><div class="bar"><div class="bar-fill"></div></div>';
  function incrementData(key) {
    if (isNaN(parseInt(key, 10))) {
      for (var i = 0; i < _dataitems.length; i++) {
        if (_dataitems[i].key === key) {
          _dataitems[i].value = _dataitems[i].value + 1;
          break;
        }
      }
    } else {
      _dataitems[key].value = _dataitems[key].value + 1;
    }
  }
  function updateData(key, value) {
    if (isNaN(parseInt(key, 10))) {
      for (var i = 0; i < _dataitems.length; i++) {
        if (_dataitems[i].key === key) {
          _dataitems[i].value = value;
          break;
        }
      }
    } else {
      _dataitems[key].value = value;
    }
  }
  function animate() {
    var maxVal = 0;
    for (var i = 0; i < _dataitems.length; i++) {
      if (_dataitems[i].value > maxVal) { maxVal = _dataitems[i].value; }
    }
    var range = Math.floor(maxVal / 0.9);
    for (var i = 0; i < _dataitems.length; i++) {
      var barFill = _dataitems[i].chartItm.querySelector('.bar-fill');
      barFill.style.width = Math.floor(_dataitems[i].value / range * 100) + '%';
      barFill.title = _dataitems[i].value + ' vote' + (_dataitems[i].value === 1 ? '' : 's') + ' for ' + _dataitems[i].description;
      barFill.innerHTML = _dataitems[i].value + ' vote' + (_dataitems[i].value === 1 ? '' : 's');
    }
  }
  function init(canvas, data) {
    _canvas = canvas;
    for (var i = 0; i < data.length; i++) {
      var itm = document.createElement('div');
      itm.innerHTML = _itemTemplate.replace('{0}', data[i].description);
      itm.classList.add('item-wrap');
      itm.classList.add(data[i].key);
      canvas.appendChild(itm);
      _dataitems.push({
        key: data[i].key,
        description: data[i].description,
        value: data[i].value,
        chartItm: itm
      });
    }
  }
  function destroy() {
    while (_canvas.firstChild) {
      _canvas.removeChild(_canvas.firstChild);
    }
    _canvas = null;
    _dataitems = [];
  }
  return {
    dataitems: _dataitems,
    init: init,
    destroy: destroy,
    updateData: updateData,
    incrementData: incrementData,
    animate: animate
  };
}).call();

var chartData = [
  { key: 'harrypotter', description: 'Harry Potter', value: 4 },
  { key: 'hobbit', description: 'The Hobbit', value: 3 },
  { key: 'neverendingstory', description: 'The Neverending Story', value: 6 },
  { key: 'avatar', description: 'Avatar', value: 1 },
  { key: 'narnia', description: 'Chronicles of Narnia', value: 2 },
  { key: 'labyrinth', description: 'Labyrinth', value: 5 }
];

pollChart.init(document.getElementById('chart'), chartData);
setTimeout(function() {
  pollChart.animate();
}, 300);
setInterval(function() {
   pollChart.incrementData(Math.floor(Math.random() * 6));
  pollChart.animate();
}, 2000);