Webapp now show three columns

image, original text and corrected text. The highlighting is functional
as well.

1 files changed, 13 insertions, 11 deletions

diff --git a/web/static/js/main.js b/web/static/js/main.js
index ff09fd1..2adf3ea 100644
--- a/web/static/js/main.js
+++ b/web/static/js/main.js
@@ -1,19 +1,21 @@
 $(document).ready(function() {
     $('#page').mapster({
-                mapKey: 'data-id',
-                fillColor: 'ff0000',
-                fillOpacity: 0.3, 
-    onMouseover: function (e) {
-        $("#" + e.key).addClass("selected");
-    },
-    onMouseout: function (e) {
-        $("#" + e.key).removeClass("selected");
-    }
-                
+        mapKey: 'data-id',
+        fillColor: 'ff0000',
+        fillOpacity: 0.3,
+        onMouseover: function (e) {
+            $("#" + "orig-" + e.key).addClass("selected");
+            $("#" + "corr-" + e.key).addClass("selected");
+        },
+        onMouseout: function (e) {
+            $("#" + "orig-" + e.key).removeClass("selected");
+            $("#" + "corr-" + e.key).removeClass("selected");
+        }
+
     }).mapster('resize', 500);
 
     $("span").mouseenter(function() {
-        $('area[data-id='+$(this).attr("id")+']').mapster("highlight");
+        $('area[data-id='+$(this).attr("id").replace(/\D+/,"")+']').mapster("highlight");
     });
 
     $("span").mouseout(function() {