////////////////////////////////////////////////////////////////////
//////////////////////////// Create SVG ////////////////////////////
////////////////////////////////////////////////////////////////////

var margin = {
	top: 50,
	right: 50,
	bottom: 50,
	left: 50
}
var width = 700 - margin.left - margin.right;
var height = 875 - margin.top - margin.bottom;

var svg = d3.select("#chart").append("svg")
	.attr("id", "svg-r")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

////////////////////////////////////////////////////////////////////
///////////// Calculate hexagon centers and put into array /////////
////////////////////////////////////////////////////////////////////

//Initial guess
var mapColumns = Math.floor(width/20),
	mapRows = Math.floor(height/30);
//The maximum radius the hexagons can have to still fit the screen
var hexRadius = round2( d3.min([width/(Math.sqrt(3)*mapColumns), height/(mapRows*1.5)]) );

//Initialize hexagon variables
var SQRT3 = round2( Math.sqrt(3) ),
	hexWidth = SQRT3 * hexRadius,
	hexHeight = 2 * hexRadius;
var hexagonPoly = [[0,-1],[SQRT3/2,0.5],[0,1],[-SQRT3/2,0.5],[-SQRT3/2,-0.5],[0,-1],[SQRT3/2,-0.5]];
var hexagonPath = "m" + hexagonPoly.map(function(p) { 
		return [p[0]*hexRadius, p[1]*hexRadius].join(','); 
	}).join('l') + "z";

//Recalculate the columns and rows now that we know the sizes
mapColumns = Math.floor(width/hexWidth);
mapRows = Math.floor(height/hexHeight/1.5*2);
//console.log(mapColumns, mapRows);

//Calculate the. enter points of the hexagons in the grid
var points = [];
for (var i = 0; i < mapRows; i++) {
	for (var j = 0; j < mapColumns; j++) {
		var a;
		var b = (3 * i) * hexRadius / 2;
		if (i % 2 === 0) {
			a = SQRT3 * j * hexRadius;
		} else {
			a = SQRT3 * (j - 0.5) * hexRadius;
		}//else
		points.push({x: round2(a), y: round2(b)});
	}//for j
}//for i

////////////////////////////////////////////////////////////////////
//////////////////////////// Create scales /////////////////////////
////////////////////////////////////////////////////////////////////

var colorScale = d3.scaleLinear()
	.domain(d3.range(8))
	.range(["#EFB605", "#E47D06", "#DB0131", "#AF0158", "#7F378D", "#3465A8", "#0AA174", "#7EB852"]);

//Round number to 2 behind the decimal
function round2(num) {
	return (Math.round((num + 0.00001) * 100)/100);
}//round2

////////////////////////////////////////////////////////////////////
////////////////////// Points inside Reasons R /////////////////////
////////////////////////////////////////////////////////////////////

//Offset the R by a certain amount so it is completely on the screen
var rOffsetX = 125 - margin.left,
	rOffsetY = 233.2 - margin.top;

