Adopt panel system for plugins

Change-Id: I54f520382fb4a26c05ccb2cf0cd3cb48737933ac
diff --git a/dev/demo/plugin-server.html b/dev/demo/plugin-server.html
index 15a69d2..5065d41 100644
--- a/dev/demo/plugin-server.html
+++ b/dev/demo/plugin-server.html
@@ -14,10 +14,21 @@
     <main>
       <div id="search">
         <ol>
-          <li class="active">
-            <div id="match"></div>
-            <div id="buttons"></div>
-          </li>
+          <li data-corpus-id="WPD"
+	            data-doc-id="FFF"
+	            data-text-id="01460"
+	            data-match-id="p119-120"
+	            data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans malt/d=rels"
+	            id="WPD-FFF.01460-p119-120"
+	            tabindex="6">
+	          <div class="meta">WPD/III/78432</div>
+            <div class="match-main">
+              <div class="match-wrap">
+	              <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
+	            </div>
+            </div>
+	          <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
+	        </li>
         </ol>
       </div>
     </main>
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index 92c4611..e66dfd5 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -5,11 +5,18 @@
   }
 });
 
-define(['app/en','buttongroup', 'plugin/server','lib/domReady','init','hint/foundries/cnx'], function (lang, buttonGroupClass, pluginClass, domReady) {
+define(['app/en','match', 'panel/match', 'plugin/server','lib/domReady','init'], function (lang, matchClass, matchPanelClass, pluginClass, domReady) {
   domReady(function () {
 
+    // Initialize match
+    matchClass.create(
+      document.getElementById('WPD-FFF.01460-p119-120')
+    );
+
+    // Load plugin server
     KorAP.Plugin = pluginClass.create();
 
+    // Register match plugin
     KorAP.Plugin.register({
       'name' : 'Example New',
       'desc' : 'Some content about cats',
@@ -25,18 +32,5 @@
       }]
     });
 
-    
-    var btns = buttonGroupClass.create();
-    document.getElementById('buttons').appendChild(btns.element());
-
-    // Are there plugin buttons defined
-    var matchButtons = KorAP.Plugin.buttonGroup("match");
-    if (matchButtons) {
-
-      // Add all matchbuttons in order
-      for (i in matchButtons) {
-        btns.add.apply(btns, matchButtons[i]);
-      }
-    };  
   });
 });