var puntos = [], width = 600, height = 400, MouseDown, MouseUp, MouseXY;

d3.select("svg")
    .on("click", function() {
        console.log("click");
    });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
    .on("mousedown", md)
    .on("mouseup", mu)
    .on("mousemove", mm)
    .attr("style", "background-color: rgb(220,220,220);");

function draw() {
  svg.selectAll("circle")
     .data(puntos)
     .enter()
     .append("circle")
     .attr("cx", function(d) { return d[0]; })
     .attr("cy", function(d) { return d[1]; })
     .attr("r", radio.value);      
}

function click() {
  // console.log(d3.mouse(this));
  puntos.push(d3.mouse(this));
  draw();
}

function md() {
  MouseDown = d3.mouse(this);
}

function mu() {
  MouseUp = d3.mouse(this);
}

function mm() {
  MouseXY = d3.mouse(this);
}

d3.select('#up').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cy", 10 );
});

d3.select('#down').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cy", height-10 );
});

d3.select('#left').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cx", 10 );
});

d3.select('#right').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cx", width-10 );
});

// antes eliminaba a todos los puntos
// ahora los voy sacando de a uno

/*
d3.select('#remove').on('click', function() {
  puntos = [];
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();      
});
*/

function removeOnePoint() {
  puntos.pop();
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();
}

d3.select('#remove').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("r", 0)
     .each("end", removeOnePoint); // llamo a removeOnePoint cada vez que termina la transición
                                   // http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/
});

d3.select('#red').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "red");      
});

d3.select('#green').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "green");      
});

d3.select('#blue').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "blue");      
});

d3.select('#black').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "black");      
});

d3.select('#radio').on('change', function() {
  svg.selectAll("circle").attr("r", radio.value);      
});