//Which points lie in the R - Hardcoded version
var pointsR = [{x:9.99,y:17.33},{x:29.97,y:17.33},{x:49.95,y:17.33},{x:69.94,y:17.33},{x:89.92,y:17.33},{x:109.9,y:17.33},{x:129.88,y:17.33},{x:149.86,y:17.33},{x:169.84,y:17.33},{x:189.82,y:17.33},{x:209.81,y:17.33},{x:229.79,y:17.33},{x:249.77,y:17.33},{x:269.75,y:17.33},{x:289.73,y:17.33},{x:0,y:34.65},{x:19.98,y:34.65},{x:39.96,y:34.65},{x:59.94,y:34.65},{x:79.93,y:34.65},{x:99.91,y:34.65},{x:119.89,y:34.65},{x:139.87,y:34.65},{x:159.85,y:34.65},{x:179.83,y:34.65},{x:199.82,y:34.65},{x:219.8,y:34.65},{x:239.78,y:34.65},{x:259.76,y:34.65},{x:279.74,y:34.65},{x:299.72,y:34.65},{x:319.7,y:34.65},{x:339.69,y:34.65},{x:9.99,y:51.98},{x:29.97,y:51.98},{x:49.95,y:51.98},{x:69.94,y:51.98},{x:89.92,y:51.98},{x:109.9,y:51.98},{x:129.88,y:51.98},{x:149.86,y:51.98},{x:169.84,y:51.98},{x:189.82,y:51.98},{x:209.81,y:51.98},{x:229.79,y:51.98},{x:249.77,y:51.98},{x:269.75,y:51.98},{x:289.73,y:51.98},{x:309.71,y:51.98},{x:329.69,y:51.98},{x:349.68,y:51.98},{x:369.66,y:51.98},{x:0,y:69.3},{x:19.98,y:69.3},{x:39.96,y:69.3},{x:59.94,y:69.3},{x:79.93,y:69.3},{x:99.91,y:69.3},{x:119.89,y:69.3},{x:139.87,y:69.3},{x:159.85,y:69.3},{x:179.83,y:69.3},{x:199.82,y:69.3},{x:219.8,y:69.3},{x:239.78,y:69.3},{x:259.76,y:69.3},{x:279.74,y:69.3},{x:299.72,y:69.3},{x:319.7,y:69.3},{x:339.69,y:69.3},{x:359.67,y:69.3},{x:379.65,y:69.3},{x:9.99,y:86.63},{x:29.97,y:86.63},{x:49.95,y:86.63},{x:69.94,y:86.63},{x:89.92,y:86.63},{x:109.9,y:86.63},{x:129.88,y:86.63},{x:149.86,y:86.63},{x:169.84,y:86.63},{x:189.82,y:86.63},{x:209.81,y:86.63},{x:229.79,y:86.63},{x:249.77,y:86.63},{x:269.75,y:86.63},{x:289.73,y:86.63},{x:309.71,y:86.63},{x:329.69,y:86.63},{x:349.68,y:86.63},{x:369.66,y:86.63},{x:389.64,y:86.63},{x:409.62,y:86.63},{x:0,y:103.95},{x:19.98,y:103.95},{x:39.96,y:103.95},{x:59.94,y:103.95},{x:79.93,y:103.95},{x:99.91,y:103.95},{x:119.89,y:103.95},{x:139.87,y:103.95},{x:159.85,y:103.95},{x:179.83,y:103.95},{x:199.82,y:103.95},{x:219.8,y:103.95},{x:239.78,y:103.95},{x:259.76,y:103.95},{x:279.74,y:103.95},{x:299.72,y:103.95},{x:319.7,y:103.95},{x:339.69,y:103.95},{x:359.67,y:103.95},{x:379.65,y:103.95},{x:399.63,y:103.95},{x:419.61,y:103.95},{x:9.99,y:121.28},{x:29.97,y:121.28},{x:49.95,y:121.28},{x:69.94,y:121.28},{x:89.92,y:121.28},{x:109.9,y:121.28},{x:129.88,y:121.28},{x:149.86,y:121.28},{x:169.84,y:121.28},{x:189.82,y:121.28},{x:209.81,y:121.28},{x:229.79,y:121.28},{x:249.77,y:121.28},{x:269.75,y:121.28},{x:289.73,y:121.28},{x:309.71,y:121.28},{x:329.69,y:121.28},{x:349.68,y:121.28},{x:369.66,y:121.28},{x:389.64,y:121.28},{x:409.62,y:121.28},{x:429.6,y:121.28},{x:279.74,y:138.6},{x:299.72,y:138.6},{x:319.7,y:138.6},{x:339.69,y:138.6},{x:359.67,y:138.6},{x:379.65,y:138.6},{x:399.63,y:138.6},{x:419.61,y:138.6},{x:439.59,y:138.6},{x:309.71,y:155.93},{x:329.69,y:155.93},{x:349.68,y:155.93},{x:369.66,y:155.93},{x:389.64,y:155.93},{x:409.62,y:155.93},{x:429.6,y:155.93},{x:449.58,y:155.93},{x:319.7,y:173.25},{x:339.69,y:173.25},{x:359.67,y:173.25},{x:379.65,y:173.25},{x:399.63,y:173.25},{x:419.61,y:173.25},{x:439.59,y:173.25},{x:459.57,y:173.25},{x:329.69,y:190.58},{x:349.68,y:190.58},{x:369.66,y:190.58},{x:389.64,y:190.58},{x:409.62,y:190.58},{x:429.6,y:190.58},{x:449.58,y:190.58},{x:339.69,y:207.9},{x:359.67,y:207.9},{x:379.65,y:207.9},{x:399.63,y:207.9},{x:419.61,y:207.9},{x:439.59,y:207.9},{x:459.57,y:207.9},{x:349.68,y:225.23},{x:369.66,y:225.23},{x:389.64,y:225.23},{x:409.62,y:225.23},{x:429.6,y:225.23},{x:449.58,y:225.23},{x:339.69,y:242.55},{x:359.67,y:242.55},{x:379.65,y:242.55},{x:399.63,y:242.55},{x:419.61,y:242.55},{x:439.59,y:242.55},{x:459.57,y:242.55},{x:349.68,y:259.88},{x:369.66,y:259.88},{x:389.64,y:259.88},{x:409.62,y:259.88},{x:429.6,y:259.88},{x:449.58,y:259.88},{x:339.69,y:277.2},{x:359.67,y:277.2},{x:379.65,y:277.2},{x:399.63,y:277.2},{x:419.61,y:277.2},{x:439.59,y:277.2},{x:459.57,y:277.2},{x:329.69,y:294.53},{x:349.68,y:294.53},{x:369.66,y:294.53},{x:389.64,y:294.53},{x:409.62,y:294.53},{x:429.6,y:294.53},{x:449.58,y:294.53},{x:319.7,y:311.85},{x:339.69,y:311.85},{x:359.67,y:311.85},{x:379.65,y:311.85},{x:399.63,y:311.85},{x:419.61,y:311.85},{x:439.59,y:311.85},{x:309.71,y:329.18},{x:329.69,y:329.18},{x:349.68,y:329.18},{x:369.66,y:329.18},{x:389.64,y:329.18},{x:409.62,y:329.18},{x:429.6,y:329.18},{x:449.58,y:329.18},{x:279.74,y:346.5},{x:299.72,y:346.5},{x:319.7,y:346.5},{x:339.69,y:346.5},{x:359.67,y:346.5},{x:379.65,y:346.5},{x:399.63,y:346.5},{x:419.61,y:346.5},{x:439.59,y:346.5},{x:229.79,y:363.83},{x:249.77,y:363.83},{x:269.75,y:363.83},{x:289.73,y:363.83},{x:309.71,y:363.83},{x:329.69,y:363.83},{x:349.68,y:363.83},{x:369.66,y:363.83},{x:389.64,y:363.83},{x:409.62,y:363.83},{x:429.6,y:363.83},{x:99.91,y:381.15},{x:119.89,y:381.15},{x:139.87,y:381.15},{x:159.85,y:381.15},{x:179.83,y:381.15},{x:199.82,y:381.15},{x:219.8,y:381.15},{x:239.78,y:381.15},{x:259.76,y:381.15},{x:279.74,y:381.15},{x:299.72,y:381.15},{x:319.7,y:381.15},{x:339.69,y:381.15},{x:359.67,y:381.15},{x:379.65,y:381.15},{x:399.63,y:381.15},{x:419.61,y:381.15},{x:109.9,y:398.48},{x:129.88,y:398.48},{x:149.86,y:398.48},{x:169.84,y:398.48},{x:189.82,y:398.48},{x:209.81,y:398.48},{x:229.79,y:398.48},{x:249.77,y:398.48},{x:269.75,y:398.48},{x:289.73,y:398.48},{x:309.71,y:398.48},{x:329.69,y:398.48},{x:349.68,y:398.48},{x:369.66,y:398.48},{x:389.64,y:398.48},{x:119.89,y:415.8},{x:139.87,y:415.8},{x:159.85,y:415.8},{x:179.83,y:415.8},{x:199.82,y:415.8},{x:219.8,y:415.8},{x:239.78,y:415.8},{x:259.76,y:415.8},{x:279.74,y:415.8},{x:299.72,y:415.8},{x:319.7,y:415.8},{x:339.69,y:415.8},{x:359.67,y:415.8},{x:379.65,y:415.8},{x:129.88,y:433.13},{x:149.86,y:433.13},{x:169.84,y:433.13},{x:189.82,y:433.13},{x:209.81,y:433.13},{x:229.79,y:433.13},{x:249.77,y:433.13},{x:269.75,y:433.13},{x:289.73,y:433.13},{x:309.71,y:433.13},{x:329.69,y:433.13},{x:349.68,y:433.13},{x:139.87,y:450.45},{x:159.85,y:450.45},{x:179.83,y:450.45},{x:199.82,y:450.45},{x:219.8,y:450.45},{x:239.78,y:450.45},{x:259.76,y:450.45},{x:279.74,y:450.45},{x:299.72,y:450.45},{x:169.84,y:467.78},{x:189.82,y:467.78},{x:209.81,y:467.78},{x:229.79,y:467.78},{x:249.77,y:467.78},{x:269.75,y:467.78},{x:289.73,y:467.78},{x:179.83,y:485.1},{x:199.82,y:485.1},{x:219.8,y:485.1},{x:239.78,y:485.1},{x:259.76,y:485.1},{x:279.74,y:485.1},{x:299.72,y:485.1},{x:189.82,y:502.43},{x:209.81,y:502.43},{x:229.79,y:502.43},{x:249.77,y:502.43},{x:269.75,y:502.43},{x:289.73,y:502.43},{x:309.71,y:502.43},{x:199.82,y:519.75},{x:219.8,y:519.75},{x:239.78,y:519.75},{x:259.76,y:519.75},{x:279.74,y:519.75},{x:299.72,y:519.75},{x:319.7,y:519.75},{x:209.81,y:537.08},{x:229.79,y:537.08},{x:249.77,y:537.08},{x:269.75,y:537.08},{x:289.73,y:537.08},{x:309.71,y:537.08},{x:329.69,y:537.08},{x:349.68,y:537.08},{x:219.8,y:554.4},{x:239.78,y:554.4},{x:259.76,y:554.4},{x:279.74,y:554.4},{x:299.72,y:554.4},{x:319.7,y:554.4},{x:339.69,y:554.4},{x:359.67,y:554.4},{x:229.79,y:571.73},{x:249.77,y:571.73},{x:269.75,y:571.73},{x:289.73,y:571.73},{x:309.71,y:571.73},{x:329.69,y:571.73},{x:349.68,y:571.73},{x:369.66,y:571.73},{x:239.78,y:589.05},{x:259.76,y:589.05},{x:279.74,y:589.05},{x:299.72,y:589.05},{x:319.7,y:589.05},{x:339.69,y:589.05},{x:359.67,y:589.05},{x:379.65,y:589.05},{x:269.75,y:606.38},{x:289.73,y:606.38},{x:309.71,y:606.38},{x:329.69,y:606.38},{x:349.68,y:606.38},{x:369.66,y:606.38},{x:389.64,y:606.38},{x:279.74,y:623.7},{x:299.72,y:623.7},{x:319.7,y:623.7},{x:339.69,y:623.7},{x:359.67,y:623.7},{x:379.65,y:623.7},{x:399.63,y:623.7},{x:289.73,y:641.03},{x:309.71,y:641.03},{x:329.69,y:641.03},{x:349.68,y:641.03},{x:369.66,y:641.03},{x:389.64,y:641.03},{x:409.62,y:641.03},{x:299.72,y:658.35},{x:319.7,y:658.35},{x:339.69,y:658.35},{x:359.67,y:658.35},{x:379.65,y:658.35},{x:399.63,y:658.35},{x:419.61,y:658.35},{x:309.71,y:675.68},{x:329.69,y:675.68},{x:349.68,y:675.68},{x:369.66,y:675.68},{x:389.64,y:675.68},{x:409.62,y:675.68},{x:429.6,y:675.68},{x:449.58,y:675.68},{x:319.7,y:693},{x:339.69,y:693},{x:359.67,y:693},{x:379.65,y:693},{x:399.63,y:693},{x:419.61,y:693},{x:439.59,y:693},{x:459.57,y:693},{x:329.69,y:710.33},{x:349.68,y:710.33},{x:369.66,y:710.33},{x:389.64,y:710.33},{x:409.62,y:710.33},{x:429.6,y:710.33},{x:449.58,y:710.33},{x:469.57,y:710.33},{x:339.69,y:727.65},{x:359.67,y:727.65},{x:379.65,y:727.65},{x:399.63,y:727.65},{x:419.61,y:727.65},{x:439.59,y:727.65},{x:459.57,y:727.65},{x:479.56,y:727.65}];

