Make meta table part of matchinfo

Change-Id: I558663229da10784cb3feba449c20fb9d75cd74c
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index db70dc1..81bc697 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,9 +11,9 @@
  */
 define([
   'match/info',      // rename to anno
-  'match/reference', // rename to meta
+  // 'match/reference', // rename to meta
   'util'
-], function (infoClass, refClass) {
+], function (infoClass) { //, refClass) {
 
   // Localization values
   var loc   = KorAP.Locale;
@@ -209,7 +209,7 @@
         meta.addEventListener(
           'click', function (e) {
             e.halt();
-            that.showMeta(refLine);
+            that.info().addMeta();
           }
         );
       };
@@ -223,7 +223,7 @@
       // Add information, unless it already exists
       info.addEventListener('click', function (e) {
         e.halt();
-        that.info().toggle();
+        that.info().addTable();
       });
 
       ul.appendChild(close);
@@ -233,23 +233,6 @@
     },
 
     
-    /**
-     * Return a list of meta data.
-     */
-    showMeta : function (refLine) {
-      var metaInfo = this._element.getAttribute('data-info');
-
-      // refLine.parentNode
-      
-      if (metaInfo)
-        metaInfo = JSON.parse(metaInfo);
-
-      if (metaInfo) {
-        var metaElem = refClass.create(this).element(metaInfo);
-        this.element().appendChild(metaElem);
-      };
-    },
-
     // Todo: Test toggle
     toggle : function () {
       if (this._element.classList.contains('active'))
@@ -289,6 +272,17 @@
       if (this._info._element !== undefined)
         return this._info;
 
+      /*
+        this.element().appendChild(
+        this._info.element()
+      );
+      */
+      var refLine = this._element.querySelector("p.ref");
+      this._element.insertBefore(
+        this._info.element(),
+        refLine
+      );
+      
       return this._info;
     },
 
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 703e133..a6ccbec 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -5,6 +5,7 @@
   'match/infolayer',
   'match/table',
   'match/tree',
+  'match/reference', // rename to meta
   'match/relations',
   'match/treemenu',
   'match/querycreator',
@@ -12,6 +13,7 @@
 ], function (infoLayerClass,
 	           matchTableClass,
 	           matchTreeClass,
+	           matchRefClass,
              matchRelClass,
 	           matchTreeMenuClass,
              matchQueryCreator) {
@@ -54,6 +56,7 @@
      * Open the information view,
      * if closed, otherwise close.
      */
+    /*
     toggle : function () {
 
       var elem = this._match.element();
@@ -74,6 +77,7 @@
       
       return this.opened;
     },
+    */
 
 
     /**
@@ -134,6 +138,11 @@
       return null;
       */
     },
+
+
+    getMeta : function (metaInfo, cb) {
+      
+    },
     
 
     /**
@@ -271,18 +280,33 @@
           cb(treeObj);
       });
     },
-    
-    /**
-     * Create match information view.
-     */
-    element : function () {
-      
-      if (this._element !== undefined)
-        return this._element;
-      
-      // Create info table
-      var info = document.createElement('div');
-      info.classList.add('matchinfo');
+
+
+    addMeta : function () {
+      var matchmeta = document.createElement('div');
+      // matchRefClass.create();
+
+      // TODO: This is part of the getMeta!
+      var metaInfo = this._match.element().getAttribute('data-info');
+
+      if (metaInfo)
+        metaInfo = JSON.parse(metaInfo);
+
+      // There is metainfo
+      if (metaInfo) {
+
+        // Add metainfo to matchview
+        var metaElem = matchRefClass.create(this._match).element(metaInfo);
+        this.element().appendChild(metaElem);
+
+        console.log(this.element());
+      };
+    },
+
+    // Add table
+    addTable : function () {
+
+      var info = this.element();
 
       // Append default table
       var matchtable = document.createElement('div');
@@ -301,6 +325,13 @@
         this._matchCreator = matchQueryCreator.create(info);
       });
 
+      
+      info.appendChild(this.addTreeMenu());
+    },
+
+
+    addTreeMenu : function () {
+
       // Join spans and relations
       var treeLayers = []
       var spans = this._match.getSpans();
@@ -348,7 +379,7 @@
 
       // Create tree menu
       var treemenu = this.treeMenu(menuList);
-      var span = info.appendChild(document.createElement('p'));
+      var span = document.createElement('p');
       span.classList.add('addtree');
       span.appendChild(document.createTextNode(loc.ADDTREE));
 
@@ -359,10 +390,25 @@
         treemenu.show();
         treemenu.focus();
       });
+
+      return span;
+    },
+
+    /**
+     * Create match information view.
+     */
+    element : function () {
+      
+      if (this._element !== undefined)
+        return this._element;
+      
+      // Create info table
+      var info = document.createElement('div');
+      info.classList.add('matchinfo');
       
       this._element = info;
 
-      return info;
+      return this._element;
     },
 
     
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 9d59af3..9462874 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -22,7 +22,12 @@
   biblEditionStatement
   fileEditionStatement
 */
-define(function () {
+define(['util'], function () {
+
+  // Localization values
+  var loc   = KorAP.Locale;
+  loc.METADATA   = loc.METADATA   || 'Metadata';
+
   return {
 
     /**
@@ -55,9 +60,23 @@
       if (this._element !== undefined)
         return this._element;
       
-      var metaTable = document.createElement('dl');
+      var metaTable = document.createElement('div');
       metaTable.classList.add('metatable');
 
+      var header = metaTable.appendChild(
+        document.createElement('h6')
+      );
+
+      header.appendChild(
+        document.createElement('div')
+      ).appendChild(
+        document.createTextNode(loc.METADATA)
+      );
+
+      var metaDL = metaTable.appendChild(
+        document.createElement('dl')
+      );
+
       this._element = metaTable;
 
       // TODO: Meta fields should be separated
@@ -85,7 +104,7 @@
             document.createTextNode(metaInfo[k])
           );
 
-          metaTable.appendChild(metaL);
+          metaDL.appendChild(metaL);
         };
       };