#!/bin/bash

HTML="index.html"
HTML2="list.html"

echo "createHTML running... $( date )"

for dir in cubeFolding surfaces origami polyhedra triangulation perona; do
pushd $dir

cat > $HTML2 <<EOF
<html>
<body bgcolor=blue>
<ul>
EOF

cat > $HTML <<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- this file is automatically generated by createImages.sh, do NOT modify -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=iso-8859-1" />
  <style type="text/css">
ul.ppt {
position: relative;
margin: 0;
}

.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul class="ppt">
EOF

for file in *.png ; do
  echo "<li><img border=0 src='$file'></img></li>" >> $HTML
  echo "<li><img src='$file'></img> $file </li>" >> $HTML2
done

cat >> $HTML2 <<EOF
</ul></body></html>
EOF

cat >> $HTML <<EOF
</ul>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
\$('.ppt li:gt(0)').hide();
\$('.ppt li:last').addClass('last');
var cur = \$('.ppt li:first');

function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = \$('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}


\$(function() {
setInterval( "animate()", 3000 );
} );
</script>
</body>
</html>
EOF

popd

done