(function() {
      d3.selection.prototype.moveToBack = function() {  
        return this.each(function() { 
            var firstChild = this.parentNode.firstChild; 
            if (firstChild) { 
                this.parentNode.insertBefore(this, firstChild); 
            } 
        });
    };
    var width = 600,
    height = 300;

    

    var svg = d3.select("#chart")
        .append("svg")

        .attr("height", height)
        .attr("width", width)
        .append("g")
        .attr("transform", "translate(0,0)");
  d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", function(error, documentFragment) {
        if (error) {console.log(error); return;}
    
        var svgNode = documentFragment
                    .getElementsByTagName("svg")[0];
    
        svg.node().appendChild(svgNode);

        var innerSVG = svg.select("svg");
    
        innerSVG.transition().duration(1000).delay(1000)
              .select("circle")
              .attr("r", 100);

				innerSVG.moveToBack().duration(1000).delay(1000)

    });      



    var radiusScale = d3.scaleSqrt().domain([1, 200]).range([1, 20]);

//     var forceXSplit = d3.forceX(d => width * (d.Sex === "male" ? 0.3 : 0.7))
//         .strength(0.2);
		var forceXSplit = d3.forceX((width)/2).strength(.8);
    var forceXCombine = d3.forceX((width)/2).strength(0.3);

    var forceCollide = d3.forceCollide(function(d){
          return radiusScale(d.Total_Words) + 1;
        })
        .iterations(10);

    var simulation = d3.forceSimulation()
        .force("x", forceXCombine)
        .force("y", d3.forceY(height / 2).strength(0.3))
        .force("collide", forceCollide);

//   	var colorchange =d3.select("circles")
// 				.style("fill", d => d.Sex === "male" ? "#355C7D": "#F67280")
//     var colorchange2 =d3.select("circles")
//     		.style("fill", d => d.Sex === "male" ? "#F67280" : "#355C7D")
// Importing data file

d3.queue()
    .defer(d3.csv, "data.csv")
    .await(ready);

function ready (error, datapoints) {
    datapoints.forEach(d => d.Total_Words = +d.Total_Words); 

    var circles = svg.selectAll(".Character")
        .data(datapoints)
        .enter().append("circle")
        .attr("class", "Character")
        .attr("r", function(d){
            return radiusScale(d.Total_Words);
        })
        .style("fill", d => d.Sex === "male" ? "#355C7D": "#F67280")

// Adding Toggle Switches   

    var atRight = true;

    var rect = svg.append("rect")
        .attr("x", 10)
        .attr("y", 10)
        .attr("rx", 22)
        .attr("ry", 22)
        .style("fill", "lightgray")
        .attr("width", 64)
        .attr("height", 40);

    var circle = svg.append("circle")
        .attr("cx", 30)
        .attr("cy", 30)
        .attr("r", 16)
        .style("fill", "white")
//     		.on("click", function(){
//             .style("fill", atRight ? d => d.Sex === "male" ? "#355C7D": "#F67280")
//         });
        .on("click", function(){
						
//             datapoints
//               	.forEach(d => d.Sex = "male"); 
					if(atRight) {	
          circles
                .style("fill", d => d.Sex2 === "male" ? "#355C7D": "#F67280")
                }
          else{
                     circles
                .style("fill", d => d.Sex === "male" ? "#355C7D": "#F67280") 
          }
            simulation 
                .force("x", atRight ? forceXSplit : forceXCombine)
                .alpha(1)
                .restart();
            setAtRight(!atRight);
        });

    var setAtRight = function(newValue) {
        atRight = newValue;
        circle.transition().duration(250)
            .attr("cx", (atRight? (30) : (54)))
            .style("fill", "white");
        rect.transition().duration(250)
            .style("fill", atRight? "lightgray" : "#F67280");  
    };


    var res = {
        'getValue': function() { return atRight; },
        'setValue': setAtRight,
        'remove': function() { circle.remove(); }
    };


    simulation.nodes(datapoints)
        .on('tick', ticked);


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