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');
    $notification = $('#notification-div');

    var gauge;

    FusionCharts.ready(function () {
        gauge = new FusionCharts({
            'id': 'chart',
            'type': 'angulargauge',
            'renderAt': 'fusioncharts-div',
            'width': '800',
            'height': '500',
            'dataFormat': 'json',
            'dataSource': {
                'chart': {
                    //'caption': 'Inclinaison',
                    'lowerLimit': '-50',
                    'upperLimit': '50',
                    'theme': 'fint',
                    "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
                    'bgColor': '#00b0c0',
                },
                'colorRange': {
                    'color': [
                    {
                        'minValue': '-50',
                        'maxValue': '-15',
                        'code': '#b41527',
                    }, {
                        'minValue': '-15',
                        'maxValue': '-5',
                        'code': '#e48739',
                    }, {
                        'minValue': '-5',
                        'maxValue': '5',
                        'code': '#399e38',
                    }, {
                        'minValue': '5',
                        'maxValue': '15',
                        'code': '#e48739',
                    }, {
                        'minValue': '15',
                        'maxValue': '50',
                        'code': '#b41527',
                    },
                    ],
                },
                'dials': {
                    'dial': [ {
                        'id': 'Dial1',
                        'value': '0',
                        '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;
                console.log('angle: ' + angle);

                ref = FusionCharts.getObjectReference('chart');

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

            if (message['pressure_top']) {
                pressure_top = parseInt(message['pressure_top'], 10);
            } 
            if (message['pressure_bottom']) {
                pressure_bottom = parseInt(message['pressure_bottom'], 10);
            } 

            console.log(pressure_top);
            if (pressure_top < 900) {
                $notification.show();
            } else {
                $notification.hide();
            }
        };
    };
};

var back_up;

window.back_up = back_up;

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

    back_up.run();
});