Embed query creator into app

Change-Id: Iec3fe743f62dda82378827587d5f420c62af639d
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 743fa2c..f8ac2cc 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -1,16 +1,18 @@
-  /**
-   * Information about a match.
-   */
+/**
+ * Information about a match.
+ */
 define([
   'match/infolayer',
   'match/table',
   'match/tree',
   'match/treemenu',
+  'match/querycreator',
   'util'
 ], function (infoLayerClass,
 	           matchTableClass,
 	           matchTreeClass,
-	           matchTreeMenuClass) {
+	           matchTreeMenuClass,
+             matchQueryCreator) {
   
   // Override 
   KorAP.API.getMatchInfo = KorAP.API.getMatchInfo || function () {
@@ -166,12 +168,12 @@
 
       // Remove circular reference
       if (this._treeMenu !== undefined)
-	delete this._treeMenu["info"];
+	      delete this._treeMenu["info"];
       
       this._treeMenu.destroy();
       this._treeMenu = undefined;
       this._match = undefined;
-      
+      this._matchCreator = undefined;      
       // Element destroy
     },
 
@@ -184,9 +186,9 @@
       
       var h6 = matchtree.appendChild(document.createElement('h6'));
       h6.appendChild(document.createElement('span'))
-	.appendChild(document.createTextNode(foundry));
+	      .appendChild(document.createTextNode(foundry));
       h6.appendChild(document.createElement('span'))
-	.appendChild(document.createTextNode(layer));
+	      .appendChild(document.createTextNode(layer));
       
       var tree = matchtree.appendChild(
 	      document.createElement('div')
@@ -276,6 +278,9 @@
           matchtable.appendChild(table.element());
 	      };
 	      matchtable.classList.remove('loading');
+
+        // Add query creator
+        this._matchCreator = matchQueryCreator.create(matchtable);
       });
 
       // Get spans
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 6786191..ca5aaf9 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -39,10 +39,19 @@
         document.createElement('span')
       );
 
+      // Event when the query fragment is clicked
+      this._element.addEventListener('click', this.toQueryBar.bind(this), 1);
+
+      // Get some basic information - see tutorial.js
+      // It may be better to consultate a global object like KorAP.Hint, however ...
+      this._ql = document.getElementById("ql-field");
+	    this._q = document.getElementById("q-field")
+
       this._shown = false;
       return this;
     },
 
+    // Realease a click event on the annotation table
     clickOnAnno : function (event) {
 
       // Listen for clicks on table cells
@@ -211,12 +220,23 @@
       return str;
     },
 
-    toQueryBar : function () {
-      // 1. Activate Poliquarp-QL
-      // 2. Empty query helper
-      // 3. Reset annotation helper
-      // 4. Insert to query bar
-      // 5. scroll to top
+    // Add query fragment to query bar
+    toQueryBar : function (e) {
+
+      // Set query language field
+      var qlf = this._ql.options;
+      for (var i in qlf) {
+	      if (qlf[i].value == 'poliqarp') {
+	        qlf[i].selected = true;
+          break;
+	      };
+      };
+
+      // Insert to query bar
+      this._q.value = this.toString();
+
+      // Scroll to top
+      window.scrollTo(0, 0);
     }
   };  
 });
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index 89ab555..da56e29 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -201,28 +201,28 @@
       var foundryList = Object.keys(this._foundry).sort();
 
       for (var f = 0; f < foundryList.length; f++) {
-  var foundry = foundryList[f];
-  var layerList =
-    Object.keys(this._foundry[foundry]).sort();
+        var foundry = foundryList[f];
+        var layerList =
+            Object.keys(this._foundry[foundry]).sort();
 
-  for (var l = 0; l < layerList.length; l++) {
-    var layer = layerList[l];
-    tr = tbody.appendChild(
-      d.createElement('tr')
-    );
-    tr.setAttribute('tabindex', 0);
-    tr.addCell = addCell;
+        for (var l = 0; l < layerList.length; l++) {
+          var layer = layerList[l];
+          tr = tbody.appendChild(
+            d.createElement('tr')
+          );
+          tr.setAttribute('tabindex', 0);
+          tr.addCell = addCell;
 
-    tr.addCell('th', foundry);
-    tr.addCell('th', layer);
+          tr.addCell('th', foundry);
+          tr.addCell('th', layer);
 
-    for (var v = 0; v < this.length(); v++) {
-      tr.addCell(
-        'td',
-        this.getValue(v, foundry, layer) 
-      );
-    };
-  };
+          for (var v = 0; v < this.length(); v++) {
+            tr.addCell(
+              'td',
+              this.getValue(v, foundry, layer) 
+            );
+          };
+        };
       };
 
       return this._element = table;