//=============================================================================
// ConfigureRootElement.js
// Version: 1.0.0
//----------------------------------------------------------------------------
// Copyright (c) 2016 DeNA
// RPGMV 1.0.0
//=============================================================================

//=============================================================================
/*:
 * @plugindesc v1.00 任意のroot要素にゲーム本体の要素を追加できるようにするpluginです
 * @author DeNA
 *
 * @param ---General---
 * @default
 *
 * @param Root Element Id
 * @default
 *
 * @help
 * ============================================================================
 * Introduction
 * ============================================================================
 *
 * このpluginはgameの要素を追加するroot要素を指定できます。
 *
 *  # ConfigureRootElement.js
 *
 *  ## 使い方
 *  * GUI上からConfigureRootElement の"Root Element Id"に任意のDOMのidを指定する  * ことでゲームが表示される領域をコントロールすることができます。
 *
 *  ## 実装
 *
 *  ### RootElementの指定
 * 以下の部分を参照ください。
 *
 *  ```
 *     var Parameters = PluginManager.parameters('ConfigureRootElement');
 *     var RootElementId = String(Parameters['Root Element Id']);
 *     var GAME_ROOT_ELEMENT_NODE_KEY = 'ConfigureRootElement_Root_Element_Node_Key';
 *     try {
 *         if (RootElementId) {
 *             PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.getElementById(RootElementId));
 *         } else if (!(PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY) instanceof HTMLElement)) {
 *             PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
 *         }
 *     } catch (e) {
 *         console.info('Caution! set default root element, document.body.');
 *         PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
 *     }
 * ```
 *
 * ### 表示位置のコントロール
 *
 * * rpg_core.jsのGraphicsの以下の関数をオーバーライドすることで表示位置をコントロールしています。（rpg_core.jsに変更が入った場合はご注意ください。）
 * 	* Graphics.pageToCanvasX
 * 	* Graphics._createErrorPrinter
 *	* Graphics._createCanvas
 *	* Graphics._createVideo
 *	* Graphics._createUpperCanvas
 *	* Graphics._createModeBox
 *	* Graphics._createFontLoader
 *	* Graphics._disableTextSelection
 *	* Graphics._disableContextMenu
 *	* Graphics._requestFullScreen
 *
 * ============================================================================
 * Changelog
 * ============================================================================
 *
 * Version 1.00:
 * - Finished plugin!
 */
//=============================================================================

(function () {
  //-----------------------------------------------------------------------------
  // setup

  var Parameters = PluginManager.parameters("ConfigureRootElement");
  var RootElementId = String(Parameters["Root Element Id"]);
  var GAME_ROOT_ELEMENT_NODE_KEY = "ConfigureRootElement_Root_Element_Node_Key";
  try {
    if (RootElementId) {
      PluginManager.setParameters(
        GAME_ROOT_ELEMENT_NODE_KEY,
        document.getElementById(RootElementId)
      );
    } else if (
      !(
        PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY) instanceof
        HTMLElement
      )
    ) {
      PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
    }
  } catch (e) {
    console.info("Caution! set default root element, document.body.");
    PluginManager.setParameters(GAME_ROOT_ELEMENT_NODE_KEY, document.body);
  }

  //-----------------------------------------------------------------------------
  // override Graphics

  /**
   * Converts an x coordinate on the page to the corresponding
   * x coordinate on the canvas area.
   *
   * @static
   * @method pageToCanvasX
   * @param {Number} x The x coordinate on the page to be converted
   * @return {Number} The x coordinate on the canvas area
   */
  Graphics.pageToCanvasX = function (x) {
    if (this._canvas) {
      var left = this._canvas.getBoundingClientRect().left;
      return Math.round((x - left) / this._realScale);
    } else {
      return 0;
    }
  };

  /**
   * @static
   * @method _createErrorPrinter
   * @private
   */
  Graphics._createErrorPrinter = function () {
    this._errorPrinter = document.createElement("p");
    this._errorPrinter.id = "ErrorPrinter";
    this._updateErrorPrinter();
    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
      this._errorPrinter
    );
  };

  /**
   * @static
   * @method _createCanvas
   * @private
   */
  Graphics._createCanvas = function () {
    this._canvas = document.createElement("canvas");
    this._canvas.id = "GameCanvas";
    this._updateCanvas();
    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
      this._canvas
    );
  };

  /**
   * @static
   * @method _createVideo
   * @private
   */
  Graphics._createVideo = function () {
    this._video = document.createElement("video");
    this._video.id = "GameVideo";
    this._video.style.opacity = 0;
    this._updateVideo();
    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
      this._video
    );
  };

  /**
   * @static
   * @method _createUpperCanvas
   * @private
   */
  Graphics._createUpperCanvas = function () {
    this._upperCanvas = document.createElement("canvas");
    this._upperCanvas.id = "UpperCanvas";
    this._updateUpperCanvas();
    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(
      this._upperCanvas
    );
  };

  /**
   * @static
   * @method _createModeBox
   * @private
   */
  Graphics._createModeBox = function () {
    var box = document.createElement("div");
    box.id = "modeTextBack";
    box.style.position = "absolute";
    box.style.left = "5px";
    box.style.top = "5px";
    box.style.width = "119px";
    box.style.height = "58px";
    box.style.background = "rgba(0,0,0,0.2)";
    box.style.zIndex = 9;
    box.style.opacity = 0;

    var text = document.createElement("div");
    text.id = "modeText";
    text.style.position = "absolute";
    text.style.left = "0px";
    text.style.top = "41px";
    text.style.width = "119px";
    text.style.fontSize = "12px";
    text.style.fontFamily = "monospace";
    text.style.color = "white";
    text.style.textAlign = "center";
    text.style.textShadow = "1px 1px 0 rgba(0,0,0,0.5)";
    text.innerHTML = this.isWebGL() ? "WebGL mode" : "Canvas mode";

    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(box);
    box.appendChild(text);

    this._modeBox = box;
  };

  /**
   * @static
   * @method _createFontLoader
   * @param {String} name
   * @private
   */
  Graphics._createFontLoader = function (name) {
    var div = document.createElement("div");
    var text = document.createTextNode(".");
    div.style.fontFamily = name;
    div.style.fontSize = "0px";
    div.style.color = "transparent";
    div.style.position = "absolute";
    div.style.margin = "auto";
    div.style.top = "0px";
    div.style.left = "0px";
    div.style.width = "1px";
    div.style.height = "1px";
    div.appendChild(text);
    PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY).appendChild(div);
  };

  /**
   * @static
   * @method _disableTextSelection
   * @private
   */
  Graphics._disableTextSelection = function () {
    var body = PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY);
    body.style.userSelect = "none";
    body.style.webkitUserSelect = "none";
    body.style.msUserSelect = "none";
    body.style.mozUserSelect = "none";
  };

  /**
   * @static
   * @method _disableContextMenu
   * @private
   */
  Graphics._disableContextMenu = function () {
    var elements = PluginManager.parameters(
      GAME_ROOT_ELEMENT_NODE_KEY
    ).getElementsByTagName("*");
    var oncontextmenu = function () {
      return false;
    };
    for (var i = 0; i < elements.length; i++) {
      elements[i].oncontextmenu = oncontextmenu;
    }
  };

  /**
   * @static
   * @method _requestFullScreen
   * @private
   */
  Graphics._requestFullScreen = function () {
    var element = PluginManager.parameters(GAME_ROOT_ELEMENT_NODE_KEY);
    if (element.requestFullScreen) {
      element.requestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  };
})();