(function () {
  setInterval(function () {
      var xmlhttp = new XMLHttpRequest();
      var url = '/api/state';

      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            try {
              var data = JSON.parse(xmlhttp.responseText);
              process_ok(data)
            } catch(err) {
              console.log(err)
              process_error(xmlhttp.responseText + "<br />" + err);
            }
          }
      };

      xmlhttp.open('GET', url, true);
      xmlhttp.send();
  }, 1000);

  function set_element_inner_html(element_id, text) {
    document.getElementById(element_id).innerHTML = text;
  }

  function add_element_class(element_id, klass) {
    document.getElementById(element_id).classList.add(klass)
  }

  function remove_element_class(element_id, klass) {
    document.getElementById(element_id).classList.remove(klass)
  }

  function show_element(id) {
    remove_element_class(id, "hidden");
  }

  function hide_element(id) {
    add_element_class(id, "hidden");
  }

  function process_ok(data) {
      console.log(data);
      clear_error()
      switch(data.template) {
        case 'items':
          display_items_with_grand_total(data);
          break;
        case 'finalize':
          display_thanks(data);
          break;
        case 'empty':
          clear_all();
          break;
      }
  };

  function process_error(data) {
      console.log(data);
      display_error(data);
  };

  function display_error(text) {
    set_element_inner_html('error-message', text)
  }

  function clear_error() {
    display_error('');
  }

  function clear_all() {
    clear_error();
    hide_element("grand-total-block");
    hide_element("items-block");
    hide_element("thanks-block");
  }

  function display_items_with_grand_total(data) {
    hide_element("thanks-block");
    show_element("grand-total-block");
    show_element("items-block");

    set_element_inner_html('grand-total-sum-value', data.total.amount);
    set_element_inner_html('grand-total-got-value', data.total.got);
    set_element_inner_html('grand-total-change-value', data.total.change);

    var item_template = "<li>{{name}} - {{price}}, {{qty}} на {{subtotal}}</li>";
    var html = "";
    for(var i = 0; i < data.items.length; i++) {
      item = data.items[i];
      html += item_template.replace("{{name}}",       item.name)
                           .replace("{{price}}",      item.price)
                           .replace("{{qty}}",        item.quantity)
                           .replace("{{subtotal}}",   item.subtotal);
    }
    set_element_inner_html("items-list", html);
    scroll_items_bottom();
  }

  function display_thanks(data) {
    hide_element("grand-total-block");
    hide_element("items-block");
    show_element("thanks-block");
    set_element_inner_html("thanks-text", data.text);
  }

  function scroll_items_bottom() {
    var element = document.getElementById("items-block");
    element.scrollTop = element.scrollHeight;
  }

  window.onload = clear_all;
})();

.error-text {
  color: red;
}

#grand-total-block {
  position: fixed;
  bottom: 0;
	clear:both;
}

#items-block {
  overflow-y: scroll;
  height: 40em;
}

.grand-total-heading-text {
  text-transform: uppercase;
}

.grand-total-value-text {
}

.hidden {
  display: none;
}