<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Clear Board</title>
      <link rel='stylesheet' href='sprite/emoji.css' >
      <link rel="stylesheet" href="/css/bootstrap.min.css" />
      <script src="/js/jquery-1.12.1.min"></script>
      <script src="/js/jquery-ui.js"></script>
	    <script src="/socket.io/socket.io.js"></script>
      <script>
      var iosocket;
      function initSocketIO() {
        iosocket = io.connect();
        iosocket.on('connect', function() {
          iosocket.on('debugMessage', function(message) {
            alert(message);
          });
        });
      };
      window.onload = function() {
        initSocketIO();
      };

      $(document).ready(function() {
        $('#clear').click(function() {
          var number = $('#number').val();
          iosocket.emit('clear',number);
          alert("cleared");
        });
        $('#refresh').click(function() {
          iosocket.emit('refreshClients');
        });
      });
      </script>
    </head>
    <body>
      <div style="text-align:center;" >
        <div id="wrap">
          <div  id="btnHolder">
            <h2>Functions</h2>
            <input type="number" id="number" value="1" min="1"/>
            <label for="number">Number</label>
            <br>
            <input type="button" id="clear" value="clear"/>
            <br>
            <input type="button" id="refresh" value="refresh"/>
            <div id="debugOut"></div>
          </div>
        </div>
      </div>
    </body>
  </html>