<style>
body, td {font: 14px Verdana;}
input {font: 18px Verdana;}
.header td {background-color: #444; color: white;}
.row td {background-color: #EEE;}
a {text-decoration: none; border-bottom: 1px dashed;}
.searches {position: absolute; left: 820px; top: 10px; line-height: 25px;}
</style>
<script>
function play(url) {
	var player = document.getElementById('player');
	player.setAttribute('src', url);
	player.play();
	return(false);
}
function exec_search(q) {
	document.getElementById('search_field').setAttribute('value', q);
	document.getElementById('search_form').submit();
	return(false);
}
</script>
<form method="post" id="search_form">
	<table cellspacing="1" cellpadding="10" border="0" style="width:800px;">
		<tr class="header">
			<td>
				<b>Query</b>
			</td>
			<td style="width:100%;" align="center">
				<input id="search_field" name="q" type"text" style="width:98%;" value="<?= (isset($_POST['q']) ? stripslashes($_POST['q']) : '') ?>"/>
			</td>
			<td>
				<input type="submit" value="Search"/>
			</td>
		</tr>
		<tr class="header">
			<td colspan="3" align="center">
				<audio id="player" controls preload></audio>
			</td>
		</tr>
	</table>
</form>

<table cellspacing="1" cellpadding="10" border="0" style="width:800px;">
<? if (isset($_POST['q']) && count($files) > 0) { ?>
	<tr class="header">
	<? foreach (array_keys($files[0]) as $field) { ?>
		<td align="center"><b><?= $field ?></b></td>
	<? } ?>
	</tr>
	<? foreach ($files as $row) { ?>
		<tr class="row">
			<? foreach ($row as $field_name => $field) { ?>
			<td><?= ( $field_name == 'url' ? '<a href="#" onclick="play(\''. $field .'\')">Play</a>' : $field) ?></td>
			<? } ?>
		</tr>
	<? } ?>
	<tr class="row"><td align="center" colspan="7">Query time: <?= number_format($t_end - $t_start, 4, '.', '') ?>s</td></tr>
<? } else { ?>
	<tr class="row"><td align="center">No data</td></tr>
<? } ?>
</table>

<div class="searches">
	<b>Parsed data:</b><br/>
	<? foreach ($completed as $file) { $file = str_replace('.data', '', $file); ?>
	<a href="#" onclick="exec_search('<?= $file ?>')"><?=$file?></a><br/>
	<? } ?>
</div>