var pythagoras = {

	/**
	 * Position all boxes in the container
	 */
	positionBoxes : function($container, $boxes, numCols, numRows, heightFactor) {

		// Define width and height of boxes
		var boxSizeWidth = 100 / numCols;
		// var boxSizeHeight = 100 / numRows;
		var boxSizeHeight = ((boxSizeWidth * heightFactor) / 100 * $(window).width());

		// Build empty grid to work on
		var grid = [];
		for (var i = 0; i < numRows; i++) {
			grid.push(new Array(numCols+1).join('0').split(''));
		}

		// Loop all boxes
		$boxes.each(function() {

			// Get the box along with it's (proportional) height and width
			var $box = $(this),
				width = $box.data('width') || 1,
				height = $box.data('height') || 1;

			// Find a place in the grid for the box and inject it there
			yLoop:
			for (var y = 0; y < numRows; y++) {
				xLoop:
				for (var x = 0; x < numCols; x++) {

					// Extract the cell
					var cell = grid[y][x];
					console.log('checking cell ' + x + ',' + y + ' with value ' + cell);

					// Cell isn't taken yet
					if (cell == 0) {

						// Check if there's enough space on the X-axis
						for (var i = 0; i < width; i++) {
							if (grid[y][x+i] != 0) {
								continue xLoop;
							}
						}

						// Check if there's enough space on the Y-axis
						for (var j = 0; j < height; j++) {
							if (grid[y+j][x] != 0) {
								continue yLoop;
							}
						}

						// All seems ok: lock it in the grid
						for (var i = 0; i < width; i++) {
							for (var j = 0; j < height; j++) {
								grid[y+j][x+i] = 'X';
							}
						}

						$box.css({
							width: (boxSizeWidth * width) + '%',
							height: (boxSizeHeight * height) + 'px',
							left: (boxSizeWidth * x) + '%',
							top: (boxSizeHeight * y) + 'px'
						}).addClass('box--shown');

						// store X and Y on box
						$box.data('x', x);
						$box.data('y', y);

						break yLoop;

					}

				}
			}

		});

		pythagoras._fixContainerHeight($container, numCols, numRows, heightFactor);

	},


	fixHeights: function($container, $boxes, numCols, numRows, heightFactor) {
		pythagoras._fixBoxesHeight($container, $boxes, numCols, numRows, heightFactor);
		pythagoras._fixContainerHeight($container, numCols, numRows, heightFactor);
	},

	_fixBoxesHeight: function($container, $boxes, numCols, numRows, heightFactor) {

		var windowWidth = Math.max($(window).width(), $container.width());

		// Fix all box heights (width goes automatically via CSS %)
		$boxes.each(function() {
			var $box = $(this),
				height = $box.data('height') || 1,
				y = $box.data('y');

			var boxSizeWidth = 100 / numCols;
			var boxSizeHeight = ((boxSizeWidth * heightFactor) / 100 * windowWidth);

			$box.css({
				height: (boxSizeHeight * height) + 'px',
				top: (boxSizeHeight * y) + 'px',
			});
		});

	},

	/**
	 * Fix the height of the container when all boxes are positioned inside it
	 * Because we use absolute positioning, we need to do this.
	 * @param  jQuery $container     The element wrapping all boxes
	 * @param  int numCols           [description]
	 * @param  int numRows           [description]
	 * @param  double heightFactor   [description]
	 * @return void
	 */
	_fixContainerHeight : function($container, numCols, numRows, heightFactor) {

		var windowWidth = Math.max($(window).width(), $container.width());

		// Fix container height
		$('.container').css({
			height: windowWidth * heightFactor * numRows / numCols + 'px'
		});

	}

};

// Thunderbirds are go!
jQuery(function($) {

  // Config
  var numCols = 12,
    numRows = 13,
    heightFactor = 0.45,
    $container = $('.container'),
    $boxes = $container.find('.box');

  pythagoras.positionBoxes($container, $boxes, numCols, numRows, heightFactor);

  $(window).on('resize', function() {
    pythagoras.fixHeights($container, $boxes, numCols, numRows, heightFactor);
  }); // @TODO: throttle this
  
})