(function(){
  pushToScripts();
  pushToPages();
  var headContents=`
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
    <meta charset="UTF-8">
    <title>︎ </title>
    <style>
      *{
        user-select:none;
        padding:0;
        margin:0;
        -moz-user-select:none;
        -webkit-user-select:none;
      }
      
      :root{
        --blackbg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background-color:rgba(22,22,22,1);' width='4' height='3'><foreignObject width='4' height='3'></foreignObject></svg>");
        --three-by-four-wf:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='240'><line x1='0' y1='0' x2='320' y2='240' stroke='blue'/><line x1='0' y1='240' x2='320' y2='0' stroke='blue'/><line x1='0' y1='0' x2='320' y2='0' stroke='blue'/><line x1='0' y1='240' x2='320' y2='240' stroke='blue'/><line x1='0' y1='0' x2='0' y2='240' stroke='blue'/><line x1='320' y1='0' x2='320' y2='240' stroke='blue'/></svg>");
      }

      html{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:black;
      }
      
      #mainContainer{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
      }
      
      #renderImage{
        position:fixed;
        left:50%;
        top:0;
        height:100%;
        width:auto;
        transform:translate(-50%,0);
        background-color:rgba(240,240,240,1);
        background-position:top left;
        background-repeat:no-repeat;
        background-size:cover;
        image-rendering:pixelated;
      }
      
      @media(max-aspect-ratio:4/3){
        #renderImage{
          width:100%;
          height:auto;
          left:0;
          top:50%;
          transform:translate(0,-50%);
        }
      }
      
      #joystickContainer{
        position:absolute;
        left:0;
        top:calc(50vh - 100px);
        width:200px;
        height:200px;
        border-width:1px;
        border-color:gray;
        border-style:dashed;
        opacity:0.333;
        background-color:lightgray;
        display:none;
      }
      
      #buttonsContainer{
        position:absolute;
        right:0;
        top:calc(50vh - 100px);
        width:200px;
        height:200px;
        border-width:1px;
        border-color:gray;
        border-style:dashed;
        opacity:0.333;
        display:none;
      }
      
      @media(max-aspect-ratio:4/3){
        #joystickContainer,#buttonsContainer{
          bottom:0;
          top:auto;
        }
      }
      
      #joystickStick{
        position:absolute;
        width:100px;
        height:100px;
        left:100px;
        top:100px;
        background-color:gray;
        border-radius:100%;
        transform:translate(-50%,-50%);
        pointer-events:none;
        touch-action:none;
        opacity:0.5;
      }
      
      #squareAndTriangleButtonsContainer{
        position:absolute;
        left:-6%;
        top:18%;
        width:80%;
        height:33%;
        background-color:lightgray;
        transform:rotate(-45deg)scale(0.95);
        border-top-left-radius: 50% calc(50% * (80 / 33));
        border-top-right-radius: 50% calc(50% * (80 / 33));
        border-bottom-left-radius: 50% calc(50% * (80 / 33));
        border-bottom-right-radius: 50% calc(50% * (80 / 33));
        border-style:dashed;
        border-color:gray;
        border-width:1px;
      }
      #squareButton{
        position:absolute;
        left:0;
        top:0;
        width:calc(100% * (33 / 80));
        height:100%;
        border-radius:50%;
        background-color:gray;
      }
      #squareSymbol{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:lightgray;
        transform:rotate(45deg)scale(0.55);
      }
      #triangleButton{
        position:absolute;
        right:0;
        top:0;
        width:calc(100% * (33 / 80));
        height:100%;
        border-radius:50%;
        background-color:gray;
      }
      #triangleSymbol{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:lightgray;
        clip-path:polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
        transform:rotate(45deg)scale(0.7)translate(0%,-5%);
      }
      
      #crossAndCircleButtonsContainer{
        position:absolute;
        right:-6%;
        bottom:18%;
        width:80%;
        height:33%;
        background-color:lightgray;
        transform:rotate(-45deg)scale(0.95);
        border-top-left-radius: 50% calc(50% * (80 / 33));
        border-top-right-radius: 50% calc(50% * (80 / 33));
        border-bottom-left-radius: 50% calc(50% * (80 / 33));
        border-bottom-right-radius: 50% calc(50% * (80 / 33));
        border-style:dashed;
        border-color:gray;
        border-width:1px;
      }
      #crossButton{
        position:absolute;
        left:0;
        top:0;
        width:calc(100% * (33 / 80));
        height:100%;
        border-radius:50%;
        background-color:gray;
      }
      #crossSymbol0{
        position:absolute;
        left:45%;
        top:0;
        width:10%;
        height:100%;
        background-color:lightgray;
        transform:scale(0.7);
      }
      #crossSymbol1{
        position:absolute;
        left:0;
        top:45%;
        width:100%;
        height:10%;
        background-color:lightgray;
        transform:scale(0.7);
      }
      
      #circleButton{
        position:absolute;
        right:0;
        top:0;
        width:calc(100% * (33 / 80));
        height:100%;
        border-radius:50%;
        background-color:gray;
      }
      #circleSymbol{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        border-radius:50%;
        background-color:lightgray;
        transform:scale(0.63);
      }
    </style>
  `;
  var bodyContents=`
    <datalist id="tempData"></datalist>
    <div id="mainContainer">

      <img id="renderImage" draggable="false" ondragstart="return false" style="touch-action:none;">
      
      <div id="joystickContainer" class="mobileControls">
        <div id="joystickStick" class="mobileControls">
        </div>
      </div>
      
      <div id="buttonsContainer" class="mobileControls">
        <div id="squareAndTriangleButtonsContainer">
          <div id="squareButton">
            <div id="squareSymbol"></div>
          </div>
          <div id="triangleButton">
            <div id="triangleSymbol"></div>
          </div>
        </div>
        <div id="crossAndCircleButtonsContainer">
          <div id="crossButton">
            <div id="crossSymbol0"></div>
            <div id="crossSymbol1"></div>
          </div>
          <div id="circleButton">
            <div id="circleSymbol"></div>
          </div>
        </div>
      </div>

      <div id="debugStatsContainer"></div>



      <div id="editorUI">
        <style>
          form{
            position:fixed;
            background-color:rgba(250,250,250,0.5);
            right:0;
            bottom:0;
            width:100%;
          }
          form>*{
            pointer-events:auto;
          }
          input[type=range]{
            width:80%;
          }
          input[type=range]::after{
            content:attr(value);
            position:absolute;
            right:0;
          }
          label{
            margin:2px;
            background-color:lightgray;
          }
          #showForm{
            position:fixed;
            top:0;
            right:0;
          }
          #showForm:not(:checked)~form{
            display:none;
          }
          #showForm:not(:checked)~#debugStatsContainer{
            display:none;
          }
        </style>
        <input id="showForm" type="checkbox">
        <form>
          <br>
          <label>collision<input id="collisionVoxelModeRadio" type="radio" name="physicsVoxelType" checked></label><!--
          --><label>slope<input id="slopeVoxelModeRadio" type="radio" name="physicsVoxelType"></label>
          &nbsp;&nbsp;
          <label>camera0<input id="camera0ModeRadio" type="radio" name="cameraMode" checked></label><!--
          --><label>camera1<input id="camera1ModeRadio" type="radio" name="cameraMode"></label>
          &nbsp;&nbsp;
          <label>wireframes visible<input id="wireframesVisibleToggle" type="checkbox" checked></label>
          <br><input id="confirmPhysicsVoxelButton" type="button" value="confirm">
          <br><input id="deleteLastPhysicsVoxelButton" type="button" value="delete the last one">
          <br><input id="physicsVoxelPositionXSlider" type="range" min="-1024" max="1024">x position
          <br><input id="physicsVoxelPositionYSlider" type="range" min="-1024" max="1024">y position
          <br><input id="physicsVoxelPositionZSlider" type="range" min="-1024" max="1024">z position
          <br><input id="physicsVoxelWidthSlider" type="range" min="0" max="1024" value="100">width
          <br><input id="physicsVoxelHeightSlider" type="range" min="0" max="1024" value="100">height
          <br><input id="physicsVoxelDepthSlider" type="range" min="0" max="1024" value="100">depth
          <br><input id="printPhysicsVoxelButton" type="button" value="print to console">
          <br><label><input id="compressOutputToggle" type="checkbox">compress output<input id="compileButton" type="button" value="compile">
        </form>
      </div>
    </div>
`;
  
  document.head.innerHTML=headContents;
  document.body.innerHTML=bodyContents;

})();