"use strict";

// note: will not work when number of seconds surpass 2 to 53rd.  Need to use big numbers, get library

// set variables
var margin = {
	top: 20, 
	right: 50,
	bottom: 50,
	left: 50
	},
	width = 1000 - margin.left - margin.right,
	height = 1000 - margin.top - margin.bottom; 

var sideLength = 24;
var bigBoxDim = 8;
var fullDim = bigBoxDim * bigBoxDim
var zeroString = ""
var iteratePerSecond = 5;
var frequency = 1000 / iteratePerSecond;

var df = [];
for (var i = 0; i < fullDim; i++) {
	df.push(i);
	zeroString += "0";
}

// standard svg intro
var svg = d3.select(".main").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 + ")");

var k = svg.selectAll(".mainWave")
		.data(df)
		.enter()

k.append('rect')
			.attr("x", function(d) { return d % bigBoxDim * sideLength})
			.attr("height", sideLength)
			.attr("y", function(d) { return Math.floor(d/bigBoxDim) * sideLength  })
			.attr("width", sideLength)
			.attr("fill",'white')
			.attr("class", 'squares')

// add text to boxes for testing purposes
/*k.append('text')
			.text(function(d) {return d})
			.attr('fill', 'black')
			.attr("x", function(d) { return d % bigBoxDim * sideLength})
			.attr("y", function(d) { return Math.floor(d/bigBoxDim) * sideLength + 15 });
			*/

function updateView(newNum){
	d3.selectAll('rect')
		.data(df)
		.attr('fill', function(d,i) {
			var z = newNum.toString(2);
			var x = z.charAt(z.length - d - 1);
			if(x == 1){
				return 'black'
			} else {
				return 'white'
			}
		})
};

var startDate = (new Date(1997, 0, 14, 17, 0, 0, 0)).valueOf();
var iter = 0;

function tick() {
	var newNum = Math.floor((Date.now() - startDate) / frequency);
	updateView(newNum)
	iter += 1;
	setTimeout(tick, frequency);
};
tick()