Show window boundaries on data page

Closes #31

website/data.php

@@ -67,6 +67,7 @@
   }
 
   header('Content-type: image/png');
+  imagecolortransparent($im, $w); 
   imagepng($im);
   return;
  }
@@ -74,6 +75,26 @@
  $sql = 'SELECT log_id, log_imei, log_version, log_time, log_activity, log_data FROM sensorlogger WHERE log_statuscode = 1';
  $res = mysql_query($sql);
 
+?>
+
+<style type="text/css">
+  .windowed { background: url('windowbg.png') repeat-y -256px 0px; }
+  .windowboxes { margin: 0px; padding: 0px; border-right: 1px solid black; display: inline-block; }
+  .windowboxes li { display: inline-block; width: 255px; text-align: center; border: 1px solid black; margin: 0px; padding: 0px; border-right: 0; }
+  .windowboxes.odd { padding-left: 128px; }
+</style>
+<script type="text/javascript">
+  function showWindow(id, offset) {
+   document.getElementById('window_' + id).style.backgroundPosition = (offset * 2) + "px 0px";
+  }
+
+  function hideWindow(id) {
+   showWindow(id, -128);
+  }
+</script>
+
+<?PHP
+
  echo '<table border="1">';
  $first = true;
 
@@ -85,12 +106,30 @@
    $first = false;
   }
 
+  $points = 0;
+
   echo '<tr>';
-  foreach ($row as $k => $v) { echo '<td>', $k == 'log_data' ? count(explode("\n", $v)) . ' line(s)' : nl2br(htmlentities($v)), '</td>'; }
+  foreach ($row as $k => $v) { echo '<td>', $k == 'log_data' ? ($points = count(explode("\n", $v))) . ' line(s)' : nl2br(htmlentities($v)), '</td>'; }
 
   echo '<td>';
+
+  echo '<ol class="windowboxes even">';
+  for ($i = 0; $i + 128 < $points; $i += 128) {
+   echo '<li onMouseOver="showWindow(', $row['log_id'], ', ', $i, ')" onMouseOut="hideWindow(', $row['log_id'], ')">Window</li>';
+  }
+  echo '</ol>';
+
+  echo '<div class="windowed" id="window_', $row['log_id'], '" styleb"background-color: orange;">';
   echo '<img src="data.php?graph=', $row['log_id'], '&amp;ds=1&amp;imei=', $row['log_imei'], '" height="330">';
   echo '<br><img src="data.php?graph=', $row['log_id'], '&amp;ds=2&amp;imei=', $row['log_imei'], '" height="330">';
+  echo '</div>';
+
+  echo '<ol class="windowboxes odd">';
+  for ($i = 64; $i + 128 < $points; $i += 128) {
+   echo '<li onMouseOver="showWindow(', $row['log_id'], ', ', $i, ')" onMouseOut="hideWindow(', $row['log_id'], ')">Window</li>';
+  }
+  echo '</ol>';
+
   echo '</td>';
   echo '</tr>';
  }