<style>
	col:first-child {background: #ccc}
	col:nth-child(2n) {background: #fff; }

	col {
		border-right: 1px solid #ccc;
	}

	.columns td {
		padding: 7px;
		text-align: right;
	}

	.columns tr:first-child > td { 
		background: #999;
		text-align: center;
		border: none;			
	}

	.columns tr:first-child > td:first-child {
		background: #f1f1f1;
	}

	.columns tr:first-child > td label {
		color: #fff;
	}

	.columns td select {
		width: 75px;
	}
</style>
<div class="form-group">
	<label class="intense col-sm-2 control-label"><?php _e( 'Quick Add', 'intense' ); ?></label>			
	<div class="intense col-sm-8">					
		<a href="#" id="quickfull" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout.png" /> <?php _e( 'Full', 'intense' ); ?></a>
		<a href="#" id="quickhalf" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout-2-equal.png" /> 1/2</a>
		<a href="#" id="quickquarter" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout-1_4.png" /> 1/4</a>
		<a href="#" id="quickthird" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout-3.png" /> 1/3</a>
		<a href="#" id="quickthreequarter" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout-3_4.png" /> 3/4</a>
		<a href="#" id="quicktwothirds" class="button"><img src="<?php echo INTENSE_PLUGIN_URL; ?>/assets/img/fugue-icons/icons/layout-2-inverse.png" /> 2/3</a>
	</div>
</div>
<div id="columnlist" class="form-group">
	<label class="intense col-sm-2 control-label"><?php _e( 'Columns', 'intense' ); ?></label>
	<div class="intense col-sm-8">
		<div style="height: 309px; width: 650px; overflow-x: auto; overflow-y: hidden; background: #f1f1f1; padding: 0px;">
			<table class="columns" >
				<colgroup>
					<col><col>
				</colgroup>
				<tr>
					<td class="meta"></td>
					<td><label><?php _e( 'Column', 'intense' ); ?> 1</label></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'Standard Size', 'intense' ); ?></label></td>
					<td><select class="standardsize" id="standardsize1"><?php 
						for ($i = 1; $i < 13; $i++) {
							echo '<option' . ( $i == 12 ? ' selected' : '' ) . '>' . $i . '</option>';
						}
						echo '<option>hide</option>';
					?></select></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'Medium Size', 'intense' ); ?></label></td>
					<td><select class="mediumsize" id="mediumsize1"><?php 
						for ($i = 1; $i < 13; $i++) {
							echo '<option' . ( $i == 12 ? ' selected' : '' ) . '>' . $i . '</option>';
						}
						echo '<option>hide</option>';
					?></select></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'Small Size', 'intense' ); ?></label></td>
					<td><select class="smallsize" id="smallsize1"><?php 
						for ($i = 1; $i < 13; $i++) {
							echo '<option' . ( $i == 12 ? ' selected' : '' ) . '>' . $i . '</option>';
						}
						echo '<option>hide</option>';
					?></select></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'Extra Small Size', 'intense' ); ?></label></td>
					<td><select class="extrasmallsize" id="extrasmallsize1"><?php 
						for ($i = 1; $i < 13; $i++) {
							echo '<option' . ( $i == 12 ? ' selected' : '' ) . '>' . $i . '</option>';
						}
						echo '<option>hide</option>';
					?></select></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'Hide Gutter', 'intense' ); ?></label></td>
					<td><input class="hidegutter" type="checkbox" class="" name="hidegutter1" id="hidegutter1"></td>
				</tr>
				<tr>
					<td class="meta" style="white-space: nowrap"><label><?php _e( 'CSS Class', 'intense' ); ?></label></td>
					<td><input class="class" type="text" class="" name="class1" id="class1"></td>
				</tr>
			</table>				
		</div>
		<input type="button" id="addcolumn" class="button" value="<?php _e( 'Add Column', 'intense' ); ?>" />
		<span class="help-block"><br><?php _e( 'Rows are 12 columns wide and can be divided up as needed (ex. 4x4x4 would split a row into 3 equal sizes). The columns for each row should add up to 12. Anything beyond that will spill into another row.' ); ?></span>
	</div>
