<!DOCTYPE html>
<html>
<head>
  <title>Doodle3D</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
  <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">

  <!-- Bootstrap -->
  <!--<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">-->
  <link href="css/normalize.css" rel="stylesheet" media="screen">
  <link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
  <link href="css/d3d_btns.css" rel="stylesheet" media="screen">
  <link href="css/settingsPopup.css" rel="stylesheet" media="screen">
  <style type="text/css">

    .debugContainer {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 500;
      display: none;
    }

    #debug_textArea {
      display:none;
    }

    .debugBtn {
      width: 25px;
      height: 25px;
      background-color: #03b;
      float:left;
    }

    .agentInfo {
      background: #fff;
      border: 1px #333 solid;
      display: none;
      float:left;
      opacity: .7;
    }

    .agentInfoToggle {
      display: block;
    }


  </style>
</head>
<body>
<div class="debugContainer">
  <div class="debugBtn"></div>
  <div class="agentInfo"></div>
</div>
<div id="landscape">
  <div class="container">
    <img class="bgTop" src="img/bg_top.png" />
    <img class="bgMiddle" src="img/bg_middle.png" />
    <img class="bgBottom" src="img/bg_bottom.png" />
    <div class="buttons">
      <img id="d3dlogo" src="img/logo_full.png" onclick="location.reload()">
      <div class="btn" id="btnNew"></div>
      <!--<img class="btn" id="btnNew" src="img/buttons/btnNew.png">-->
      <img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png">
      <img class="btn" id="btnNext" src="img/buttons/btnRight.png">
      <img class="btn" id="btnSave" src="img/buttons/btnSave.png">
      <div class="btn" id="btnOops"></div>
      <img class="btn" id="btnPrint" src="img/buttons/btnPrint.png">
      <img class="btn" id="btnStop" src="img/buttons/btnStop.png">
      <img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
      <img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
    </div>
  </div>
  <div id="drawAreaContainer">
    <canvas id="mycanvas"></canvas>
    <!--<svg id="svg">-->
      <!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
    <!--</svg>-->
    <canvas id="preview"></canvas>
    <div class="buttons cf">
      <div id="btnsUpDown">
        <div id="btnMoveUp"></div>
        <div id="btnMoveDown"></div>
      </div>
      <div id="btnsTurnLeftRight">
        <div id="btnTwistLeft"></div>
        <div id="btnTwistRight"></div>
      </div>
    </div>
  </div>
  <div id="debug_textArea" style="position:absolute; bottom: -600px; width: 800px; height: 600px;">
    <textarea rows="5" cols="115" id="textdump"></textarea>
  </div>
  <div id="contentOverlay">
    <div id="settingsContainer">
      <div id="settings">
        <header>
          <img src="img/settings_lable.png" alt="settings"/>
        </header>
        <div class="content">
          <div class="settings">henk</div>
          <div class="buttons">
            <div class="btnOK"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<div id="portrait">
  <img class="vertImage" src="img/bg_vertical2.png"/>
</div>

<script src="js/libs/jquery-1.8.3.min.js"></script>
<!--<script src="js/libs/bootstrap.min.js"></script>-->
<script src="js/settings.js"></script>
<script src="js/d3dServerInterfacing.js"></script>
<script src="js/buttonbehaviors.js"></script>
<script src="js/canvasDrawing_v01.js"></script>
<script src="js/previewRendering_v01.js"></script>
<script src="js/doodlePrintCode.js"></script>
<script src="js/gcodeGenerating_v01.js"></script>
<script src="js/init_layout.js"></script>
<!--<script src="js/draw_logic.js"></script>-->
<script type="text/javascript">

  // not using these at the moment
  $("#btnPrevious").css("opacity", "0.3");
  $("#btnNext").css("opacity", "0.3");
  $("#btnSave").css("opacity", "0.3");
  $("#btnInfo").css("opacity", "0.3");
//  $("#btnSettings").css("opacity", "0.3");

//  var debug = true;

  $(function() {
    console.log("ready");

    initLayouting();

    initDoodleDrawing();
    initPreviewRendering();

    initButtonBehavior();

    initSettingsPopup();

    $("#settings .settings").load("settings.html", function() {
      console.log("finished loading settings.html, now loading settings...");
      loadSettings();
    });

    if(debug) {
      console.log("debug mode");
      $("body").css("overflow", "auto");
      $("#debug_textArea").css("display", "block");
    }

//    $("#mycanvas").css("scale", 0.5);


    //debug
//    generate_gcode();

  })

</script>
</body>
</html>