/////////////////////////////////////////////////////////////////
/////////////////////// Add artist text /////////////////////////
/////////////////////////////////////////////////////////////////

//Group for text
var titleWrapper = svg.append("g")
	.attr("class", "title-group")
	.attr("transform", "translate(" + rOffsetX + "," + rOffsetY + ")");

//By
titleWrapper.append("text")
	.attr("transform", "rotate(-90 249.604 301.21)")
	.style("fill", "#1D1D1B")
	.style("font-size", 32)
	.style("font-family", "'Helvetica-Bold', sans-serif")
	.text("by:");

//Nadieh
titleWrapper.append("text")
	.attr("transform", "rotate(-90 221.746 273.53)")
	.style("fill", "#CA2326")
	.style("font-size", 32)
	.style("font-family", "'Helvetica-Bold', sans-serif")
	.text("Nadieh Bremer");

/////////////////////////////////////////////////////////////////
/////////////////////// Create hexagons /////////////////////////
/////////////////////////////////////////////////////////////////

//Create a wrapper group for all hexagons
var hexWrapper = svg.append("g")
	.attr("class", "hexagon-wrapper")
	.style("isolation", "isolate");

//Create a group for each hexagon that is displaced so that the scaling later is easier
//But only those that lie inside the reasons to R
var hexGroup = hexWrapper.selectAll(".hexagon")
	.data(pointsR)
	.enter().append("g")
	.attr("class", "hexagon")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

