/**
 * Created by sheep on 2017/8/9.
 */
// load the js

// init the plot area

var cy = undefined;
var charts = undefined;

var type = "{{ type }}";
var data = {{ data }}

window.onload = function () {
    console.log("loaded");
    if (type == 'async'){
        $.getJSON("../data/data2.json", function(data){
            var id = GetQueryStringParams('id');
            console.log(data, id);
            var data2 = data[id];
            console.log(2, data2);

            $('#tab1').tabs({
                onShow: function (inputs) {
                    console.log(inputs[0].id);
                    if (inputs[0].id === 'test2' && charts === undefined) {
                        init_barplot(data2.bar);
                    }else if (inputs[0].id === 'test3' && cy === undefined) {
                        init_overview(data2.overview);
                    }
                }
            });
        });
    } else if (type == 'local') {
        var id = GetQueryStringParams('id');
        console.log(data, id);
        var data2 = data[id];
        console.log(2, data2);

        $('#tab1').tabs({
            onShow: function (inputs) {
                console.log(inputs[0].id);
                if (inputs[0].id === 'test2' && charts === undefined) {
                    init_barplot(data2.bar);
                }else if (inputs[0].id === 'test3' && cy === undefined) {
                    init_overview(data2.overview);
                }
            }
        });
    }
};


function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}

function init_barplot(config) {
    charts = echarts.init(document.getElementById('barplot'));
    charts.setOption(config);
}

function init_overview(config) {
    console.log(config);
    node_dict = {};
    for (var i in config.options.elements) {
        console.log(config.options.elements[i].group);
        var e = config.options.elements[i];
        if (e.group == "nodes") {
            node_dict[e.data.id] = e;
        }
    }
    config.options['container'] = document.getElementById('graph');
    cy = cytoscape(config.options);
    var callback = function (ele, event, type) {
        console.log("target: ", ele);
        var target = '';
        for (var i in config.elements){
            if (config.elements[i].data.id == ele.id()){
                target = config.elements[i];
            }
        }
        if (type == 'Expand') {
            // first read the expand selection
            console.log(event.cyTarget.id());
            var setting = node_dict[event.cyTarget.id()].expand;
            if (setting == undefined) {
                return;
            }
            if (setting.source == 'local'){
                // read the id from targets
                var needsToAdd = [];
                for (var i in setting.targets) {
                    var id = setting.targets[i];
                    var new_node = jQuery.extend(true, {}, default_node);
                    // new_node.data.id =
                    var node = new_dict[id];
                    new_node.data = node;
                    new_node.data['label'] = new_node.data.name;
                    new_node.position.x = 1000;
                    new_node.position.y = 1000;
                    var new_edge = jQuery.extend(true, {}, default_edge);
                    new_edge.data.id = 'edge' + event.cyTarget.id() + node.id;
                    new_edge.data.source = event.cyTarget.id();
                    new_edge.data.target = node.id;
                    console.log(new_edge);
                    console.log(new_node);
                    cy.add(new_node);
                    cy.add(new_edge);
                }
                cy.layout({
                    'name': 'dagre'
                })
            }
            // console.log(setting);
        }else if (type == 'Remove') {
            cy.remove(ele);
        }else if (type == 'Mark'){
            // var tgt = cy.$("#" + ele.id());
            // console.log(tgt);
            ele.css('background-color', 'red')
        }
    };
    var defaults = {
        menuRadius: 100, // the radius of the circular menu in pixels
        selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
        commands: [ // an array of commands to list in the menu or a function that returns the array
            {
                fillColor: 'rgba(20, 20, 20, 0.75)',
                content: "Mark", // html/text content to be displayed in the menu
                select: function (ele, event) {
                    callback(ele, event, 'Mark')
                }
            },
            {
                fillColor: 'rgba(20, 20, 20, 0.75)',
                content: "Expand", // html/text content to be displayed in the menu
                select: function (ele, event) {
                    callback(ele, event, 'Expand')
                }
            },
            {
                fillColor: 'rgba(20, 20, 20, 0.75)',
                content: "Remove", // html/text content to be displayed in the menu
                select: function (ele, event) {
                    callback(ele, event, 'Remove')
                }
            }
        ], // function( ele ){ return [ /*...*/ ] }, // example function for commands
        fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
        activeFillColor: 'rgba(92, 194, 237, 0.75)', // the colour used to indicate the selected command
        activePadding: 20, // additional size in pixels for the active command
        indicatorSize: 24, // the size in pixels of the pointer to the active command
        separatorWidth: 3, // the empty spacing in pixels between successive commands
        spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
        minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight
        maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight
        openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
        itemColor: 'white', // the colour of text in the command's content
        itemTextShadowColor: 'black', // the text shadow colour of the command's content
        zIndex: 9999, // the z-index of the ui div
        atMouse: false // draw menu at mouse position
    };
    var cxtmenuApi = cy.cxtmenu( defaults );
    cy.on('tap', 'node', function(evt){
        console.log( evt.cyTarget.id() );
    });
    cy.on('mouseover', 'node', function (evt) {
        $(".qtip-content").remove();
        $(".qtip").remove();
        // console.log("over");
        // console.log(evt.cyTarget.id());
        var tip = node_dict[evt.cyTarget.id()].tooltip;
        if (tip == undefined) {
            return;
        }
        var text = "";
        for (var i in tip){
            // if (i == 'Name'){
            //     continue;
            // }
            text += i + ": " + tip[i] + "</br>";
        }
        evt.cyTarget.qtip({
            style: {
                classes: 'qtip-tipsy'
            },
            content: {
                text: text
            },
            show: {
                ready: true
            }
        })
    });
    cy.on('mouseout', 'node', function (evt) {
        $(".qtip-content").remove();
        $(".qtip").remove();
    });
}