r20414: Start to make SWAT usable by others. This is just a start...

(This used to be commit 26a34037a7ca6fbd05c5a6f7c2d5973e34bc6918)

1 files changed, 1589 insertions, 0 deletions

diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/ClassViewer.js b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/ClassViewer.js
new file mode 100755
index 0000000000..20e110b117
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/ClassViewer.js
@@ -0,0 +1,1589 @@
+/*
+#module(api)
+*/
+
+/**
+ * Shows the class details.
+ */
+qx.OO.defineClass("api.ClassViewer", qx.ui.embed.HtmlEmbed,
+function() {
+  qx.ui.embed.HtmlEmbed.call(this);
+
+  this.setOverflow("auto");
+  this.setPadding(20);
+  this.setEdge(0);
+  this.setHtmlProperty("id", "ClassViewer");
+  this.setVisibility(false);
+
+  api.ClassViewer.instance = this;
+});
+
+
+qx.Proto._fixLinks = function(el)
+{
+  var a = el.getElementsByTagName("a");
+  for (var i=0; i<a.length; i++)
+  {
+    if (typeof a[i].href == "string" && a[i].href.indexOf("http://") == 0) {
+      a[i].target = "_blank";
+    }
+  }
+}
+
+/**
+ * Initializes the content of the embedding DIV. Will be called by the
+ * HtmlEmbed element initialization routine.
+ */
+qx.Proto._syncHtml = function() {
+  var ClassViewer = api.ClassViewer;
+
+  document._detailViewer = this;
+
+  this._infoPanelHash = {};
+
+  var html = "";
+
+  // Add title
+  html += '<h1></h1>';
+
+  // Add description
+  html += ClassViewer.DIV_START + ClassViewer.DIV_END;
+
+  // Add constructor info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_CONSTRUCTOR,
+    "constructor", "constructor", this._createMethodInfo,
+    this._methodHasDetails, false, true);
+
+  // Add properties info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_PROPERTY,
+    "properties", "properties", this._createPropertyInfo,
+    qx.util.Return.returnTrue, true, true);
+
+  // Add event info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_EVENT,
+    "events", "events", this._createEventInfo,
+    this._eventHasDetails, true, true);
+
+  // Add public methods info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_METHOD_PUBLIC,
+    "methods-pub", "public methods", this._createMethodInfo,
+    this._methodHasDetails, true, true);
+
+  // Add protected methods info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_METHOD_PROTECTED,
+    "methods-prot", "protected methods", this._createMethodInfo,
+    this._methodHasDetails, true, false);
+
+  // Add static public methods info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_METHOD_STATIC_PUBLIC,
+    "methods-static-pub", "static public methods", this._createMethodInfo,
+    this._methodHasDetails, false, true);
+
+  // Add static protected methods info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_METHOD_STATIC_PROTECTED,
+    "methods-static-prot", "static protected methods", this._createMethodInfo,
+    this._methodHasDetails, false, false);
+
+  // Add constants info
+  html += this._createInfoPanel(ClassViewer.NODE_TYPE_CONSTANT,
+    "constants", "constants", this._createConstantInfo,
+    this._constantHasDetails, false, true);
+
+
+  // Set the html
+  // doc.body.innerHTML = html;
+  this.getElement().innerHTML = html;
+  this._fixLinks(this.getElement());
+
+  // Extract the main elements
+  var divArr = this.getElement().childNodes;
+  this._titleElem = divArr[0];
+  this._classDescElem = divArr[1];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_CONSTRUCTOR].infoElem             = divArr[2];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_PROPERTY].infoElem                = divArr[3];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_EVENT].infoElem                   = divArr[4];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_METHOD_PUBLIC].infoElem           = divArr[5];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_METHOD_PROTECTED].infoElem        = divArr[6];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_METHOD_STATIC_PUBLIC].infoElem    = divArr[7];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_METHOD_STATIC_PROTECTED].infoElem = divArr[8];
+  this._infoPanelHash[ClassViewer.NODE_TYPE_CONSTANT].infoElem                = divArr[9];
+
+  // Get the child elements
+  for (var nodeType in this._infoPanelHash) {
+    var typeInfo = this._infoPanelHash[nodeType];
+    typeInfo.infoTitleElem = typeInfo.infoElem.firstChild;
+    typeInfo.infoBodyElem = typeInfo.infoElem.lastChild;
+  }
+
+  // Update the view
+  if (this._currentClassDocNode) {
+    // NOTE: We have to set this._currentClassDocNode to null beore, because
+    //       otherwise showClass thinks, there's nothing to do
+    var classDocNode = this._currentClassDocNode;
+    this._currentClassDocNode = null;
+    this.showClass(classDocNode);
+  }
+}
+
+
+/**
+ * Creates an info panel. An info panel shows the information about one item
+ * type (e.g. for public methods).
+ *
+ * @param nodeType {int} the node type to create the info panel for.
+ * @param listName {string} the name of the node list in the class doc node where
+ *        the items shown by this info panel are stored.
+ * @param labelText {string} the label text describing the node type.
+ * @param infoFactory {function} the factory method creating the HTML for one
+ *        item.
+ * @param hasDetailDecider {function} a function returning <code>true</code>
+ *        when a item has details.
+ * @param addInheritedCheckBox {boolean} whether to add a "show inherited ..."
+ *        checkbox.
+ * @param isOpen {boolean} whether the info panel is open by default.
+ * @return {string} the HTML for the info panel.
+ */
+qx.Proto._createInfoPanel = function(nodeType, listName, labelText, infoFactory,
+  hasDetailDecider, addInheritedCheckBox, isOpen)
+{
+  var uppercaseLabelText = labelText.charAt(0).toUpperCase() + labelText.substring(1);
+
+  typeInfo = { listName:listName, labelText:labelText, infoFactory:infoFactory,
+    hasDetailDecider:hasDetailDecider, isOpen:isOpen,
+    hasInheritedCheckBox:addInheritedCheckBox }
+  this._infoPanelHash[nodeType] = typeInfo;
+
+  var html = '<div class="infoPanel"><h2>';
+
+  if (addInheritedCheckBox) {
+    html += '<span class="inheritCheck"><input type="checkbox" id="chk_' + nodeType + '" '
+      + 'onclick="document._detailViewer._onInheritedCheckBoxClick(' + nodeType + ')"></input>'
+      + '<label for="chk_' + nodeType + '">Show inherited</label></span>';
+  }
+
+  html += '<img class="openclose" src="'
+    + qx.manager.object.AliasManager.getInstance().resolvePath('api/' + (isOpen ? 'close.gif' : 'open.gif')) + '"'
+    + " onclick=\"document._detailViewer._onShowInfoPanelBodyClicked(" + nodeType + ")\"/> "
+    + '<span '
+    + " onclick=\"document._detailViewer._onShowInfoPanelBodyClicked(" + nodeType + ")\">"
+    + uppercaseLabelText
+    + '</span>';
+
+  html += '</h2><div></div></div>';
+
+  return html;
+}
+
+
+/**
+ * Shows the information about a class.
+ *
+ * @param classNode {Map} the doc node of the class to show.
+ */
+qx.Proto.showClass = function(classNode) {
+  if (this._currentClassDocNode == classNode) {
+    // Nothing to do
+    return;
+  }
+
+  this._currentClassDocNode = classNode;
+
+  if (!this._titleElem) {
+    // _initContentDocument was not called yet
+    // -> Do nothing, the class will be shown in _initContentDocument.
+    return;
+  }
+
+  var ClassViewer = api.ClassViewer;
+
+  var titleHtml = "";
+
+  titleHtml += '<div class="packageName">' + classNode.attributes.packageName + '</div>';
+
+  titleHtml += '<span class="typeInfo">';
+
+  if (classNode.attributes.isAbstract) {
+    titleHtml += "Abstract ";
+  } else if (classNode.attributes.isStatic) {
+    titleHtml += "Static ";
+  }
+
+  titleHtml += "Class ";
+  titleHtml += '</span>';
+  titleHtml += classNode.attributes.name;
+
+  this._titleElem.innerHTML = titleHtml;
+
+  var classHtml = "";
+
+   // Add the class description
+  var ctorList = api.TreeUtil.getChild(classNode, "constructor");
+  if (ctorList) {
+    var desc = this._createDescHtml(ctorList.children[0], classNode, true);
+
+    if (desc != "")
+    {
+      classHtml += '<div class="classDescription">' + desc + '</div>';
+      classHtml += "<br/>";
+    }
+  }
+
+  // Create the class hierarchy
+  classHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Inheritance hierarchy:" + ClassViewer.DIV_END;
+
+  var classHierarchy = [];
+  var currClass = classNode;
+  while (currClass != null) {
+    classHierarchy.push(currClass);
+    currClass = this._getClassDocNode(currClass.attributes.superClass);
+  }
+  this._currentClassHierarchy = classHierarchy;
+
+  // Add the class hierarchy
+  classHtml += ClassViewer.createImageHtml("api/class18.gif") + "Object<br/>";
+  var indent = 0;
+  for (var i = classHierarchy.length - 1; i >= 0; i--) {
+    classHtml += ClassViewer.createImageHtml("api/nextlevel.gif", null, "margin-left:" + indent + "px")
+      + ClassViewer.createImageHtml(api.TreeUtil.getIconUrl(classHierarchy[i]));
+    if (i != 0) {
+      classHtml += this._createItemLinkHtml(classHierarchy[i].attributes.fullName, null, false);
+    } else {
+      classHtml += classHierarchy[i].attributes.fullName;
+    }
+    classHtml += "<br/>";
+    indent += 18;
+  }
+
+  classHtml += '<br/>';
+
+  // Add child classes
+  if (classNode.attributes.childClasses) {
+    classHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Direct subclasses:" + ClassViewer.DIV_END
+      + ClassViewer.DIV_START_DETAIL_TEXT;
+
+    var classNameArr = classNode.attributes.childClasses.split(",");
+    for (var i = 0; i < classNameArr.length; i++) {
+      if (i != 0) {
+        classHtml += ", ";
+      }
+      classHtml += this._createItemLinkHtml(classNameArr[i], null, true, false);
+    }
+
+    classHtml += ClassViewer.DIV_END;
+    classHtml += '<br/>';
+  }
+
+  // Add @see attributes
+  if (ctorList) {
+    classHtml += this._createSeeAlsoHtml(ctorList.children[0], classNode);
+    classHtml += '<br/>';
+  }
+
+  this._classDescElem.innerHTML = classHtml;
+  this._fixLinks(this._classDescElem);
+
+  // Refresh the info viewers
+  for (var nodeType in this._infoPanelHash) {
+    this._updateInfoPanel(parseInt(nodeType));
+  }
+
+  // Scroll to top
+  this.getElement().scrollTop = 0;
+}
+
+qx.Proto.showInfo = function(classNode) {
+  if (this._currentClassDocNode == classNode) {
+    // Nothing to do
+    return;
+  }
+
+  this._currentClassDocNode = classNode;
+
+  if (!this._titleElem) {
+    // _initContentDocument was not called yet
+    // -> Do nothing, the class will be shown in _initContentDocument.
+    return;
+  }
+
+  var ClassViewer = api.ClassViewer;
+
+  this._titleElem.innerHTML = "Info View";
+  this._classDescElem.innerHTML = "";
+
+  // Scroll to top
+  this.getElement().scrollTop = 0;
+}
+
+/**
+ * Highlights an item (property, method or constant) and scrolls it visible.
+ *
+ * @param itemName {string} the name of the item to highlight.
+ */
+qx.Proto.showItem = function(itemName) {
+  var itemNode = api.TreeUtil.getItemDocNode(this._currentClassDocNode, itemName);
+  if (! itemNode) {
+    alert("Item '" + itemName + "' not found");
+  }
+
+  var nodeType = this._getTypeForItemNode(itemNode);
+  var elem = this._getItemElement(nodeType, itemNode.attributes.name).parentNode.parentNode;
+
+  // Handle mark
+  if (this._markedElement) {
+    this._markedElement.className = "";
+  }
+
+  elem.className = "marked";
+  this._markedElement = elem;
+
+  // Scroll the element visible
+  var top = qx.dom.Location.getPageBoxTop(elem);
+  var height = elem.offsetHeight;
+
+  var doc = this.getElement();
+  var scrollTop = doc.scrollTop;
+  var clientHeight = doc.offsetHeight;
+
+  if (scrollTop > top) {
+    doc.scrollTop = top;
+  } else if (scrollTop < top + height - clientHeight) {
+    doc.scrollTop = top + height - clientHeight;
+  }
+}
+
+
+/**
+ * Updates an info panel.
+ *
+ * @param nodeType {int} the node type of which to update the info panel.
+ */
+qx.Proto._updateInfoPanel = function(nodeType) {
+  var ClassViewer = api.ClassViewer;
+
+  var typeInfo = this._infoPanelHash[nodeType];
+
+  // Get the nodes to show
+  var nodeArr = null;
+  var fromClassHash = null;
+  if (typeInfo.isOpen && this._currentClassDocNode) {
+    if (typeInfo.showInherited) {
+      nodeArr = [];
+      fromClassArr = [];
+      fromClassHash = {};
+      var currClassNode = this._currentClassDocNode;
+      while (currClassNode != null) {
+        var currParentNode = api.TreeUtil.getChild(currClassNode, typeInfo.listName);
+        var currNodeArr = currParentNode ? currParentNode.children : null;
+        if (currNodeArr) {
+          // Add the nodes from this class
+          for (var i = 0; i < currNodeArr.length; i++) {
+            var name = currNodeArr[i].attributes.name;
+            if (fromClassHash[name] == null) {
+              fromClassHash[name] = currClassNode;
+              nodeArr.push(currNodeArr[i]);
+            }
+          }
+        }
+
+        var superClassName = currClassNode.attributes.superClass;
+        currClassNode = superClassName ? this._getClassDocNode(superClassName) : null;
+      }
+
+      // Sort the nodeArr by name
+      nodeArr.sort(function(obj1, obj2) {
+        return (obj1.attributes.name.toLowerCase() < obj2.attributes.name.toLowerCase()) ? -1 : 1;
+      });
+    } else {
+      var parentNode = api.TreeUtil.getChild(this._currentClassDocNode, typeInfo.listName);
+      nodeArr = parentNode ? parentNode.children : null;
+    }
+  }
+
+  // Show the nodes
+  if (nodeArr && nodeArr.length != 0)
+  {
+    var html = '<table cellspacing="0" cellpadding="0" class="info" width="100%">';
+
+    for (var i = 0; i < nodeArr.length; i++)
+    {
+      var node = nodeArr[i];
+      var fromClassNode = fromClassHash ? fromClassHash[node.attributes.name] : null;
+      if (fromClassNode == null) {
+        fromClassNode = this._currentClassDocNode;
+      }
+
+      var info = typeInfo.infoFactory.call(this, node, nodeType, fromClassNode, false);
+      var inherited = fromClassNode && (fromClassNode != this._currentClassDocNode);
+      var iconUrl = api.TreeUtil.getIconUrl(node, inherited);
+
+      // Create the title row
+      html += '<tr>';
+
+        html += '<td class="icon">' + ClassViewer.createImageHtml(iconUrl) + '</td>';
+        html += '<td class="type">' + ((info.typeHtml.length != 0) ? (info.typeHtml + "&nbsp;") : "") + '</td>';
+
+        html += '<td class="toggle">';
+        if (typeInfo.hasDetailDecider.call(this, node, nodeType, fromClassNode))
+        {
+          // This node has details -> Show the detail button
+          html += '<img src="' + qx.manager.object.AliasManager.getInstance().resolvePath("api/open.gif") + '"'
+            + " onclick=\"document._detailViewer._onShowItemDetailClicked(" + nodeType + ",'"
+            + node.attributes.name + "'"
+            + ((fromClassNode != this._currentClassDocNode) ? ",'" + fromClassNode.attributes.fullName + "'" : "")
+            + ")\"/>";
+        }
+        else
+        {
+          html += "&#160;";
+        }
+        html += '</td>';
+
+        html += '<td class="text">';
+
+          // Create headline
+          html += '<h3';
+
+          if (typeInfo.hasDetailDecider.call(this, node, nodeType, fromClassNode))
+          {
+            html += " onclick=\"document._detailViewer._onShowItemDetailClicked(" + nodeType + ",'"
+              + node.attributes.name + "'"
+              + ((fromClassNode != this._currentClassDocNode) ? ",'" + fromClassNode.attributes.fullName + "'" : "")
+              + ")\">";
+          }
+          else
+          {
+            html += '>';
+          }
+
+          html += info.titleHtml;
+          html += '</h3>';
+
+          // Create content area
+          html += '<div _itemName="' + nodeArr[i].attributes.name + '">';
+            html += info.textHtml;
+          html += '</div>';
+
+        html += '</td>';
+      html += '</tr>';
+    }
+
+    html += '</table>';
+
+    typeInfo.infoBodyElem.innerHTML = html;
+    this._fixLinks(typeInfo.infoBodyElem);
+    typeInfo.infoBodyElem.style.display = "";
+  }
+  else
+  {
+    if (typeInfo.isOpen)
+    {
+      typeInfo.infoBodyElem.innerHTML = '<div class="empty-info-body">This class has no ' + typeInfo.labelText + '</div>';
+      typeInfo.infoBodyElem.style.display = "";
+    }
+    else
+    {
+      typeInfo.infoBodyElem.style.display = "none";
+    }
+  }
+}
+
+
+/**
+ * Event handler. Called when the user clicked a button for showing/hiding the
+ * details of an item.
+ *
+ * @param nodeType {int} the node type of the item to show/hide the details.
+ * @param name {string} the name of the item.
+ * @param fromClassName {string} the name of the class the item the item was
+ *        defined in.
+ */
+qx.Proto._onShowItemDetailClicked = function(nodeType, name, fromClassName) {
+  try {
+    var typeInfo = this._infoPanelHash[nodeType];
+    var textDiv = this._getItemElement(nodeType, name);
+
+    if (!textDiv) {
+      throw Error("Element for name '" + name + "' not found!");
+    }
+
+    var showDetails = textDiv._showDetails ? !textDiv._showDetails : true;
+    textDiv._showDetails = showDetails;
+
+    var fromClassNode = this._currentClassDocNode;
+    if (fromClassName) {
+      fromClassNode = this._getClassDocNode(fromClassName);
+    }
+
+    var listNode = api.TreeUtil.getChild(fromClassNode, typeInfo.listName);
+    var node;
+    if (nodeType == api.ClassViewer.NODE_TYPE_CONSTRUCTOR) {
+      node = listNode.children[0];
+    } else {
+      node = api.TreeUtil.getChildByAttribute(listNode, "name", name);
+    }
+
+    // Update the close/open image
+    var opencloseImgElem = textDiv.parentNode.previousSibling.firstChild;
+    opencloseImgElem.src = qx.manager.object.AliasManager.getInstance().resolvePath(showDetails ? 'api/close.gif' : 'api/open.gif');
+
+    // Update content
+    var info = typeInfo.infoFactory.call(this, node, nodeType, fromClassNode, showDetails);
+    textDiv.innerHTML = info.textHtml;
+    this._fixLinks(textDiv);
+  } catch (exc) {
+    this.error("Toggling item details failed", exc);
+  }
+}
+
+
+/**
+ * Event handler. Called when the user clicked on a "show inherited ..."
+ * checkbox.
+ *
+ * @param nodeType {int} the node type of which the inherited-checkbox was
+ *        clicked.
+ */
+qx.Proto._onInheritedCheckBoxClick = function(nodeType) {
+  try {
+    var typeInfo = this._infoPanelHash[nodeType];
+    var checkboxElem = typeInfo.infoTitleElem.getElementsByTagName("input")[0];
+
+    typeInfo.showInherited = checkboxElem.checked;
+
+    this._updateInfoPanel(nodeType);
+  } catch (exc) {
+    this.error("Handling inherited checkbox click failed", exc);
+  }
+}
+
+
+/**
+ * Event handler. Called when the user clicked a button for showing/hiding the
+ * body of an info panel.
+ *
+ * @param nodeType {int} the node type of which the show/hide-body-button was
+ *        clicked.
+ */
+qx.Proto._onShowInfoPanelBodyClicked = function(nodeType) {
+  try {
+    var typeInfo = this._infoPanelHash[nodeType];
+    typeInfo.isOpen = !typeInfo.isOpen;
+
+    var imgElem = typeInfo.infoTitleElem.getElementsByTagName("img")[0];
+    imgElem.src = qx.manager.object.AliasManager.getInstance().resolvePath(typeInfo.isOpen ? 'api/close.gif' : 'api/open.gif');
+
+    this._updateInfoPanel(nodeType);
+  } catch (exc) {
+    this.error("Toggling info body failed", exc);
+  }
+}
+
+
+/**
+ * Gets the HTML element showing the details of an item.
+ *
+ * @param nodeType {int} the node type of the item.
+ * @param name {string} the item's name.
+ * @return {Element} the HTML element showing the details of the item.
+ */
+qx.Proto._getItemElement = function(nodeType, name) {
+  var typeInfo = this._infoPanelHash[nodeType];
+  var elemArr = typeInfo.infoBodyElem.getElementsByTagName("TBODY")[0].childNodes;
+
+  for (var i = 0; i < elemArr.length; i++) {
+    // ARRG, should be implemented in a more fault-tolerant way
+    // iterate over tr's, look inside the third "td" and there the second element
+    if (elemArr[i].childNodes[3].childNodes[1].getAttribute("_itemName") == name) {
+      return elemArr[i].childNodes[3].childNodes[1];
+    }
+  }
+}
+
+
+/**
+ * Selects an item.
+ *
+ * @param itemName {string} the name of the item.
+ * @see ApiViewer#selectItem
+ */
+qx.Proto._selectItem = function(itemName) {
+  try {
+    api.Viewer.instance.selectItem(itemName);
+    qx.ui.core.Widget.flushGlobalQueues();
+  } catch (exc) {
+    this.error("Selecting item '" + itemName + "' failed", exc);
+  }
+}
+
+
+/**
+ * Gets the doc node of a class.
+ *
+ * @param className {string} the name of the class.
+ * @return {Map} the doc node of the class.
+ */
+qx.Proto._getClassDocNode = function(className) {
+  if (className) {
+    return api.TreeUtil.getClassDocNode(api.Viewer.instance.getDocTree(), className);
+  } else {
+    return null;
+  }
+}
+
+
+/**
+ * Creates the HTML showing the information about a property.
+ *
+ * @param node {Map} the doc node of the property.
+ * @param nodeType {int} the node type of the property.
+ * @param fromClassNode {Map} the doc node of the class the property was defined.
+ * @param showDetails {boolean} whether to show the details.
+ * @return {string} the HTML showing the information about the property.
+ */
+qx.Proto._createPropertyInfo = function(node, nodeType, fromClassNode, showDetails) {
+  var ClassViewer = api.ClassViewer;
+
+  var info = {}
+
+  var typeInfo = this._infoPanelHash[nodeType];
+
+  // Get the property node that holds the documentation
+  var docClassNode = fromClassNode;
+  var docNode = node;
+  if (node.attributes.docFrom) {
+    docClassNode = this._getClassDocNode(node.attributes.docFrom);
+    var listNode = api.TreeUtil.getChild(docClassNode, typeInfo.listName);
+    docNode = api.TreeUtil.getChildByAttribute(listNode, "name", node.attributes.name);
+  }
+
+  // Add the title
+  info.typeHtml = this._createTypeHtml(node, fromClassNode, "var");
+  info.titleHtml = node.attributes.name;
+
+  // Add the description
+  info.textHtml = this._createDescHtml(docNode, fromClassNode, showDetails);
+
+  if (showDetails) {
+    // Add allowed values
+    var allowedValue = null;
+    if (node.attributes.possibleValues) {
+      allowedValue = node.attributes.possibleValues;
+    } else if (node.attributes.classname) {
+      allowedValue = "instances of " + node.attributes.classname;
+    } else if (node.attributes.instance) {
+      allowedValue = "instances of " + node.attributes.instance + " or sub classes";
+    } else if (node.attributes.unitDetection) {
+      allowedValue = "units: " + node.attributes.unitDetection;
+    } else if (node.attributes.type) {
+      allowedValue = "any " + node.attributes.type;
+    }
+
+    if (allowedValue) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Allowed values:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT;
+
+      if (node.attributes.allowNull != "false") {
+        info.textHtml += "null, ";
+      }
+      info.textHtml += allowedValue + ClassViewer.DIV_END;
+    }
+
+    // Add default value
+    info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Default value:" + ClassViewer.DIV_END
+      + ClassViewer.DIV_START_DETAIL_TEXT
+      + (node.attributes.defaultValue ? node.attributes.defaultValue : "null")
+      + ClassViewer.DIV_END;
+
+    // Add get alias
+    if (node.attributes.getAlias) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Get alias:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT + node.attributes.getAlias + ClassViewer.DIV_END;
+    }
+
+    // Add set alias
+    if (node.attributes.setAlias) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Set alias:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT + node.attributes.setAlias + ClassViewer.DIV_END;
+    }
+
+    // Add inherited from or overridden from
+    if (fromClassNode && fromClassNode != this._currentClassDocNode) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Inherited from:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT
+        + this._createItemLinkHtml(fromClassNode.attributes.fullName)
+        + ClassViewer.DIV_END;
+    } else if (node.attributes.overriddenFrom) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Overridden from:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT
+        + this._createItemLinkHtml(node.attributes.overriddenFrom)
+        + ClassViewer.DIV_END;
+    }
+
+    // Add @see attributes
+    info.textHtml += this._createSeeAlsoHtml(docNode, docClassNode);
+
+    // Add documentation errors
+    info.textHtml += this._createErrorHtml(docNode, docClassNode);
+  }
+
+  return info;
+}
+
+
+/**
+ * Checks whether an event has details.
+ *
+ * @param node {Map} the doc node of the event.
+ * @param nodeType {int} the node type of the event.
+ * @param fromClassNode {Map} the doc node of the class the event was defined.
+ * @return {boolean} whether the event has details.
+ */
+qx.Proto._eventHasDetails = function(node, nodeType, fromClassNode) {
+  return (fromClassNode != this._currentClassDocNode) // event is inherited
+    || this._hasSeeAlsoHtml(node)
+    || this._hasErrorHtml(node)
+    || this._descHasDetails(node);
+};
+
+
+/**
+ * Creates the HTML showing the information about an event.
+ *
+ * @param node {Map} the doc node of the event.
+ * @param nodeType {int} the node type of the event.
+ * @param fromClassNode {Map} the doc node of the class the event was defined.
+ * @param showDetails {boolean} whether to show the details.
+ * @return {string} the HTML showing the information about the event.
+ */
+qx.Proto._createEventInfo = function(node, nodeType, fromClassNode, showDetails) {
+  var ClassViewer = api.ClassViewer;
+
+  var info = {}
+
+  var typeInfo = this._infoPanelHash[nodeType];
+
+  // Add the title
+  info.typeHtml = this._createTypeHtml(node, fromClassNode, "var");
+  info.titleHtml = node.attributes.name;
+
+  // Add the description
+  info.textHtml = this._createDescHtml(node, fromClassNode, showDetails);
+
+  if (showDetails) {
+    // Add inherited from or overridden from
+    if (fromClassNode && fromClassNode != this._currentClassDocNode) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Inherited from:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT
+        + this._createItemLinkHtml(fromClassNode.attributes.fullName)
+        + ClassViewer.DIV_END;
+    }
+
+    // Add @see attributes
+    info.textHtml += this._createSeeAlsoHtml(node, fromClassNode);
+
+    // Add documentation errors
+    info.textHtml += this._createErrorHtml(node, fromClassNode);
+  }
+
+  return info;
+};
+
+
+/**
+ * Checks whether a method has details.
+ *
+ * @param node {Map} the doc node of the method.
+ * @param nodeType {int} the node type of the method.
+ * @param fromClassNode {Map} the doc node of the class the method was defined.
+ * @return {boolean} whether the method has details.
+ */
+qx.Proto._methodHasDetails = function(node, nodeType, fromClassNode) {
+  var TreeUtil = api.TreeUtil;
+
+  var typeInfo = this._infoPanelHash[nodeType];
+
+  // Get the method node that holds the documentation
+  var docClassNode = fromClassNode;
+  var docNode = node;
+  if (node.attributes.docFrom) {
+    docClassNode = this._getClassDocNode(node.attributes.docFrom);
+    var listNode = TreeUtil.getChild(docClassNode, typeInfo.listName);
+    docNode = TreeUtil.getChildByAttribute(listNode, "name", node.attributes.name);
+  }
+
+  // Check whether there are details
+  var hasParams = TreeUtil.getChild(docNode, "params") != null;
+  var hasReturn = TreeUtil.getChild(docNode, "return") != null;
+  var isOverridden = fromClassNode != this._currentClassDocNode;
+
+  return (fromClassNode != this._currentClassDocNode) // method is inherited
+    || (node.attributes.overriddenFrom != null)       // method is overridden
+    || (TreeUtil.getChild(docNode, "params") != null) // method has params
+    || (TreeUtil.getChild(docNode, "return") != null) // method has return value
+    || this._hasSeeAlsoHtml(docNode)
+    || this._hasErrorHtml(docNode)
+    || this._descHasDetails(docNode);
+}
+
+
+/**
+ * Creates the HTML showing the information about a method.
+ *
+ * @param node {Map} the doc node of the method.
+ * @param nodeType {int} the node type of the method.
+ * @param fromClassNode {Map} the doc node of the class the method was defined.
+ * @param showDetails {boolean} whether to show the details.
+ * @return {string} the HTML showing the information about the method.
+ */
+qx.Proto._createMethodInfo = function(node, nodeType, fromClassNode, showDetails) {
+  var ClassViewer = api.ClassViewer;
+  var TreeUtil = api.TreeUtil;
+
+  var info = {}
+
+  var typeInfo = this._infoPanelHash[nodeType];
+
+  // Get the method node that holds the documentation
+  var docClassNode = fromClassNode;
+  var docNode = node;
+  if (node.attributes.docFrom) {
+    docClassNode = this._getClassDocNode(node.attributes.docFrom);
+    var listNode = TreeUtil.getChild(docClassNode, typeInfo.listName);
+    docNode = TreeUtil.getChildByAttribute(listNode, "name", node.attributes.name);
+  }
+
+  if (node.attributes.isAbstract) {
+    info.typeHtml = "abstract ";
+  } else {
+    info.typeHtml = "";
+  }
+
+  // Get name, icon and return type
+  var returnNode = TreeUtil.getChild(docNode, "return");
+  if (node.attributes.isCtor) {
+    info.titleHtml = fromClassNode.attributes.name;
+  } else {
+    info.titleHtml = node.attributes.name;
+    info.typeHtml += this._createTypeHtml(returnNode, fromClassNode, "void");
+  }
+
+  // Add the title (the method signature)
+  info.titleHtml += '<span class="methodSignature"> <span class="parenthesis">(</span>';
+  var paramsNode = TreeUtil.getChild(docNode, "params");
+  if (paramsNode) {
+    for (var i = 0; i < paramsNode.children.length; i++) {
+      var param = paramsNode.children[i];
+      if (i != 0) {
+        info.titleHtml += '<span class="separator">,</span> ';
+      }
+      info.titleHtml += '<span class="parameterType">' + this._createTypeHtml(param, fromClassNode, "var") + "</span> "
+        + param.attributes.name;
+      if (param.attributes.defaultValue) {
+        info.titleHtml += "?";
+      }
+    }
+  }
+  info.titleHtml += '<span class="parenthesis">)</span></span>';
+
+  // Add the description
+  if (node.attributes.isCtor) {
+    info.textHtml = "Creates a new instance of " + fromClassNode.attributes.name + ".";
+  } else {
+    info.textHtml = this._createDescHtml(docNode, docClassNode, showDetails);
+  }
+
+
+  if (showDetails) {
+    // Add Parameters
+    var paramsNode = TreeUtil.getChild(docNode, "params");
+    if (paramsNode) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Parameters:" + ClassViewer.DIV_END;
+      for (var i = 0; i < paramsNode.children.length; i++) {
+        var param = paramsNode.children[i];
+        var paramType = param.attributes.type ? param.attributes.type : "var";
+        var dims = param.attributes.arrayDimensions;
+        if (dims) {
+          for (var i = 0; i < dims; i++) {
+            paramType += "[]";
+          }
+        }
+        var defaultValue = param.attributes.defaultValue;
+
+        info.textHtml += ClassViewer.DIV_START_DETAIL_TEXT;
+        if (defaultValue) {
+          info.textHtml += ClassViewer.SPAN_START_OPTIONAL;
+        }
+        info.textHtml += ClassViewer.SPAN_START_PARAM_NAME + param.attributes.name + ClassViewer.SPAN_END;
+        if (defaultValue) {
+          info.textHtml += " (default: " + defaultValue + ") " + ClassViewer.SPAN_END;
+        }
+
+        var paramDescNode = TreeUtil.getChild(param, "desc");
+        if (paramDescNode) {
+          info.textHtml += " " + this._createDescriptionHtml(paramDescNode.attributes.text, docClassNode);
+        }
+        info.textHtml += ClassViewer.DIV_END;
+      }
+    }
+
+    // Add return value
+    if (returnNode) {
+      var returnDescNode = TreeUtil.getChild(returnNode, "desc");
+      if (returnDescNode) {
+        info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Returns:" + ClassViewer.DIV_END
+          + ClassViewer.DIV_START_DETAIL_TEXT
+          + this._createDescriptionHtml(returnDescNode.attributes.text, docClassNode)
+          + ClassViewer.DIV_END;
+      }
+    }
+
+    // Add inherited from or overridden from
+    if (fromClassNode && fromClassNode != this._currentClassDocNode) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Inherited from:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT
+        + this._createItemLinkHtml(fromClassNode.attributes.fullName)
+        + ClassViewer.DIV_END;
+    } else if (node.attributes.overriddenFrom) {
+      info.textHtml += ClassViewer.DIV_START_DETAIL_HEADLINE + "Overridden from:" + ClassViewer.DIV_END
+        + ClassViewer.DIV_START_DETAIL_TEXT
+        + this._createItemLinkHtml(node.attributes.overriddenFrom)
+        + ClassViewer.DIV_END;
+    }
+
+    // Add @see attributes
+    info.textHtml += this._createSeeAlsoHtml(docNode, docClassNode);
+
+    // Add documentation errors
+    info.textHtml += this._createErrorHtml(docNode, docClassNode);
+  }
+
+  return info;
+}
+
+
+/**
+ * Checks whether a constant has details.
+ *
+ * @param node {Map} the doc node of the constant.
+ * @param nodeType {int} the node type of the constant.
+ * @param fromClassNode {Map} the doc node of the class the constant was defined.
+ * @return {boolean} whether the constant has details.
+ */
+qx.Proto._constantHasDetails = function(node, nodeType, fromClassNode) {
+  return this._hasSeeAlsoHtml(node) || this._hasErrorHtml(node) || this._descHasDetails(node);
+}
+
+
+/**
+ * Creates the HTML showing the information about a constant.
+ *
+ * @param node {Map} the doc node of the constant.
+ * @param nodeType {int} the node type of the constant.
+ * @param fromClassNode {Map} the doc node of the class the constant was defined.
+ * @param showDetails {boolean} whether to show the details.
+ * @return {string} the HTML showing the information about the constant.
+ */
+qx.Proto._createConstantInfo = function(node, nodeType, fromClassNode, showDetails) {
+  var info = {}
+
+  // Add the title
+  info.typeHtml = this._createTypeHtml(node, fromClassNode, "var");
+  info.titleHtml = node.attributes.name;
+
+  // Add the description
+  info.textHtml = this._createDescHtml(node, fromClassNode, showDetails);
+
+  if (showDetails) {
+    // Add @see attributes
+    info.textHtml += this._createSeeAlsoHtml(node, fromClassNode);
+
+    // Add documentation errors
+    info.textHtml += this._createErrorHtml(node, fromClassNode);
+  }
+
+  return info;
+}
+
+
+/**
+ * Returns whether the description of an item has details (has more than one
+ * sentence).
+ *
+ * @param node {Map} the doc node of the item.
+ * @return {boolean} whether the description of an item has details.
+ */
+qx.Proto._descHasDetails = function(node) {
+  var descNode = api.TreeUtil.getChild(node, "desc");
+  if (descNode) {
+    var desc = descNode.attributes.text;
+    return this._extractFirstSentence(desc) != desc;
+  } else {
+    return false;
+  }
+}
+
+
+/**
+ * Creates the HTML showing the description of an item.
+ *
+ * @param node {Map} the doc node of the item.
+ * @param fromClassNode {Map} the doc node of the class the item was defined.
+ * @param showDetails {boolean} whether to show details. If <code>false</code>
+ *        only the first sentence of the description will be shown.
+ * @return {string} the HTML showing the description.
+ */
+qx.Proto._createDescHtml = function(node, fromClassNode, showDetails) {
+  var descNode = api.TreeUtil.getChild(node, "desc");
+  if (descNode) {
+    var desc = descNode.attributes.text;
+    if (!showDetails) {
+      desc = this._extractFirstSentence(desc);
+    }
+    return api.ClassViewer.DIV_START_DESC
+      + this._createDescriptionHtml(desc, fromClassNode)
+      + api.ClassViewer.DIV_END;
+  } else {
+    return "";
+  }
+}
+
+
+/**
+ * Extracts the first sentence from a text.
+ *
+ * @param text {string} the text.
+ * @return {string} the first sentence from the text.
+ */
+qx.Proto._extractFirstSentence = function(text)
+{
+  var ret = text;
+
+  // Extract first block
+  var pos = ret.indexOf("</p>");
+  if (pos != -1)
+  {
+    ret = ret.substr(0, pos+4);
+
+    var hit = api.ClassViewer.SENTENCE_END_REGEX.exec(ret);
+    if (hit != null) {
+      ret = text.substring(0, hit.index + hit[0].length - 1) + "</p>";
+    }
+  }
+
+  return ret;
+}
+
+
+/**
+ * Checks whether a item has &#64;see attributes.
+ *
+ * @param node {Map} the doc node of the item.
+ * @return {boolean} whether the item has &#64;see attributes.
+ */
+qx.Proto._hasSeeAlsoHtml = function(node) {
+  var TreeUtil = api.TreeUtil;
+
+  var descNode = TreeUtil.getChild(node, "desc");
+  if (descNode) {
+    var attributesNode = TreeUtil.getChild(descNode, "attributes");
+    if (attributesNode) {
+      var seeAttribNode = TreeUtil.getChildByAttribute(attributesNode, "name", "see");
+      if (seeAttribNode) {
+        return true;
+      }
+    }
+  }
+
+  // There is no @see attribute
+  return false;
+}
+
+
+/**
+ * Creates the HTML showing the &#64;see attributes of an item.
+ *
+ * @param node {Map} the doc node of the item.
+ * @param fromClassNode {Map} the doc node of the class the item was defined.
+ * @return {string} the HTML showing the &#64;see attributes.
+ */
+qx.Proto._createSeeAlsoHtml = function(node, fromClassNode) {
+  var ClassViewer = api.ClassViewer;
+
+  var descNode = api.TreeUtil.getChild(node, "desc");
+  if (descNode) {
+    var attributesNode = api.TreeUtil.getChild(descNode, "attributes");
+    if (attributesNode) {
+      var seeAlsoHtml = "";
+      for (var i = 0; i < attributesNode.children.length; i++) {
+        var attribNode = attributesNode.children[i];
+        if (attribNode.attributes.name == "see") {
+          // This is a @see attribute
+          if (seeAlsoHtml.length != 0) {
+            seeAlsoHtml += ", ";
+          }
+          seeAlsoHtml += this._createItemLinkHtml(attribNode.attributes.text, fromClassNode);
+        }
+      }
+
+      if (seeAlsoHtml.length != 0) {
+        // We had @see attributes
+        return ClassViewer.DIV_START_DETAIL_HEADLINE + "See also:" + ClassViewer.DIV_END
+          + ClassViewer.DIV_START_DETAIL_TEXT + seeAlsoHtml + ClassViewer.DIV_END;
+      }
+    }
+  }
+
+  // Nothing found
+  return "";
+}
+
+
+/**
+ * Checks whether a item has documentation errors.
+ *
+ * @param node {Map} the doc node of the item.
+ * @return {boolean} whether the item has documentation errors.
+ */
+qx.Proto._hasErrorHtml = function(node) {
+  var errorNode = api.TreeUtil.getChild(node, "errors");
+  return (errorNode != null);
+}
+
+
+/**
+ * Creates the HTML showing the documentation errors of an item.
+ *
+ * @param node {Map} the doc node of the item.
+ * @param fromClassNode {Map} the doc node of the class the item was defined.
+ * @return {string} the HTML showing the documentation errors.
+ */
+qx.Proto._createErrorHtml = function(node, fromClassNode) {
+  var ClassViewer = api.ClassViewer;
+
+  var errorNode = api.TreeUtil.getChild(node, "errors");
+  if (errorNode) {
+    var html = ClassViewer.DIV_START_ERROR_HEADLINE + "Documentation errors:" + ClassViewer.DIV_END;
+    var errArr = errorNode.children;
+    for (var i = 0; i < errArr.length; i++) {
+      html += ClassViewer.DIV_START_DETAIL_TEXT + errArr[i].attributes.msg + " <br/>";
+      html += "("
+      if (fromClassNode && fromClassNode != this._currentClassDocNode) {
+        html += fromClassNode.attributes.fullName + "; ";
+      }
+      html += "Line: " + errArr[i].attributes.line + ", Column:" + errArr[i].attributes.column + ")" + ClassViewer.DIV_END;
+    }
+    return html;
+  } else {
+    return "";
+  }
+}
+
+
+/**
+ * Creates the HTML showing the type of a doc node.
+ *
+ * @param typeNode {Map} the doc node to show the type for.
+ * @param packageBaseClass {Map} the doc node of the class <code>typeNode</code>
+ *        belongs to.
+ * @param defaultType {string} the type name to use if <code>typeNode</code> is
+ *        <code>null</code> or defines no type.
+ * @param useShortName {boolean,true} whether to use short class names
+ *        (without package).
+ * @return {string} the HTML showing the type.
+ */
+qx.Proto._createTypeHtml = function(typeNode, packageBaseClass, defaultType, useShortName) {
+  if (useShortName == null) {
+    useShortName = true;
+  }
+
+  var types = [];
+  var typeHtml, typeDimensions, typeName, linkText, dims;
+
+  if (typeNode)
+  {
+    // read in children
+    if (typeNode.children && api.TreeUtil.getChild(typeNode, "types"))
+    {
+      for (var i=0, a=api.TreeUtil.getChild(typeNode, "types").children, l=a.length; i<l; i++)
+      {
+        if (a[i].type == "entry")
+        {
+          types.push(a[i].attributes);
+        }
+      }
+    }
+
+    // read from attributes (alternative)
+    if (types.length == 0 && typeNode.attributes)
+    {
+      typeName = typeNode.attributes.instance ? typeNode.attributes.instance : typeNode.attributes.type;
+
+      if (typeName != undefined)
+      {
+        dims = typeNode.attributes.dimensions;
+
+        if (typeof dims == "number" && dims > 0) {
+          types.push({ "type" : typeName, "dimensions" : dims });
+        } else {
+          types.push({ "type" : typeName });
+        }
+      }
+    }
+  }
+
+  if (types.length == 0)
+  {
+    typeHtml = defaultType;
+  }
+  else
+  {
+    typeHtml = "";
+
+    if (types.length > 1) {
+      typeHtml += "("
+    }
+
+    for (var j=0; j<types.length; j++)
+    {
+      if (j>0) {
+        typeHtml += " | ";
+      }
+
+      typeName = types[j].type;
+      typeDimensions = types[j].dimensions;
+
+      if (api.ClassViewer.PRIMITIVES[typeName])
+      {
+        typeHtml += typeName;
+      }
+      else
+      {
+        linkText = typeName;
+        if (useShortName)
+        {
+          var lastDot = typeName.lastIndexOf(".");
+          if (lastDot != -1) {
+            linkText += " " + typeName.substring(lastDot + 1);
+          }
+        }
+        typeHtml += this._createItemLinkHtml(linkText, packageBaseClass, false, true);
+      }
+
+      if (typeDimensions)
+      {
+        for (var i = 0; i < parseInt(typeDimensions); i++) {
+          typeHtml += "[]";
+        }
+      }
+    }
+
+    if (types.length > 1) {
+      typeHtml += ")"
+    }
+  }
+
+  return typeHtml;
+}
+
+
+/**
+ * Creates HTML that replaces all &#64;link-attributes with links.
+ *
+ * @param description {string} the description.
+ * @param packageBaseClass {Map,null} the doc node of the class to use for
+ *        auto-adding packages.
+ */
+qx.Proto._createDescriptionHtml = function(description, packageBaseClass) {
+  var linkRegex = /\{@link([^\}]*)\}/mg;
+
+  var html = "";
+  var hit;
+  var lastPos = 0;
+  while ((hit = linkRegex.exec(description)) != null) {
+    // Add the text before the link
+    html += description.substring(lastPos, hit.index)
+      + this._createItemLinkHtml(hit[1], packageBaseClass);
+
+    lastPos = hit.index + hit[0].length;
+  }
+
+  // Add the text after the last hit
+  html += description.substring(lastPos, description.length);
+
+  return html;
+}
+
+
+/**
+ * Creates the HTML for a link to an item.
+ *
+ * @param linkText {string} the link text
+ *        (e.g. "mypackage.MyClass#myMethod alt text")
+ * @param packageBaseClass {Map,null} the doc node of the class to use when
+ *        auto-adding the package to a class name having no package specified.
+ *        If null, no automatic package addition is done.
+ * @param useIcon {boolean,true} whether to add an icon to the link.
+ * @param useShortName {boolean,false} whether to use the short name.
+ */
+qx.Proto._createItemLinkHtml = function(linkText, packageBaseClass, useIcon,
+  useShortName)
+{
+  if (useIcon == null) {
+    useIcon = true;
+  }
+
+  linkText = qx.lang.String.trim(linkText);
+
+  if (linkText.charAt(0) == '"' || linkText.charAt(0) == '<') {
+    // This is a String or a link to a URL -> Just use it as it is
+    return linkText;
+  } else {
+    // This is a link to another class or method -> Create an item link
+
+    // Separate item name from label
+    var hit = api.ClassViewer.ITEM_SPEC_REGEX.exec(linkText);
+    if (hit == null) {
+      // Malformed item name
+      return linkText;
+    } else {
+      var className = hit[2];
+      var itemName = hit[3];
+      var label = hit[6];
+
+      // Make the item name absolute
+      if (className == null || className.length == 0) {
+        // This is a relative link to a method -> Add the current class
+        className = packageBaseClass.attributes.fullName;
+      } else if (packageBaseClass && className.indexOf(".") == -1) {
+        // The class name has no package -> Use the same package as the current class
+        var name = packageBaseClass.attributes.name;
+        var fullName = packageBaseClass.attributes.fullName;
+        var packageName = fullName.substring(0, fullName.length - name.length);
+        className = packageName + className;
+      }
+
+      // Get the node info
+      if (label == null || label.length == 0) {
+        // We have no label -> Use the item name as label
+        label = hit[1];
+      }
+
+      // Add the right icon
+      if (useIcon) {
+        var classNode = this._getClassDocNode(className);
+        if (classNode) {
+          var itemNode;
+          if (itemName) {
+            // The links points to a item of the class
+            var cleanItemName = itemName.substring(1);
+            var parenPos = cleanItemName.indexOf("(");
+            if (parenPos != -1) {
+              cleanItemName = qx.lang.String.trim(cleanItemName.substring(0, parenPos));
+            }
+            itemNode = api.TreeUtil.getItemDocNode(classNode, cleanItemName);
+          } else {
+            // The links points to the class
+            itemNode = classNode;
+          }
+          if (itemNode) {
+            var iconUrl = api.TreeUtil.getIconUrl(itemNode);
+            var iconCode = api.ClassViewer.createImageHtml(iconUrl);
+          }
+        }
+      }
+
+      // Create a real bookmarkable link
+      // NOTE: The onclick-handler must be added by HTML code. If it
+      //       is added using the DOM element then the href is followed.
+      var fullItemName = className + (itemName ? itemName : "");
+      return (typeof iconCode != "undefined" ? iconCode : "")
+        + '<a href="' + window.location.protocol + '//' +  window.location.pathname
+        + '#' + fullItemName + '" onclick="'
+        + 'document._detailViewer._selectItem(\'' + fullItemName + '\'); return false;"'
+        + ' title="' + fullItemName + '">' + label + '</a>';
+    }
+  }
+}
+
+
+/**
+ * Gets the node type for a doc node.
+ *
+ * @param itemNode {Map} the doc node of the item.
+ * @return {int} the item's node type.
+ */
+qx.Proto._getTypeForItemNode = function(itemNode) {
+  var ClassViewer = api.ClassViewer;
+
+  if (itemNode.type == "constant") {
+    return ClassViewer.NODE_TYPE_CONSTANT;
+  } else if (itemNode.type == "property") {
+    return ClassViewer.NODE_TYPE_PROPERTY;
+  } else if (itemNode.type == "event") {
+    return ClassViewer.NODE_TYPE_EVENT;
+  } else if (itemNode.type == "method") {
+    var name = itemNode.attributes.name;
+    if (name == null) {
+      return ClassViewer.NODE_TYPE_CONSTRUCTOR;
+    } else if (name.charAt(0) == "_") {
+      if (itemNode.attributes.isStatic) {
+        return ClassViewer.NODE_TYPE_METHOD_STATIC_PROTECTED;
+      } else {
+        return ClassViewer.NODE_TYPE_METHOD_PROTECTED;
+      }
+    } else {
+      if (itemNode.attributes.isStatic) {
+        return ClassViewer.NODE_TYPE_METHOD_STATIC_PUBLIC;
+      } else {
+        return ClassViewer.NODE_TYPE_METHOD_PUBLIC;
+      }
+    }
+  }
+}
+
+
+// overridden
+qx.Proto.dispose = function() {
+  if (this.getDisposed()) {
+    return;
+  }
+
+  this._titleElem = null;
+  this._classDescElem = null;
+  this._markedElement = null;
+
+  for (var nodeType in this._infoPanelHash) {
+    this._infoPanelHash[nodeType].infoElem = null;
+    this._infoPanelHash[nodeType].infoTitleElem = null;
+    this._infoPanelHash[nodeType].infoBodyElem = null;
+  }
+
+  document._detailViewer = null;
+
+  return qx.ui.embed.HtmlEmbed.prototype.dispose.call(this);
+}
+
+
+/** {Map} The primitive types. These types will not be shown with links. */
+qx.Class.PRIMITIVES = { "boolean":true, "string":true, "float":true,
+  "number":true, "int":true, "double":true, "var":true, "void":true,
+  "RegExp":true, "Array":true, "Map":true, "Date":true, "Element":true,
+  "Node":true, "Function":true, "Object":true, "Event":true };
+
+/**
+ * {regexp} The regexp for parsing a item name
+ * (e.g. "mypackage.MyClass#MY_CONSTANT alternative text").
+ */
+qx.Class.ITEM_SPEC_REGEX = /^(([\w\.]+)?(#\w+(\([^\)]*\))?)?)(\s+(.*))?$/;
+
+/** {regexp} The regexp that finds the end of a sentence. */
+qx.Class.SENTENCE_END_REGEX = /[^\.].\.(\s|<)/;
+
+
+/** {int} The node type of a constructor. */
+qx.Class.NODE_TYPE_CONSTRUCTOR = 1;
+/** {int} The node type of a property. */
+qx.Class.NODE_TYPE_PROPERTY = 2;
+/** {int} The node type of an event. */
+qx.Class.NODE_TYPE_EVENT = 3;
+/** {int} The node type of a public method. */
+qx.Class.NODE_TYPE_METHOD_PUBLIC = 4;
+/** {int} The node type of a protected method. */
+qx.Class.NODE_TYPE_METHOD_PROTECTED = 5;
+/** {int} The node type of a static public method. */
+qx.Class.NODE_TYPE_METHOD_STATIC_PUBLIC = 6;
+/** {int} The node type of a static protected method. */
+qx.Class.NODE_TYPE_METHOD_STATIC_PROTECTED = 7;
+/** {int} The node type of a constant. */
+qx.Class.NODE_TYPE_CONSTANT = 8;
+
+/** {string} The start tag of a div. */
+qx.Class.DIV_START = '<div>';
+/** {string} The start tag of a div containing an item description. */
+qx.Class.DIV_START_DESC = '<div class="item-desc">';
+/** {string} The start tag of a div containing the headline of an item detail. */
+qx.Class.DIV_START_DETAIL_HEADLINE = '<div class="item-detail-headline">';
+/** {string} The start tag of a div containing the text of an item detail. */
+qx.Class.DIV_START_DETAIL_TEXT = '<div class="item-detail-text">';
+/** {string} The start tag of a div containing the headline of an item error. */
+qx.Class.DIV_START_ERROR_HEADLINE = '<div class="item-detail-error">';
+/** {string} The end tag of a div. */
+qx.Class.DIV_END = '</div>';
+
+/** {string} The start tag of a span containing an optional detail. */
+qx.Class.SPAN_START_OPTIONAL = '<span class="item-detail-optional">';
+/** {string} The start tag of a span containing a parameter name. */
+qx.Class.SPAN_START_PARAM_NAME = '<span class="item-detail-param-name">';
+/** {string} The end tag of a span. */
+qx.Class.SPAN_END = '</span>';
+
+
+/**
+ * Creates the HTML showing an image.
+ *
+ * @param imgUrl {var} the URL of the image. May be a string or an array of
+ *        strings (for overlay images).
+ * @param tooltip {string} the tooltip to show.
+ * @param styleAttributes {string} the style attributes to add to the image.
+ */
+qx.Class.createImageHtml = function(imgUrl, tooltip, styleAttributes) {
+  if (typeof imgUrl == "string") {
+    return '<img src="' + qx.manager.object.AliasManager.getInstance().resolvePath(imgUrl) + '" class="img"'
+      + (styleAttributes ? ' style="' + styleAttributes + '"' : "") + '/>';
+  } else {
+    if (styleAttributes) {
+      styleAttributes += ";vertical-align:top";
+    } else {
+      styleAttributes = "vertical-align:top";
+    }
+    return api.ClassViewer.createOverlayImageHtml(18, 18, imgUrl, tooltip, styleAttributes);
+  }
+}
+
+
+/**
+ * Creates HTML that shows an overlay image (several images on top of each other).
+ * The resulting HTML will behave inline.
+ *
+ * @param width {int} the width of the images.
+ * @param height {int} the height of the images.
+ * @param imgUrlArr {string[]} the URLs of the images. The last image will be
+ *        painted on top.
+ * @param toolTip {string,null} the tooltip of the icon.
+ * @param styleAttributes {string,null} custom CSS style attributes.
+ * @return {string} the HTML with the overlay image.
+ */
+qx.Class.createOverlayImageHtml
+  = function(width, height, imgUrlArr, toolTip, styleAttributes)
+{
+  var html = '<div style="position:relative;top:0;left:0;width:' + width + 'px;height:' + height + 'px'
+  + ((styleAttributes == null) ? '' : (';' + styleAttributes)) + '">';
+
+  for (var i = 0; i < imgUrlArr.length; i++) {
+    html += '<img';
+    if (toolTip != null) {
+      html += ' title="' + toolTip + '"';
+    }
+    html += ' style="position:absolute;top:0px;left:0px" src="' + qx.manager.object.AliasManager.getInstance().resolvePath(imgUrlArr[i]) + '"/>';
+  }
+
+  html += '</div>';
+
+  /*
+  // NOTE: See testOverlay.html
+  var html = '<table cellpadding="0" cellspacing="0" '
+    + 'style="display:inline;position:relative;border:1px solid blue'
+    + ((styleAttributes == null) ? '' : (';' + styleAttributes)) + '"><tr>'
+    + '<td style="width:' + width + 'px;height:' + height + 'px">';
+  for (var i = 0; i < imgUrlArr.length; i++) {
+    html += '<img';
+    if (toolTip != null) {
+      html += ' title="' + toolTip + '"';
+    }
+    html += ' style="position:absolute;top:0px;left:0px" src="' + imgUrlArr[i] + '"></img>';
+  }
+  html += '</td></tr></table>';
+  */
+
+  return html;
+}
\ No newline at end of file