var BackUp = function() {
    var ws;

    var self = this;

    var $pressionTop = $('#pression-top-val');
    var $pressionBottom = $('#pression-bottom-val');
    var $flexion = $('#flexion-val');
    var $angleX = $('#angle-x-val');
    var $angleY = $('#angle-y-val');
    var $angleZ = $('#angle-z-val');

    var gauge;

    FusionCharts.ready(function () {
        gauge = new FusionCharts({
            'id': 'chart',
            'type': 'angulargauge',
            'renderAt': 'fusioncharts-div',
            'width': '1000',
            'height': '500',
            'dataFormat': 'json',
            'dataSource': {
                'chart': {
                    //'caption': 'Inclinaison',
                    'lowerLimit': '160',
                    'upperLimit': '200',
                    'theme': 'fint',
                    "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
                    'bgColor': '#00b0c0',
                },
                'colorRange': {
                    'color': [
                    {
                        'minValue': '160',
                        'maxValue': '171',
                        'code': '#b41527',
                    }, {
                        'minValue': '171',
                        'maxValue': '175',
                        'code': '#e48739',
                    }, {
                        'minValue': '175',
                        'maxValue': '185',
                        'code': '#399e38',
                    }, {
                        'minValue': '185',
                        'maxValue': '189',
                        'code': '#e48739',
                    }, {
                        'minValue': '189',
                        'maxValue': '200',
                        'code': '#b41527',
                    },
                    ],
                },
                'dials': {
                    'dial': [ {
                        'id': 'Dial1',
                        'value': '180',
                        'borderalpha': '0',
                        'bgColor': '0,#aaaaaa,0',
                        'basewidth': '40',
                        'topwidth': '1',
                        'radius': '300',
                    }, ],
                },
            },
        });

        gauge.render();

        window.gauge = gauge;
    });

    this.run = function() {
        var uri = 'ws://' + document.location.hostname + ':1234';

        ws = new WebSocket(uri);

        ws.onopen = function() {
            console.log('open');
        };

        ws.onerror = function(evt) {
            console.log(evt);
        };

        ws.onclose = function() {
            console.log('connection closed by remote host')
        };

        ws.onmessage = function(evt) {
            /* TODO */

            var message = JSON.parse(evt.data);

            //console.log(message);

            $pressionTop.text(message['pressure_top']);
            $pressionBottom.text(message['pressure_bottom']);
            $flexion.text(message['flexion']);

            if (message['angle_x']) {
                angle = parseInt(message['angle_x'], 10) + 90;

                ref = FusionCharts.getObjectReference('chart');

                ref.feedData('value=' + angle);
                $angleX.text(angle);
            }

            $angleY.text(message['angle_y']);
            $angleZ.text(message['angle_z']);
        };
    };
};

var back_up;

window.back_up = back_up;

$(document).ready(function() {
    back_up = new BackUp();

    back_up.run();
});