Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>aPreAmp</title>
    <link href="http://www.cs.helsinki.fi/u/ljlukkar/apreamp/css/main.css" rel="stylesheet">
</head>

<body>

<div class="buttons">
    <input type="radio" id="input0" name="inputSelect" value="0">
    <label for="input0" class="button">input 1</label>
    <input type="radio" id="input1" name="inputSelect" value="1">
    <label for="input1" class="button">input 2</label>
    <input type="radio" id="input2" name="inputSelect" value="2">
    <label for="input2" class="button">input 3</label>
</div>

<div id="volumeSlider" class="center-block"></div>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>

<script>

    var state = {
        v: 0,
        i: 0
    };

    var busy = false;

    var inputSelect = $('input[name="inputSelect"]:radio');
    var volumeSlider = $("#volumeSlider");

    volumeSlider.noUiSlider({
        start: 0,
        orientation: 'vertical',
        direction: "rtl",
        range: {
            'min': 0,
            'max': 192
        }
    });

    volumeSlider.on({
        slide: function () {
            busy = true;
        },
        set: function (event, value) {
            state.v = parseInt(value);
            busy = false;
            saveState(state);
        }
    });


    inputSelect.change(function () {
        state.i = Number(this.value);
        saveState(state);
    });


    function fetchState() {

        if (busy) return;

        busy = true;

        $.getJSON("/state", function (serverState) {
            state.i = serverState.i;
            state.v = serverState.v;
            volumeSlider.val(state.v);
            $("input[name=inputSelect][value=" + state.i + "]").prop('checked', true);
            busy = false;
        });
    }

    function saveState(newState) {
        $.ajax({
            type: "PUT",
            url: '/state',
            contentType: 'application/json',
            data: JSON.stringify(newState)
        });
    }

    function resizeControls() {

        var height = $(window).height();
        var width = $(window).width();

        var reference = (height / width < 1.30) ? (height * 0.45) : (width * 0.60);

        $("#volumeSlider").width(reference).height(1.49 * reference);
        $(".noUi-handle").width(0.41 * reference).height(0.41 * reference);
        $(".buttons").width(1.56 * reference);
        $(".button").width(0.51 * reference).height(0.23 * reference);

    }

    $(window).resize(function () {

        resizeControls();

    });

    $(function () {

        resizeControls();
        setInterval(fetchState, 500);

    });

</script>

</body>
</html>