$(function () {

    function createImg(src) {
        var $img = $('<img />')
        $img.attr("src", src);
        $img.attr("class", "my-img-thumbnail pointer to-delete");
        $img.on("click", function (){
            showimage(src);
        });
        return $img;
    }
    $(".to-add").on("dragend", function (e) {

        var src = $(e.target).attr("src");
        if (images.indexOf(src) < 0) {

            images.push(src);

            var $img = createImg(src);
            $img.on("dragend", function (e) {
                var src = $(e.target).attr("src");
                var idx = images.indexOf(src);
                if (idx >= 0) {
                    images.splice(idx, 1);
                }

                $(e.target).remove();
            });


            $("#new-report-img").append($img)
        }
    });



    $('.sup-collapse').click(function () {
        var dupTitle = $(this).parents('li').find('.sup-title');
        dupTitle.toggle();
    });

    var color = {
        1: '#E36402',
        2: '#1995CF',
        3 : '#FFC000',
        2.1: '#FFC000'
    };

    var urlParams = new URLSearchParams(window.location.search);
    d3.json("/tree?masterId=" + urlParams.get("masterId"), function(error, data) {
        var root = d3.hierarchy(data);

        var normal_r = 14;
        var mouseon_r = 18;

        var handleEvents = function (selection) {
            selection.on('click', function (d) {
                $.get(
                    d.data.href,
                    function (data) {
                        $('.detail-div').css('background-color', 'white');
                        $('.detail-div').html(data);
                    });
            })
                .on('mouseover', function (d) {

                var g = d3.select(this); // The node
                var n = g.select('.the-node');
                var info = n.transition().duration(400).attr('r', 47 / d.data.group)
            })
                .on('mouseout', function (d) {
                    var g = d3.select(this); // The node
                    var n = g.select('.the-node');
                    var info = n.transition().duration(400).attr('r', 40 / d.data.group)
                });
        }

        /* TREE LAYOUT */


        var treeLayout = d3.tree()
        treeLayout.size([660, 250]);
        treeLayout(root);


        var tree = d3.select('#tree g.nodes')

        var treeNodes = tree.selectAll('g.node')
            .data(root.descendants())
            .enter()
            .append('g')
            .classed('node', true)
            .call(handleEvents)


        treeNodes.append('circle')
            .classed('the-node solid', true)
            .attr('cx', d => d.x)
            .attr('cy', d => d.y + 20)
            .attr('r', d => 40 / d.data.group)
            .style("fill", function (d) {
                return color[d.data.group]
            });

        treeNodes.append('text')
            .attr('class', 'label')
            .attr('dx', function (d) {
                return (d.data.group == 3) ? d.x - 40 / d.data.group : d.x + 40 / d.data.group + 5
            })
            .attr('dy', function (d) {
                return (d.data.group == 3) ? d.y + 54 : d.y + 24
            })
            .text(d => d.data.name)

        // var treeLinks = d3.select('#tree g.links')
        //     .selectAll('line.link')
        //     .data(root.links())
        //     .enter()
        //     .append('line')
        //     .classed('link', true)
        //     .attr("x1", d => d.source.x)
        //     .attr("y1", d => d.source.y)
        //     .attr("x2", d => d.target.x)
        //     .attr("y2", d => d.target.y)
        //     .style("stroke", "#5f5f5f");

        var treeLinks = d3.select('#tree g.links')
            .selectAll('path.link')
            .data(root.descendants().slice(1))
            .enter()
            .append('path')
            .classed('link', true)
            .attr("d", (d) => {
                return `
      M ${d.x} ${d.y}
      C 
      ${d.x} ${(d.y + d.parent.y) / 2}
      ${d.parent.x} ${(d.y + d.parent.y) / 2}
      ${d.parent.x} ${d.parent.y}
      `;
            })
            .style("stroke", "#5f5f5f");
    });
});