var Layout = {
  REAL_WIDTH: 0,
  REAL_HEIGHT: 0,
  LEFT_OFFSET: 0,
  RIGHT_OFFSET: 0,
  TOP_OFFSET: 0,
  BOTTOM_OFFSET: 0,
  SCALE: 1,
  INVS: 1,
  CONTENT: document.getElementById('content'),
  RefreshSizes: function () {
    Layout.CONTENT = document.getElementById('content');

    if (window.screen.systemXDPI !== undefined
      && window.screen.logicalXDPI !== undefined
      && window.screen.systemXDPI > window.screen.logicalXDPI) {
      Layout.DPR = window.screen.systemXDPI / window.screen.logicalXDPI;
    } else if (window.devicePixelRatio !== undefined) {
      Layout.DPR = window.devicePixelRatio;
    } else {
      Layout.DPR = 1;
    }

    Layout.REAL_WIDTH = Layout.DPR * document.body.clientWidth;
    Layout.REAL_HEIGHT = Layout.DPR * document.body.clientHeight;
    Layout.BASE_WIDTH = 960;
    Layout.BASE_HEIGHT = 640;

    const scale = {
      x: Layout.REAL_WIDTH / Layout.BASE_WIDTH,
      y: Layout.REAL_HEIGHT / Layout.BASE_HEIGHT
    };

    Layout.SCALE = Math.min(scale.x, scale.y);
    Layout.INVS = 1 / Layout.SCALE;

    Layout.CENTER_X = Layout.BASE_WIDTH / 2;
    Layout.CENTER_Y = Layout.BASE_HEIGHT / 2;
    Layout.LEFT_OFFSET = -((Layout.REAL_WIDTH / 2) - Layout.CENTER_X * Layout.SCALE) * Layout.INVS;
    Layout.RIGHT_OFFSET = -Layout.LEFT_OFFSET + Layout.BASE_WIDTH;
    Layout.TOP_OFFSET = -((Layout.REAL_HEIGHT / 2) - Layout.CENTER_Y * Layout.SCALE) * Layout.INVS;
    Layout.BOTTOM_OFFSET = -Layout.TOP_OFFSET + Layout.BASE_HEIGHT;
    Layout.FULL_GAME_WIDTH = Layout.RIGHT_OFFSET - Layout.LEFT_OFFSET;
    Layout.FULL_GAME_HEIGHT = Layout.BOTTOM_OFFSET - Layout.TOP_OFFSET;
  },

  letterBoxView: function (view) {
    view.scale.set(Layout.SCALE);
    view.x = (Layout.REAL_WIDTH / 2) - (Layout.CENTER_X * Layout.SCALE);
    view.y = (Layout.REAL_HEIGHT / 2) - (Layout.CENTER_Y * Layout.SCALE);
  }
};

export default Layout;
