--- test/html-whatpm/table-script.js	2007/06/30 08:26:08	1.3
+++ test/html-whatpm/table-script.js	2008/05/06 08:47:09	1.8
@@ -1,4 +1,4 @@
-function tableToCanvas (table, parent) {
+function tableToCanvas (table, parent, idPrefix) {
   var canvas = document.createElement ('canvas');
   parent.appendChild (canvas);
   if (window.G_vmlCanvasManager) {
@@ -16,9 +16,10 @@
     rowHeight: 20,
     rowSpacing: 5,
     rowGroupLeft: 10,
+    rowGroupFillLeft: 20, /* Must be same as columnLeft */
     rowLeft: 15,
     cellTop: 20,
-    cellLeft: 20,
+    cellLeft: 20, /* Must be same as columnLeft */
     cellBottom: 20,
     cellRight: 20,
     explicitColumnGroupStrokeStyle: 'black',
@@ -36,14 +37,18 @@
     headerCellStrokeStyle: 'black',
     dataCellFillStyle: 'rgba(0, 0, 0, 0)',
     dataCellStrokeStyle: 'black',
+    emptyDataCellStrokeStyle: '#C0C0C0',
     overlappingCellFillStyle: 'red',
-    overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)'
+    overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)',
+    highlightCellFillStyle: 'yellow'
   };
 
+  canvas.drawTable = function () {
+
 var columnNumber = table.column.length;
 if (columnNumber < table.cell.length) columnNumber = table.cell.length;
 var rowNumber = 0;
-for (var i = 1; i < table.cell.length; i++) {
+for (var i = 0; i < table.cell.length; i++) {
   if (table.cell[i] && rowNumber < table.cell[i].length) {
     rowNumber = table.cell[i].length;
   }
@@ -60,7 +65,7 @@
     + param.cellBottom;
 
 var y = param.rowTop;
-for (var i = 1; i < table.row_group.length; i++) {
+for (var i = 0; i < table.row_group.length; i++) {
   var rg = table.row_group[i];
   c2d.beginPath ();
   if (rg.type == 'thead') {
@@ -79,7 +84,7 @@
   c2d.stroke ();
   c2d.closePath ();
   c2d.beginPath ();
-  c2d.rect (param.rowGroupLeft,
+  c2d.rect (param.rowGroupFillLeft,
             y,
             (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
             dy - param.rowSpacing);
@@ -92,7 +97,7 @@
 c2d.beginPath ();
 c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
 var x = param.columnLeft;
-for (var i = 1; i < table.column_group.length; i++) {
+for (var i = 0; i < table.column_group.length; i++) {
   var cg = table.column_group[i];
   c2d.moveTo (x, param.columnGroupTop);
   x += (param.columnWidth + param.columnSpacing) * cg.width;
@@ -103,7 +108,7 @@
 c2d.closePath ();
 
 var x = param.columnLeft;
-for (var i = 1; i < columnNumber; i++) {
+for (var i = 0; i < columnNumber; i++) {
   var c = table.column[i];
   c2d.beginPath ();
   c2d.moveTo (x, param.columnTop);
@@ -120,10 +125,10 @@
 
 var map = document.createElement ('map');
 var x = param.cellLeft;
-for (var i = 1; i < table.cell.length; i++) {
+for (var i = 0; i < table.cell.length; i++) {
   var y = param.cellTop;
   if (!table.cell[i]) continue;
-  for (var j = 1; j < table.cell[i].length; j++) {
+  for (var j = 0; j < table.cell[i].length; j++) {
     var c = table.cell[i][j];
     if (c && ((c[0].x == i && c[0].y == j) || c.length > 1)) {
       c2d.beginPath ();
@@ -136,14 +141,22 @@
         c2d.fillStyle = c[0].is_header
             ? param.headerCellFillStyle : param.dataCellFillStyle;
         c2d.strokeStyle = c[0].is_header
-            ? param.headerCellStrokeStyle : param.dataCellStrokeStyle;
+            ? param.headerCellStrokeStyle
+            : c[0].is_empty
+                ? param.emptyDataCellStrokeStyle
+                : param.dataCellStrokeStyle;
         if (c[0].id) {
           var area = document.createElement ('area');
           area.shape = 'rect';
           area.coords = [x, y, x + width, y + height].join (',');
           area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';
-          area.href = '#node-' + c[0].id;
-          area.id = 'cell-' + c[0].id;
+          area.href = '#' + idPrefix + 'node-' + c[0].id;
+          area.id = idPrefix + 'cell-' + c[0].id;
+          area.onmouseover = (function (v) {
+            return function () {
+              canvas.highlightCells (v);
+            };
+          }) (c[0].header);
           map.appendChild (area);
         }
       } else {
@@ -161,7 +174,7 @@
 }
 
 var y = param.rowTop;
-for (var i = 1; i < rowNumber; i++) {
+for (var i = 0; i < rowNumber; i++) {
   c2d.beginPath ();
   c2d.moveTo (param.rowLeft, y);
   y += param.rowHeight + param.rowSpacing;
@@ -175,15 +188,53 @@
   c2d.closePath ();
 }
 
+    return map;
+  }; // canvas.drawTable
+
+  canvas.highlightCells = function (cells) {
+    var c2d = this.getContext ('2d');
+
+    for (var x in cells) {
+      for (var y in cells[x]) {
+        if (cells[x][y]) {
+          var cell = table.cell[x][y][0];
+          c2d.beginPath ();
+          c2d.rect
+              (param.cellLeft + (param.columnWidth + param.columnSpacing) * x,
+               param.cellTop + (param.rowHeight + param.rowSpacing) * y,
+               (param.columnWidth + param.columnSpacing) * cell.width - param.columnSpacing,
+               (param.rowHeight + param.rowSpacing) * cell.height - param.rowSpacing);
+          c2d.fillStyle = param.highlightCellFillStyle;
+          c2d.fill ();
+          c2d.stroke ();
+          c2d.closePath ();
+        }
+      }
+    }
+    this.updateImgElement ();
+  } // canvas.highlightCells
+
+  var map = canvas.drawTable ();
   if (map.hasChildNodes ()) {
-    var mapid = 'table-map-' + ++document.TableMapId;
+    var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId;
     map.name = mapid;
     parent.appendChild (map);
     var img = document.createElement ('img');
-    img.src = canvas.toDataURL ();
     img.useMap = '#' + mapid;
+    canvas.updateImgElement = function () {
+      img.src = this.toDataURL ();
+    };
+    img.onmouseover = function (e) {
+      if (e.target == e.currentTarget) {
+        canvas.drawTable ();
+        canvas.updateImgElement ();
+      }
+    };
+    canvas.updateImgElement ();
     parent.appendChild (img);
     canvas.style.display = 'none';
+  } else {
+    canvas.updateImgElement = function () {};
   }
 } // tableToCanvas
 
@@ -191,10 +242,10 @@
 
 /*
 
-Copyright 2007 Wakaba <w@suika.fam.cx>
+Copyright 2007-2008 Wakaba <w@suika.fam.cx>
 
 This library is free software; you can redistribute it
 and/or modify it under the same terms as Perl itself.
 
 */
-/* $Date: 2007/06/30 08:26:08 $ */
+/* $Date: 2008/05/06 08:47:09 $ */