Use containerMenu as a base for HintMenu instead of regular menu

Change-Id: Ic1ed2e216a9c61aabf1f1cac41972b1a4e96a91a
diff --git a/dev/demo/containermenudemo.js b/dev/demo/containermenudemo.js
index e3b0f99..f1f66c0 100644
--- a/dev/demo/containermenudemo.js
+++ b/dev/demo/containermenudemo.js
@@ -24,8 +24,9 @@
     },
 
     // enter or click
-    onclick : function () {
+    onclick : function (event) {
       console.log(this._name);
+      event.halt();
     },
 
     // right arrow
@@ -56,6 +57,7 @@
         .upgradeTo(this);
         //._init();
       obj.value="";
+      obj.defaultTextValue = "CI";
       return obj;
     },
     add : function (letter) {
@@ -67,25 +69,18 @@
     further : function () {
       this.value = this.value + this.value;
     },
+    isSelectable : function () {
+      return (this.value !== "");
+    },
+    chop : function () {
+      console.log("chop");
+      console.log(this.content(this.value));
+    },
     onclick : function () {
-      console.log('ContainerItem' + this.value);
+      console.log('ContainerItem ' + this.value);
       console.log(this._i);
       this._menu.limit(this._i);
       this._menu.show();
-    },
-    element : function () {
-      // already defined
-      if (this._el !== undefined) return this._el;
-      
-      // Create list item
-      const li = document.createElement("li");
-      li.innerHTML="CI";
-  
-      // Connect action
-      if (this["onclick"] !== undefined) {
-        li["onclick"] = this.onclick.bind(this);
-      };    
-      return this._el = li;
     }
   };
   //List of items.
@@ -100,6 +95,7 @@
   ExampleItemList[2]._i=5;
   ExampleItemList[2].onclick = function (e) {
     this._menu.container().removeItemByIndex(3);
+    //Should fail, that's ok. You can also try index 0 for testing functionality.
   };
 
   //Own container class.
@@ -224,6 +220,8 @@
   document.getElementById('menu').appendChild(menu.element());
   //document.getElementById('largemenu').appendChild(largeMenu.element());
 
+  menu.container().addItem({ value : "Dynamically added", defaultTextValue : "dynamic", _i : 5})
+
   menu.limit(3).show(3);
   menu.focus();
   
diff --git a/dev/demo/hintdemo.js b/dev/demo/hintdemo.js
index 413625c..4f2e12d 100644
--- a/dev/demo/hintdemo.js
+++ b/dev/demo/hintdemo.js
@@ -15,6 +15,14 @@
 
     KorAP.Hint = hintClass.create();
 
+    var newItem = {
+      onclick : function (e) { console.log("CI click"); console.log(this.element()); console.log("'" + this._menu.prefix() + "'" + " <-- If this returns the empty string when\
+ it should not, we know that the click event listener in container.js gets called too early and overwrites the prefix before we can read it.");},
+      chop : function () { console.log("chop"); },
+      defaultTextValue : "Text Example"
+    };
+    KorAP.Hint.menu("-").container().addItem(newItem); //must be added to a specific context menu.
+
     /**
      * Add query panel
      */
@@ -69,10 +77,13 @@
         }
       }]
     });
+    
+    console.log(KorAP.Hint);
   });
 });
 
 function demoAlert (pos, msg) {
   if (KorAP.hint !== undefined)
     KorAP.Hint.alert(pos, msg);
+    console.log(KorAP.Hint);
 }