// createImageDock.js

(function () {
  /*global adventurejs A*/
  "use strict";

  var p = adventurejs.Display.prototype;

  /**
   * <strong>createImageDock()</strong> is a method for creating
   * custom image docks. It takes a generic object containing an
   * id, an optional list of css classes to be applied to the
   * element, and an object containing image id / image url pairs.
   * Image docks will be created at runtime, and
   * can be styled with any custom CSS.
   * To create a new image dock:
   *
   * <pre class="display"><code class="language-javascript">MyGame.createImageDock({
   *   "id":"MyImageDock",
   *   "cssclasses":["custom"],
   *   "images": [
   *     [ "myimage_01": "/images/myimage_01.jpg" ],
   *     [ "myimage_02": "/images/myimage_02.jpg" ],
   *   ],
   * });
   * </code></pre>
   *
   * For more information, see
   * <a href="/doc/GUI_ImageDocks.html">Image Dock</a>.
   * @method adventurejs.Display#createImageDock
   * @param {Object} properties HTML ID, CSS classes, and verbs.
   * @returns {Element} Returns the HTML element of the verb dock.
   */
  p.createImageDock = function Display_createImageDock(properties) {
    console.warn("createImageDock", properties);
    let author_element;
    let dock;

    if (properties.id) {
      author_element = document.querySelector("#" + properties.id);
    }
    dock = author_element ? author_element : document.createElement("div");
    if (properties.id) {
      dock.setAttribute("id", properties.id);
    }
    if (properties.type) {
      dock.dataset.type = properties.type;
    }
    dock.classList.add("game_imagedock_container", "ajs-dock-wrapper");
    if (properties.cssclasses) {
      for (var item in properties.cssclasses) {
        dock.classList.add(properties.cssclasses[item]);
      }
    }

    dock.game = this.game;
    dock.messages = [
      " ",
      " ",
      "$(We) clicked the picture, but there's no need for that. It's just a visual reference. ",
      " ",
      " ",
      "There's no need to click. Sorry, but this isn't a point & click game.",
      " ",
      " ",
      "Move on, there's nothing to do in the picture. ",
      " ",
      " ",
      "Whattaya think this is, a point & click game? ",
      " ",
      " ",
    ];
    dock.addEventListener("click", function (event) {
      this.game.print(A.getSAF.call(this.game, this.messages));
    });

    this.imagedocks.push(dock);
    if (!author_element) {
      this.displayEl.appendChild(dock);
    }
    return dock;
  };
})();