Sui.ready(() => {
    let debugResponse = (data) => {
        document.querySelector('#response').innerHTML = data;
    };
    
    // init collapsible containers
    Sui.select('.collapsible').forEach((container) => {
        container.querySelector('.heading').addEventListener('click', (item) => {
            container.classList.toggle('open');
        });
    });
    
    // init actuators
    [{
        api: 'MOTOR',
        method: 'POST',
        selector: '.slider.motor',
        event: 'change',
        onResponse: debugResponse,
        data: function() {
            let payload = {},
                motorValue = this.value,
                motorNr = this.getAttribute('data-motor-nr'),
                actuatorId = 'motor' + motorNr;
            // update actuator value label
            Sui.select('[data-actuator-id=\"'+ actuatorId + '\"]')
                .forEach( element => element.innerHTML = motorValue);
            // add actuator to payload
            payload[actuatorId] = motorValue;
            return Sui.util.serialize(payload);
        }
    }, {
        api: 'LASER',
        method: 'POST',
        selector: '.slider.laser',
        event: 'change',
        onResponse: debugResponse,
        data: function() {
            // update actuator value label
            Sui.select('[data-actuator-id="laser"]')
                .forEach( element => element.innerHTML = this.value );
            // return payload
            return Sui.util.serialize({
                laser: this.value
            });
        }
    }].forEach(Sui.link({
        api: {
            MOTOR: '/spirograph', // {motorNr}/{value}
            LASER: '/spirograph' // {value}
        }
    }));
});