Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>WebIOPi | Light Control</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {
		var updateStatus = function(macro, args, response){
			var status = response;
			$("#inputStatus").val(status);
		}
		webiopi().callMacro("getDoorStatus", [], updateStatus);

                // Create a "Light" labeled button for GPIO 24
                var button = webiopi().createGPIOButton(24, "Toggle");

		// Create a refresh status button


                // Append button to HTML element with ID="controls" using jQuery
                $("#controls").append(button);

                // Refresh GPIO buttons
                // pass true to refresh repeatedly of false to refresh once
                webiopi().refreshGPIO(true);
        });

	function updateTheBox() {
	var updateStatus = function(macro, args, response){
			var status = response;
			$("#inputStatus").val(status);
		}
		setTimeout(updateTheBox,1000);
		webiopi().callMacro("getDoorStatus", [], updateStatus);

	}
         updateTheBox();
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: white;
                }

                #gpio24.LOW {
                        background-color: Black;
                }

                #gpio24.HIGH {
                        background-color: Blue;
                }


		input.refresh {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: white;
			background-color: Black;
			text-align: center;
                }

		input {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: white;
			background-color: Green;
			text-align: center;
                }
        </style>
</head>
<body>
        <div id="controls" align="center">


	</div>

	<div id="controls" align="center">

	Door Status: <input type="text" id="inputStatus"/><br/><br/>
<!--	<input class="refresh" type="button" value="Refresh" onclick="updateTheBox()"> -->


	</div>
</body>
</html>