diff --git a/public/js/src/menu.js b/public/js/src/menu.js
index b251000..f0dd15d 100644
--- a/public/js/src/menu.js
+++ b/public/js/src/menu.js
@@ -1,5 +1,11 @@
 var KorAP = KorAP || {};
 
+/**
+ * Create scrollable drop-down menus.
+ *
+ * @author Nils Diewald
+ */
+
 (function (KorAP) {
   "use strict";
 
@@ -25,39 +31,63 @@
       return Object.create(KorAP.Menu)._init(params);
     },
 
+    focus : function () {
+      this._element.focus();
+    },
+
+    // Initialize list
     _init : function (itemClass, params) {
       // this._element.addEventListener("click", chooseHint, false);
       this._itemClass = itemClass;
       this._element = document.createElement("ul");
       this._element.style.opacity = 0;
 
+/*
+      this._listener = document.createElement('input');
+      this._listener.setAttribute('type', 'text');
+//      this._listener.style.display = "none";
+*/
+      this._element.addEventListener(
+	"keydown",
+	function (e) {
+          console.log('+++');
+	},
+	false
+      );
+
       this.active = false;
       this._items = new Array();
       var i;
+
+      // Initialize item list based on parameters
       for (i in params) {
 	var obj = itemClass.create(params[i]);
-	this._items.push(
-	  obj
-	);
+	this._items.push(obj);
       };
       this._limit    = KorAP.menuLimit;
       this._position = 0;  // position in the active list
       this._active   = -1; // active item in the item list
-
       this._reset();
       return this;
     },
 
+    /**
+     * Get the instantiated HTML element
+     */
     element : function () {
       return this._element;
     },
 
+    /**
+     * Get the creator object for items
+     */
     itemClass : function () {
       return this._itemClass;
     },
 
     /**
-     * Get and set numerical value for limit
+     * Get and set numerical value for limit,
+     * i.e. the number of items visible.
      */
     limit : function (limit) {
       if (arguments.length === 1)
@@ -69,7 +99,7 @@
      * Upgrade this object to another object,
      * while private data stays intact.
      *
-     * @param {Object] An object with properties.
+     * @param {Object} An object with properties.
      */
     upgradeTo : function (props) {
       for (var prop in props) {
@@ -78,6 +108,7 @@
       return this;
     },
 
+    // Reset chosen item and prefix
     _reset : function () {
       this._offset = 0;
       this._pos    = 0;
@@ -96,30 +127,30 @@
       if (!this._initList())
 	return;
 
-      // show based on offset
+      // show based on initial offset
       this._showItems(0);
 
       // Set the first element to active
+      // Todo: Or the last element chosen
       this.liveItem(0).active(true);
 
       this._position = 0;
       this._active = this._list[0];
 
+      this._element.style.opacity = 1;
+
       // Add classes for rolling menus
       this._boundary(true);
     },
 
-    /**
-     * Get a specific item from the complete list
-     *
-     * @param {number} index of the list item
-     */
-    item : function (index) {
-      return this._items[index]
+    hide : function () {
+      this._element.style.opacity = 0;
     },
 
+    // Initialize the list
     _initList : function () {
 
+      // Create a new list
       if (this._list === undefined) {
 	this._list = [];
       }
@@ -131,20 +162,27 @@
       // Offset is initially zero
       this._offset = 0;
 
+      // There is no prefix set
       if (this.prefix().length <= 0) {
 	for (var i = 0; i < this._items.length; i++)
 	  this._list.push(i);
 	return true;
       };
 
+      // There is a prefix set, so filter the list
       var pos;
       var paddedPrefix = " " + this.prefix();
 
+      // Iterate over all items and choose preferred matching items
+      // i.e. the matching happens at the word start
       for (pos = 0; pos < this._items.length; pos++) {
 	if ((this.item(pos).lcField().indexOf(paddedPrefix)) >= 0)
 	  this._list.push(pos);
       };
 
+      // The list is empty - so lower your expectations
+      // Iterate over all items and choose matching items
+      // i.e. the matching happens anywhere in the word
       if (this._list.length == 0) {
 	for (pos = 0; pos < this._items.length; pos++) {
 	  if ((this.item(pos).lcField().indexOf(this.prefix())) >= 0)
@@ -152,7 +190,7 @@
 	};
       };
 
-      // Filter was successful
+      // Filter was successful - yeah!
       return this._list.length > 0 ? true : false;
     },
 
@@ -164,12 +202,13 @@
 
     /**
      * Get the prefix for filtering,
-     * e.g. &quot;ve"&quot; for &quot;verb&quot;
+     * e.g. &quot;ve&quot; for &quot;verb&quot;
      */
     prefix : function () {
       return this._prefix || '';
     },
 
+    // Append Items that should be shown
     _showItems : function (offset) {
       this.delete();
 
@@ -194,12 +233,16 @@
      */
     delete : function () {
       var child;
+
+      // Iterate over all visible items
       for (var i = 0; i <= this.limit(); i++) {
 
+	// there is a visible element - unhighlight!
 	if (child = this.shownItem(i))
 	  child.lowlight();
       };
 
+      // Remove all children
       while (child = this._element.firstChild)
 	this._element.removeChild(child);
     },
@@ -218,10 +261,38 @@
     },
 
 
+    // Prepend item to the shown list based on index
+    _prepend : function (i) {
+      var item = this.item(i);
+
+      // Highlight based on prefix
+      if (this.prefix().length > 0)
+	item.highlight(this.prefix());
+
+      var e = this.element();
+      // Append element
+      e.insertBefore(
+	item.element(),
+	e.firstChild
+      );
+    },
+
+
+    /**
+     * Get a specific item from the complete list
+     *
+     * @param {number} index of the list item
+     */
+    item : function (index) {
+      return this._items[index]
+    },
+
+
     /**
      * Get a specific item from the filtered list
      *
      * @param {number} index of the list item
+     *        in the filtered list
      */
     liveItem : function (index) {
       if (this._list === undefined)
@@ -231,15 +302,12 @@
       return this._items[this._list[index]];
     },
 
-    length : function () {
-      return this._items.length;
-    },
-
 
     /**
      * Get a specific item from the visible list
      *
      * @param {number} index of the list item
+     *        in the visible list
      */
     shownItem : function (index) {
       if (index >= this.limit())
@@ -248,8 +316,16 @@
     },
 
 
-    /*
-     * Make the next item in the menu active
+    /**
+     * Get the length of the full list
+     */
+    length : function () {
+      return this._items.length;
+    },
+
+
+    /**
+     * Make the next item in the filtered menu active
      */
     next : function () {
       // No active element set
@@ -270,7 +346,7 @@
       }
 
       // The next element is outside the view - roll down
-      else if (this._position >= (this.limit + this._offset)) {
+      else if (this._position >= (this.limit() + this._offset)) {
 	this._removeFirst();
 	this._offset++;
 	this._append(this._list[this._position]);
@@ -282,8 +358,8 @@
     /*
      * Make the previous item in the menu active
      */
-/*
     prev : function () {
+      // No active element set
       if (this._position == -1)
 	return;
 
@@ -294,9 +370,9 @@
 
       // The previous element is undefined - roll to bottom
       if (newItem === undefined) {
-	this._position = this.liveLength - 1;
+	this._offset = this.liveLength() - this.limit();
+	this._position = this.liveLength() - 1;
 	newItem = this.liveItem(this._position);
-	this._offset = this.liveLength - this.limit;
 	this._showItems(this._offset);
       }
 
@@ -306,85 +382,33 @@
 	this._offset--;
 	this._prepend(this._list[this._position]);
       };
+
       newItem.active(true);
     },
-*/
 
 
-    /**
-     * Get the context of the menue,
-     * e.g. &quot;tt/&quot; for the tree tagger menu
-     */
-/*
-    get context () {
-      return this._context;
-    },
-*/
-/*
-    get liveLength () {
-      if (this._list === undefined)
-	this._initList();
-      return this._list.length;
-    },
-*/
-/*
-    chooseHint : function (e) {
-      var element = e.target;
-      while (element.nodeName == "STRONG" || element.nodeName == "SPAN")
-	element = element.parentNode;
-
-      if (element === undefined || element.nodeName != "LI")
-	return;
-
-      var action = element.getAttribute('data-action');
-      hint.insertText(action);
-      var menu = hint.menu();
-      menu.hide();
-
-      // Fill this with the correct value
-      var show;
-      if ((show = hint.analyzeContext()) != "-") {
-	menu.show(show);
-	menu.update(
-	  hint._search.getBoundingClientRect().right
-	);
-      };
-
-      hint._search.focus();
-    },
-
+    // Remove the HTML node from the first item
     _removeFirst : function () {
       this.item(this._list[this._offset]).lowlight();
       this._element.removeChild(this._element.firstChild);
     },
 
+
+    // Remove the HTML node from the last item
     _removeLast : function () {
-      this.item(this._list[this._offset + this.limit - 1]).lowlight();
+      this.item(this._list[this._offset + this.limit() - 1]).lowlight();
       this._element.removeChild(this._element.lastChild);
     },
 
-
-    // Prepend item to the shown list based on index
-    _prepend : function (i) {
-      var item = this.item(i);
-
-      // Highlight based on prefix
-      if (this.prefix.length > 0)
-	item.highlight(this.prefix);
-
-      // Append element
-      this.element.insertBefore(
-	item.element,
-	this.element.firstChild
-      );
-    },
-*/
-
+    // Length of the filtered list
+    liveLength : function () {
+      if (this._list === undefined)
+	this._initList();
+      return this._list.length;
+    }
   };
 
 
-
-
   /**
    * Item in the Dropdown menu
    */
@@ -585,4 +609,10 @@
     },
   };
 
+/*
+  KorAP._updateKey : function (e) {
+    var code = this._codeFromEvent(e)    
+  };
+*/
+
 }(this.KorAP));
diff --git a/public/js/src/vc.js b/public/js/src/vc.js
index d226fc4..00528aa 100644
--- a/public/js/src/vc.js
+++ b/public/js/src/vc.js
@@ -3,9 +3,13 @@
  *
  * @author Nils Diewald
  */
-
+/*
+ * Replaces a previous version written by Mengfei Zhou
+ */
 var KorAP = KorAP || {};
 
+// Requires menu.js
+
 /*
   TODO: Implement a working localization solution!
   TODO: Disable "and" or "or" in case it's followed
@@ -50,7 +54,6 @@
   loc.DEL   = loc.DEL   || '×';
   loc.EMPTY = loc.EMPTY || '⋯'
 
-
   // Utility for analysing boolean values
   function _bool (bool) {
     return (bool === undefined || bool === null || bool === false) ? false : true;
@@ -148,10 +151,10 @@
 
       if (json !== undefined) {
 	// Root object
-	if (json['@type'] == 'korap:doc') {
+	if (json['@type'] == 'koral:doc') {
 	  obj._root = KorAP.Doc.create(obj, json);
 	}
-	else if (json['@type'] == 'korap:docGroup') {
+	else if (json['@type'] == 'koral:docGroup') {
 	  obj._root = KorAP.DocGroup.create(obj, json);
 	}
 	else {
@@ -343,7 +346,7 @@
 
       // Set JSON-LD type
       var newDoc = KorAP.Doc.create(this._parent, {
-	"@type" : "korap:doc",
+	"@type" : "koral:doc",
 	"value" : "",
 	"key"   : v
       });
@@ -374,6 +377,9 @@
       ellipsis.appendChild(document.createTextNode(loc.EMPTY));
       this._element.appendChild(ellipsis);
 
+      // Set ref - TODO: Cleanup!
+      this._element.refTo = this;
+
       // Set operators
       if (this._parent !== undefined && this.parent().ldType() !== null) {
 	var op = this.operators(
@@ -430,6 +436,9 @@
       // Get element
       var e = this._element;
 
+      // Set ref - TODO: Cleanup!
+      e.refTo = this;
+
       // Check if there is a change
       if (this.__changed) {
 
@@ -441,6 +450,10 @@
 	// Added key
 	var key = document.createElement('span');
 	key.setAttribute('class', 'key');
+
+	// Change key
+	key.addEventListener('click', KorAP._changeKey, false);
+
 	if (this.key())
 	  key.appendChild(document.createTextNode(this.key()));
 
@@ -676,7 +689,7 @@
 	return {};
       
       return {
-	"@type" : "korap:" + this.ldType(),
+	"@type" : "koral:" + this.ldType(),
 	"key"   : this.key(),
 	"match" : "match:" + this.matchop(),
 	"value" : this.value() || '',
@@ -810,7 +823,7 @@
 	KorAP.log(701, "JSON-LD group has no @type attribute");
 	return;
 
-      case "korap:doc":
+      case "koral:doc":
 	// Be aware of cyclic structures!
 	var doc = KorAP.Doc.create(this, operand);
 	if (doc === undefined)
@@ -822,7 +835,7 @@
 	};
 	return dupl;
 
-      case "korap:docGroup":
+      case "koral:docGroup":
 	// Be aware of cyclic structures!
 	var docGroup = KorAP.DocGroup.create(this, operand);
 	if (docGroup === undefined)
@@ -1039,7 +1052,7 @@
 	  opArray.push(this._operands[i].toJson());
       };
       return {
-	"@type"     : "korap:" + this.ldType(),
+	"@type"     : "koral:" + this.ldType(),
 	"operation" : "operation:" + this.operation(),
 	"operands"  : opArray
       };
@@ -1301,7 +1314,7 @@
     toJson : function () {
       return {
 	// Unspecified object
-	"@type" : "korap:" + this.ldType()
+	"@type" : "koral:" + this.ldType()
       };
     },
 
@@ -1309,5 +1322,65 @@
       return '';
     }
   };
+
+
+  /**
+   * Criterion in a KorAP.Doc
+   */
+  KorAP._changeKey = function () {
+    var doc = this.parentNode.refTo;
+    console.log(doc.type());
+    // key, matchop, type, value
+  };
+  
+
+  // Field menu
+  KorAP.FieldMenu = {
+    create : function (params) {
+      return Object.create(KorAP.Menu)
+	.upgradeTo(KorAP.FieldMenu)
+	._init(KorAP.FieldMenuItem, params)
+    }
+  };
+
+
+  // Field menu item
+  KorAP.FieldMenuItem = {
+    create : function (params) {
+      return Object.create(KorAP.MenuItem)
+	.upgradeTo(KorAP.FieldMenuItem)
+	._init(params);
+    },
+    _init : function (params) {
+      if (params[0] === undefined)
+	throw new Error("Missing parameters");
+
+      this._name  = params[0];
+      this._value = params[1];
+      this._type  = params[2];
+
+      this._lcField = ' ' + this._name.toLowerCase();
+
+      return this;
+    },
+    name : function () {
+      return this._name;
+    },
+    type : function () {
+      return this._type;
+    },
+    element : function () {
+      // already defined
+      if (this._element !== undefined)
+	return this._element;
+
+      // Create list item
+      var li = document.createElement("li");
+      li.setAttribute("data-type", this._type);
+      li.setAttribute("data-value", this._value);
+      li.appendChild(document.createTextNode(this._name));
+      return this._element = li;
+    }
+  };
  
 }(this.KorAP));