code: function (controls, position, visible, parent) {
    // first we check if the controls object exists 
    if (typeof controls.object !== "object") {
      console.error("Your controls objet should have an object property pointing to an existing object.");
    }
  
    if (position === undefined || Object.values(GUI.POSITION).indexOf(position) === -1) position = ___DEFAULT_POSITION;
    if (visible === undefined) visible = true;
    if (parent === undefined) parent = document.body;
  
    // inheritance pattern 
    HUDelement.call(this, visible);
  
    /**
     * The dom element containing the GUI
     * @type {HTMLElement}
     * @public
     */
    this.dom = GUI.createDomElement();
    this.dom.appendChild(GUI.generateBaseTemplate());
  
    /**
     * The position of the GUI
     * @type {number}
     * @public 
     */
    this.position = ___DEFAULT_POSITION;
  
    /**
     * The parent element of the GUI
     * @type {HTMLElement}
     * @public
     */
    this.parent = parent;
  
    /**
     * Will hold all the used parameters
     * @type {Array.<string>}
     * @private
     */
    this.params = [];
  
    /**
     * The config object where controlled variables are stored 
     * @type {Object}
     * @private
     */
    this.configObject = controls.object;
  
    this.setPosition(position);
  
    this.parseControls(controls.controls, this.dom);
  
    this.parent.appendChild(this.dom);
  }
docs: top-right 
  Creates a graphical user interface with controls defined by the controls
  object. The GUI in then appended to the parent
  
  @param {object} controls the object in which controls are defined
  @param {?number} position the position of the hud, enum GUI.POSITION
  @param {?boolean} visible weither if the hud is closed or not
  @param {?HTMLElement} parent the container of the hud