<style>
	#tablecontent input {
		width: 120px;
	}

	#tablecontent th {
		padding: 3px;
		background: #efefef;
	}

	#tablecontent th > input {
		font-weight: bold;
		font-size: larger;
	}

	#tablecontent td {
		padding: 3px;
	}

	#tablecontent table {
		border: 1px solid #ccc;
	}
</style>
<div class="form-group ">
	<label class="intense col-sm-2 control-label" for="bordered"><?php _e( 'Data', 'intense' ); ?></label>
	<div class="intense col-sm-8">
		<div id="tablecontent" style="height: 350px; overflow: auto; border: 1px solid #ccc; background: #fff; padding: 15px; margin-bottom: 10px;">
			<table>
				<thead>
					<tr>
						<th><input type="text"/></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<input type="text" />
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<input type="button" id="addrow" class="button" value="<?php _e( 'Add Row', 'intense' ); ?>" /> <input type="button" id="addcolumn" class="button" value="<?php _e( 'Add Column', 'intense' ); ?>" />	
		<span class="help-block"><?php _e( 'commas are not allowed - use &amp;#44; instead (example: Indiana<strong>&amp;#44;</strong> USA becomes Indiana, USA)', 'intense' ); ?></span>
	</div>
</div>

<script>
    jQuery(function($) {
    	var $ = jQuery;
    	
    	// Uploading files
  		$('.upload_file_button').live('click', function( event ){
          event.preventDefault();
          var target = $(this).data('target-id');
    
          window.parent.loadFileFrame($(this), function(attachment) {
            jQuery("#" + target).val(attachment.id);

            if ( $('#preview-content').length > 0 ) {
              $('#preview').click();
            }
          });
      	});

      	$('.filesettings').hide();

      	$('#source').change(function() {
      		var value = $(this).val();

      		switch (value) {
      			case 'manual':
      				$('#tablecontent').parent().parent().show();
      				$('.filesettings').hide();
      				break;
      			case 'file':
      				$('#tablecontent').parent().parent().hide();
      				$('.filesettings').show();
      				break;
      		}
      	});

  		$('#addrow').click(function() {
			$('#tablecontent > table > tbody').append($('#tablecontent > table > tbody > tr:last').clone());
			$('#tablecontent > table > tbody > tr:last input').val('');
			setupTableChangeHandler();
		});

		$('#addcolumn').click(function() {					
			$('#tablecontent > table > thead > tr').append('<th><input type="text"/></th>');
			$('#tablecontent > table > tbody > tr').append('<td><input type="text"/></td>');
			setupTableChangeHandler();
		});

		function setupTableChangeHandler() {
			$('#tablecontent input').unbind('keypress');
			$('#tablecontent input').typeWatch( {
                callback: updateHiddenFields,
                wait: 500,
                highlight: false,
                captureLength: 0
            } );
		}

		setupTableChangeHandler();

		function updateHiddenFields() {
			var $table = jQuery('#tablecontent table');
			var columns = [];
			var data = [];

			$table.find('th').each(function() {
				columns.push(jQuery(this).children('input').val());
			});

			$table.find('td').each(function() {
				data.push(jQuery(this).children('input').val());
			});

			$('#columns').val(columns.join(','));
			$('#data').val(data.join(','));

			if ( $('#preview-content').length > 0 ) {
              $('#preview').click();
            }
		}
    });
</script>