(function(window) {
  "use strict";

  window.ls.container.get("view").add({
    selector: "data-forms-color",
    controller: function(element) {
      var preview = document.createElement("div");
      var picker = document.createElement("input");

      picker.type = "color";
      preview.className = "color-preview";

      preview.appendChild(picker);

      picker.addEventListener("change", syncA);
      picker.addEventListener("input", syncA);
      element.addEventListener("input", update);
      element.addEventListener("change", update);

      function update() {
        if (element.validity.valid) {
          preview.style.background = element.value;
          syncB();
        }
      }

      function syncA() {
        element.value = picker.value;
        update();
      }

      function syncB() {
        picker.value = element.value;
      }

      element.parentNode.insertBefore(preview, element);

      update();
      syncB();
    }
  });
})(window);