Untitled

<html>
<head>
	<title>Tickets</title>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
	<!-- <link rel="stylesheet" type="text/css" href="fluidgrid.css"> -->
	<link rel="icon" type="image/png" href="favicon.png">
	<style type="text/css">
		body, section, label, select, input {
			margin:0;
			padding:0;
		}

		label, select, input[type='text'] {
			margin:0 auto;
			display:block;
		}

		label {
			text-align:center;
			font-size:2em;
			width:60%;
		}

		select {
			text-align:center;
			font-size:3em;
			max-width:80px;
		}

		input[type='text'] {
			font-size:3em;
			width:50%;
		}

		body {
			font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
			color:#2379DB;
			background-color:#EDEDED;
		}

		section#controls {
			overflow:hidden;
		}

		section#controls div {
			width:33.33%;
			padding:5px 0;
		}

		section#controls > form > div {
			float:left;
		}

		section#controls > form > div:last-child {
			float:right;
		}

		div#grid {
			width:85%;
			margin:0 auto;
		}

		div.box {
/*			width:19%;
			height:150px;*/
			background-color:dimgrey;
			border:1px solid white;
			float:left;
		}

		div.row {
			clear:both;
		}

		div {
			transition: all 1s;
		}

		div.activated {
			background-color:#EDEDED;
		}

		div.hide {
			display:none;
		}

	</style>
</head>
<body>
	<section id='controls'>
		<form name='controlsForm' action='' method='post'>
			<div>
				<label for='gridHeight'>Height</label>
				<select name='gridHeight'></select>
			</div>
			<div>
				<label for='gridWidth'>Width</label>
				<select name='gridWidth'></select>
			</div>
			<div>
				<label for='animSpeed'>Speed (ms)</label>
				<input name='animSpeed' type='text'/>
			</div>
		</form>
	</section> <!-- #controls -->
	<section id='gridArea'>
		<div id='grid'>
		</div>
	</section>
	<!-- <script type='text/javascript' src='fluidgrid.js'></script> -->
	<script type='text/javascript' src='mn.js'></script>
</body>
</html>

(function() {
	var FluidGrid = {
			$heightSelect: null,
			$widthSelect: null,
			$selects: null,
			$grid: null,
			$gridElements: null,

			settings: {
				maxElements: 10,
				height: 1,
				width: 1,
				speed: 0
			},

			// box: {

			// },

			// addElements: function(amount, axis) {

			// },

			// removeElements: function() {

			// },

			// changeHeight: function(oldHeight) {
			// 	if(oldHeight < FluidGrid.settings.height) {
			// 		//old < new
			// 	} else {
			// 		//new > old
			// 	}
			// },

			// changeWidth: function(oldWidth) {

			// },

			modifyGrid: function(amount, axis) {
				var oldHeight,
					oldWidth;

				if(axis === 'gridHeight') {
					oldHeight = FluidGrid.settings.height;
					FluidGrid.settings.height = amount;

				} else {
					oldWidth = FluidGrid.settings.width;
					FluidGrid.settings.width = amount;
				}
			},

			populateSelect: function(inSelect) {
				inSelect.empty();
				for(var index = 1; index <= FluidGrid.settings.maxElements; index++) {
					inSelect.append(
						$('<option>').text(index)
					);
				}
			},

			init: function(config) {
				var fg = FluidGrid;
				// Initialize variables
				$heightSelect = $('form > div:first-child > select');
				$widthSelect = $('form > div:nth-child(2) > select');
				$selects = $('select');
				$grid = $('#grid');

				// Initialize and populate the array containing
				// grid elements
				$gridElements = $([]);


				// Dynamically populate the <select>s with numbers.
				fg.populateSelect($selects);

				// e.target.value is the value of the select.
				// this.name is the name of the select.
				$('select').on('change', function(e) {
					fg.modifyGrid(e.target.value, this.name);
				});

				// Generate the elements
				for(var height = 0; height < fg.settings.maxElements; height++) {
					$gridElements.push([]);
					$tempUl = $('<div>').addClass('row');
					$grid.append($tempUl);

					for(var width = 0; width < fg.settings.maxElements; width++) {
						$newDiv = $('<div>').addClass('box');//.attr('id',height + '-' + width);
						$gridElements[height].push($newDiv);
						$tempUl.append($newDiv);
					}
				}

				//TESTING
				$('div.box').on('click', function() {
					var tempBox = $(this);
					tempBox.addClass('activated');
					setTimeout(function() {
						tempBox.removeClass('activated');
					}, 1000);
				})

				tempWidth = (($('.row').eq(0).width() / fg.settings.maxElements) - 5) + 'px';

				$('div.box').css({'width':tempWidth, 'height':tempWidth});
			}
		};

	FluidGrid.init({

	});
})();