<?php
$this->renderPartial('navbar', array('items' => $items));
TreeMapHelper::getTranslationTagsIfTranslationMode();
?>
<div id="treeArea" class="well well-small"></div>

<style>

    .keyMapColor {
        border: 1px solid black;
    }

    .node {
        cursor: pointer;
    }

    .node circle {
        fill: #fff;
        stroke: green;
        stroke-width: 2.5px;
    }

    .node text {
        font: 12px sans-serif;
    }

    .link {
        fill: none;
        stroke: lightblue;
        stroke-width: 2.5px;
    }

    .node:hover {
        fill: #000;
        font-weight: 700;
    }

    div.tooltip {
        position: absolute;
        width: auto;
        height: auto;
        padding: 8px;
        font: 12px sans-serif;
        background: #dbdbdb;
        border: solid 1px #aaa;
        border-radius: 8px;
        pointer-events: none;
        margin: -4px 0 0 40px;
    }

    .treeNavbar li{
        padding: 12px 15px 12px;
        color: #777;
    }

</style>
<body>
    <script src="js/d3.v3.min.js"></script>
    <script>
        var tooltipLoading = '<img id="image" src="img/loading.gif" alt=""/>';
        var tooltipText = tooltipLoading;

        var keyPressed = false;

        var margin = {top: 20, right: 120, bottom: 20, left: 120},
        width = document.getElementById("treeArea").offsetWidth - margin.right - margin.left,
                height = 800 - margin.top - margin.bottom;

        var i = 0, duration = 750, root;

        var tree = d3.layout.tree().size([height, width]);

        var diagonal = d3.svg.diagonal()
                .projection(function (d) {
                    return [d.y, d.x];
                });

        var svg = d3.select("#treeArea").append("svg")
                .attr("width", width + margin.right + margin.left)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var pathToAction = "<?php echo Yii::app()->createUrl($this->module->id) . '/default/configurationTree'; ?>";
        d3.json(pathToAction, function (error, flare) {
            root = flare;
            root.x0 = height / 2;
            root.y0 = 0;

            function collapse(d) {
                if (d.children) {
                    d._children = d.children;
                    d._children.forEach(collapse);
                    d.children = null;
                }
            }

            root.children.forEach(collapse);
            update(root);
        });


        var div = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 1e-6);

        d3.select(self.frameElement).style("height", "800px");

        checkKeyPressedState();

        function update(source) {

            // Compute the new tree layout.
            var nodes = tree.nodes(root).reverse(),
                    links = tree.links(nodes);

            // Normalize for fixed-depth.
            nodes.forEach(function (d) {
                d.y = d.depth * 180;
            });

            // Update the nodes
            var node = svg.selectAll("g.node")
                    .data(nodes, function (d) {
                        return d.id || (d.id = ++i);
                    });

            // Enter any new nodes at the parent's previous position.
            var nodeEnter = node.enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + source.y0 + "," + source.x0 + ")";
                    })
                    .on("click", click);

            nodeEnter.append("circle")
                    .attr("r", 1e-6)
                    .style("stroke", function (d) {
                        return d.keyColor;
                    })
                    .style("fill", function (d) {
                        return d._children ? "lightsteelblue" : "#fff";
                    });

            nodeEnter.append("text")
                    .attr("x", function (d) {
                        return d.children || d._children ? -10 : 10;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", function (d) {
                        return d.children || d._children ? "end" : "start";
                    })
                    .text(function (d) {
                        return d.name;
                    })
                    .on("mouseover", mouseover)
                    .on("mousemove", mousemove)
                    .on("mouseout", mouseout)
                    .style("fill-opacity", 1e-6);

            // Transition nodes to their new position.
            var nodeUpdate = node.transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + d.y + "," + d.x + ")";
                    });

            nodeUpdate.select("circle")
                    .attr("r", 4.5)
                    .style("fill", function (d) {
                        return d._children ? "lightsteelblue" : "#fff";
                    });

            nodeUpdate.select("text")
                    .style("fill-opacity", 1);

            // Transition exiting nodes to the parent's new position.
            var nodeExit = node.exit().transition()
                    .duration(duration)
                    .attr("transform", function (d) {
                        return "translate(" + source.y + "," + source.x + ")";
                    })
                    .remove();

            nodeExit.select("circle")
                    .attr("r", 1e-6);

            nodeExit.select("text")
                    .style("fill-opacity", 1e-6);

            // Update the links
            var link = svg.selectAll("path.link")
                    .data(links, function (d) {
                        return d.target.id;
                    });

            // Enter any new links at the parent's previous position.
            link.enter().insert("path", "g")
                    .attr("class", "link")
                    .attr("d", function (d) {
                        var o = {x: source.x0, y: source.y0};
                        return diagonal({source: o, target: o});
                    });

            // Transition links to their new position.
            link.transition()
                    .duration(duration)
                    .attr("d", diagonal);

            // Transition exiting nodes to the parent's new position.
            link.exit().transition()
                    .duration(duration)
                    .attr("d", function (d) {
                        var o = {x: source.x, y: source.y};
                        return diagonal({source: o, target: o});
                    })
                    .remove();

            // Stash the old positions for transition.
            nodes.forEach(function (d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
            keyPressed = false;
        }

        // Toggle children on click.
        function click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        }

        function checkKeyPressedState() {
            $(document).keydown(function (e) {
                if (e.keyCode === 16) {
                    keyPressed = true;
                } else {
                    keyPressed = false;
                }
            });
        }

        function mouseover(d) {
            if (keyPressed) {
<?php
echo Chtml::ajax(array(
    'url' => array('tooltipText'),
    'type' => 'post',
    'data' => 'js:{keyID:d.keyID}',
    'success' => "js:function(answer){tooltipText = answer;}"
));
?>
                div.transition()
                        .duration(500)
                        .style("opacity", 1);
            }
        }

        function mousemove() {
            if (keyPressed) {
                div.html(tooltipText)
                        .style("left", (d3.event.pageX - 34) + "px")
                        .style("top", (d3.event.pageY - 12) + "px");
            }

        }

        function mouseout(d) {
            if (keyPressed) {
                div.transition()
                        .duration(500)
                        .style("opacity", 1e-6);
                tooltipText = tooltipLoading;
            }
        }

    </script>