var width = 960,
    height = 500;

var svg = d3.select("#d3_container")
.append("svg")
.attr("class", "network")
.attr("width", width)
.attr("height", height),
    g = svg.append("g");

var transform = d3.zoomIdentity,
    zoom = d3.zoom().scaleExtent([0.5, 8]).on("zoom", zoomed);

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var line = d3.line();

// *********** Network Variable: Layout, Community, Nodes, Edges ********** //
var layout = "YifanHu";
var size_mode = "overlap_num", color_mode = "link_community", plot_x_mode = "link_overlap_num", plot_y_mode = "performance";


var communities = [];
var link_communities = [];
var overlap_threshold = 1;

var course_info;
var nodes, overlapping_nodes, link_overlapping_nodes, links;

var getCommunityColor = function(d){

    for (var i=0; i<communities.length; i++){
        if(String(d) == String(communities[i].id)){
            return communities[i].color;
        }
    }

};




// *********** pie element for overlapping node ********** //
var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var pie_arc = d3.arc()
    .outerRadius(function(d) {
        if(size_mode=="overlap_num")
            return 0.001 + (5+2*d.data.overlap_num);

    })
    .innerRadius(0);



/*
 json data import and push to network array
 */
$(document).ready(function(){

    initD3();
});



function initD3(){

    d3.json("t3_ct_data_visualization_final.json", function(error, graph) {

        // ************* 1. graph data parsing ************ //
        // 먼저 edge 데이터 파싱하면서, 해당 source, target node에 attribute 저장
        console.log(graph);

        // communities = _.uniq(_.pluck(_.pluck(graph.edges, "attributes"), "cluster"));
        nodes = graph.nodes;
        graph.edges.forEach(function(edge){
            communities.push({
                "id": edge.attributes.cluster,
                "color": edge.color
            });
            nodes.forEach(function(node){
               if(node.id == edge.source || node.id == edge.target){
                   if(node.communities == undefined){
                       node.communities = [];
                       node.communities.push(edge.attributes.cluster);
                   }else{
                       node.communities.push(edge.attributes.cluster);
                   }
               }
            });

        });
        // set the array to unique object array
        communities = _.uniq(communities, function (d) { return d.id; });
        console.log(communities);
        console.log(nodes);

        nodes = nodes.map(function(d){
            return {
                // node info
                'index': d.id,
                'x': d.x,
                'y': d.y,
                'color': getCommunityColor(d.communities[0]),

                'community': _.uniq(d.communities),
                'overlap_num': _.uniq(d.communities).length,

                // course info
                'area': d.attributes.area,
                'subject': d.attributes.subject,
                'school': d.attributes.school,
                'url': d.attributes.name
            }

        });
        console.log(nodes);

        // ******************* x, y range and domain setting ****************** //
        var x0 = d3.extent(nodes, function(d){ return d.x;});
        var y0 = d3.extent(nodes, function(d){ return d.y;})
        x.domain(x0);
        y.domain(y0);

        // ******************* link parsing ********************************** //
        links = graph.edges.map(function(d){

            return {
                'source': d.source,
                'target': d.target,
                'size': d.size,
                'color': d.color,
                'community': d.attributes.cluster
            }
        });
        console.log(links);

        

        // ******************** draw each edge using path ******************** //
        g.append("g")
            .attr("class", "edges")
            .attr("id", "edges")
            .selectAll("line")
            .data(links)
            .enter().append("path")
            .attr("class", "line")
            .attr("stroke-width", function(d) { return Math.sqrt(d.size); })
            .attr("stroke", function(d) { return d.color; })
        		.attr("stroke-opacity", 0.6)
            .attr("d", function(d) { return line( [
                [x(findNodePositionX(d.source)), y(findNodePositionY(d.source))],
                [x(findNodePositionX(d.target)), y(findNodePositionY(d.target))]
            ])});


        // ******************** draw node ******************** //
        g.append("g")
            .attr("class", "nodes")
            .attr("id", "nodes")
            .selectAll("circle")
            .data(nodes)
            .enter().append("circle")
            .attr("fill", function(d) { return d.color;})
            .attr("fill-opacity", getNodeOpacity)
            .attr("cx", function(d) { return x(d.x); })
            .attr("cy", function(d) { return y(d.y); })
            .attr("r", function(d) { return 5+d.overlap_num; })
            .call(d3.drag()
                .on("drag", dragged))
            .on("mouseclick", function(d){ return;}); // do nothing when clicking node

        // ***************  draw overlay pie chart on the node circle **************** //
        // link_overlapping_nodes = getOverlappingNodes_LC();
        link_overlapping_nodes = getOverlappingNodes();
        drawOverlappingPieChart(link_overlapping_nodes, "link_community");


        // ********** Drag zoom initialize ************* //
        svg.call(zoom)
            .call(zoom.transform, d3.zoomIdentity.translate(width/6, height/10).scale(0.7));



    });
}


