var  svg;
    var cursor;
    var node;
    var link;
    var nodes ;
    var force;
    var width = 960,
    var height = 500;

    var fill = d3.scale.category20();
    var maquina =  { "name": "Máquina", "children": [] };
    var material = { "name": "Material", "children": [] };
    var medida =   { "name": "Medida", "children": [] };
    var maodeobra = { "name": "Mão-de-obra", "children": [] };
    var meioambiente = { "name": "Meio ambiente", "children": [] };
    var metodo = { "name": "Método", "children": [] };

    var data2 = {
        "name": "Efeito",
        "children": [

        ],
        "type": "user"
    }


    data2.children.push(maquina);
    data2.children.push(material);
    data2.children.push(medida);
    data2.children.push(maodeobra);
    data2.children.push(meioambiente);
    data2.children.push(metodo);


var fishbone = d3.fishbone();

        var size = (function(){
            return {width: this.clientWidth, height: this.clientHeight};
        }).bind(window.document.documentElement);
        //x = w.innerWidth || e.clientWidth || g.clientWidth;
        //y = w.innerHeight|| e.clientHeight|| g.clientHeight;

//        var width = 500, height = 500;
        var creation=Date.now();
        d3.select(window).on('resize.updatesvg', updateWindow);
        svg = d3.select("#fishbone")
                 .append("svg")

               // firefox needs a real size
               .attr(size())
                .on("mousemove", mousemove).on("mousedown", mousedownCanvas)
            //.on('mouseover', function(d){
            //    var nodeSelection = d3.select(this).style({opacity:'0.8'});
            //    nodeSelection.select("text").style({opacity:'5.0'});
            //})
                 //             .attr("width", width)
                 //.attr("height", height)
                 //             .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
                 // set the data so the reusable chart can find it
            //.attr('id','rect_'+creation)
            //.attr('onclick',"removeRect('rect_"+"')")
                 .datum(data2)
                       // set up the default arrowhead
                       .call(fishbone.defaultArrow)
                 // call the selection modifier
                 .call(fishbone);


        force = d3.layout.force()
        .size([ this.clientWidth, this.clientHeight])
        .nodes([{}]) // initialize with a single node
        .linkDistance(30)
        .charge(-60)
        .on("tick", tick);

            cursor = svg.append("circle")
        .attr("r", 30)
        .attr("transform", "translate(-100,-100)")
        .attr("class", "cursor");

          nodes = force.nodes(),
        links = force.links(),
        node = svg.selectAll(".node"),
         link = svg.selectAll(".link");

     //   svg.on("mouseover", function()
     //   {d3.select(this).style("fill", "aliceblue");})
     //.on("mouseout", function(){d3.select(this).style("fill", "white");});

        fishbone.force().start();

    function tick() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
    }

    function restart() {
        node = node.data(nodes);
        //alert(node);
        //node.enter().insert("circle", ".cursor")
        //    .attr("class", "node")
        //    .attr("r", 5)
        //    .on("mousedown", mousedownNode);

        //node.exit()
        //    .remove();

      //  link = link.data(links);

        //link.enter().insert("line", ".node")
        //    .attr("class", "link");
        //link.exit()
        //    .remove();

        force.start();
    }
    function mousemove() {
        cursor.attr("transform", "translate(" + d3.mouse(this) + ")");
    }

    function mousedownCanvas() {
        var point = d3.mouse(this),
            node = {x: point[0], y: point[1]},
            n = nodes.push(node);

        // add links to any nearby nodes
        nodes.forEach(function(target) {
            var x = target.x - node.x,
                y = target.y - node.y;
            if (Math.sqrt(x * x + y * y) < 30) {
                links.push({source: node, target: target});
            }
        });

        restart();
    }


    function mousedownNode(d, i) {
        nodes.splice(i, 1);
        links = links.filter(function(l) {
            return l.source !== d && l.target !== d;
        });
        d3.event.stopPropagation();

        restart();
    }