$(function () {
	
    $.getJSON('/outages/getOutageCounts.php', function(json) {
        $.each(json, function(idx, obj) {
                $('.outage_graph').after('<div class="smalltext text-left-important">' + idx + ': ' + obj + '&nbsp;%</div>');
        });
    });

    function getOutageDialog() {
        $('html').append('<div id="outage_dialog"><a href="#" class="close-button btn-primary">x</a>\n\
            Welches Problem möchtest du melden? Du darfst jede Stunde ein Problem melden.<br />\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="1">Einloggen</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="2">Kann Konfiguration nicht speichern</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="3">keine Verbindung zu RWE Servern</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="4">Zentrale ist offline</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="5">Logikprofile sehr langsam</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="6">Mobiler Zugriff/App</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="7">Power-/Energy-Control</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="10">Philips Hue</button>\n\
                            <button class="btn btn-primary btn-block text-left-important outage-button" data-reason="11">Weißer Bildschirm</button>\n\
                    </div>');
        var outageDialog = $('#outage_dialog').bPopup({
            onClose: function() { $(this).remove(); return false; },
            closeClass: 'close-button',
        });
        $('.outage-button').on('click', function(e) {
            e.preventDefault();
            $.post('/outages/report.php', {'reason_id': $(this).data('reason')}, function() {
                outageDialog.close();
                document.location.reload(true);
            });
            return false;
        });
    }

    $('#report_outage').on('click', function() {
        getOutageDialog();
    });
	
    $.getJSON('/outages/getOutageData.php', function(json) {
        var data = {
            labels: json.labels,
            datasets: [
                {
                    label: "Problemreports der letzten 24 h",
                    fillColor: "rgba(119, 202, 255, 1)",
                    strokeColor: "rgba(78, 174, 255, 1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#ccc",
                    pointHighlightFill: "#ccc",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: json.values
                }
            ]
        };
        var max = Math.max.apply(Math, json.values) + 1;
        if (max < 10)
            max = 10;

        options = {
                responsive: true,
                maintainAspectRatio: false,
                //showScale: false,
                animation: false,
                scaleOverride: true,
                scaleSteps: max,
                scaleStepWidth: 1,
                scaleStartValue: 0,
                scaleShowLabels: false,
                scaleFontSize: 9,
                //pointDotRadius: 2,
                pointDot: false,
                bezierCurve: true,
                pointHitDetectionRadius: 1,
                showTooltips: false,
                //tooltipCaretSize: 5,
                //multiTooltipTemplate: "<%= label %> Uhr: <%= value %>",
                //tooltipTemplate: "<%= label %> Uhr: <%= value %>",
        };

        // Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#myChart").get(0).getContext("2d");
        // This will get the first returned node in the jQuery collection.
        var myLineChart = new Chart(ctx).Line(data, options);
    });

});