"use strict";

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

var sideLength = 3;
var bigBoxDim = 150;
var boxWidth = sideLength * bigBoxDim;

// set variables
var margin = {
		top: 20,
		right: 0,
		bottom: 10,
		left: 0
	},
	width = boxWidth + margin.left + margin.right,
	height = boxWidth + margin.top + margin.bottom;

var fullDim = bigBoxDim * bigBoxDim;

function getRandomInt(min, max) {
	// +1 due to "floor"
	return Math.floor(Math.random() * (max + 1 - min)) + min;
}

function walkWithin(input, hardMin, hardMax, walkVar) {
	var variation = getRandomInt(-walkVar, walkVar);
	var k = input + variation;
	if (k < hardMin) {
		return hardMin + getRandomInt(0, 2);
	} else if (k > hardMax) {
		return hardMax - getRandomInt(0, 2);
	} else {
		return k;
	}
}



var domain = [0, 15, bigBoxDim / 3, 2 * bigBoxDim / 3, bigBoxDim - 15, bigBoxDim]
var vary = 3;

function setUpRandData() {
	var df = [];
	for (var i = 0; i < bigBoxDim; i++) {
		// random walk
		domain[1] = walkWithin(domain[1], 10, 40, vary);
		domain[2] = walkWithin(domain[2], 50, 80, vary);
		domain[3] = walkWithin(domain[3], 90, 115, vary);
		domain[4] = walkWithin(domain[4], 125, 143, vary);

		var color = d3.scale.linear()
			.domain(domain)
			.range(["black", "#252525", "#636363", "#969696", "#d9d9d9", "white"]);
		for (var j = 0; j < bigBoxDim; j++) {
			df.push({
				x: i,
				y: j,
				fill: color(j)
			});
		}
	}
	return df;
};

// 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 + ")");

// attributes for rectangles
var squareAttr = {
	"x": function(d) {return d.x * sideLength;},
	"y": function(d) {return d.y * sideLength;},
	"height": sideLength,
	"width": sideLength,
	"class": 'squares'
};

svg.selectAll(".squares")
	.data(setUpRandData())
	.enter()
	.append('rect')
	.attr(squareAttr);

// updates the image based on new colors in data
function update(df) {
	svg.selectAll('.squares')
		.data(df)
		.attr("fill", function(d) {
			return d.fill;
		})
}

d3.select('#refreshButton').on("click", function(d) {console.log("clicked!"); update(setUpRandData())})

// update with new data
update(setUpRandData());