/* ------------------------------------------------------------------------------
 *
 *  # D3.js - Venn diagram with tooltip
 *
 *  Venn diagram demo setup with interactive data tooltip
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */

$(function () {


    // Data set
    // ------------------------------

    // Circles
    var sets = [
        {label: 'SE', size: 28},
        {label: 'Treat', size: 35},
        {label: 'Anti-CCP', size: 108},
        {label: 'DAS28', size: 106}
    ];

    // Overlaps
    var overlaps = [
        {sets: [0,1], size: 1},
        {sets: [0,2], size: 1},
        {sets: [0,3], size: 14},
        {sets: [1,2], size: 6},
        {sets: [1,3], size: 0},
        {sets: [2,3], size: 1},
        {sets: [0,2,3], size: 1},
        {sets: [0,1,2], size: 0},
        {sets: [0,1,3], size: 0},
        {sets: [1,2,3], size: 0},
        {sets: [0,1,2,3], size: 0}
    ];


    // Initialize chart
    // ------------------------------

    // Define colors
    var colours = d3.scale.category10();

    // Get positions for each set
    sets = venn.venn(sets, overlaps);

    // Draw the diagram in the 'venn' div
    var diagram = venn.drawD3Diagram(d3.select("#d3-venn-tooltip"), sets, 350, 350);


    // Add tooltip
    // ------------------------------

    // Add a tooltip showing the size of each set/intersection
    var tooltip = d3.select("body").append("div")
        .attr("class", "venntooltip");

    d3.selection.prototype.moveParentToFront = function() {
        return this.each(function(){
            this.parentNode.parentNode.appendChild(this.parentNode);
        });
    };

    // Text styling
    diagram.text.style("fill", "white").style("font-weight", "500").style("cursor", "pointer");

    // Hover on all the circles
    diagram.circles
        .style("stroke-opacity", 0)
        .style("stroke", "white")
        .style("stroke-width", "2")
        .style("fill-opacity", .7);


    // Add events
    diagram.nodes
        .on("mousemove", function() {
            tooltip.style("left", (d3.event.pageX + 20) + "px")
                   .style("top", (d3.event.pageY - 15) + "px");
        })
        .on("mouseover", function(d, i) {
            var selection = d3.select(this).select("circle");
            selection.moveParentToFront()
                .transition()
                .style("fill-opacity", .7)
                .style("cursor", "pointer")
                .style("stroke-opacity", 1);

            tooltip.transition().style("display", "block");
            tooltip.text(d.size + " users");
        })
        .on("mouseout", function(d, i) {
            d3.select(this).select("circle").transition()
                .style("fill-opacity", .7)
                .style("stroke-opacity", 0);

            tooltip.transition().style("display", "none");
        });


        // Draw a path around each intersection area, add hover there as well
        diagram.svg.selectAll("path")
            .data(overlaps)
            .enter()
            .append("path")
            .attr("d", function(d) { 
                return venn.intersectionAreaPath(d.sets.map(function(j) { return sets[j]; })); 
            })
            .style("fill-opacity","0")
            .style("fill", "#333")
            .style("stroke-opacity", 0)
            .style("stroke", "white")
            .style("stroke-width", "2")
            .on("mouseover", function(d, i) {
                d3.select(this).transition()
                    .style("fill-opacity", .1)
                    .style("stroke-opacity", 1);

                tooltip.transition().style("display", "block");
                tooltip.text(d.size + " users");
            })
            .on("mouseout", function(d, i) {
                d3.select(this).transition()
                    .style("fill-opacity", 0)
                    .style("stroke-opacity", 0);

                tooltip.transition().style("display", "none");
            })
            .on("mousemove", function() {
                tooltip.style("left", (d3.event.pageX + 20) + "px")
                       .style("top", (d3.event.pageY - 15) + "px");
            });
});