﻿    function get_list() {
        $("#monitor").hide();
        $("#message_block").text("Идет загрузка данных");
        $.getJSON("/cgi-bin/getdataseo.cgi?key=listsite",
            function(data) {
                $("#message_block").text("");
                if (data.site[0].id) {
                    for (var i = 0; i < data.site.length; i++) {
                        $("#message_block").append("<a href=\"javascript:getGraph(" + data.site[i].id + ", '" + data.site[i].system + "');\">" + data.site[i].name + "</a>, ");
                    }
                    getGraph(data.site[0].id, data.site[0].system);
                    $("#monitor").show();
                }
            }
        );
    }

    function getGraph(id, system) {
        $.getJSON("/cgi-bin/getdataseo.cgi?key=datasite&index=" + id + "&system=" + system,
            function(data) {
                defdata(data);
            }
        );
    }

    function defdata(datasets) {
        var i = 0;
        $.each(datasets,
            function(key, val) {
                val.color = i;
                ++i;
            }
        );
        plotAccordingToChoices();
        var previousPoint = null;
        
        $("#placeholder").bind("plothover",
            function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (previousPoint != item.datapoint) {
                        previousPoint = item.datapoint;
                        $("#tooltip").remove();
                        var label_text = item.series.data[item.dataIndex];
                        showTooltip(item.pageX, item.pageY, label_text[2]);
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            }
        );

    // insert checkboxes
        function plotAccordingToChoices() {
            var data = [];
            $.each(datasets, function(key, val) {
                data.push(datasets[key]);
            });
            if (data.length > 0)
                $.plot($("#placeholder"), data, {
                    yaxis: {
                        min: -20, max: 0
                    },
                    xaxis: {
                        mode: null,
                        min: -30, max: 0
                    },
                    grid: { hoverable: true },
                    legend: {
                        position: "sw",
                        backgroundOpacity: 0.2
                    }
                });
        };
        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y + 20,
                left: x - 90,
                'font-size': '10px',
//                border: '1px solid grey',
                padding: '2px',
                'background-color': '#fff',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        };
    }
