$(function(){
    var host = location.origin.replace(/^http/, 'ws');
    var ws = new WebSocket(host + '/control');
    var scale = 2;
    var videoSelector = $('#select-video');
    var originalVideoWidth;
    var selectedVideo;
    var ratio = 2;

    $('.video-frame').resizable({
        aspectRatio: true,
        stop: function(event, ui) {
            ratio = (ui.size.width / originalVideoWidth) * 2;
            ws.send(JSON.stringify({
                deviceId: 'all',
                changes: {
                    scale: ratio
                }
            }))
        }
    });

    ws.onmessage = function(event) {
        var data = JSON.parse(event.data);
        selectedVideo = data.selectedVideo;
        populateSelectVideo(data.options, data.selectedVideo);

        //initialize video in devices
        if (videoSelector.val() != data.selectedVideo){
          ws.send(JSON.stringify({ video: videoSelector.val() }));
        }

        //initialize video in control
        document.querySelector('video').src = location.origin + '/uploads/' + videoSelector.val();
        document.querySelector('video').onloadedmetadata = function() {
          originalVideoWidth = this.videoWidth;
          var width = this.videoWidth*(scale/2);
          var height = this.videoHeight*(scale/2);
          $('.video-frame').css('width', width).css('height', height);
        };

        if (data.devices) {
            $.each(data.devices, function(index, device){
                var newElement = document.createElement('div');
                $('.video-frame').append(newElement);
                $(newElement)
                    .addClass('device')
                    .css({
                        height:device.height / scale,
                        width:device.width / scale,
                        top:(-device.position.top || 0) + 'px',
                        left:(-device.position.left || 0) + 'px'
                    })
                    .draggable({
                        containment: 'parent',
                        stop: function(event, ui) {
                            ws.send(JSON.stringify({
                                deviceId:device.id,
                                changes:{
                                    position:{
                                        top: -ui.position.top,
                                        left: -ui.position.left
                                    }}}))
                        }
                    //}).rotatable({
                    //    snap: true,
                    //    stop: function(event, ui) {
                    //        ws.send(JSON.stringify({
                    //            deviceId:device.id,
                    //            changes:{
                    //                rotation: ui.angle.current.toFixed(2)+ 'rad'
                    //            }}))
                    //    }
                    }).append('<span class="device-id">' + device.id + '</span>');
            });

            if (data.devices[0].scale && scale != data.devices[0].scale) {
                scale = data.devices[0].scale || scale;

                $('.video-frame').css('width', setToScale).css('height', setToScale);
            }


            function setToScale(idx, value) {
                value = parseFloat(value);
                return value * (scale / 2);
            }
        }
    };

    function pingWithText(text) {
        return function(){
            ws.send(JSON.stringify(text))
            if (text == 'reset') {
              document.querySelector('video').currentTime = 0;
            } else if (text == 'pause') {
              document.querySelector('video').pause();
            } else if (text == 'resume') {
              document.querySelector('video').play();
            }
        }
    }

    window.resetVideos = pingWithText('reset');
    window.pause = pingWithText('pause');
    window.resume = pingWithText('resume');

    //Populate video dropdown
    function populateSelectVideo(options, video) {
      var select = document.getElementById('select-video');

      for (var i = 0; i < options.length; i++){
          var opt = options[i];
          var el = document.createElement('option');
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }

      if (video){
        document.getElementById('select-video').value = video;
      }
    }

    //Listen for dropdown change
    videoSelector.on('change', function() {
      console.log(selectedVideo);
      if (selectedVideo != $(this).val()){
        selectedVideo=$(this).val();
        scale = 2;
        document.querySelector('video').src = location.origin + '/uploads/' + $(this).val();
        ws.send(JSON.stringify({ video: $(this).val() }));
      }
    });

});
@@ -663,17 +663,17 @@
 nt.data)
-;
+,
 %0A       
@@ -746,22 +746,16 @@
 ata.
-options, data.
+videos, 
 sele
@@ -840,21 +840,16 @@
 al() != 
-data.
 selected
@@ -3423,39 +3423,8 @@
 ) %7B%0A
-        return function()%7B%0A    
     
@@ -3460,50 +3460,55 @@
 xt))
+;
 %0A    
- 
+%7D%0A%0A
     
-   if (text == 'reset') %7B%0A      
+window.resetVideos = function() %7B%0A
     
@@ -3572,48 +3572,71 @@
     
-   
- %7D else if (text == 'pau
+pingWithText('re
 se
+t
 ')
- %7B%0A      
+;%0A    %7D;%0A%0A    window.pause = function() %7B%0A
     
@@ -3692,39 +3692,68 @@
     
-    %7D else if (text == 'resume'
+pingWithText('pause');%0A    %7D;%0A%0A    window.resume = function(
 ) %7B%0A
@@ -3760,22 +3760,16 @@
         
-      
 document
@@ -3812,141 +3812,8 @@
     
-    %7D%0A        %7D%0A    %7D%0A%0A    window.resetVideos = pingWithText('reset');%0A    window.pause = pingWithText('pause');%0A    window.resume = 
 ping
@@ -3830,16 +3830,23 @@
 resume')
+;%0A    %7D
 ;%0A%0A    /
@@ -3907,18 +3907,27 @@
 deo(
-options, v
+allVideos, currentV
 ideo
@@ -3953,33 +3953,12 @@
 t = 
-document.getElementById
+$
 ('
+#
 sele
@@ -3980,224 +3980,119 @@
     
-for (var i = 0; i %3C options.length; i++)%7B%0A          var opt = options%5Bi%5D;%0A          var el = document.createElement('option');%0A          el.textContent = opt;%0A          el.value = opt;%0A          select.appendChild(el
+  select.append($.map(allVideos, function (video) %7B%0A            return $('%3Coption%3E', %7Bvalue: video%7D).text(video
 );%0A 
@@ -4092,25 +4092,31 @@
 deo);%0A      
+ 
-%7D
+ %7D) );
 %0A%0A      if (
@@ -4111,25 +4111,32 @@
 %0A%0A      if (
-v
+currentV
 ideo)%7B%0A     
@@ -4142,47 +4142,14 @@
     
-document.getElementById('select-video')
+select
 .val
@@ -4153,17 +4153,24 @@
 value = 
-v
+currentV
 ideo;%0A  

split pingWithText; populate select using jquery