//Create the actual hexagonal SVG paths
var hex = hexGroup.append("path")
	.attr("class", "hexagon-path")
	.attr("transform", function(d) { return "scale(" + (Math.random()*2) + ")"; })
	.attr("d", function(d) { return hexagonPath; })
	.style("mix-blend-mode", "multiply")
	.style("opacity", function(d) { return Math.min(1, 0.2+Math.random()*2); })
	.style("fill", function(d,i) { return colorScale(Math.floor(Math.random()*8)); });

//Make it change
hex.transition().duration(100).on("end", grow);

/////////////////////////////////////////////////////////////////
//////////// Random scale & opacity change function /////////////
/////////////////////////////////////////////////////////////////

function grow() {
	//Let each hexagon grow and shrink randomly
	d3.select(this)
		.transition("growing").duration(1000 + 4000*Math.random())
		.delay(function(d,i) { return Math.random() * 1000; })
		.attr("transform", function(d) { return "scale(" + (Math.random()*2) + ")"; })
		.style("opacity", function(d) { return Math.min(1, 0.2+Math.random()*2); })
		.transition("shrinking").duration(1000 + 3000*Math.random())
		.attr("transform", function(d) { return "scale(" + (Math.random()*2) + ")"; })
		.style("opacity", function(d) { return Math.min(1, 0.2+Math.random()*2); })
		.on("end", grow);
}//function grow