Added mobile touch support

index.html

@@ -4,6 +4,7 @@
     <title>Paradise Café</title>
     <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link href="paradise.css" media="screen" rel="stylesheet" type="text/css">
 
   </head>
@@ -18,6 +19,14 @@
         <li>b - oral</li>
       </ul>
     </div>
+    <div id="infoTouchDiv" class="center">
+      Ações:
+      <ul id="touch-elems">
+        <li id="67">anal</li>
+        <li id="70">vaginal</li>
+        <li id="66">oral</li>
+      </ul>
+    </div>
     <script type="text/javascript" src="paradise.js"></script>
     <script type="text/javascript">
        prepareCanvas(document.getElementById("canvasDiv"), 512, 272);

paradise.css

@@ -19,3 +19,13 @@ div.center {
     margin: 0 auto;
 }
 
+/*MOBILE STUFF*/
+#touch-elems li {
+
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+
+    cursor: pointer;
+}
+

paradise.js

@@ -15,10 +15,16 @@ function reset() {
     room();
 }
 
-function doKeyDown(e)
-{
-    if (selected == 0) {
-        switch(e.keyCode) {
+
+/**
+ * @author cc
+ * Unified func for keydown and touch events
+ */
+function doAction(actionID) {
+
+    if(selected === 0) {
+
+        switch(actionID) {
             case 70:
                 selected = 1;
                 context.drawImage(images["balloon_vaginal"], 0, 0);
@@ -54,7 +60,31 @@ function prepareCanvas(canvasDiv, canvasWidth, canvasHeight)
     // Note: The above code is a workaround for IE 8and lower. Otherwise we could have used:
     //     context = document.getElementById('canvas').getContext("2d");
     
-    window.addEventListener('keydown', doKeyDown, true);
+
+    /**
+     * @author: cc
+     * Do device validation, fix layout and assign their events
+     */
+    //Check device
+    if( navigator.userAgent.match(/Android/i) ||
+        navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
+        navigator.userAgent.match(/IEMobile/i) ) {          //is mobile
+
+            document.getElementById("infoDiv").style.display = "none";
+            var elems = document.getElementById("touch-elems").getElementsByTagName("li");
+            for(var i = 0; i < elems.length; i++) {
+                elems[i].addEventListener("click", function(e) {
+
+                    doAction( parseInt(e.target.id) );
+                }, true);
+            }
+    } else {                                                //is desktop
+
+       document.getElementById("infoTouchDiv").style.display = "none";
+        window.addEventListener('keydown', function(e) {
+            doAction(e.keyCode);
+        }, true);
+    }
 
     var myImages = [
         "room", "whore", "hero", "balloon_choose",