// Function draws a grid.
// x is the cell dimensions
function drawGrid(x) {

	// Empty the grid so we don't append to previously created elements
	$('.grid').empty();

	// Create the number of rows necessary
	for (var i = 0; i < x; i++) {
		$('.grid').append('<div class="grid-row">');
	}

	// Add the appropriate amount of cell wrappers to each row
	$('.grid-row').each(function() {
		$('.grid-row').append('<div class="grid-cell-wrapper">');
	});

	function resize(width) {
		// Set the sizes of the cell wrapper and the cell inside of it
		$('.grid-cell-wrapper').css('width', width);
		$('.grid-cell-wrapper').css('height', $('.grid-cell-wrapper').width());
		$('.grid-row').css('height', $('.grid-cell-wrapper').width());
		$('.grid-cell-wrapper').append('<div class="grid-cell">');
		$('.grid-cell').css('width', $('.grid-cell-wrapper').width() * .98);
		$('.grid-cell').css('height', $('.grid-cell-wrapper').width() * .98);
	}

	// responsive!
	resize($('.grid-row').width() / x);
	$(window).resize(function() {
		resize($('.grid-row').width() / x);
	});

	// Randomly assign colors to the background
	d3.selectAll('.grid-cell').style('background', function() {
		return 'hsl(' + Math.random() * 360 + ',100%,50%)';
	});

}

// Function to convert RGB colors to HSL, which can then be sorted by hue. See: https://stackoverflow.com/questions/11923659/javascript-sort-rgb-values
function rgbToHsl(c) {
	var r = c[0] / 255, g = c[1] / 255, b = c[2] / 255;
	var max = Math.max(r, g, b), min = Math.min(r, g, b);
	var h, s, l = (max + min) / 2;

	if (max == min) {
		h = s = 0;
		// achromatic
	} else {
		var d = max - min;
		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
		switch(max) {
			case r:
				h = (g - b) / d + (g < b ? 6 : 0);
				break;
			case g:
				h = (b - r) / d + 2;
				break;
			case b:
				h = (r - g) / d + 4;
				break;
		}
		h /= 6;
	}
	return new Array(h * 360, s * 100, l * 100);
}

// This turns your color string from the RGB background-color value of the cells into an array of numbers,
// which can then be converted into HSL
function colorStringToNumbers(array) {
	var numberArray = [];

	for (var i = 0; i < array.length; i++) {
		numberArray.push(Number(array[i].trim()));
	}
	return numberArray;
}

// Create the object from the squares that lets us sort them
function createColorJSON(array) {
	var json = [];

	for (var i = 0; i < array.length; i++) {
		var obj = {};

		// The key value pairs are the index, the div selector, the div rgb color, the convert hsl color's hue
		obj.index = i;
		obj.selector = array[i];
		obj.color = $(obj.selector).find('.grid-cell').css('background-color');
		obj.hue = rgbToHsl(colorStringToNumbers(((obj.color.split('(')[1]).split(')')[0]).split(',')))[0];

		json.push(obj);
	}

	return json;

}

function sortSquares(json) {

	var sorted = _.sortBy(json,'hue');

	$('.grid-cell').each(function(i){
		$(this).css('background-color',sorted[i].color);
	});

}

$(document).ready(function() {

	// Start by drawing a grid of 5x5 dimensions
	drawGrid(3);

	// Then allow the user to select the size of the grid
	$('.grid-size-option').click(function() {
		var size = $(this).attr('data-grid-size');
		drawGrid(size);
	});

	// Let the user sort the squares
	$('.sort').click(function(){
		sortSquares(createColorJSON($('.grid-cell-wrapper')));
	});

});