// vim: set filetype=javascript expandtab tabstop=4 shiftwidth=4 autoindent smartindent:
var d = new Object();
d.ms = 1;
d.sec = 1000*d.ms;
d.min = 60 * d.sec;
d.hour = 60 * d.min;
d.day = 24 * d.hour;
d.week = 7 * d.day;
d.month = 30.5 * d.day;
d.now = new Date().getTime();

var timeToUTC = function(d) { return d + new Date().getTimezoneOffset() * 60 * 1000; }
var timeToLocal = function(d) { return d - new Date().getTimezoneOffset() * 60 * 1000; }

$(document).ready(function(){
    var from = d.now - 2*d.day;
    var to = d.now;
    var fromOverview = d.now - 1.5 * d.month;
    var toOverview = d.now;
    var numberOfValues = function() { return jQuery("#ebusgraph").width(); };

    var datasetDetail = [];
    var datasetOverview = [];

    var plotOverview = null;
    var plotDetail = null;
    var indexFound = null;
    var defaultSensorConfigList = [
{
    "id":"heizkreisregler10.betriebsdatenRegler1.kesselTemperatur",
    "description":"Kessel Temperatur",
    "values":Math.ceil(jQuery("#ebusgraph").width()/6),
    "lines":{fill: true, lineWidth: 1, fillColor: "rgba(80,40,100, 0.05)"},
    "show":true, 
    "color":"rgb(80,40,100)"
},
{
    "id":"heizkreisregler9.solarDaten.tempKollektor",
    "description":"Kollektortemperatur",
    "lines":{fill: true, fillColor: "rgba(255, 0, 0, 0.4)"},
    "values":Math.ceil(jQuery("#ebusgraph").width()/1),
    "show":true, 
    "color":"#f30000"
},
{
    "id":"heizkreisregler9.solarDaten.tempWarmwasserSolar",
    "description":"Warmwasser Solar",
    "lines":{fill: true, fillColor: "rgba(252,133,30,0.1)"},
    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
    "show":false, 
    "color":"rgba(252,133,34,0.5)"
},
{
    "id":"heizkreisregler10.betriebsdatenRegler1.boilerTemperatur",
    "description":"Boilertemperatur",
    "values":Math.ceil(jQuery("#ebusgraph").width()/8),
    "show":false,
    "color":"#48b4ff"
},
{
    "id":"de.wettermichel.temperature",
    "description":"Temperatur (Celsius) (wettermichel)",
    "show":false,
    "values":Math.ceil(jQuery("#ebusgraph").width()/4),
    "lines":{fill: true, fillColor: "rgba(132, 181, 0, 0.2)"},
    "color":"#84b500"
},
{
    "id":"dockstar.load5",
    "description":"System Load (5m, *10)",
    "lines":{lineWidth:1},
    "show":false,
    "color":"blue",
    "mapFunc":function(d){return [d[0],d[1]*10]}
},
{
    "id":"dockstar.internet.latency_ns",
    "description":"Internet latency in ms",
    "lines":{lineWidth:1},
    "show":false,
    "color":"black",
    "mapFunc":function(d){return [d[0],d[1]/1000/1000]}
},
    ];
    var sensorConfigList = JSON.parse(window.localStorage.getItem("ebusConfig")) || defaultSensorConfigList;

var pickSensorConfig = function(sensorid) {
    var sensorConfigFound;
    $.each(sensorConfigList, function(i,sensorConfig) {
        if (sensorConfig["id"] == sensorid) {
            sensorConfigFound = sensorConfig;
            return false;
        }
    });
    return sensorConfigFound;
}
var replot = function() {
    plotDetail.setData(datasetDetail);
    plotDetail.getOptions().xaxes[0].min = timeToLocal(from);
    plotDetail.getOptions().xaxes[0].max = timeToLocal(to);
    plotDetail.setupGrid();
    plotDetail.draw();
}

var redrawLegend = function() {
    $("#legend").children().remove();
    var table = jQuery("<table>");
    for (var i = 0; i < sensorConfigList.length; i++) {
        var config = sensorConfigList[i];
        var row = jQuery("<tr>");
        var colorBox = jQuery("<td>").addClass("legendColorBox").appendTo(row);
        var colorBoxBox = jQuery("<div>").css({background:config.color}).appendTo(colorBox);
        var checkbox = jQuery("<input>").attr("type","checkbox").appendTo(colorBoxBox);
        checkbox.attr("checked", config.show);
        checkbox.css({opacity:0.6});
        checkbox.data("id", config.id);
        checkbox.click(function() {
            var config = pickSensorConfig($(this).data("id"));
            config.show = $(this).prop("checked");
            if (config.show) {
                plotSensor(config);
            } else {
                unplotSensor(config.id);
            }
        });

        var label = jQuery("<td>").addClass("legendLabel").appendTo(row);
        jQuery("<span>").text(sensorConfigList[i].description).appendTo(label);
        jQuery("<button>").css({padding:0,border:"1px solid gray",width:20,height:20}).text("X").appendTo(label).click(function(){
            var configId = jQuery(this).data("configId");
            sensorConfigList = jQuery(sensorConfigList).filter(function(i,config) {
                return config.id != configId;
            }).toArray();
            init();
        }).data("configId", config.id);
        table.append(row);
    }
    $("#legend").append($("<button>").text("Reset").click(function(){
        sensorConfigList = defaultSensorConfigList;
        init();
    }));
    var select = jQuery("<select>");
    $("#legend").append(select);
    jQuery.getJSON("/api/list", function(list) {
        list.sort();
        for (var i in list) {
            jQuery("<option>").attr("value", list[i]).text(list[i]).appendTo(select);
        }
    });
    $("#legend").append($("<button>").text("Add").click(function(){
        var id = select.val();
        var idPath = id.split(".");
        var desc = window.prompt("Beschreibung des Datensatzes: "+id, idPath[idPath.length-1]);
        var config = { "id":id,
            "description": desc,
        "show":true,
        "lines": {fill: false, lineWidth:1},
        "color":"gray",
        };
        sensorConfigList.push(config);
        redrawLegend();
        plotSensor(config);
    }));
    $("#legend").append(table);
};

var replotOverview = function() {
    plotOverview.setData(datasetOverview);
    plotOverview.setSelection({xaxis: {"from": timeToLocal(from), "to": timeToLocal(to)}}, true);
    plotOverview.setupGrid();
    plotOverview.draw();
};
var plotSensor = function(sensorConfig) {
    window.localStorage.setItem("ebusConfig", JSON.stringify(sensorConfigList));
    plotSensorDetail(sensorConfig);
    plotSensorOverview(sensorConfig);
};
var unplotSensor = function(sensorid) {
    window.localStorage.setItem("ebusConfig", JSON.stringify(sensorConfigList));
    unplotSensorDetail(sensorid);
    unplotSensorOverview(sensorid);
};
var plotSensorDetail = function(sensorConfig) {
    jQuery("#ebusgraph").animate({opacity:0.2}, 200);
    var values = sensorConfig.values || plotDetail.width();
    $.getJSON("/api/range/"+escape(sensorConfig["id"])+"/"+from+"/"+to+"/" + values,
            function(response) {
                if (!response.error) {
                    response.data = response.data.map(function(d) {
                        return [ timeToLocal(d[0]), d[1] ]; 
                    });
                    if (sensorConfig.mapFunc) {
                        response.data = response.data.map( sensorConfig.mapFunc )
                    }
                    datasetDetail.push({"data":response["data"],
                        "userData":sensorConfig["id"],
                        "lines":sensorConfig.lines || {},
                        "label":sensorConfig.description,
                        "color":sensorConfig.color});

                    jQuery("#ebusgraph").animate({opacity:1.0}, 200);
                    replot();
                } else {
                    jQuery("#ebusgraph").animate({backgroundColor: "lightRed"},200);
                    alert("Fehler: " + response["error"]);
                }
            }).fail(function(a) {
                jQuery("#ebusgraph").animate({backgroundColor: "lightRed"},200);
            });
};

var unplotSensorDetail = function(sensorid) {
    $.each(datasetDetail, function(i, sensor) {
        if (sensor["userData"] == sensorid) {
            datasetDetail.splice(i,1);
            replot();
            return false;
        }
    });   
};

var plotSensorOverview = function(sensorConfig) {
    var values = sensorConfig.values || plotOverview.width();
    $.getJSON("api/range/"+escape(sensorConfig["id"])+"/"+fromOverview+"/"+toOverview+ "/" + values,
            function(response) {
                if (!response.error) {
                    response.data = response.data.map(function(d) { 
                        return [ timeToLocal(d[0]), d[1] ]; 
                    });
                    if (sensorConfig.mapFunc) {
                        response.data = response.data.map( sensorConfig.mapFunc)
                    }
                    datasetOverview.push({"data":response["data"],
                        "userData":sensorConfig["id"],
                        "label":sensorConfig["id"],
                        "color":sensorConfig.color});
                    replotOverview();
                } else {
                    alert("Overview Fehler: " + response["error"]);
                }
            });

};
var unplotSensorOverview = function(sensorid) {
    $.each(datasetOverview, function(i, sensor) {
        if (sensor["userData"] == sensorid) {
            datasetOverview.splice(i,1);
            replotOverview();
            return false;
        }
    });
}


plotDetail = $.plot($("#ebusgraph"), 
        datasetDetail, 
        { 
           xaxis: { 
               mode: "time", 
           min: timeToLocal(from), 
           max:timeToLocal(to),
           panRange: [timeToLocal(fromOverview), timeToLocal(toOverview)]
           },
           grid: { hoverable: true},
           yaxis: { min: -16, max: 100, panRange: [-50,300] },
                    pan: {
                        interactive: true,
           frameRate: 16,
           cursor:"move"
                },
           legend: { show : false }
        });

$("#ebusgraph").bind('plotpan', function (event, plot) {
    var axes = plot.getAxes();
    plotOverview.setSelection({xaxis: {"from": Math.round(axes.xaxis.min), "to": Math.round(axes.xaxis.max)}}, true);
    if (plot.getPlaceholder().css('cursor') == "move")
        return;
    // On drag end:
    update_range(Math.round(axes.xaxis.min), Math.round(axes.xaxis.max));
});

$(window).resize(function() {
    plotDetail.resize();
    plotDetail.setupGrid();
    plotDetail.draw();
    plotOverview.resize();
    plotOverview.setupGrid();
    plotOverview.draw();
});

$("#ebusgraph").bind("plothover", function (event, pos, item) {
    function showTooltip(x, y, series, time, value) {
        $('<div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        })
        .append($('<p>').text(series))
        .append($('<p>').text(time.toLocaleDateString() + " " + time.toLocaleTimeString()))
        .append($('<p>').text(value))
        .addClass("tooltip").appendTo("#ebusgraph").fadeIn(100);
    }
    $("#ebusgraph .tooltip").remove();
    if (item) {
        var x = item.datapoint[0].toFixed(2);
        var y = item.datapoint[1].toFixed(2);
        showTooltip(item.pageX, item.pageY, item.series.label, new Date(Math.ceil(x)), y);
    }
});

plotOverview = $.plot($("#overview"),
        datasetOverview,
        { // options
            series: {
                lines: { show: true, lineWidth: 1 },
             shadowSize: 0
            },
             xaxis: { mode: "time", min: timeToLocal(fromOverview), max:timeToLocal(toOverview)},
             yaxis: { ticks: [], min: -26, max: 100, autoscaleMargin: 0.1 },
             legend: { show: false },
             selection: { mode: "x" }
        });

function update_range(range_from, range_to) {
    if (timeToUTC(range_to) == to && timeToUTC(range_from) == from) {
        return;
    }
    // max selection range 
    if (range_to - range_from > 4*d.month) {
        // reset selection
        plotOverview.setSelection({xaxis: {"from": from, "to": to}}, true);
        return;
    } else {
        from = timeToUTC(range_from);
        to = timeToUTC(range_to);
    }
    sensors = [];
    for (elem in datasetOverview) {
        sensor = datasetDetail[elem]["userData"];
        sensors.push(sensor);
    }
    datasetDetail =[];
    for (i in sensors) {
        plotSensorDetail(pickSensorConfig(sensors[i]));
    }
}

$("#overview").bind("plotselected", function (event, ranges) {
    var range_from = Math.round(ranges.xaxis.from);
    var range_to = Math.round(ranges.xaxis.to);
    update_range(range_from, range_to);
});

var init = function() {
    redrawLegend();
    datasetDetail = [];
    datasetOverview = [];
    $.each(sensorConfigList, function(i,sensorConfig) {
        if (sensorConfig.show) {
            //Plot
            plotSensor(sensorConfig);
        }
    });
}
init();

// TODO http://people.iola.dk/olau/flot/examples/annotating.html
});