outfile=cluster_viz.html

cat <<__HTML__ > ${outfile}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<style>
* {
	font-family: sans-serif;
}

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: white;
  margin: 1em;
  font-size: calc(12px + (20 - 12) * ((100vw - 600px) / (1600 - 600)));
}



.grid-item
{
	margin-right: 1em;
	margin-bottom: 1em;
	border: 1px solid black;
	border-radius: 5px;
	box-shadow: 5px 5px #888888;
	width: 100%;
}


@media only screen and (min-device-width: 500px) { 
	.grid-item {
		width: 30%;
		min-width: 300px;
		max-width:500px;
	}
}
 
h1, h2, p
{
	margin-bottom: 1em;
}



.boxhead
{
	width:auto;
	padding: 0.5em;
	background-color:black;
	margin:0;

}


.code {
 font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  color: #52595d;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 0px 3px;
  display: inline-block;
  margin: 10px;
}


a:link, a:visited  {
	color: grey;
}

.boxhead h3
{
	color: white;
	float: left;
	margin:0;
	padding:0;
}

.boxhead p
{
	float: right;
	color: lightgrey;
	margin:0;
	padding:0;
}

.box .content {
	padding: 0.5em;
}

.center
{
	display:block;
	width:100%;
	margin-left: auto;
	margin-right: auto;
}



</style>
<title>Non-redundant TF motif matches genome-wide</title>
</head>
<body>

<h1>Non-redundant TF clusters (v1.0 2020-04-14)</h1>
<p>Jeff Vierstra, Altius Institute for Biomedical Sciences
<br>E-mail: jvierstra (at) altius.org</p>

<p>Addtional information and genome-wide scans can be found <a href="http://vierstra.org/resources/motif_clustering">here</a>.</p>

<p>Dashed black lines demarcate the boundary of the motif archetype to which the coordinates of the the matches of individual models are shifted.</p>

<div class="grid">
__HTML__




IFS=","
tail -n +2 /home/jvierstra/proj/code/motif-clustering/tomtom/height.0.70/cluster-info.with.dbd.and.color.csv \
| while read -a fields; do
	echo ${fields[@]}
	echo "<div class=\"grid-item\">" >> ${outfile}
	echo "<div class=\"boxhead\"><h3>${fields[1]}:${fields[2]}</h3><p>${fields[7]} motif models</p><div style=\"clear:both\"></div></div>"  >> ${outfile}
	echo "<img src=\"viz/cluster.${fields[0]}.png\" class=\"center\"/>" >> ${outfile}
	echo "</div>" >> ${outfile}
done


cat <<__HTML__ >> ${outfile}
</div>
</body>
<footer>
<script>

\$(window).on('load', function() {
	\$('.grid').masonry({
	  // options
	  itemSelector: '.grid-item',
	});
});

</script>
</footer>
</html>
__HTML__
