<html>
   <head>
      <script src="./index.js"></script>
      <script src="./jquery-3.1.1.js"></script>
      <script src="./socket.io.slim.js"></script>
      <title>Timecodes</title>
      <link rel="stylesheet" href="./design.css">
      <link rel="stylesheet" href="./css/font-awesome.min.css">
      <meta charset="utf8"/>
   </head>
   <body>
      <center><h1>Timecode Abiball2017</h1></center>
      <hr>
      <div>
         <button onclick="stopSequence()">Stop</button>
         <button onclick="startSequence()" id="playbutton">Play</button>
         <button onclick="pauseSequence()" id="pausebutton" style="display:none;">Pause</button>
         <label >Loaded: </label>
         <label id="loaded"></label>
         <label >File playing: </label>
         <label id="fplay"></label>
      </div>
      <hr>
      <div id="track_select_div">
         <label for="track_select">Select Preset: </label>
         <select id="track_select"></select>

         <form style="margin-top: 15px" onsubmit="f()">
            <label>Neu: </label>
            <input type="text" id="ntn" placeholder="Name"/>
            <input type="text" id="ntf" placeholder="(optional) filename"/>
            <button onclick="saveNewTrack()">Speichern</button>
         </from>
         <hr>
         <div id="trdv" style="display:none;">
            <center><h2 id="trackname"></h1></center>
            <center><h2 id="trackfile"></h2></center>
            <button onclick="loadSequence()">Load</button>
            <form onsubmit="f()">
               <input type="text" id="universe" placeholder="universe"></input>
               <input type="text" id="channel" placeholder="channel"></input>
               <input type="text" id="value" placeholder="value"></input>
               <button onclick="saveLoad()">speichern</button>
            </form>
            <div>
               <canvas id="canvas" height="50">
               </canvas>
               <label id="actualtime"></label>
            </div>
            <div>
               <form onsubmit="f()">
                  <input type="text" id="eid" placeholder="id (leer wenn neu)"/><br/>
                  <input type="text" id="eh" placeholder="hour"/>
                  <input type="text" id="em" placeholder="minute"/>
                  <input type="text" id="es" placeholder="second"/>
                  <input type="text" id="ef" placeholder="frame"/>
                  <input type="text" id="eu" placeholder="universe"/>
                  <input type="text" id="esu" placeholder="channel"/>
                  <input type="text" id="eval" placeholder="value"/>
                  <button onclick="saveEvent()">Speichern</button>
               </form>
               <table id="events" class="event_table" border="1">
               </table>
            </div>
         </div>
      </div>
      <script>
         function f(){
            event.preventDefault();
            return false;
         }
         var socket = io(":5001");
         socket.emit("get");
         var tracks = {};
         var selected = undefined;
         var timenow = undefined;
         socket.on("get_data", (data)=>{
            console.log("got data", data);
            var opt = "<option value=''></option>";
            for(var prop in data.tracks){
               var e = data.tracks[prop];
               opt += '<option value="' + e.id + '">' + e.displayName + '</option>';
            }
            tracks = data.tracks;
            if(selected){
               selected = data.tracks[selected.id];
            }
            $("#track_select").html(opt);
            if(data.loaded)
               $("#loaded").html(data.loaded.displayName);
            drawSelected();
         });

         function saveNewTrack(){
            var d = {};
            d.name = $("#ntn").val();
            d.file = $("#ntf").val();
            socket.emit("create", d);
         }
         
         socket.on("created", ()=>{
            socket.emit("get");
         });
         
         socket.on("update", (data)=>{
            $("#fplay").html(data.filePlaying);
            if(data.playing){
               $("#playbutton").css("color", "greenyellow");
               if(data.paused) {
                  $("#pausebutton").css("display", "none");
               } else {
                  $("#pausebutton").css("display", "inline-block");
               }
            } else {
               $("#playbutton").css("color", "white");
            }
            if(!selected) return;
            if(selected.id !== data.track) return; //Nur wenn abgespielter track ausgewählt
            timenow = data.time.lmilliseconds;
            $("#actualtime").html(data.time.lhours + ":" + data.time.lminutes + ":" + data.time.lseconds + ":" + data.time.lframe);
         });

         $("#track_select").on("change", function () {
            if(this.value === ""){
               selected = undefined;
               return;
            }
            selected = tracks[this.value];
            drawSelected();
         });

         function drawCanvas(){
            if(!selected || !timenow) return;
            var sorted = selected.triggers.sort((a, b)=>{
               if(a.time.lmilliseconds < b.time.lmilliseconds) return -1;
               if(a.time.lmilliseconds > b.time.lmilliseconds) return 1;
               return 0;
            });
            var maxval = 0;
            var m = sorted[sorted.length -1];
            if(m.lmilliseconds > timenow) maxval = m.lmilliseconds;
            else maxval = timenow;

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.moveTo(0,0);
         }

         function drawSelected(){
            if(selected == undefined) {
                  $("#trdv").css("display","none");
                  return;
            }
            if(selected.load){
               $("#universe").val(selected.load.universe);
               $("#channel").val(selected.load.subnet);
               $("#value").val(selected.load.value);
            }
            $("#trackname").html(selected.displayName);
            $("#trackfile").html(selected.file !==undefined ? selected.file : "");
            var t = "<tr><th>ID</th><th>Stunde</th><th>Minute</th><th>Sekunde</th><th>Frame</th><th>Universe</th><th>ArtNet-Kanal</th><th>Art-Net Value</th><th>Run</th><th>Copy</th><th>Edit</th><th>Del</th></tr>";
            var sorted = selected.triggers.sort((a, b)=>{
               if(a.time.lmilliseconds < b.time.lmilliseconds) return -1;
               if(a.time.lmilliseconds > b.time.lmilliseconds) return 1;
               return 0;
            });
            sorted.forEach(e=>{
               t += "<tr>";
               t += "<td>" + e.id + "</td>"
               t += "<td>" + e.time.lhours + "</td>"
               t += "<td>" + e.time.lminutes + "</td>"
               t += "<td>" + e.time.lseconds + "</td>"
               t += "<td>" + e.time.lframe + "</td>"
               t += "<td>" + e.art.universe + "</td>"
               t += "<td>" + e.art.subnet + "</td>"
               t += "<td>" + e.art.value + "</td>"
               t += "<td><button onclick='fire(\"" + e.id + "\")'><i class='fa fa-play' aria-hidden='true'></i></button></td>"
               t += "<td><button onclick='copy(\"" + e.id + "\")'><i class='fa fa-clone' aria-hidden='true'></i></button></td>"
               t += "<td><button onclick='edit(\"" + e.id + "\")'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></button></td>"
               t += "<td><button onclick='remove(\"" + e.id + "\")'><i class='fa fa-trash-o' aria-hidden='true'></i></button></td>"
               t += "</tr>";
            });
            $("#events").html(t);
            $("#trdv").css("display","block");
         }   

         function edit(id) {
            console.log("edit with id", id)
            var el = undefined;
            selected.triggers.forEach(e=>{
               if(e.id === id){
                  el = e;
               }
            })
            $("#eid").val(el.id);
            $("#eh").val(el.time.lhours);
            $("#em").val(el.time.lminutes);
            $("#es").val(el.time.lseconds);
            $("#ef").val(el.time.lframe);
            $("#eu").val(el.art.universe);
            $("#esu").val(el.art.subnet);
            $("#eval").val(el.art.value);
         }

         function copy(id) {
            console.log("edit with id", id)
            var el = undefined;
            selected.triggers.forEach(e=>{
               if(e.id === id){
                  el = e;
               }
            })
            $("#eh").val(el.time.lhours);
            $("#eh").focus();
            $("#em").val(el.time.lminutes);
            $("#es").val(el.time.lseconds);
            $("#ef").val(el.time.lframe);
            $("#eu").val(el.art.universe);
            $("#esu").val(el.art.subnet);
            $("#eval").val(el.art.value);
         }

         function remove(id) {
            socket.emit("delete", {track:selected.id, id:id})
            console.log("remove with id", id)
         }

         function fire(id){
            if(!selected) return;
            selected.triggers.forEach(e=>{
               console.log(e);
               if(e.id == id) socket.emit("fire", e.art);
            });
         }

         function saveEvent() {
            var el = {};
            el.track = selected.id;
            el.id = $("#eid").val();
            el.time = {};
            el.time.hours =   $("#eh").val();
            el.time.minutes = $("#em").val();
            el.time.seconds = $("#es").val();
            el.time.frame =   $("#ef").val();
            el.art = {};
            el.art.universe = $("#eu").val();
            el.art.subnet = $("#esu").val();
            el.art.value = $("#eval").val();
            socket.emit("set", el);
            $("#eid").val("");
            $("#eh").val("");
            $("#em").val("");
            $("#es").val("");
            $("#ef").val("");
            $("#eu").val("");
            $("#esu").val("");
            $("#eval").val("");
         }

         function loadSequence(){
            socket.emit("load", selected.id);
         }

         function startSequence(){
            socket.emit("play");
         }

         function stopSequence(){
            socket.emit("stop");
         }

         function pauseSequence(){
            socket.emit("pause");
         }

         $(document).keyup(function(e) {
            if (e.keyCode === 27) {
               $("#eid").val("");
               $("#eh").val("");
               $("#em").val("");
               $("#es").val("");
               $("#ef").val("");
               $("#eu").val("");
               $("#esu").val("");
               $("#eval").val("");
            }
         });

         function saveLoad(){
            var data = {};
            data.id = selected.id;
            data.art = {};
            data.art.universe = $("#universe").val();
            data.art.subnet = $("#channel").val();
            data.art.value = $("#value").val();
            console.log(data);
            socket.emit("load_event", data);
         }
      </script>
   </body>
</html>