Added close button to annotation table

Change-Id: I639ecd3a59513658e32d646ddd5740dd76c287b5
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 6019e40..8779ee9 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -280,8 +280,8 @@
 
     // Add meta information to match
     showMeta : function () {
-      var matchmeta = d.createElement('div');
-      matchmeta.classList.add('matchmeta', 'loading');
+      var metaTable = document.createElement('div');
+      metaTable.classList.add('metatable'); // , 'loading');
 
       // TODO: This is part of the getMeta!
       var metaInfo = this._match.element().getAttribute('data-info');
@@ -294,17 +294,18 @@
 
         // Add metainfo to matchview
         var metaElem = matchMetaClass.create(this._match).element(metaInfo);
-        this.element().appendChild(metaElem);
-        /*
-        elem.insertBefore(
-          metaElem,
-          elem.firstChild
-        );
-        */
+        metaTable.appendChild(metaElem);
+        this.element().appendChild(metaTable);
+
+        // Add button
+        this._addButton('close', metaTable, function (e) {
+          this.parentNode.removeChild(this);
+          e.halt();
+        });
       };
 
       // Load data
-      matchmeta.classList.remove('loading');
+      metaTable.classList.remove('loading');
     },
 
 
@@ -313,8 +314,11 @@
 
       // Append default table
       var matchtable = d.createElement('div');
-      matchtable.classList.add('matchtable', 'loading');
-      this.element().appendChild(matchtable);
+      matchtable.classList.add('matchtable'); // , 'loading');
+
+      var info = this.element();
+      info.appendChild(matchtable);
+
 
       // Create the table asynchronous
       this.getTableData(undefined, function (table) {
@@ -329,8 +333,34 @@
         // Add query creator
         this._matchCreator = matchQueryCreator.create(info);
       });
+
+      // Add button
+      this._addButton('close', matchtable, function (e) {
+        this.parentNode.removeChild(this);
+        e.halt();
+      });
+
+      // Load data
+      matchtable.classList.remove('loading');
     },
 
+
+    _addButton : function (buttonType, element, cb) {
+      // TODO: Unless existent
+      var actions = document.createElement('ul');
+      actions.classList.add('action', 'image');
+      var b = actions.addE('li');
+      b.className = buttonType;
+      b.addE('span').addT(buttonType);
+      b.addEventListener(
+        'click', cb.bind(element)
+      );
+
+      element.appendChild(actions);
+      return actions;
+    },
+
+
     /**
      * Create match information view.
      */
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index 02da3dc..8237935 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -61,9 +61,6 @@
       if (this._element !== undefined)
         return this._element;
       
-      var metaTable = document.createElement('div');
-      metaTable.classList.add('metatable');
-
       /*
       var header = metaTable.appendChild(
         document.createElement('h6')
@@ -76,9 +73,9 @@
       );
       */
 
-      var metaDL = metaTable.addE('dl');
+      var metaDL = document.createElement('dl');
 
-      this._element = metaTable;
+      this._element = metaDL;
 
       // TODO: Meta fields should be separated
       var keys = Object.keys(metaInfo);
@@ -101,31 +98,7 @@
           metaDL.appendChild(metaL);
         };
       };
-
-      this.addButton('close', function (e) {
-        var el = this.element();
-        el.parentNode.removeChild(el);
-        e.halt();
-      });
-      
       return this._element;
-    },
-
-    // TODO: This should be a method by all matchinfo objects
-    addButton : function (buttonType, cb) {
-      // TODO: Unless existent
-      var actions = document.createElement('ul');
-      actions.classList.add('action', 'image');
-      var button = actions.addE('li');
-      button.className = buttonType;
-      button.addE('span').addT(buttonType);
-      button.addEventListener(
-        'click', cb.bind(this)
-      );
-
-      this.element().appendChild(actions);
-      return actions;
-    },
-
+    }
   };
 });
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index 46f2890..67e20cd 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -2,6 +2,7 @@
  * Table representation of morphological
  * annotations of a match.
  */
+// TODO: Create base object for all matchinfo classes!
 define(["util"], function () {
   const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
   const d = document;
@@ -70,6 +71,7 @@
       return this._info[pos][foundry + '/' + layer]
     },
 
+
     // Parse the snippet
     _parse : function (children) {
 
@@ -149,7 +151,11 @@
         return this._element;
 
       // First the legend table
-      var table = d.createElement('table');
+      var wrap = d.createElement('div');
+
+      var table = wrap.addE('table');
+
+      this._element = wrap;
 
       // Single row in head
       var tr = table.addE('thead').addE('tr');
@@ -239,7 +245,7 @@
         };
       };
 
-      return this._element = table;
-    }
+      return this._element;
+    },
   };
 });