interact('.slider')                   // target the matches of that selector
    .origin('self')                     // (0, 0) will be the element's top-left
    .draggable({                        // make the element fire drag events
        max: Infinity,                     // allow drags on multiple elements
        restrict: {
            restriction: 'self'
        }
    })
    .on('dragmove', function (event) {  // call this function on every move
        var sliderHeight = interact.getElementRect(event.target).height;
        var value = event.pageY / sliderHeight;

        $(event.target).find('.slider_content').css('top', (value * 100) + '%');
        event.target.setAttribute('data-value', (1 - value).toFixed(2));

        sendMessage($(event.target).data('parameter') + ' ' + (1 - value).toFixed(2))
    });

interact('.toggle')
    .on('tap', function (event) {
        var isSet = ('ON' == event.target.getAttribute('data-value'));
        event.target.setAttribute('data-value', isSet ? 'OFF' : 'ON');
        event.target.style.background = isSet ? '#29e' : 'red';

        sendMessage($(event.target).data('parameter') + ' ' + (isSet ? 'OFF' : 'ON'));
    })
;

interact('.momentary')
    .on('down', function (event) {
        event.target.setAttribute('data-value', 'ON');
        event.target.style.background = 'red';
        sendMessage($(event.target).data('parameter') + ' ON');
    })
    .on('up', function (event) {
        event.target.setAttribute('data-value', 'OFF');
        event.target.style.background = '#29e';
        sendMessage($(event.target).data('parameter') + ' OFF');
    })
;

function sendMessage(message) {
    console.log(message);
    $('.log').text(message);
}

interact.maxInteractions(Infinity);   // Allow multiple interactions

var controlWrapperTemplate = '<div class="control-wrapper"><div class="control-name"></div></div>';
var sliderTemplate = '<div class="slider"><div class="slider_content"></div></div>';
var momentaryTemplate = '<div class="momentary button"></div>';
var toggleTemplate = '<div class="toggle button"></div>;'

function addControl(container, template, name, parameter) {
    var control = $(template).data('parameter', parameter);
    var wrapped = $(controlWrapperTemplate).prepend(control);
    wrapped.find('.control-name').text(name);
    container.append(wrapped);
}

var mainContainer = $('.container');
var leftGroup = $('<div class="container group-container justify-left"></div>');
var rightGroup = $('<div class="container group-container justify-right"></div>');

var group1 = $('<div class="group justify-left"></div>');
var group2 = $('<div class="group justify-right"></div>');
var group3 = $('<div class="group justify-left"></div>');
var group4 = $('<div class="group justify-right"></div>');

mainContainer
    .append(leftGroup)
    .append(rightGroup);

leftGroup
    .append(group1)
    .append(group3);
rightGroup
    .append(group2)
    .append(group4);


addControl(group1, momentaryTemplate, 'intercom', 'ch11 mix');
addControl(group1, toggleTemplate, 'on air', 'ch1 mix');

addControl(group2, momentaryTemplate, 'intercom', 'ch12 mix');
addControl(group2, toggleTemplate, 'on air', 'ch2 mix');

addControl(group3, sliderTemplate, 'caster 2', '/ch/02/mix/01/level');
addControl(group3, sliderTemplate, 'game', '/ch/03/mix/01/level');
addControl(group3, sliderTemplate, 'program', '/ch/10/mix/01/level');
addControl(group3, sliderTemplate, 'talkback', '/ch/17/mix/01/level');

addControl(group4, sliderTemplate, 'caster 1', '/ch/01/mix/02/level');
addControl(group4, sliderTemplate, 'game', '/ch/03/mix/02/level');
addControl(group4, sliderTemplate, 'program', '/ch/10/mix/02/level');
addControl(group4, sliderTemplate, 'talkback', '/ch/17/mix/02/level');

@@ -1785,16 +1785,38 @@
 ctions%0A%0A
+%0Avar events = $(%7B%7D);%0A%0A
 var cont
@@ -2373,16 +2373,205 @@
 rapped);
+%0A%0A    console.log('registering handler for', parameter);%0A    events.on(parameter, function (event, value)%C2%A0%7B%0A        console.log('received value', value, 'for parameter', parameter);%0A    %7D);
 %0A%7D%0A%0Avar 
@@ -3956,24 +3956,162 @@
 '/ch/17/mix/02/level');%0A
+%0A%0Awindow.setTimeout(function () %7B%0A    console.log('triggering handler');%0A    events.triggerHandler('/ch/02/mix/01/level', '0.5');%0A%7D, 5000)

add a poc of message passing from bus to controls