$(document).ready(function () {
    function setData(data) {
        if (data.on_off)
            $('.bulb').attr('src', 'assets/images/lb130.jpg')
        else
            $('.bulb').attr('src', 'assets/images/lb130-off.jpg')
        $('.brightness').text(data.brightness || 0)
        $('.hue').text(data.hue || 0)
        $('.saturation').text(data.saturation || 0)
        $('.colortemp').text(data.color_temp || 0)
        $('#brightness').val(data.brightness || 0)
        $('#hue').val(data.hue || 0)
        $('#saturation').val(data.saturation || 0)
        $('#colortemp').val(data.color_temp || 0)
    }
    function setCHSB() {
        $.getJSON('/api/color/chsb/' + $('#colortemp').val() + '/' + $('#hue').val() + '/' + $('#saturation').val() + '/' + $('#brightness').val(), setData)
    }
    function setColor() {
        $.getJSON('/api/color/hex/' + $('#color').val().replace('#', ''))
    }
    $('.on').on('click', function () {
        if (parseInt($('.brightness').text()) > 0)
            url = '/api/on/' + $('.brightness').text()
        else
            url = '/api/on'
        $.getJSON(url, setData)
    })
    $('.off').on('click', function () {
        $.getJSON('/api/off', setData)
    })
    $('form#chsb').on('submit', function (event) {
        event.preventDefault()
        setCHSB()
    })
    $('form#colorform').on('submit', function (event) {
        event.preventDefault()
        setColor()
    })
    $.getJSON('/api/info', setData)
})