function findNodePositionX(id){
    var temp_x = _.where(nodes, {index: id});
    return temp_x[0].x;
}
function findNodePositionY(id){
    var temp_y = _.where(nodes, {index: id});
    return temp_y[0].y;
}

function findNodeById(id){
    var temp_node = _.where(nodes, {index: id});
    return temp_node;
}

function drawOverlappingPieChart(overlaps, type){
    var arc = g.select("#nodes").append("g")
        .attr("class", "overlapping_nodes " + type)
        .attr("id", "overlapping_nodes")
        .selectAll(".arc")
        .data(overlaps)
        .enter().append("g")
        .attr("class", "pie_container")
        .attr("transform", function (d) {
            return "translate (" + x(d.x) + "," + y(d.y) + ")";
        })
        .append("g").attr("class", "pies")
        

    // Select each g element we created, and fill it with pie chart;
    var pies = arc.selectAll(".pies")
        .data(function (d) { return pie(d.overlapping_communities); })
        .enter()
        .append("g")
        .attr("class", "arc");

    pies.append("path")
        .attr("d", pie_arc)
        .attr("stroke-width", 0)
        .attr("stroke", "#FFF")
        .attr("fill", function(d) { return getCommunityColor(d.data.id)});

}

function getOverlappingNodes (){
    var overlaps = [];
    overlaps = nodes.filter(function(d) {
        if(+d.overlap_num > overlap_threshold) return true;
        return false; // skip

    }).map(function(filtered_d){
        return {
            'index' : filtered_d.index,
            'x' : filtered_d.x,
            'y' : filtered_d.y,
            'overlapping_num': +filtered_d.overlap_num,
            'overlapping_communities': filtered_d.community.map(function(d){
                    return {
                        "id": d,
                        "value": 0,
                        "overlap_num": +filtered_d.overlap_num
                    }
                }
            )
        }
    });

    overlaps.forEach(function(node, index){

        var from = _.pluck(_.where(links, {source: node.index}), "community");
        var to = _.pluck(_.where(links, {target: node.index}), "community");
        // var neighbors = _.union(from, to); // unique ver.
        var neighbors = Array.prototype.concat(from, to);
        console.log(neighbors);

        neighbors.forEach(function(nei){
            var commu_index = _.indexOf(_.pluck(node.overlapping_communities, "id"), nei);

            if(commu_index !== -1)
                overlaps[index].overlapping_communities[commu_index].value++;
        })
    });
    console.log(overlaps);
    return overlaps;
}


function getOverlappingNodes_LC(){
    var overlaps = [];
    overlaps = nodes.filter(function(d) {
        if(+d.link_overlap_num > overlap_threshold) return true;
        return false; // skip

    }).map(function(filtered_d){
        return {
            'index' : filtered_d.index,
            'x' : filtered_d.x,
            'y' : filtered_d.y,
            'overlapping_num': +filtered_d.link_overlap_num,
            'overlapping_communities': filtered_d.link_community.split("+").map(
                function(d){ return { "id": d, "value": 0,
                    "overlap_num": +filtered_d.overlap_num,
                    "link_overlap_num": +filtered_d.link_overlap_num,
                    'betweenness': +filtered_d.between,
                    'performance': +filtered_d.performance}; })
        }
    });
    overlaps.forEach(function(node, index){

        var from = _.pluck(_.where(links, {source: node.index}), "link_community");
        var to = _.pluck(_.where(links, {target: node.index}), "link_community");
        var neighbors = _.union(from, to);
        // link community algorithms의 경우 link마다 community가 mapping되있음.

        neighbors.forEach(function(nei){
            var commu_index = _.indexOf(_.pluck(node.overlapping_communities, "id"), nei);
            if(commu_index !== -1)
                overlaps[index].overlapping_communities[commu_index].value++;
        })
    });
    return overlaps;
}



function updatePieChart(mode){
    // **************** Pie update ****************** //
    var pie_selector = d3.select(".overlapping_nodes." + mode);
    if(pie_selector.empty()){
        d3.select("#overlapping_nodes").remove();
        if(mode == "link_community")
            drawOverlappingPieChart(link_overlapping_nodes, "link_community");
        else
            drawOverlappingPieChart(overlapping_nodes, "community");
    }
}



function zoomed(){
    // console.log(d3.event.transform)
    g.select("g.nodes").attr("transform", d3.event.transform);
    g.select("g.edges").attr("transform", d3.event.transform);
    g.select("g.communities").attr("transform", d3.event.transform);
    // g.select("g.overlapping_nodes").attr("transform", d3.event.transform);

}

function dragged(d){

    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}


function getNodeOpacity (node){
    if(+node.overlap_num > overlap_threshold) return 0;
    else return 1;

}