$(function () {
 
    var diagram;
    var cache;
    var labels={};

  
  

    function vennLabel(l, elementid) {
        $('#'+elementid+'-label').text(l);
    }

    function initialize(elementid)
    {
        var $parentElement = $('#'+elementid).parent();
        var object = venn.VennDiagram(['#0E874D', '#70BF02', '#898E90', '#1D8551','#EBEBEB']);
        object.wrap(false)
            //.width(Math.floor($parentElement.width() * 0.92))
            .width($parentElement.width())
            .height($parentElement.height());

        // add a tooltip
        var tooltip = d3.select("body").append("div")
            .attr("class", "venntooltip");

      
        return object;
    };
  
    function redrawVENN(elementid)
    {
           var $parentElement = $('#'+elementid).parent();
         if (window.debugmode) console.log('VENN redraw '+elementid+' to '+$parentElement[0].clientWidth+'x'+$parentElement[0].clientHeight);

        if (diagram.width() !== $parentElement[0].clientWidth) {
            diagram
                .wrap(false)
                .width(Math.floor($parentElement[0].clientWidth))
                .height(Math.floor($parentElement[0].clientHeight))
            if (cache) buildVENN(cache, elementid);
        }
    }

    function getKeywordName(id)
    {
        return labels[id];
    }

    function buildVENN(data, elementid)
    {

        
      labels={};
        cache=data;
        if (window.debugmode) console.log('VENN build for '+elementid, cache);

        if (!diagram)
            diagram=initialize(elementid);

        d3.select("#"+elementid).selectAll("*").remove();

        var vennselect = []; 

      
      $.each(data, function(i, set){
        vennselect.push({sets:set.fields, size: set.count, label: set.label});
        if (set.fields.length===1)
          labels[set.fields[0]]=set.label;
      });
      
    
       if (window.debugmode)  console.log('VENN select', vennselect);

       if (vennselect.length)
       {
        var D = d3.select("#"+elementid);
        var C = D.datum(vennselect);
        C.call(diagram);
        ;

        // add a tooltip
        /*var tooltip = d3.select("body").append("div")
            .attr("class", "venntooltip");*/

        // add listeners to all the groups to display tooltip on mouseover
        C.selectAll("g")
            .on("mouseover", function (d, i) {
                // sort all the areas relative to the current item
                venn.sortAreas(C, d);

                // Display a tooltip with the current size
                /*tooltip.transition().duration(400).style("opacity", .9);
                tooltip.text(d.size + " users");*/


                if (d.sets.length > 1) {
                    let s = '';
                    let count = 0;
                    d.sets.forEach(function (item) {
                        if (s !== '') {
                            count++;
                            if (count < (d.sets.length - 1))
                                s += ', ';
                            else
                                s += ' and ';
                        }
                        s += '<span class="tooltipKW">' + getKeywordName(item) + '</span>';
                    })
                    $('#'+elementid+'-tooltip').html(s + ' share ' + d.size + ' articles');
                } else
                    $('#'+elementid+'-tooltip').html('<span class="tooltipKW">' + getKeywordName(d.sets[0]) + '</span> contains ' + d.size + ' articles');

                // highlight the current path
                var selection = d3.select(this).transition("tooltip").duration(400);
                selection.select("path")
                    .style("stroke-width", 3)
                    .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
                    .style("stroke-opacity", 1);
            })

            .on("mousemove", function () {
              if (typeof tooltip !== 'undefined')
              {  
                tooltip.style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
              }
            })

            .on("mouseout", function (d, i) {
                $('#'+elementid+'-tooltip').text('');
               if (typeof tooltip !== 'undefined')
              {  
                tooltip.transition().duration(400).style("opacity", 0);
              }
                var selection = d3.select(this).transition("tooltip").duration(400);
                selection.select("path")
                    .style("stroke-width", 0)
                    .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
                    .style("stroke-opacity", 0);
            });

        C.selectAll("text").style("fill", "#0E874D");
       }


    }

    window.VENN=buildVENN;
    window.redrawVENN=redrawVENN;

});

/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-venn-main] [40.1368] DESIGN*/
/*******************************************************************/
/* 0.1 D>D */
/* db 161 */