--- test/html-whatpm/table-script.js	2007/05/27 10:00:48	1.2
+++ test/html-whatpm/table-script.js	2008/05/06 07:50:28	1.7
@@ -1,6 +1,6 @@
-function tableToCanvas (table) {
+function tableToCanvas (table, parent, idPrefix) {
   var canvas = document.createElement ('canvas');
-  document.body.appendChild (canvas);
+  parent.appendChild (canvas);
   if (window.G_vmlCanvasManager) {
     canvas = G_vmlCanvasManager.initElement (canvas);
   }
@@ -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',
@@ -37,13 +38,16 @@
     dataCellFillStyle: 'rgba(0, 0, 0, 0)',
     dataCellStrokeStyle: 'black',
     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 +64,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 +83,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 +96,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 +107,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);
@@ -118,11 +122,12 @@
   c2d.closePath ();
 }
 
+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,6 +141,20 @@
             ? param.headerCellFillStyle : param.dataCellFillStyle;
         c2d.strokeStyle = c[0].is_header
             ? param.headerCellStrokeStyle : 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 = '#' + 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 {
         c2d.rect (x, y, param.columnWidth, param.rowHeight);
         c2d.fillStyle = param.overlappingCellFillStyle;
@@ -151,7 +170,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;
@@ -164,14 +183,65 @@
   c2d.stroke ();
   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 = /* idPrefix + */ 'table-map-' + ++document.TableMapId;
+    map.name = mapid;
+    parent.appendChild (map);
+    var img = document.createElement ('img');
+    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
 
+if (!document.TableMapId) document.TableMapId = 0;
+
 /*
 
-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/05/27 10:00:48 $ */
+/* $Date: 2008/05/06 07:50:28 $ */