/**
 * Created by IntelliJ IDEA.
 * User: henne
 * Date: 23.03.12
 * Time: 00:51
 * Main Javascript file
 */
var rooms;
var volumes = {"room1":0,"room2":0,"room3":0,"room4":0};
var devices;
$(document).ready(
    function() {


        function sendData(data) {
            $.ajax({
                type: 'POST',
                url: "/control/devices",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data)
            });
            console.log(data);
            console.log(JSON.stringify(data));
        }

        var senden = function sendOutAllDevices() {
            var changedDevs = new Array();
            for(var i=0;i<devices.length;i++) {
                if(devices[i].type=="Par56Spot" && devices[i].dirty) {
                    delete devices[i].dirty;
                    var dev = {"deviceId": i, "options":{"red":devices[i].red, "green":devices[i].green, "blue":devices[i].blue}};
                    changedDevs.push(dev);
                }
            }
            if (changedDevs.length > 0) {
                sendData({"timeStamp": Math.round(new Date().getTime()/1000), "updates": changedDevs});
            }
            console.log("set new interval for sending");

        };
        window.setInterval(senden, 100);

        $("#slider1").slider({ min: 0, max: 100, slide: function(event, ui) {
            volumes.room1 = ui.value;
            dataChanged = true;
        } });
        $("#tabs").tabs();
        $("#v-tabs").tabs().addClass('ui-tabs-vertical');
        $(".lampel .circle").click(function() {
            if($(this).hasClass('black')){
                $(this).removeClass('black');
            } else {
                $(this).addClass('black');
            }
        });
        var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
            imagepath: '/resources/images/colorpicker/',
            change: function(hexcolor) {
                var red = hexcolor.substr(1,2);
                var green = hexcolor.substr(3,2);
                var blue = hexcolor.substr(5,2);
                $('#par56select option:selected').each(function() {
                    devices[$(this).attr('name')].red = parseInt(red, 16);
                    devices[$(this).attr('name')].green = parseInt(green, 16);
                    devices[$(this).attr('name')].blue = parseInt(blue, 16);
                    devices[$(this).attr('name')].dirty = true;
                });
                console.log("data changed" + hexcolor);

            }
        });
        $.getJSON('/control/devices', function(data) {
            devices = data;
            for(var i=0;i<devices.length;i++) {
                if (devices[i].type == "Par56Spot") {
                    $('#par56select').append("<option name=" + devices[i].deviceId + ">" + devices[i].deviceName + "</option>");
                }
            }

        });
        $('.buzzer button').click(function() {
            var span = $(this).parent().find('span');
            span
                .toggleClass('red')
                .toggleClass('green');
            if(span.text() == "Auf") {
                span.text("Zu");
            } else {
                span.text("Auf");
            }

        })
        $('#par56select').change(function() {
            $('#par56select option:selected').each(function() {
                var red = devices[$(this).attr('name')].red.toString(16);
                var green = devices[$(this).attr('name')].green.toString(16);
                var blue = devices[$(this).attr('name')].blue.toString(16);
                if(red.length == 1) {
                    red += red;
                }
                if(green.length == 1) {
                    green += green;
                }
                if(blue.length == 1) {
                    blue += blue;
                }
                var hexstring = '#' + red + green + blue;
                console.log("lampe:" + hexstring);
                colorpicker_raum1.hex(hexstring);
            });
        });
    }
);