</div>		
<script>
	jQuery(function($) {
		var $ = jQuery;
		
		$('.columnrepeater').hide();			

		function addColumn(size) {
			var itemCount = $("#columnlist .columns").find("tr:first").children("td").length;
			var repeaterCount = itemCount - 1;

			$('.repeater-add').click();
		
			var rows = $("#columnlist .columns").find("tr");

			$("#columnlist .columns colgroup").append("<col>");

			$(rows[0]).append('<td><label><?php _e('Column ', 'intense' ); ?>' + itemCount + '</label></td>');
			$(rows[1]).append('<td><select class="standardsize" id="standardsize' + itemCount + '"">' + options + '</select></td>');
			$(rows[2]).append('<td><select class="mediumsize" id="mediumsize' + itemCount + '"">' + options + '</select></td>');
			$(rows[3]).append('<td><select class="smallsize" id="smallsize' + itemCount + '"">' + options + '</select></td>');
			$(rows[4]).append('<td><select class="extrasmallsize" id="extrasmallsize' + itemCount + '"">' + options + '</select></td>');
			$(rows[5]).append('<td><input class="hidegutter" type="checkbox" class="" name="hidegutter' + itemCount + '" id="hidegutter' + itemCount + '"></td>');
			$(rows[6]).append('<td><input class="class" type="text" class="" style="width:75px;" name="class' + itemCount + '" id="class' + itemCount + '"></td>');
			
			$('#standardsize' + itemCount).change(function() {
				$('#size_' + repeaterCount).val($(this).val());
			});
			$('#mediumsize' + itemCount).change(function() {
				$('#medium_size_' + repeaterCount).val($(this).val());
			});
			$('#smallsize' + itemCount).change(function() {
				$('#small_size_' + repeaterCount).val($(this).val());
			});
			$('#extrasmallsize' + itemCount).change(function() {
				$('#extra_small_size_' + repeaterCount).val($(this).val());
			});
			$('#hidegutter' + itemCount).change(function() {
				//$('#nogutter_' + repeaterCount).val($(this).val());
				$('#nogutter_' + repeaterCount).prop('checked', $(this).prop('checked'));
			});
			$('#class' + itemCount).change(function() {
				$('#class_' + repeaterCount).val($(this).val());
			});

			if (size) {
				$('#standardsize' + itemCount).val(size);
				$('#size_' + repeaterCount).val(size);
				$('#mediumsize' + itemCount).val(size);
				$('#medium_size_' + repeaterCount).val(size);
				$('#smallsize' + itemCount).val(12);
				$('#extrasmallsize' + itemCount).val(12);
			}
		}				

		function removeAllColumns() {				
			$("#columnlist .columns").find("tr").each(function() {
				$(this).find("td").not(".meta").remove();
			});

			$('.repeater-item').remove();
		}

		var options = '';
		var defaultColumnSetting =  $("#columnlist > .controls").children();
				
		for (var i = 1; i < 13; i++) {
			options += '<option>' + i + '</option>';
		};
		options += '<option>hide</option>';

		$('#quickfull').click(function(event) {
			event.preventDefault();

			removeAllColumns();				
			addColumn(12);
		});

		$('#quickhalf').click(function(event) {
			event.preventDefault();
			
			removeAllColumns();	
			addColumn(6);
			addColumn(6);
		});

		$('#quickquarter').click(function(event) {
			event.preventDefault();
			
			removeAllColumns();	
			addColumn(3);
			addColumn(3);
			addColumn(3);
			addColumn(3);
		});

		$('#quickthird').click(function(event) {
			event.preventDefault();
			
			removeAllColumns();	
			addColumn(4);
			addColumn(4);
			addColumn(4);
		});

		$('#quickthreequarter').click(function(event) {
			event.preventDefault();
			
			removeAllColumns();	
			addColumn(9);
			addColumn(3); 
		});

		$('#quicktwothirds').click(function(event) {
			event.preventDefault();
			
			removeAllColumns();	
			addColumn(8);
			addColumn(4);
		});

		$('#addcolumn').click(function() {				
			addColumn(12);
		});

		setTimeout(function() {
			removeAllColumns();				
			addColumn(12);
		}, 200);
		
	});
</script>