- interfaces scales vertically

- on tablets and smartphones it automatically fills the width
- doesn't *do* much yet
- drawing doesn't scale to the viewport of the draw area yet
- preview on the right doesn't either.

css/d3d_btns.css

@@ -0,0 +1,105 @@
+/*.logo {
+	background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
+}
+
+@media screen and (max-width: 500px) {
+	.logo {
+		background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
+	}
+}*/
+
+img {
+	z-index: 5;
+}
+
+/*
+
+	INTERFACE BUTTONS
+
+*/
+
+#btnNew {
+	left: 10px;
+	top: 10px;
+}
+
+#btnPrevious {
+	left: 20px;
+	top: 180px;
+	z-index: 10;
+}
+
+#btnNext {
+	left: 126px;
+	top: 186px;
+	z-index: 10;
+}
+
+#btnSave {
+	left: 20px;
+	top: 240px;
+}
+
+#btnOops {
+	left: 20px;
+/*	bottom: 150px;*/
+	top: 450px;
+}
+
+#btnPrint {
+	right: 15px;
+	top: 15px;
+}
+
+#btnStop {
+	right: 20px;
+	top: 200px;
+}
+
+
+
+/*
+
+	DRAW AREA
+
+*/
+
+
+#drawAreaContainer > .buttons {
+	margin: 5px;
+}
+
+#btnsUpDown {
+	position: absolute;
+	right: 200px;	
+}
+
+#btnsTurnLeftRight {
+	position: absolute;
+	right: 20px;	
+}
+
+#btnUp {
+}
+
+#btnDown {
+	
+}
+
+#btnTurnLeft {
+	
+}
+
+#btnTurnRight {
+	
+}
+
+.btn {
+	position: absolute;
+	-webkit-user-select: none;
+	cursor: hand;
+}
+
+
+
+

css/fixedPosInterface.css

@@ -0,0 +1,201 @@
+body {
+/*   This chops off any overhanging divs */
+/*  overflow:hidden;	*/
+}
+
+
+.button {
+	display: table;
+}
+
+.big {
+	background: #a6e19c;
+	border: 1px solid #222;
+	height: 64px;
+	width: 64px;
+	display: table-cell;
+	vertical-align: middle;
+	text-align: center;
+	border-radius: 32px;
+	-moz-border-radius: 32px;
+	-webkit-border-radius: 32px;
+}
+.small {
+	background: #a3d5f7;
+	border: 1px solid #222;
+	height: 40px;
+	width: 40px;
+	display: table-cell;
+	vertical-align: middle;
+	text-align: center;
+	border-radius: 20px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+}
+
+#logo {
+	position: absolute;
+	/*left: 50%;*/
+	/*margin-left: -220px;*/
+	top: 20px;
+	left: 315px;
+	width: 400px;
+	height: 140px;
+}
+
+ha {
+	background: #f5f5f5 url('../images/bg.jpg') no-repeat;
+}
+
+  /* Portrait */
+@media screen and (orientation:portrait) {
+  body {
+/*    background-color: #08F;*/
+  }
+
+  #landscape {
+  	display: none;
+  }
+  #portrait {
+  	display: block;
+  }
+}
+  /* Landscape */
+@media screen and (orientation:landscape) {
+  body {
+/*    background-color: #8F0;*/
+  }
+
+  #landscape {
+  	display: block;
+  }
+  #portrait {
+  	display: none;
+  }
+}
+
+.container {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  border: 2px solid #333;
+  width: 1024px;
+	min-height: 500px;
+	max-height: 768px;
+	height: 100%;
+/*  height: 768px;*/
+}
+
+#d3dlogo {
+	position: absolute;
+	top:  15px;
+	left: 31%;
+  content:url("../img/logo_full.png");
+}
+
+#svg {
+  cursor: hand;
+}
+
+#drawAreaContainer {
+  position: absolute;
+  top: 193px;
+  left: 193px;
+  width: 650px;
+  height: 450px;
+  background-color: white;
+  border: 4px solid black;
+  border-radius: 15px;
+}
+
+#preview {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+
+.vertImage {
+	margin:  0px;
+	padding: 0px;
+  border: 2px solid #f0f;
+  max-width: 100%;
+  height: auto;
+  width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: -5;
+}
+.bgMiddle {
+	display: block;
+	position: absolute;
+	top: 30%;
+	left: 0px;
+	z-index: -5;
+}
+.bgBottom {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	z-index: -5;
+}
+
+@media screen and (max-height: 700px) {
+	.bgMiddle {
+		display: none;
+	}
+
+	#d3dlogo {
+    content:url("../img/logo_small.png");
+    margin-top:  7px;
+  }
+
+  #btnsUpDown, #btnsTurnLeftRight {
+  	zoom: 0.96;
+  }
+
+	#btnPrint {
+		right: 10px;
+		top:  10px;
+	}
+
+	.btn {
+		zoom: 0.96;
+	}
+
+	#drawAreaContainer {
+	  top: 128px;
+	  height: 350px;
+	}
+}
+
+@media screen and (max-height: 500px) {
+	#d3dlogo {
+		zoom: 0.8;
+		left: 34%;
+  }
+
+  #btnsUpDown, #btnsTurnLeftRight {
+  	zoom: 0.9;
+  }
+
+	#btnPrint {
+		right: 6px;
+	}
+
+	.btn {
+		zoom: 0.9;
+	}
+
+	#drawAreaContainer {
+	  top: 110px;
+	  height: 350px;
+	}
+}
+
+
+

