<!DOCTYPE html>
<html>
    <head>
        <title>Aurora</title>
        <meta charset="utf-8" />
        <style>
        .grid-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 0.8fr 47px 0.7fr 2.8fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        .buttons-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        #title{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ddd;
            font-size: 4ex;
        }
        #text{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ccc;
            font-size: 2ex;
        }
        .encoders{
            margin: 0 auto;
        }
        .mainGrid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            gap: 1px 1px;
            grid-template-areas: ". . . . . . . .";
        }

        .encodersGrid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            gap: 1px 1px;
            grid-template-areas: "." "." "." "." ".";
            }
        a:link {
            color: white;
            }
        a:visited {
            color: gray;
            }
        a:visited {
            color: gray;
            }
    

        </style>

        <!-- Web audio buttons defaults -->
        <script  type="application/javascript" src="webcomponents-lite.js"></script>
        <script>
        WebAudioControlsOptions={
          useMidi:1,
          knobSrc:"knobs/simplegray.png",
          knobSprites:100,
          switchSrc:"knobs/switch_toggle.png",
          sliderSrc:"knobs/vsliderbody.png",
          sliderKnobsrc:"knobs/vsliderknob.png",
        }
        </script>
        <script src="webaudio-controls.js"></script>
        <!-- link rel="stylesheet" href="LJgrid.css" / -->
        <link rel="stylesheet" type="text/css" href="selector.min.css">
        <script type="application/javascript" src="selector.min.js"></script>
    </head>

    <body style="background-color:#000;">
        <div class="grid-container">

        <!--
        Title Line
        -->
        <div></div>
        <div>
            <h1 id="title">Aurora</h1>
        </div>
        
        <div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            text-align: center;color: #ddd;font-size: 3ex;">not available

        </div>

        <!--
        Encoders Line
        -->
        <div></div>
        <div class="buttons-container" id="text">
            <div>
                <div><webaudio-knob id="mixer/value" diameter="70" min="0" max="127" value="64"></webaudio-knob></div>
                <div><webaudio-param link="mixer/value" value="0"></webaudio-param></div>
                <div>2 curves mixer</div>
            </div>
            <div>
                <div><webaudio-knob id="scaler/scale" diameter="70" min="0" max="127" value="64"></webaudio-knob></div>
                <div><webaudio-param link="scaler/scale" value="0"></webaudio-param></div>
                <div>Scale</div>
            </div>
            <div>
                <div><webaudio-knob id="duplicator/num" diameter="70" min="0" max="127" value="64"></webaudio-knob></div>
                <div><webaudio-param link="duplicator/num" value="0"></webaudio-param></div>
                <div>Copy</div>
            </div>
        <div></div>
        <!-- LJ style WS : A nettoyer ! -->

        <script type="text/javascript">

            <!-- var LJ = 'ws://xrkia.org:8081/'  -->
            <!-- var LJ = 'ws://laser.teamlaser.fr:8081/' -->
            var LJ = 'ws://127.0.0.1:8081/'
            var _WS = {
            uri: LJ,
            ws: null,
        
            init : function (e) {
              _WS.s = new WebSocket(_WS.uri);
              _WS.s.onopen = function (e) { _WS.onOpen(e); };
              _WS.s.onclose = function (e) { _WS.onClose(e); };
              _WS.s.onmessage = function (e) { _WS.onMessage(e); };
              _WS.s.onerror = function (e) { _WS.onError(e); };
              },
        
            onOpen: function () {
            var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= "Connected";
              },
        
            onClose: function () {
              _WS.showout('DISCONNECTED');

              },
        
            onMessage: function (e) {
              var res = e.data.split(" ");
              console.log(e.data)
              //console.log(res[0].substring(0,6))
              //console.log(res)
              //console.log(res[0].slice(1))
              var divtext = document.getElementById('status');
              var divtextp = document.getElementById('players');


              switch (res[0].substring(0,6)) {
                
                case "/statu":
                      divtext.innerHTML="MMO-3";
                      break;
                case "/playe":
                      divtext.innerHTML="MMO-3 ("+res[1]+" player(s))";
                      divtextp.innerHTML=" ("+res[1]+" player(s))";
                      break;
                case "/simul":
                    pl = e.data.slice(7);
                    //console.log(pl)
                    pl2 = eval(pl.replace(/[()]/g, ''));
                    break;
                case "/plpoi":
                    //console.log("plpoint");
                    break;
                default:
                    console.log("test "+res[0].slice(1)+" "+res[1]);
                    document.getElementById(res[0].slice(1)).value = res[1];
                    _WS.showin(e.data);
                }
              },
        
            onError: function (e) {
              _WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
              },
        
            showin: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            showout: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            showstatus: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            send: function (message) {
              if (!message.length) {
                alert('Empty message not allowed !');
              } else {
                _WS.showout(message);
                _WS.s.send(message);
              }
            },
        
            close: function () {
              _WS.showout('GOODBYE !');
              _WS.s.close();
            }
          };
        
          window.addEventListener('load', _WS.init, false);    

        </script>




        <!-- 
          web audio encoders scripts 
        -->
        
        <script type="text/javascript">
            var message="";
            var log=[];
            var knobs = document.getElementsByTagName('webaudio-knob');
            
            for(var i = 0; i < knobs.length; i++){
                knobs[i].addEventListener("input",Dump,false);
                knobs[i].addEventListener("change",Dump,false);
            }
            var sliders = document.getElementsByTagName('webaudio-slider');
            
            for(var i = 0; i < sliders.length; i++){
                sliders[i].addEventListener("input",Dump,false);
                sliders[i].addEventListener("change",Dump,false);
            }
            var switches = document.getElementsByTagName('webaudio-switch');
            
            for(var i = 0; i < switches.length; i++) {
                switches[i].addEventListener("change",Dump,false);
            }

            function Dump(e) {
                var str="";
                str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
                console.log(str);
                log.unshift(str);
                log.length=1;
                str="";
                
                for(var i=19;i>=0;--i) {
                    if(log[i])
                        str+=log[i]+"<br/>";
                }

                _WS.send("/" + e.target.id + " " +  e.target.value);

                if (e.target.id === "on" && e.type === "change") {   
                    window.location.reload();
                    }
        
                if (e.target.id === "rate" && e.type === "change") {
                      e.target.value = 1 ;
                    }
                    
                if (e.target.id === "range" && e.type === "change") {
                      e.target.value = 1 ;
                    }
                if (e.target.id === "select" && e.type === "change") {
                      e.target.value = 1 ;
                    }
          
            }
        </script>
        <div id="title"  align ="center" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            text-align: center;color: #ddd;font-size: 2ex;">
	    <span id="players"></span>
        </div>

    </body>
</html>