// width and height
var w = 500;
var h = 300;

var container1 = d3.select("body").append("div");

var translateButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Translate!")
    .attr("margin", "5px");

var growButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Grow!")
    .attr("margin", "5px");

var colorButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Color!")
    .attr("margin", "5px");

var combinedButton = container1.append("input")
    .attr("type", "submit")
    .attr("value", "Combined!")
    .attr("margin", "5px");

var container2 = d3.select("body").append("div");

var svg = container2.append("svg")
    .attr("width", w)
    .attr("height", h);

var mySquare = svg.append("rect")
    .attr("x", 60)
    .attr("y", 60)
    .attr("width", 60)
    .attr("height", 60)
    .style("fill", "blue");

var aCircle = svg.append("circle")
    .attr("cx", 60)
    .attr("cy", 60)
    .attr("r", 80)
    .attr("fill", "yellow")
    .attr("fill-opacity", 0);
    

var x = 60;
translateButton.on("click", function() {
    x = (x == 60) ? 320 : 60;
    mySquare.transition()
        .attr("x", x)
        .duration(1000)
        .delay(100);

    // clamp circle to square
    aCircle.transition()
        .attr("x", x)
        .duration(1000)
        .delay(100);
});

var squareWidth = 60;
growButton.on("click", function() {
    squareWidth = (squareWidth == 60) ? 120 : 60;
    mySquare.transition().attr("width", squareWidth); // makes it bigger
});

var color = "blue";
colorButton.on("click", function() {
    color = (color == "blue") ? "green" : "blue";
    mySquare.transition().style("fill", color);
});

var y = 60;
combinedButton.on("click", function() {
    x = (x == 60) ? 320 : 60;
    y = (y == 60) ? h - 60 : 60;
    color = (color == "blue") ? "green" : "blue";
    mySquare.transition()
        .attr("x", x)
        .style("fill", color)
        .ease("linear")
        .duration(250)
        .each("end", function() {
            d3.select(this).transition()
                .attr("y", y)
                .duration(350)
                .ease("elastic");
        });

    aCircle.transition()
        .ease("linear")
        .duration(500)
        .attr("cx", x)
        .attr("fill", "red")
        .attr("fill-opacity", 0.75)
        .attr("r", 200)
        .each("end", function() {
            d3.select(this)
                // restore circle to pre-blown up state
                .attr("cy", y)
                .attr("fill", "yellow")
                .attr("fill-opacity", 0)
                .attr("r", 80);
        });
});