<!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="icon" type="image/ico" href="./favicon_alt.ico"/>
  <link rel="apple-touch-icon-precomposed" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png"/>
  <link rel="apple-touch-icon-precomposed" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" sizes="144x144" />

  <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

  <!--link href="css/styles.css" rel="stylesheet" media="screen"-->
  <!--link href="css/debug.css" rel="stylesheet" media="screen"-->
  <link href="css/styles.min.css" rel="stylesheet" media="screen">
  <link href="css/debug.min.css" rel="stylesheet" media="screen">

</head>
<body>
<div id="landscape" class="clearfix">

  <!-- background images -->
  <div class="bgContainer">
    <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>

  <!-- left panel -->
  <div class="leftpanel shadowright">
    <div class='sidebutton shadowright'></div>
    <img class="btnNew btn" src="img/buttons/btnNew.png" /><br/>
    <div class="btnsPrevNext" style="text-align:center">
      <img class="btnPrevious btn disabled" src="img/buttons/btnLeft.png">
      <img class="btnNext btn disabled" src="img/buttons/btnRight.png">
      <!-- <div id="txtSketch"></div> -->
    </div>
    <img class="btnSave btn" src="img/buttons/btnSave.png" /><br/>
    <img class="btnOops btn" src="img/buttons/btnOops.png" /><br/>
  </div>

  <!-- right panel -->
  <div class="rightpanel shadowleft">
    <!--<div class='sidebutton shadowleft'></div>-->
    <img class="btnPrint btn clearfix" src="img/buttons/btnPrint.png" />
    <img class="btnStop btn clearfix disabled" src="img/buttons/btnStop.png" />

    <div class="progressbarCanvasContainerParent">
      <div id="progressbarCanvasContainer">
        <canvas id="progressbarCanvas" width="93" height="82"></canvas>
      </div>
    </div>
    <div class="thermometerContainerParent">
      <div id="thermometerContainer">
        <canvas id="thermometerCanvas" width="90" height="120"></canvas>
      </div>
    </div>
    <div class="btnsSettingsInfo">
      <img class="btnSettings btn" src="img/buttons/btnSettings.png">
      <img class="btnInfo btn" src="img/buttons/btnInfo.png">
    </div>

  </div>

  <div id="message"></div>

  <!-- center panel -->
  <div class="centerpanel">
    <div class="logopanel">
      <div class="d3dlogo" onclick="location.reload()"></div>
    </div>
    <div class="drawareacontainer">
      <div id="canvasContainers">
        <div id="mycanvasContainer">
          <canvas id="mycanvas"></canvas>
        </div>
        <div id="previewContainer">
          <canvas id="preview"></canvas>
        </div>
      </div>
      <canvas id="preview_tmp"></canvas>
      <div id="verticalShapes">
        <div><img class="verticalshape straight" src="img/vertical_shape_icons/straight.png" /></div>
        <div><img class="verticalshape diverging" src="img/vertical_shape_icons/diverging.png" /></div>
        <div><img class="verticalshape converging" src="img/vertical_shape_icons/converging.png" /></div>
        <div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
      </div>
    </div>
    <div class="bottompanel">
      <div class="manipulationBtns clearfix">
        <div id="btnsUpDown">
          <img class="manipulationBtn" id="btnMoveUp" src="img/buttons/btnUp.png" />
          <img class="manipulationBtn" id="btnMoveDown" src="img/buttons/btnDown.png" />
        </div>
        <div id="btnsTurnLeftRight">
          <img class="manipulationBtn" id="btnTwistLeft" src="img/buttons/btnTurnLeft.png" />
          <img class="manipulationBtn" id="btnTwistRight"  src="img/buttons/btnTurnRight.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="debug_textArea">
    <!-- <textarea rows="5" cols="60" id="textdump"></textarea> -->
    <button onclick="settingsWindow.downloadGcode()">Download gcode</button>
  </div>
  <div id="debug_display">
  </div>
  <div id="contentOverlay">
    <div id="settings">
      <div class="toppanel">
        <div class="settingsLabelContainer">
          <img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
        </div>
      </div>
      <div class="bottompanel">
        <div class="settingsContainer"></div>
        <div class="right">
          <div class="btnContainer">
            <img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="portrait">
  <img class="vertImage" src="img/bg_vertical.png"/>
</div>
<div id="helpContainer"></div>
<script src="js/libs/jquery-1-9-1.min.js"></script>
<script src="js/libs/jquery-cookie.min.js"></script>
<!--<script src="js/jquery.scrollTo-min.js"></script>-->
<!--<script src="js/libs/imagesloaded-pkgd.min.js"></script>-->
<!--<script src="../js_src/libs/jquery-joyride-2-1.js"></script>-->
<script src="js/libs/jquery-joyride-2-1.min.js"></script>
<script src="js/libs/jquery-coolfieldset.min.js"></script>
<script src="js/libs/FileSaver.min.js"></script>
<!--<script src="js/doodle3d-client.js"></script>-->
<script src="js/doodle3d-client.min.js"></script>

<!-- DEBUG -->
<!--
<script src="../js_src/SettingsWindow.js"></script>
<script src="../js_src/UpdatePanel.js"></script>
<script src="../js_src/d3dServerInterfacing.js"></script>
<script src="../js_src/verticalShapes.js"></script>
<script src="../js_src/buttonbehaviors.js"></script>
<script src="../js_src/canvasDrawing.js"></script>
<script src="../js_src/previewRendering.js"></script>
<script src="../js_src/gcodeGenerating.js"></script>
<script src="../js_src/init_layout.js"></script>
<script src="../js_src/Printer.js"></script>
<script src="../js_src/Progressbar.js"></script>
<script src="../js_src/Thermometer.js"></script>
<script src="../js_src/utils.js"></script>
<script src="../js_src/sketches.js"></script>
<script src="../js_src/Help.js"></script>
<script src="../js_src/sidebar.js"></script>
<script src="../js_src/Message.js"></script>
<script src="../js_src/main.js"></script>
-->

</body>
</html>