// set up background music
var makeSound = function() {
	var soundPath = 'http://temporaryresidence.com/mp3s/explosions_welcomeghosts.mp3';
	var sound = new Howl({
		urls: [soundPath],
		loop: true,
		buffer: false
	}).play();
}

makeSound();

// basic parameters
var margin = {
		top: 0,
		right: 0,
		bottom: 0,
		left: 0
	},
	width = window.innerWidth - margin.left - margin.right,
	height = window.innerHeight - margin.bottom - margin.top;

var boxMax = 400;

// standard svg intro for d3
var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// set up how often to update
var iteratePerSecond = 20;
var frequency = 1000 / iteratePerSecond;

// set up grey scale for boxes
greyScale = d3.scale.linear().clamp(true)
        .domain([0, boxMax])
        .range(["white", "#313131"]);

// set initial datapoint
data = [{xMid: 200, yMid: 300, side: 0, speed: 1}];

function updateView(data){

	// enter
	svg.selectAll("rect")
		.data(data)
		.enter()
		.append("rect")
		.attr("x", function(d){return d.xMid - d.side/2})
		.attr("y", function(d){return d.yMid - d.side/2})
		.attr("width", function(d){return d.side})
		.attr("height", function(d){return d.side})
		.attr("fill", "white");

	// update existing squares
	svg.selectAll("rect")
		.data(data)
		.attr("x", function(d){return d.xMid - d.side / 2})
		.attr("y", function(d){return d.yMid - d.side / 2})
		.attr("width", function(d){return d.side})
		.attr("height", function(d){return d.side})
		.attr("fill", function(d){return greyScale(d.side);});

	// remove exited squares (not currently being used)
	//svg.selectAll("rect")
	//	.data(data)
	//	.exit().remove();
}

// 
var iter = 0;

function tick() {
		// add a new square every second
		if(iter % iteratePerSecond == 0){
			data.push(
				{xMid: Math.random() * (window.innerWidth),
				 yMid: Math.random() * (window.innerHeight),
				 side: 0, 
				 speed: Math.ceil(Math.random() * 4)
				});
		};

		// increase the size
		data.forEach(function(d) {d.side = d.side + d.speed / 2; });
		updateView(data)

	if(data.length > 40){
		data.shift();
	};

	setTimeout(tick, frequency);
	iter++;
};

tick()