window.onload = function() {
    start();
}

function start() {
    var svg = d3.select("svg");
    var initialWidth;
    var initialHeight;
    function getRectArray(scale, rotateAngle) {
        var rect = {
            centerX: +svg.attr("width")/2,
            centerY: +svg.attr("height")/2,
            width: +svg.attr("width")/1.3 * scale,
            height: +svg.attr("width")/1.3 * scale,
            cornerRadius: 0,
            strokeWidth: 1,
            rotateAngle: 0,
            fill: 'none',
            stroke: 'rgba(255,255,255,1)'
        }

        initialHeight = +svg.attr("width")/1.3 * scale;
        initialWidth = +svg.attr("width")/1.3 * scale;

        // Draw Params
        var scaleWidth = scale;
        var scaleHeight = scale;

        var scaleStrokes = false;

        var moveX = 0;
        var moveY = 0;

        var rotateAngle = rotateAngle;

        var rectArray = [];
        var numCopies = 60;
        var scaledOrConstant = false;

        for (var i=0; i < numCopies; i++) {
            if (scaleStrokes) {
                    scaledOrConstant = rect.strokeWidth * Math.pow((scaleWidth + scaleHeight) / 2, i);
                } else {
                    scaledOrConstant = rect.strokeWidth;
            }

            var tempRect = {
                centerX: rect.centerX + (moveX * i),
                centerY: rect.centerY + (moveY * i),
                width: rect.width * Math.pow(scaleWidth, i),
                height: rect.height * Math.pow(scaleHeight, i),
                cornerRadius: rect.cornerRadius,
                strokeWidth: scaledOrConstant,
                rotateAngle: rotateAngle * i,
                scale: scale,
                fill: rect.fill,
                stroke: rect.stroke
            };
            rectArray.push(tempRect);
        }

        return rectArray;
    }

    function update(data) {
        var t = d3.transition().duration(4000);

        //Join data with elements
        var rect = svg.selectAll('rect')
            .data(data);

        // Exit old elements
        rect.exit()
                .attr('class',  'exit')
            .transition(t)
                .attr('stroke-width', 1e-6)
                .remove();

        // Update old elements
        rect.attr('class', 'update')
            .transition(t)
                .attr('width', function(d) { return d.width})
                .attr('height', function(d) { return d.height})
                .attr("x", function(d) {
                    var dX = (1 - d.scale) * d.width / 2;
                    var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
                    return x;
                })
                .attr('y', function(d) {
                    var dY = (1 - d.scale) * d.height / 2;
                    var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
                    return y;
                })
                .attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})

        // Enter new elements
        rect.enter().append('rect')
                .attr('class', 'enter')
                .attr("x", function(d) {
                    var dX = (1 - d.scale) * d.width / 2;
                    var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
                    return x;
                })
                .attr('y', function(d) {
                    var dY = (1 - d.scale) * d.height / 2;
                    var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
                    return y;
                })
                .attr('fill', function(d) { return d.fill})
                .attr('stroke', function(d) { return d.stroke})
                .attr('stroke-width', 1e-6)
                .attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})
                .attr('width', function(d) { return d.width})
                .attr('height', function(d) { return d.height})
            .transition(t)
                .attr('stroke-width', function(d) {return d.strokeWidth});
    }

    update(getRectArray(.92, 5));
    var previousAngle = 5;
    var ratio = 1.61803398875;
    d3.interval(function() {
        // var convert = d3.scaleLinear()
        //     .domain([0,1])
        //     .range([.985,1])
        // var scale = convert(Math.random()*Math.random()*ratio);
        // var newAngle = ( Math.random() - .5 )* 33 * ratio;
        // var rotateAngle = newAngle + (previousAngle*10000) / 10001;
        // previousAngle = newAngle;
        update(getRectArray(.99, -4));
    }, 4000);

}