Use statemanager for toggle states

Change-Id: Iafbdf69140b69ffabd5c26ffab3b2e055d2e3fe3
diff --git a/dev/js/src/plugin/server.js b/dev/js/src/plugin/server.js
index 1fa0002..589263f 100644
--- a/dev/js/src/plugin/server.js
+++ b/dev/js/src/plugin/server.js
@@ -9,10 +9,16 @@
  */
 "use strict";
 
-define(['plugin/widget', 'plugin/service', 'state', 'pageInfo', 'util'], function (widgetClass, serviceClass, stateClass, pageInfoClass) {
+define(['plugin/widget', 'plugin/service', 'state', 'state/manager', 'pageInfo', 'util'], function (widgetClass, serviceClass, stateClass, stateManagerClass, pageInfoClass) {
 
   KorAP.Panel = KorAP.Panel || {};
 
+  // State manager undefined
+  const states = KorAP.States ? KorAP.States :
+
+        // Not serialized state manager
+        stateManagerClass.create(document.createElement('input'));
+  
   // Contains all servicess to address with
   // messages to them
   var services = {};
@@ -104,7 +110,7 @@
       // TODO:
       //   These fields need to be localized for display by a structure like
       //   { de : { name : '..' }, en : { .. } }
-      var name = obj["name"];
+      const name = obj["name"];
 
       if (!name)
         throw new Error("Missing name of plugin");
@@ -154,7 +160,7 @@
             // a intermediate object to toggle the view
             if ('state' in this.button && this.button.state.associates() > 0) {
 
-              let s = this.button.state;
+              const s = this.button.state;
 
               // The associated service is existent
               if (services[this.button['widgetID']]) {
@@ -203,8 +209,10 @@
 
           if (onClick["action"] && onClick["action"] == "setWidget") {
 
-            // Create a boolean state value, that initializes to true == opened
+            // Create a boolean state value,
+            // that initializes to true == opened
             obj['state'] = stateClass.create([true, false]);
+            obj['state'].setIfNotYet(true);
           };
           
           // Add to dynamic button list (e.g. for matches)
@@ -230,12 +238,11 @@
           //   Accept a "value" list here for toggling, which should
           //   also allow for "rolling" through states via CSS classes
           //   as 'toggle-true', 'toggle-false' etc.
-
-          let state = stateClass.create([true, false]);
-
-          if (onClick["default"] !== undefined) {
-            state.setIfNotYet(onClick["default"]);
-          };
+          let state = states.newState(
+            (onClick["state"] ? onClick["state"] : name),
+            [true, false],
+            onClick["default"]
+          );
 
           // TODO:
           //   Lazy registration (see above!)
@@ -544,9 +551,10 @@
     // Close the service
     _closeService : function (id) {
       delete limits[id];
-      
+
       // Close the iframe
       if (services[id] && services[id]._closeIframe) {
+
         services[id]._closeIframe();
 
         // Remove from list
@@ -583,7 +591,13 @@
       }
       return this._el;
     },
-    
+
+
+    // Return states object
+    states : function () {
+      return states;
+    },
+
     // Destructor, just for testing scenarios
     destroy : function () {
       limits = {};
@@ -605,7 +619,6 @@
         };
         this._el = null;
       };
-      
       this._removeListener();
     }
   };