<!DOCTYPE html>
 <meta charset="UTF-8">
 <html>
   <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <style>
	body {
		margin: 0px;
		padding: 0px;
        }
	#rData{
		float:left;
		margin-left:100px;
		margin-right:auto;
		width:470px;
	}
	#sData{
		float: left;
		margin-left:100px;
		margin-right:auto;
		width:470px;
	}
	h2{
		text-align:center;
	}
        #myCanvas {
		border: 2px dashed grey;
        }
	#btnHolder, #sliderTxt{
	text-align:center;
	}
    </style>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<script src="/socket.io/socket.io.js"></script>
    <script>

  const toDisplay = 5; //define the number of messages to show

	var iosocket;
  var currentMessageCount = 0;
	//var onOff = false;
	var toggleVal = 0;



	function initSocketIO()
	{
		iosocket = io.connect();
		iosocket.on('onconnection', function() {
		initButton();

		iosocket.on('debugMessage', function(message) {
			alert(message);
		});

     iosocket.on('newMessage', function(time,number,message) {
       var mainTable = document.getElementById("mainTable");
       var newRow = mainTable.insertRow(mainTable.rows.length);
       var dateCell = newRow.insertCell(0);
       var numberCell = newRow.insertCell(1);
       var textCell = newRow.insertCell(2);
       dateCell.innerHTML = time;
       numberCell.innerHTML = number;
       textCell.innerHTML = message;
       currentMessageCount++;
       if(currentMessageCount > toDisplay)
       {
         //Remove the top row
         mainTable.deleteRow(1);
        currentMessageCount--;
       }
	    });
    });
	}


	function initButton()
	{
	   $("#check").button();
	}

	window.onload = function() {
	     initSocketIO();
       iosocket.emit('getLastMessages',toDisplay);
        };

  $(document).ready(function() {
    //request last messages from server

        $('#check').click(function() {
            toggleVal += 1;
	    toggleVal %= 2;
	    iosocket.emit('sendAT',toggleVal);
	 });
	});
    </script>
  </head>
  <body>
   <div style="text-align:center;">
	<h2>Data from Sim900</h2>

  <table id="mainTable" border="1" align="center">
  <tr>
  <td>Uhrzeit</td><td>Nummer</td><td>Nachricht</td>
  </tr>
  </table>
  <br>
  <br>
	<h2>Debug functions</h2>
	<div id="btnHolder">
	  <input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label>
	</div>
  </body>
</html>