css/normalize.css

@@ -0,0 +1,534 @@
+/*! normalize.css v1.0.2 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.67em;
+    margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+
+q {
+    quotes: none;
+}
+
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ * 3. Removes excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
+}
+
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}

fixedPosInterface01_v02.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Bootstrap 101 Template</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" />
+  <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">
+  <style type="text/css">
+
+    .debugContainer {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      z-index: 500;
+    }
+
+    .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()">
+      <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">
+      <img class="btn" id="btnOops" src="img/buttons/btnOops.png">
+      <img class="btn" id="btnPrint" src="img/buttons/btnPrint.png">
+      <img class="btn" id="btnStop" src="img/buttons/btnStop.png">
+    </div>
+  </div>
+  <div id="drawAreaContainer">
+    <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" width="150" height="450"></canvas>
+    <div class="buttons cf">
+      <div id="btnsUpDown">
+        <img id="btnUp" src="img/buttons/btnUp.png">
+        <img id="btnDown" src="img/buttons/btnDown.png">
+      </div>
+      <div id="btnsTurnLeftRight">
+        <img id="btnTurnLeft" src="img/buttons/btnTurnLeft.png">
+        <img id="btnTurnRight" src="img/buttons/btnTurnRight.png">
+      </div>
+    </div>
+  </div>
+</div>
+<div id="portrait">
+  <img class="vertImage" src="img/bg_vertical.jpg"/>
+</div>
+
+<script src="js/jquery-1.8.3.min.js"></script>
+<!--<script src="js/bootstrap.min.js"></script>-->
+<script src="js/init_layout.js"></script>
+<script src="js/draw_logic.js"></script>
+<script type="text/javascript">
+</script>
+</body>
+</html>

js/draw_logic.js

@@ -0,0 +1,275 @@
+var oopsTimer;
+var dragging;
+var path;
+var svg;
+var preview;
+var previewCtx;
+
+var svgPathRegExp = /[LM]\d* \d*/ig;
+var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
+
+var svgTopLeftCoords = [];
+function initDrawing() {
+
+	path = document.getElementById('path');
+	svg = document.getElementById('svg');
+
+  svgTopLeftCoords[0] = $("#drawAreaContainer").css("left").match(/[0-9]/g).join("");
+  svgTopLeftCoords[1] = $("#drawAreaContainer").css("top").match(/[0-9]/g).join("");
+
+  svg.addEventListener('mousedown',onMouseDown,false);
+	svg.addEventListener('mousemove',onMouseMove,false);
+	svg.addEventListener('mouseup',onMouseUp,false);
+	svg.addEventListener('touchstart',onTouchDown,false);
+	svg.addEventListener('touchmove',onTouchMove,false);
+	btnNew.addEventListener('mousedown',clear,false);
+	btnNew.addEventListener('touchstart',clear,false);
+	btnOops.addEventListener('touchstart',startOops,false);
+	btnOops.addEventListener('touchend',stopOops,false);
+	btnOops.addEventListener('mousedown',startOops,false);
+	btnOops.addEventListener('mouseup',stopOops,false);
+	btnPrint.addEventListener('mousedown',print,false);
+	btnPrint.addEventListener('touchstart',print,false);
+	btnSave.addEventListener('mousedown',print,false);
+	btnSave.addEventListener('touchstart',print,false);
+
+	document.body.addEventListener('touchmove',prevent,false);
+	
+	preview = document.getElementById('preview');
+	previewCtx = preview.getContext('2d');
+	redrawPreview();
+};
+
+function prevent(e) {
+	e.preventDefault();
+}
+
+function clear() {
+	path.attributes.d.nodeValue = "M0 0";
+	redrawPreview();
+}
+
+function startOops() {
+	oopsTimer = setInterval("oops()",1000/30);
+}
+
+function stopOops() {
+	clearInterval(oopsTimer);
+}
+
+function oops() {
+	str = path.attributes.d.nodeValue;
+	n = str.lastIndexOf(" L");
+	if(n != -1) {
+		path.attributes.d.nodeValue = str.substr(0,n);	
+		redrawPreview();
+		//requestAnimationFrame(updatePreview);
+	}
+}
+
+function moveTo(x,y) {
+	if (path.attributes.d.nodeValue=="M0 0") {
+		path.attributes.d.nodeValue = "M" + x + " " + y;
+	} else {
+		path.attributes.d.nodeValue += " M" + x + " " + y;
+	}
+	updatePreview(x,y,true)
+	//redrawPreview();
+}
+
+function lineTo(x,y) {
+	path.attributes.d.nodeValue += " L" + x + " " + y;
+	//updatePreview();
+	//requestAnimationFrame(updatePreview);
+	updatePreview(x,y,false);
+}
+
+function onTouchDown(e) {
+	var x = e.touches[0].pageX - svgTopLeftCoords[0];
+	var y = e.touches[0].pageY - svgTopLeftCoords[1];
+	moveTo(x,y);	
+}
+
+function onTouchMove(e) {
+	e.preventDefault();
+  var x = e.touches[0].pageX - svgTopLeftCoords[0];
+	var y = e.touches[0].pageY - svgTopLeftCoords[1];
+	lineTo(x,y);
+}
+
+function onMouseDown(e) {
+	dragging = true;
+	moveTo(e.offsetX,e.offsetY);
+}
+
+function onMouseMove(e) {
+	if (!dragging) return;
+	lineTo(e.offsetX,e.offsetY);
+}
+
+function onMouseUp(e) {
+	dragging = false;
+}
+
+function print(e) {
+
+	output = path.attributes.d.nodeValue;
+	console.log(output);
+
+	output = output.split("M").join("\n");
+	output = output.split(" L").join("_");
+	output = output.split(" ").join(",");
+	output = output.split("_").join(" ");
+
+	output = "\nBEGIN\n" + output + "\n\nEND\n";
+
+	$.post("/doodle3d.of", { data:output }, function(data) {
+	 	btnPrint.disabled = false;
+	});
+}
+
+var numLayers 	= 100; //50
+var globalScale = 0.20;			// global scale of preview
+var globalAlpha = 0.20;			// global alpha of preview
+var scaleY 			= 0.4; 			// additional vertical scale per path for 3d effect
+var strokeWidth = 2; //4; 
+var rStep 			= Math.PI/40; //Math.PI/40; //
+var yStep 			= 3; //6;
+var svgWidth 		= 650; //parseInt($(svg).css("width"));
+var svgHeight 	= 450; //parseInt($(svg).css("height"));
+var layerCX			= svgWidth/2*globalScale;
+var layerCY			= svgHeight/2*globalScale;
+var layerOffsetY= 360;
+var prevX 			= 0;
+var prevY 			= 0;
+var highlight		= true; //highlight bottom, middle and top layers
+
+function redrawPreview() {
+	var svgData = path.attributes.d.nodeValue;
+	var linesRaw = svgData.match(svgPathRegExp);
+  console.log("svgData: " + svgData);
+  console.log("linesRaw: " + linesRaw);
+  console.log("");
+//  console.log("");
+	var lines = new Array();
+	for(var i=0;i<linesRaw.length;i++) {
+		var lineRaw = linesRaw[i];
+		var results = svgPathParamsRegExp.exec(lineRaw);
+  console.log("results: " + results);
+  console.log("");
+		results[2] = parseInt(results[2])*globalScale; // posX
+		results[3] = parseInt(results[3])*globalScale; // posY
+		lines.push(results);
+	}
+  console.log("");
+  console.log("");
+
+	var y = 0;
+	var r = 0;
+	
+	//preview.width = preview.width;
+	previewCtx.clearRect (0,0,preview.width,preview.height);
+	previewCtx.lineWidth = strokeWidth;
+	previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
+	
+	for(var i=0;i<numLayers;i++) {
+		
+		if(i == 0 || i == numLayers/2 || i == numLayers-1){
+  		previewCtx.globalAlpha = 1;
+		} else {
+  		previewCtx.globalAlpha = globalAlpha;
+		}
+			
+		previewCtx.save();
+		
+		previewCtx.translate(layerCX,layerOffsetY+layerCY+y);		
+		previewCtx.scale(1, scaleY)
+		previewCtx.rotate(r);	
+		previewCtx.translate(-layerCX,-layerCY);
+		
+		previewCtx.beginPath();
+		for(var j=0;j<lines.length;j++) {
+			var line = lines[j];
+			var command = line[1];
+			var posX = line[2];
+			var posY = line[3];
+			if(command == "M") previewCtx.moveTo(posX,posY);
+			else if(command == "L") previewCtx.lineTo(posX,posY);	
+		}
+		previewCtx.stroke();
+		
+		y -= yStep;
+		r += rStep;
+		previewCtx.restore();
+	}
+	previewCtx.globalAlpha = globalAlpha;
+}
+function updatePreview(x,y,move) {
+	x *= globalScale;
+	y *= globalScale;
+	
+	if(!move) {
+		var tY = 0;
+		var r = 0;
+		
+		if(!highlight) {
+			previewCtx.globalAlpha = globalAlpha;
+			previewCtx.beginPath(); 
+		}
+		for(var i=0;i<numLayers;i++) {
+			
+			if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
+				previewCtx.stroke();
+	  		previewCtx.globalAlpha = 1;
+	  		previewCtx.beginPath(); 
+			}
+			
+			previewCtx.save();
+			previewCtx.translate(layerCX,layerOffsetY+layerCY+tY);		
+			previewCtx.scale(1, scaleY)
+			previewCtx.rotate(r);	
+			previewCtx.translate(-layerCX,-layerCY);
+			
+			previewCtx.moveTo(prevX,prevY);	
+			previewCtx.lineTo(x,y);	
+			
+			tY -= yStep;
+			r += rStep;
+			previewCtx.restore();
+			
+			if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
+				previewCtx.stroke();
+				previewCtx.globalAlpha = globalAlpha;
+				previewCtx.beginPath(); 
+			}
+		}
+	}
+	previewCtx.stroke();
+	prevX = x;
+	prevY = y;
+}
+
+/*(function() {
+    var lastTime = 0;
+    var vendors = ['webkit', 'moz'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame =
+          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());*/

