<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebSockets</title>

    <link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>

    <script type="text/javascript">
        var ws;
        var dmxData;

        $(document).ready(
                function() {
                    var Socket = "MozWebSocket" in window ? MozWebSocket : WebSocket;
                    ws = new Socket("ws://" + window.location.hostname + ":" + window.location.port + "/buntisocket");

                    ws.onmessage = function (message) {
                        //$("#messages").append("<p>" + message.data + "</p>");

                        var obj = jQuery.parseJSON(message.data);

                        if( obj.dmx512values != null) {
                            dmxData = obj.dmx512values;

                            // das direkt zu machen ist evtl etwas unklug, da das sliden des sliders im
                            // gleichen browser dann hier zu ner aenderung fuehrt und der slider dann
                            // ruckelt. Aber es tut :D
                            $("#slider1").slider("value", dmxData[1]);
                            $("#slider2").slider("value", dmxData[2]);
                            $("#slider3").slider("value", dmxData[3]);
                        }



                    };

                    ws.onopen = function () {
                        $("#messages").append("<p>WS opened</p>");
                    };

                    ws.onclose = function () {
                        $("#messages").append("<p>WS closed</p>");
                    };

                    $("#slider1").slider({ min: 0, max: 255, slide: function(event, ui) {
                        ws.send("channel:2=" + ui.value);
                        ws.send("channel:7=" + ui.value);
                        ws.send("channel:12=" + ui.value);
                        ws.send("channel:17=" + ui.value);
                    } });


                    $("#slider2").slider({ min: 0, max: 255, slide: function(event, ui) {
                        ws.send("channel:3=" + ui.value);
                        ws.send("channel:8=" + ui.value);
                        ws.send("channel:13=" + ui.value);
                        ws.send("channel:18=" + ui.value);
                    } });

                    $("#slider3").slider({ min: 0, max: 255, slide: function(event, ui) {
                        ws.send("channel:4=" + ui.value);
                        ws.send("channel:9=" + ui.value);
                        ws.send("channel:14=" + ui.value);
                        ws.send("channel:19=" + ui.value);
                    } });

                    $("#buttonLampe1").click(function() {

                        $.getJSON('/devices/1', function(data) {

                            alert("data: " +  data.deviceId + " " + data.colorRed );
                        });

                    });

                });

    </script>
</head>
<body>
<h1>Hello World!</h1>

<script>



</script>

<div class="demo">
    <div id="slider1" style="width: 300px"></div>
    <div id="slider2" style="width: 300px; margin-top: 10px"></div>
    <div id="slider3" style="width: 300px; margin-top: 10px"></div>
</div>

<div id="messages"></div>
<input type="button" value="Update Lampe 1" id="buttonLampe1" />

</body>
</html>