<!DOCTYPE html>
<html>
    <head>
      <title>Rack choice</title>
      <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-title" content="LJ">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="apple-touch-startup-image" href="/launch.png">
        <link rel="apple-touch-icon" href="touch-icon-iphone.png">
        <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
        <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
        <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
        
      <style>

      </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>


      <link rel="stylesheet" href="css/common.css" />
    </head>

    <body style="background-color:#222;">
   
<div class="Rackcontent" style="margin-top : 35px;">

  <!--
     Big Display Rack
  -->
    
   <div class="content">
    <div id="text" class="busled" style="font-size:1.5em;border : #242424 1px solid;background: #000;-webkit-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);-moz-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);">
      <div id="gum" class="gum" style="color: #fff";>
        <p>!! WELCOME !!<br />
          Click on the wanted Rack 
        </p>
      </div>
    </div>
     </div>


    <!--
    Status Rack
    -->

  <a href="index.html">
    <div class="content">
      <div class="TopRackGrid"> 
        <div>
          <h2>
          Status
          <span class="shade" style="margin-bottom:10px;">&nbsp;</span>
          </h2>
          <div  style="margin-top:20px;">
          <webaudio-switch id="on" value="0" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
          </webaudio-switch>
        </div>
        </div>
        <div class="webaudiobut">
          <div align="center" id="line1" class="busled"> 
          Status
          </div>
          <div align="center" id="status" class="busled"> 
        &nbsp;
          </div>
        </div>
            <div class="etherled" style="margin-left: 30px;margin-top: 1px;">
              Stt
              <webaudio-knob id="lstt/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lstt/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lstt/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lstt/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
            </div>
            <div class="etherled" style="margin-left: 30px;margin-top: 1px;">
              Ack
              <webaudio-knob id="lack/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lack/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lack/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
              <webaudio-knob id="lack/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
            </div>
      </div>
    </div>
  </a>


    <!--
    Align Rack
    -->

  <a href="align.html">
    <div class="content">
      <div class="TopRackGrid"> 
        <div>
          <h2>
          Align
          <span class="shade">&nbsp;</span>
          </h2>
          <webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
          </webaudio-switch>
        </div>
        <div class="webaudiobut">
          <div align="center" class="busled"> 
          Align
          </div>
          <div align="center"  class="busled"> 
          &nbsp;
          </div>
        </div>
      </div>
    </div>
  </a>


    <!--
    Aurora Rack
    -->
    <a href="auralls.html">
    <div class="content">
      <div class="TopRackGrid"> 
        <div>
          <div>
            <h2>
              Aurora
            </h2>
          </div>
          <div style="margin-top:20px;">
          <webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
          </webaudio-switch>
        </div>
        </div>
        <div class="webaudiobut">
          <div align="center" class="busled"> 
          Aurora
          </div>
          <div align="center" class="busled"> 
           &nbsp;
          </div>
        </div>

      </div>
    </div>
  </a>
  </a>



    <!--
    Simu Rack
    -->
   <a href="simu.html">
    <div class="content">
      <div class="TopRackGrid"> 
        <div>
          <div>
            <h2>
              Simu
            </h2>
          </div>
          <div style="margin-top:20px;">
          <webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
          </webaudio-switch>
        </div>
        </div>
        <div class="webaudiobut">
          <div align="center" class="busled"> 
          Simu
          </div>
          <div align="center" class="busled"> 
           &nbsp;
          </div>
        </div>

      </div>
    </div>
  </a>



    <!--
    Tracker Rack
    -->
    <a href="trckr/trckrcam1.html">
    <div class="content">
      <div class="TopRackGrid"> 
        <div>
          <div>
            <h2>
              Tracker 1
            </h2>
          </div>
          <div style="margin-top:20px;">
          <webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png">
          </webaudio-switch>
        </div>
        </div>
        <div class="webaudiobut">
          <div align="center" class="busled"> 
          LaserCAM
          </div>
          <div align="center" class="busled"> 
           &nbsp;
          </div>
        </div>

      </div>
    </div>
  </a>
   
</div>

  <!--
  JS 
  -->
    
    <!-- LJ style WS : A nettoyer ! -->

      <script type="text/javascript">
      var LJ = 'ws://0.0.0.0:9001/'


            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 to "+LJ;
            document.getElementById("on").value = 1;
              },
        
            onClose: function () {
              _WS.showstatus('!! ALL RACKS 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":
                        _WS.showline1("connected to "+LJ);
                      if (res[2]==="Disconnected"){
                         _WS.showstatus(res[1]+" "+'<span style="color: red;">'+ res[2]+'</span> ');
                        }
                      else{
                        _WS.showstatus(res[1]+" "+res[2]);
                        }
                      break;
                
                case "/redst":
                      //console.log("red"+res[1]+" "+res[2]);
                      _WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> ');
                      break;


                case "/line1":
                      //divtext.innerHTML="connected to "+LJ;
                      divtext1.innerHTML=res[1]+" "+res[2];
                      break;

                case "/redline1":
                      //divtext.innerHTML="connected to "+LJ;
                      divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
                      break;

                case "/laser":
                      console.log("/laser "+res[1])
                      newlaser(res[1])
                      break;


                default:
                    console.log("test "+res[0].slice(1)+" "+res[1]);
                    document.getElementById(res[0].slice(1)).value = res[1];
                }
              },
        
            onError: function (e) {
              _WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
              },
        
            showin: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },

            showline1: function (message) {
                var divtext = document.getElementById('line1');
                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.showstatus(message);
                _WS.s.send(message);
              }
            },
        
            close: function () {
              _WS.showstatus('GOODBYE !');
              _WS.s.close();
            }
          };
        
          window.addEventListener('load', _WS.init, false);    

        //
        // Forms submits
        //
        
          function onSubmit(clicked_id) {
            var input = document.getElementById(clicked_id);
            console.log("/" + clicked_id + " " + input.value);
            _WS.send("/" + clicked_id + " " + input.value);
            }
        
        </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 nofx0() {
          console.log("nofx0")
          var x = document.getElementById("aurora/fx/0 ScanH");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 ScanV");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 Wave");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 Circle");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 Starfield");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 Word");
            x.value = 0 ;
          var x = document.getElementById("aurora/fx/0 Trckr");
            x.value = 0 ;
          }
          
      
        function nocolor0() {
          console.log("nocolor0")
          var x = document.getElementById("aurora/color/0 red");
            x.value = 0 ;
          var x = document.getElementById("aurora/color/0 yellow");
            x.value = 0 ;
          var x = document.getElementById("aurora/color/0 green");
            x.value = 0 ;
          //var x = document.getElementById("aurora/color/0 blue");
          //  x.value = 0 ;
          //var x = document.getElementById("aurora/color/0 cyan");
          //  x.value = 0 ;
          //var x = document.getElementById("aurora/color/0 white");
          //  x.value = 0 ;
          }


        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);

          var res = e.target.id.split(" "); 

          // Fx
          if (e.target.id === "on" && e.type === "change") {   
            window.location.reload();
            }

          if (res[0].substring(7,9) === "fx" && e.type === "change") {   

            var layer = res[0].substring(10,12);  
            nofx0();  
            var x = document.getElementById(e.target.id);
            x.value = 1 ;
            _WS.showstatus(e.target.id);
            
            }

          // Colors
          if (res[0].substring(7,9) === "co" && e.type === "change") {  

              var layer = res[0].substring(13,14);  
              console.log(layer)
              nocolor0();
              var x = document.getElementById(e.target.id);
              x.value = 1 ;
              _WS.showstatus(e.target.id);
              }
        }
    </script>

  </body>
</html>