js/init_layout.js

@@ -0,0 +1,154 @@
+var imgDims = [320, 320]; // width and height of image
+
+function doClientAndOrientationStuff() {
+  console.log("doClientAndOrientationStuff");
+
+  $(".agentInfo").text("");
+
+  /*
+  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
+    if (window.orientation == -90 || window.orientation == 90) {
+      // landscape
+//      $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
+    } else {
+      // portrait
+      $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
+    }
+  }
+  return;
+  //*/
+
+  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
+    if (window.orientation == -90 || window.orientation == 90) {
+      // landscape
+
+      //      var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
+      var ww = 0; //get proper width
+      if (window.screen.availWidth) {
+        ww = window.screen.availWidth;
+      } else if($(window).width()) {
+        ww = $(window).width();
+      } else {
+
+      }
+
+      //      ww = 480;
+
+      var mw = imgDims[0]; // min width of site
+      //*
+      if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
+        var mw = imgDims[1]; // in landscape: min-width is image width
+      }
+      //*/
+      var ratio =  ww / mw; //calculate ratio
+      $('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=yes,width='+mw);
+      if( ww < mw){ //smaller than minimum size
+//        $(".colmask").css("background-color", "#ff0");
+        //        $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
+        //        $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
+      }else{ //regular size
+//        $(".colmask").css("background-color", "#0ff");
+        //        $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
+      }
+
+      $(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
+      $(".agentInfo").append("ratio: " + ratio + "<br/>");
+      $(".agentInfo").append("<br/>");
+    } else {
+      // portrait
+//      $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
+      $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
+    }
+
+  } else {
+    //      console.log("else");
+    $(".colmask").css("background-color", "#f80");
+
+  }
+
+  $(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
+  $(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
+  $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
+  $(".agentInfo").append("<br/>");
+  $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
+  $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
+  $(".agentInfo").append("<br/>");
+  $(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
+  $(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
+  $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
+  $(".agentInfo").append("<br/>");
+  $(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
+};
+
+function doOnOrientationChange() {
+  console.log("doOnOrientationChange");
+  doClientAndOrientationStuff();
+
+  //    switch(window.orientation) {
+  //      case -90:
+  //      case 90:
+  //        alert('landscape');
+  //        break;
+  //      default:
+  //        alert('portrait');
+  //        break;
+  //    }
+}
+
+function doOnResize() {
+  //    console.log("doOnResize() >> " + new Date().getTime());
+//  $(".container").css("height", window.innerHeight);
+  doClientAndOrientationStuff()
+
+  if (window.innerHeight < 768) {
+    $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
+  }
+}
+
+
+$("document").ready(function(){
+  console.log("ready");
+
+  initDrawing();
+
+//  imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
+//  imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+
+  imgDims = [1024, 768];
+  /*
+  if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
+    imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+  } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
+    imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
+  } else {
+    imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+  }
+  //*/
+
+//  $(".container").css("height", window.innerHeight);
+
+  // Initial execution if needed
+  window.addEventListener('orientationchange', doOnOrientationChange);
+  window.addEventListener('resize', doOnResize)
+  doClientAndOrientationStuff();
+//    doOnOrientationChange();
+
+  // window.innerHeight
+  console.log("window.innerHeight: " + window.innerHeight);
+  console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
+  console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
+
+  if (window.innerHeight < 768) {
+    $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
+  }
+
+  // DEBUG
+//  $(".agentInfo").css("display", "none");
+  $(".debugBtn").click(function(e) {
+    console.log("debugClick");
+    $(".agentInfo").toggleClass("agentInfoToggle");
+    e.preventDefault();
+  })
+
+})
+