<!DOCTYPE html>
<html lang="jp" xml:lang="jp">
  <head>
    <meta charset="utf-8">
    <title>Balls</title>
    <style>
      .ball {
          position: absolute;
          top: 0px;
          left: 0px;
      }
    </style>
    <meta name="viewport" content="width=device-width,user-scalable=no" /> 
  </head>
  <body>
    <header>
      <h1>Balls</h1>
    </header>
    <select onchange="selectBall(this);" id="bcolor" style="font-size:x-large;">
      <option value="red" selected="selected">Red</option>
      <option value="green">Green</option>
    </select><br />
    <canvas class="ball" id="red" width="20" height="20"></canvas>
    <canvas class="ball" id="green" width="20" height="20"></canvas>
  </body>
  <script type="text/javascript">
      var myballColor = "red";
      function selectBall(selectObj) {
          var idx = selectObj.selectedIndex;
          var ballColor = selectObj.options[idx].value;
          myballColor =  ballColor;
      }
      var balls = document.getElementsByClassName("ball");
      for(var i = 0; i < balls.length; i++) {
          var cv = document.getElementById(balls[i].id);
          var ctx = cv.getContext("2d");
          ctx.fillStyle = balls[i].id;
          ctx.arc(10, 10, 10, 0, Math.PI * 2, true);
          ctx.fill();
      }

      var ws = new WebSocket("ws://192.168.254.23:8888/balls");
      ws.onopen = function() {};
      ws.onmessage = function (evt) {
          var rdata = JSON.parse(evt.data);
          var ball = document.getElementById(rdata.ball);
          ball.style.top = rdata.y + "px";
          ball.style.left = rdata.x + "px";
      };

      // Position Variables
      var x = 0;
      var y = 0;
      // Speed - Velocity
      var vx = 0;
      var vy = 0;
      // Acceleration
      var ax = 0;
      var ay = 0;
      var delay = 1000;  // msec
      var vMultiplier = 1;

      window.addEventListener("devicemotion",
          function(evt) {
              ax = evt.accelerationIncludingGravity.x;
              ay = evt.accelerationIncludingGravity.y;
          }, true);

      setInterval(function() {
          vy = vy + -(ay);
          vx = vx + ax;

          var ball = document.getElementById(myballColor);
          y = parseInt(y + vy * vMultiplier);
          x = parseInt(x + vx * vMultiplier);
	
          if (x < 0) {
              x = 0; vx = 0;
          }
          if (y < 0) {
              y = 0; vy = 0;
          }
          if (x > document.documentElement.clientWidth - 20) {
              x = document.documentElement.clientWidth - 20;
              vx = 0;
          }
          if (y > document.documentElement.clientHeight - 20) {
              y = document.documentElement.clientHeight - 20;
              vy = 0;
          }
          ball.style.top = y + "px";
          ball.style.left = x + "px";
          ws.send(JSON.stringify({ball:myballColor, x:x, y:y}));
      }, delay);
  </script>
</html>