// createInventoryDock.js

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

	var p = adventurejs.Display.prototype;

	/**
   * <strong>createInventoryDock()</strong> is a method for creating 
   * custom inventory docks. It takes a generic object containing an 
   * id and an optional list of css classes to be applied to the 
   * element. Inventory docks will be created at runtime, and 
   * can be styled with any custom CSS.
   * To create a new inventory dock: 
   * 
   * <pre class="display"><code class="language-javascript">MyGame.createInventoryDock({ 
   *   "id":"MyInventoryDock",
   *   "cssclasses":["custom"]
   * });
   * </code></pre>
   * 
   * For more information, see 
   * <a href="/doc/GUI_InventoryDocks.html">GUI Inventory Dock</a>.
	 * @method adventurejs.Display#createInventoryDock
	 * @param {Object} properties HTML ID, CSS classes, and verbs.
	 * @returns {Element} Returns the HTML element of the verb dock.
	 */
	p.createInventoryDock = function Display_createInventoryDock(properties)
  {
    console.warn('createInventoryDock',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);
    }
    dock.classList.add("game_inventorydock_container","ajs-dock-wrapper");
    if(properties.cssclasses) 
    {
      for(var item in properties.cssclasses)
      {
        dock.classList.add(properties.cssclasses[item]);
      }
    }
    if(properties.assetclasses) 
    {
      dock.dataset.assetclasses = properties.assetclasses.join(',');
    }
    if(properties.is) 
    {
      dock.dataset.is = properties.is.join(',');
    }
    if(properties.is_in)
    {
      dock.dataset.is_in = properties.is_in.join(',');
    }

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