Added query panel for plugin capabilities

Change-Id: I5766cf45aa711ebea9a6f9f3dfa51e706ebd0d0d
diff --git a/dev/demo/hint.html b/dev/demo/hint.html
index 38c4a99..3e8f71e 100644
--- a/dev/demo/hint.html
+++ b/dev/demo/hint.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <header>
-      <form autocomplete="off" action="/kalamar">
+      <form id="searchform" autocomplete="off" action="/kalamar">
 	<div id="searchbar">
 	  <input type="search"
 		 placeholder="Find ..."
@@ -18,6 +18,7 @@
 		 autofocus="autofocus" />
 	  <button type="submit"><span>Go</span></button>
 	</div>
+  <div id="vc-view"></div>
       </form>
     </header>
 
diff --git a/dev/demo/hintdemo.js b/dev/demo/hintdemo.js
index e33faab..ee676ef 100644
--- a/dev/demo/hintdemo.js
+++ b/dev/demo/hintdemo.js
@@ -7,11 +7,52 @@
 
 var hint = undefined;
 
-require(['hint','hint/foundries/cnx','lib/domReady'], function (hintClass, hintArray, domReady) {
+require(['plugin/server','panel/query', 'hint','hint/foundries/cnx','lib/domReady'], function (pluginClass, queryPanelClass, hintClass, hintArray, domReady) {
   KorAP.hintArray = hintArray;
   KorAP.Hint = null;
+  
   domReady(function() {
+
     KorAP.Hint = hintClass.create();
+
+    /**
+     * Add query panel
+     */
+    var queryPanel = queryPanelClass.create();
+
+    // Get input field
+    var sform = document.getElementById("searchform");
+    var vcView = document.getElementById('vc-view')
+    if (sform && vcView) {
+      // The views are below the query bar
+      sform.insertBefore(queryPanel.element(),vcView);
+      KorAP.Panel = KorAP.Panel || {};
+      KorAP.Panel['query'] = queryPanel;
+    }
+
+    // Load plugin server
+    KorAP.Plugin = pluginClass.create();
+
+    // Register match plugin
+    KorAP.Plugin.register({
+      'name' : 'Example New',
+      'desc' : 'Some content about cats',
+      'embed' : [{
+        'panel' : 'query',
+        'title' : 'Translate',
+        'classes' : ['translate'],
+        'onClick' : {
+          "template" : "http://localhost:3003/demo/plugin-client.html"
+        }
+      },{
+        'panel' : 'query',
+        'title' : 'Glemm',
+        'classes' : ['glemm'],
+        'onClick' : {
+          "template" : "http://localhost:3003/demo/plugin-client.html"
+        }
+      }]
+    });
   });
 });
 
diff --git a/dev/demo/panel.html b/dev/demo/panel.html
index f309cbd..35f78e7 100644
--- a/dev/demo/panel.html
+++ b/dev/demo/panel.html
@@ -18,7 +18,7 @@
 });
 
 
-require(['buttongroup', 'panel', 'view/koralquery'], function (btnClass, panelClass, kqClass) {
+require(['buttongroup', 'panel', 'view/result/koralquery'], function (btnClass, panelClass, kqClass) {
   KorAP.koralQuery = {
     '@type' : "https://beispiel",
     'key' : 'Cool'