<% provide(:title, 'Fader Tests') %>
<style type="text/css">
    h1, h2, div { margin: 18px; }

</style>

<h1>Fader Tests</h1>

<h2>Vertical</h2>
<div id="v-fader"></div>

<h2>Horizontal</h2>
<div id="h-fader"></div>

<%= render "clients/faders" %>

<script type="text/javascript" src="/assets/jquery.js"></script>
<script type="text/javascript" src="/assets/AAC_underscore.js"></script>
<script type="text/javascript" src="/assets/faderHelpers.js"></script>

<script type="text/javascript">
    _.templateSettings = {
        evaluate    : /\{%([\s\S]+?)%\}/g,
        interpolate : /\{\{([\s\S]+?)\}\}/g,
        escape      : /\{\{-([\s\S]+?)\}\}/g
    };

    function faderChange(faderId, newValue, dragging) {
        console.debug('faderChange fired. ID: ' + faderId + 
                ', val: ' + newValue + ', dragging: ' + dragging);
    }

    JK.FaderHelpers.subscribe('fader test page', faderChange);

    JK.FaderHelpers.renderFader('#v-fader', {faderId:"vert"});
    JK.FaderHelpers.renderFader('#h-fader', {faderId:"horiz", faderType:"horizontal", width:100});

</script>
