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

(This used to be commit 26a34037a7ca6fbd05c5a6f7c2d5973e34bc6918)

31 files changed, 2836 insertions, 0 deletions

diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/Makefile b/webapps/qooxdoo-0.6.3-sdk/frontend/api/Makefile
new file mode 100755
index 0000000000..299447511f
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/Makefile
@@ -0,0 +1,180 @@
+###################################################################################
+# VARIABLES
+###################################################################################
+
+FRAMEWORK=../framework
+GENERATOR=$(FRAMEWORK)/tool/generator.py
+CACHE=$(FRAMEWORK)/.cache
+SOURCELOADER=
+NICE=10
+
+ifneq ($(SOURCELOADER),)
+  SOURCELDR = --source-loader-type $(SOURCELOADER)
+else
+  SOURCELDR =
+endif
+
+
+###################################################################################
+# DEFAULT TARGET
+###################################################################################
+
+all: build
+
+
+
+###################################################################################
+# COMMON TARGETS
+###################################################################################
+
+source: generate-script-source generate-data-source
+build: generate-script-build generate-data-build copy-index-file fix-build-rights
+sync: build sync-qooxdoo-org
+pretty: generate-pretty
+fix: generate-fix
+
+
+
+###################################################################################
+# CLEANUP TARGETS
+###################################################################################
+
+clean:
+	@echo
+	@echo "  CLEANUP OF GENERATED FILES"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Deleting files..."
+	@rm -f source/script/api.js source/script/data.js
+	@rm -f build/script/api.js build/script/data.js
+	@rm -rf build/xml source/xml
+
+realclean: clean
+	@echo
+	@echo "  CLEANUP OF GENERATED FILES (REAL)"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Deleting files..."
+	@nice -n $(NICE) rm -rf build source/script
+
+distclean: realclean
+	@echo
+	@echo "  CLEANUP OF GENERATED FILES (DIST)"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Deleting files..."
+	@nice -n $(NICE) find . -name "*~" -o -name "*.bak" -o -name "*.old" | xargs rm -rf
+	@nice -n $(NICE) rm -rf $(CACHE)
+
+
+
+###################################################################################
+# GENERATOR TARGETS
+###################################################################################
+
+generate-script-source:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --source-script-path ../$(FRAMEWORK)/source/class \
+	  --script-input source/class \
+	  --source-script-path class \
+	  --include api \
+	  --generate-source-script $(SOURCELDR) \
+	  --source-script-file source/script/api.js \
+	  --define-runtime-setting qx.manager.object.AliasManager.resourceUri:../$(FRAMEWORK)/source/resource \
+	  --cache-directory $(CACHE)
+
+generate-script-build:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --resource-input $(FRAMEWORK)/source/resource \
+	  --resource-output build/resource/qooxdoo \
+	  --script-input source/class \
+	  --resource-input source/resource \
+	  --resource-output build/resource \
+	  --include api \
+	  --generate-compiled-script \
+	  --compiled-script-file build/script/api.js \
+	  --optimize-strings \
+	  --optimize-variables \
+	  --define-runtime-setting qx.manager.object.AliasManager.resourceUri:resource/qooxdoo \
+	  --copy-resources \
+	  --cache-directory $(CACHE)
+
+generate-data-source:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --generate-api-documentation \
+	  --api-documentation-json-file source/script/data.js \
+	  --cache-directory $(CACHE)
+
+generate-data-build:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --generate-api-documentation \
+	  --api-documentation-json-file build/script/data.js \
+	  --cache-directory $(CACHE)
+
+generate-data-source-xml:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --generate-api-documentation \
+	  --api-documentation-xml-file source/xml/data.xml \
+	  --cache-directory $(CACHE)
+
+generate-data-build-xml:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --generate-api-documentation \
+	  --api-documentation-xml-file build/xml/data.xml \
+	  --cache-directory $(CACHE)
+
+generate-pretty:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input source/class \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --include-without-dependencies api.* \
+	  --pretty-print \
+	  --cache-directory $(CACHE)
+
+generate-fix:
+	@chmod u+x $(GENERATOR) && nice -n $(NICE) $(GENERATOR) \
+	  --script-input source/class \
+	  --script-input $(FRAMEWORK)/source/class \
+	  --include-without-dependencies api.* \
+	  --fix-source \
+	  --cache-directory $(CACHE)
+
+
+
+###################################################################################
+# FILE RELATED TARGETS
+###################################################################################
+
+copy-index-file:
+	@echo
+	@echo "  CREATE COPY OF HTML FILE"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Copying file..."
+	@cp -f source/index.html build/index.html
+
+fix-build-rights:
+	@echo
+	@echo "  FIX RIGHTS ON BUILD FILES"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Fixing file rights..."
+	@nice -n $(NICE) find build -type d | xargs chmod a+rx
+	@nice -n $(NICE) find build -type f | xargs chmod a+r
+
+
+
+
+
+
+###################################################################################
+# ONLINE TARGETS
+###################################################################################
+
+sync-qooxdoo-org:
+	@echo
+	@echo "  SYNC FILES TO HOMEPAGE"
+	@echo "----------------------------------------------------------------------------"
+	@echo "  * Syncing..."
+	@nice -n $(NICE) rsync --checksum --recursive --archive --delete --verbose build/* root@qooxdoo.org:/var/www/qooxdoo/api
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
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/InfoViewer.js b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/InfoViewer.js
new file mode 100644
index 0000000000..f65d1e82b1
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/InfoViewer.js
@@ -0,0 +1,35 @@
+/*
+#module(api)
+*/
+
+/**
+ * Shows the class details.
+ */
+qx.OO.defineClass("api.InfoViewer", qx.ui.embed.HtmlEmbed,
+function() {
+  qx.ui.embed.HtmlEmbed.call(this);
+
+  this.setOverflow("auto");
+  this.setPadding(20);
+  this.setEdge(0);
+  this.setHtmlProperty("id", "InfoViewer");
+  this.setVisibility(false);
+
+  api.InfoViewer.instance = this;
+});
+
+qx.Proto.showInfo = function(classNode)
+{
+  var vHtml = "";
+
+  // Title
+  vHtml += '<h1>';
+  vHtml += '<div class="pkgtitle">package</div>';
+  vHtml += classNode.attributes.fullName;
+  vHtml += '</h1>';
+
+  // TODO: Overview of classes in this package
+
+  // Apply HTML
+  this.setHtml(vHtml);
+}
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/TreeUtil.js b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/TreeUtil.js
new file mode 100755
index 0000000000..bb90bfd6ef
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/TreeUtil.js
@@ -0,0 +1,356 @@
+/*
+#module(api)
+*/
+
+/**
+ * A util class for handling the documentation tree.
+ */
+qx.OO.defineClass("api.TreeUtil", qx.core.Object,
+function () {
+  qx.core.Object.call(this);
+});
+
+
+/**
+ * Gets the child of a doc node having a certain type.
+ *
+ * @param docNode {Map} the doc node to get the child of.
+ * @param childType {string} the type of the child to get.
+ * @return {Map} the wanted child or <code>null</code> if <code>docNode</code>
+ *         is <code>null</code> or has no such child.
+ */
+qx.Class.getChild = function(docNode, childType) {
+  if (docNode != null && docNode.children != null) {
+    for (var i = 0; i < docNode.children.length; i++) {
+      if (docNode.children[i].type == childType) {
+        return docNode.children[i];
+      }
+    }
+  }
+
+  return null;
+}
+
+
+/**
+ * Gets the child of a doc node having a certain attribute value.
+ *
+ * @param docNode {Map} the doc node to get the child of.
+ * @param attributeName {string} the name of the attribute the wanted child must have.
+ * @param attributeValue {string} the value of the attribute the wanted child must have.
+ * @return {Map} the wanted child or <code>code</code> if there is no such child.
+ */
+qx.Class.getChildByAttribute = function(docNode, attributeName, attributeValue) {
+  if (docNode.children != null) {
+    for (var i = 0; i < docNode.children.length; i++) {
+      var node = docNode.children[i];
+      if (node.attributes && node.attributes[attributeName] == attributeValue) {
+        return node;
+      }
+    }
+  }
+
+  return null;
+}
+
+
+/**
+ * Searches the doc node of a item. Only use this method if you don't know the
+ * type of the item.
+ *
+ * @param classNode {Map} the class node the item belongs to.
+ * @param itemName {string} the name of the item to search.
+ * @return {Map} the doc node of the item or <code>null</code> if the class has
+ *         no such item.
+ */
+qx.Class.getItemDocNode = function(classNode, itemName) {
+  var TreeUtil = api.TreeUtil;
+
+  // Go through the item lists and check whether one contains the wanted item
+  for (var i = 0; i < TreeUtil.ITEM_LIST_ARR.length; i++) {
+    var listNode = TreeUtil.getChild(classNode, TreeUtil.ITEM_LIST_ARR[i]);
+    if (listNode) {
+      var itemNode = TreeUtil.getChildByAttribute(listNode, "name", itemName);
+      if (itemNode) {
+        return itemNode;
+      }
+    }
+  }
+
+  // Nothing found
+  return null;
+}
+
+
+/**
+ * Gets the doc node of a class.
+ *
+ * @param docTree {Map} the documentation tree.
+ * @param className {string} the name of the class.
+ * @return {Map} the doc node of the class.
+ */
+qx.Class.getClassDocNode = function(docTree, className) {
+  var splits = className.split(".");
+  var currNode = docTree;
+  for (var i = 0; i < splits.length && currNode != null; i++) {
+    if (i < splits.length - 1) {
+      // The current name is a package name
+      var packages = this.getChild(currNode, "packages");
+      currNode = packages ? this.getChildByAttribute(packages, "name", splits[i]) : null;
+    } else {
+      // The current name is a class name
+      var classes = this.getChild(currNode, "classes");
+      currNode = classes ? this.getChildByAttribute(classes, "name", splits[i]) : null;
+    }
+  }
+
+  return currNode;
+}
+
+
+/**
+ * Gets the icon URL of a doc node.
+ *
+ * @param node {Map} the node to get the icon for.
+ * @param inherited {boolean,false} whether the node was inherited.
+ * @return {var} the URL of the icon. May be a string or an array of string
+ *         (in case of an overlay icon).
+ */
+qx.Class.getIconUrl = function(node, inherited) {
+  var constName;
+  switch (node.type) {
+    case "package":
+      constName = "ICON_PACKAGE";
+      break;
+    case "class":
+      constName = "ICON_CLASS";
+
+      if (node.attributes.isStatic) {
+        constName += "_STATIC";
+      } else if (node.attributes.isAbstract) {
+        constName += "_ABSTRACT";
+      }
+
+      break;
+    case "property":
+      constName = "ICON_PROPERTY";
+      break;
+    case "event":
+      constName = "ICON_EVENT";
+      break;
+    case "method":
+      var isCtor = node.attributes.name == null;
+      var isPublic = isCtor || (node.attributes.name.charAt(0) != "_");
+
+      constName = "ICON_METHOD" + (isPublic ? "_PUB" : "_PROT");
+
+      if (isCtor) {
+        constName += "_CTOR";
+      } else if (node.attributes.isStatic) {
+        constName += "_STATIC";
+      } else if (node.attributes.isAbstract) {
+        constName += "_ABSTRACT";
+      }
+
+      break;
+    case "constant":
+      constName = "ICON_CONSTANT";
+      break;
+    default: throw new Error("Unknown node type: " + node.type);
+  }
+
+  if (inherited) {
+    constName += "_INHERITED";
+  } else if (node.attributes.overriddenFrom) {
+    constName += "_OVERRIDDEN";
+  }
+
+  if (node.attributes.hasError) {
+    constName += "_ERROR";
+  } else if (node.attributes.hasWarning) {
+    constName += "_WARN";
+  }
+
+  var iconUrl = api.TreeUtil[constName];
+  if (iconUrl == null) {
+    throw new Error("Unknown img constant: " + constName);
+  }
+  return iconUrl;
+}
+
+
+/** {string[]} The names of lists containing items. */
+qx.Class.ITEM_LIST_ARR = [ "constants", "properties", "methods-pub", "methods-pub",
+                        "methods-static-prot", "methods-static-prot" ];
+
+
+/** {string} The URL of the overlay "abstract". */
+qx.Class.OVERLAY_ABSTRACT   = "api/overlay_abstract18.gif";
+/** {string} The URL of the overlay "error". */
+qx.Class.OVERLAY_ERROR      = "api/overlay_error18.gif";
+/** {string} The URL of the overlay "inherited". */
+qx.Class.OVERLAY_INHERITED  = "api/overlay_inherited18.gif";
+/** {string} The URL of the overlay "overridden". */
+qx.Class.OVERLAY_OVERRIDDEN = "api/overlay_overridden18.gif";
+/** {string} The URL of the overlay "static". */
+qx.Class.OVERLAY_STATIC     = "api/overlay_static18.gif";
+/** {string} The URL of the overlay "warning". */
+qx.Class.OVERLAY_WARN       = "api/overlay_warning18.gif";
+
+
+/** {string} The icon URL of a package. */
+qx.Class.ICON_PACKAGE      = "api/package18.gif";
+/** {string} The icon URL of a package with warning. */
+qx.Class.ICON_PACKAGE_WARN = "api/package_warning18.gif";
+
+
+/** {string} The icon URL of a class. */
+qx.Class.ICON_CLASS       = "api/class18.gif";
+/** {string} The icon URL of a class with warning. */
+qx.Class.ICON_CLASS_WARN  = "api/class_warning18.gif";
+/** {string} The icon URL of a class with error. */
+qx.Class.ICON_CLASS_ERROR = "api/class_warning18.gif";
+
+/** {string} The icon URL of a static class. */
+qx.Class.ICON_CLASS_STATIC       = "api/class_static18.gif";
+/** {string} The icon URL of a static class with warning. */
+qx.Class.ICON_CLASS_STATIC_WARN  = "api/class_static_warning18.gif";
+/** {string} The icon URL of a static class with error. */
+qx.Class.ICON_CLASS_STATIC_ERROR = "api/class_static_warning18.gif";
+
+/** {string} The icon URL of an abstract class. */
+qx.Class.ICON_CLASS_ABSTRACT       = "api/class_abstract18.gif";
+/** {string} The icon URL of an abstract class with warning. */
+qx.Class.ICON_CLASS_ABSTRACT_WARN  = "api/class_abstract_warning18.gif";
+/** {string} The icon URL of an abstract class with error. */
+qx.Class.ICON_CLASS_ABSTRACT_ERROR = "api/class_abstract_warning18.gif";
+
+
+/** {string} The icon URL of a property. */
+qx.Class.ICON_PROPERTY       = "api/property18.gif";
+/** {string[]} The icon URL of a property with warning. */
+qx.Class.ICON_PROPERTY_WARN  = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of a property with error. */
+qx.Class.ICON_PROPERTY_ERROR = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an inherited property. */
+qx.Class.ICON_PROPERTY_INHERITED       = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_INHERITED ];
+/** {string[]} The icon URL of an inherited property with warning. */
+qx.Class.ICON_PROPERTY_INHERITED_WARN  = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an inherited property with error. */
+qx.Class.ICON_PROPERTY_INHERITED_ERROR = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an overridden property. */
+qx.Class.ICON_PROPERTY_OVERRIDDEN       = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_OVERRIDDEN ];
+/** {string[]} The icon URL of an overridden property with warning. */
+qx.Class.ICON_PROPERTY_OVERRIDDEN_WARN  = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an overridden property with error. */
+qx.Class.ICON_PROPERTY_OVERRIDDEN_ERROR = [ qx.Class.ICON_PROPERTY, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_ERROR ];
+
+
+/** {string} The icon URL of an event. */
+qx.Class.ICON_EVENT = "api/event18.gif";
+
+/** {string[]} The icon URL of an inherited event. */
+qx.Class.ICON_EVENT_INHERITED = [ qx.Class.ICON_EVENT, qx.Class.OVERLAY_INHERITED ];
+
+
+/** {string} The icon URL of a public method. */
+qx.Class.ICON_METHOD_PUB       = "api/method_public18.gif";
+/** {string[]} The icon URL of a public method with warning. */
+qx.Class.ICON_METHOD_PUB_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ERROR ];
+/** {string[]} The icon URL of a public method with error. */
+qx.Class.ICON_METHOD_PUB_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an inherited public method. */
+qx.Class.ICON_METHOD_PUB_INHERITED       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_INHERITED ];
+/** {string[]} The icon URL of an inherited public method with warning. */
+qx.Class.ICON_METHOD_PUB_INHERITED_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an inherited public method with error. */
+qx.Class.ICON_METHOD_PUB_INHERITED_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an overridden public method. */
+qx.Class.ICON_METHOD_PUB_OVERRIDDEN       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_OVERRIDDEN ];
+/** {string[]} The icon URL of an overridden public method with warning. */
+qx.Class.ICON_METHOD_PUB_OVERRIDDEN_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an overridden public method with error. */
+qx.Class.ICON_METHOD_PUB_OVERRIDDEN_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of a public static method. */
+qx.Class.ICON_METHOD_PUB_STATIC       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_STATIC ];
+/** {string[]} The icon URL of a public static method with error. */
+qx.Class.ICON_METHOD_PUB_STATIC_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_STATIC, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of a public abstract method. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT ];
+/** {string[]} The icon URL of a public abstract method with warning. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of a public abstract method with error. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an overridden public abstract method. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_OVERRIDDEN       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_OVERRIDDEN ];
+/** {string[]} The icon URL of an overridden public abstract method with warning. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_OVERRIDDEN_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an overridden public abstract method with error. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_OVERRIDDEN_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an inherited public abstract method. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_INHERITED       = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED ];
+/** {string[]} The icon URL of an inherited public abstract method with warning. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_INHERITED_WARN  = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an inherited public abstract method with error. */
+qx.Class.ICON_METHOD_PUB_ABSTRACT_INHERITED_ERROR = [ qx.Class.ICON_METHOD_PUB, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_ERROR ];
+
+
+/** {string} The icon URL of a constructor. */
+qx.Class.ICON_METHOD_PUB_CTOR       = "api/constructor18.gif";
+/** {string[]} The icon URL of a constructor with error. */
+qx.Class.ICON_METHOD_PUB_CTOR_ERROR = [ qx.Class.ICON_METHOD_PUB_CTOR, qx.Class.OVERLAY_ERROR ];
+
+
+/** {string} The icon URL of a protected method. */
+qx.Class.ICON_METHOD_PROT       = "api/method_protected18.gif";
+/** {string[]} The icon URL of a protected method with warning. */
+qx.Class.ICON_METHOD_PROT_WARN  = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ERROR ];
+/** {string[]} The icon URL of a protected method with error. */
+qx.Class.ICON_METHOD_PROT_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an inherited protected method. */
+qx.Class.ICON_METHOD_PROT_INHERITED       = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_INHERITED ];
+/** {string[]} The icon URL of an inherited protected method with warning. */
+qx.Class.ICON_METHOD_PROT_INHERITED_WARN  = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an inherited protected method with error. */
+qx.Class.ICON_METHOD_PROT_INHERITED_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an overridden protected method. */
+qx.Class.ICON_METHOD_PROT_OVERRIDDEN       = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_OVERRIDDEN ];
+/** {string[]} The icon URL of an overridden protected method with warning. */
+qx.Class.ICON_METHOD_PROT_OVERRIDDEN_WARN  = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an overridden protected method with error. */
+qx.Class.ICON_METHOD_PROT_OVERRIDDEN_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_OVERRIDDEN, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of a protected static method. */
+qx.Class.ICON_METHOD_PROT_STATIC       = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_STATIC ];
+/** {string[]} The icon URL of a protected static method with error. */
+qx.Class.ICON_METHOD_PROT_STATIC_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_STATIC, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an abstract protected method. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT       = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT ];
+/** {string[]} The icon URL of an abstract protected method with warning. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT_WARN  = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an abstract protected method with error. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_ERROR ];
+
+/** {string[]} The icon URL of an inherited abstract protected method. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT_INHERITED       = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED ];
+/** {string[]} The icon URL of an inherited abstract protected method with warning. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT_INHERITED_WARN  = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_WARN ];
+/** {string[]} The icon URL of an inherited abstract protected method with error. */
+qx.Class.ICON_METHOD_PROT_ABSTRACT_INHERITED_ERROR = [ qx.Class.ICON_METHOD_PROT, qx.Class.OVERLAY_ABSTRACT, qx.Class.OVERLAY_INHERITED, qx.Class.OVERLAY_ERROR ];
+
+
+/** {string} The icon URL of a constant. */
+qx.Class.ICON_CONSTANT       = "api/constant18.gif";
+/** {string[]} The icon URL of a constant with error. */
+qx.Class.ICON_CONSTANT_ERROR = [ qx.Class.ICON_CONSTANT, qx.Class.OVERLAY_ERROR ];
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/Viewer.js b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/Viewer.js
new file mode 100755
index 0000000000..f633c0d50e
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/class/api/Viewer.js
@@ -0,0 +1,386 @@
+/*
+#module(api)
+#resource(css:css)
+#resource(images:image)
+*/
+
+/**
+ * The API viewer. Shows the API documentation.
+ */
+qx.OO.defineClass("api.Viewer", qx.ui.layout.HorizontalBoxLayout,
+function () {
+  qx.ui.layout.HorizontalBoxLayout.call(this);
+
+  this.setEdge(0);
+
+  this._titlePrefix = this.getSetting("title") + " API Documentation";
+  document.title = this._titlePrefix;
+
+  this._tree = new qx.ui.tree.Tree("API Documentation");
+  this._tree.set({
+    backgroundColor: "white",
+    overflow: "scroll",
+    width: "22%",
+    minWidth : 150,
+    maxWidth : 300
+  });
+  this._tree.getManager().addEventListener("changeSelection", this._onTreeSelectionChange, this);
+  this.add(this._tree);
+
+  this._detailFrame = new qx.ui.layout.CanvasLayout;
+  this._detailFrame.setWidth("1*");
+  this._detailFrame.setBorder(qx.renderer.border.BorderPresets.horizontalDivider);
+  this._detailFrame.setBackgroundColor("white");
+  this._detailFrame.setHtmlProperty("id", "DetailFrame");
+  this.add(this._detailFrame);
+
+  this._detailLoader = new qx.ui.embed.HtmlEmbed('<h1><div class="please">please wait</div>Loading data...</h1>');
+  this._detailLoader.setHtmlProperty("id", "DetailLoader");
+  this._detailLoader.setMarginLeft(20);
+  this._detailLoader.setMarginTop(20);
+  this._detailFrame.add(this._detailLoader);
+
+  this._classViewer = new api.ClassViewer;
+  this._detailFrame.add(this._classViewer);
+
+  this._infoViewer = new api.InfoViewer;
+  this._detailFrame.add(this._infoViewer);
+
+  this._currentTreeType = api.Viewer.PACKAGE_TREE;
+
+  // Workaround: Since navigating in qx.ui.tree.Tree doesn't work, we've to
+  //             maintain a hash that keeps the tree nodes for class names
+  this._classTreeNodeHash = {};
+  this._classTreeNodeHash[api.Viewer.PACKAGE_TREE] = {};
+  this._classTreeNodeHash[api.Viewer.INHERITENCE_TREE] = {};
+
+  api.Viewer.instance = this;
+
+  qx.client.History.getInstance().init();
+  qx.client.History.getInstance().addEventListener("request", this._onHistoryRequest, this);
+});
+
+
+/** The documentation tree to show. */
+qx.OO.addProperty({ name:"docTree", type:"object" });
+
+
+qx.Settings.setDefault("title", "qooxdoo");
+qx.Settings.setDefault("initialTreeDepth", 1);
+
+
+// property checker
+qx.Proto._modifyDocTree = function(propValue, propOldValue, propData) {
+  this._updateTree(propValue);
+  return true;
+}
+
+
+/**
+ * Loads the API doc tree from a URL. The URL must point to a JSON encoded
+ * doc tree.
+ *
+ * @param url {string} the URL.
+ */
+qx.Proto.load = function(url)
+{
+  var req = new qx.io.remote.Request(url);
+
+  req.setTimeout(180000);
+
+  req.addEventListener("completed", function(evt)
+  {
+    var content = evt.getData().getContent();
+    this.setDocTree(eval("(" + content + ")"));
+
+    qx.ui.core.Widget.flushGlobalQueues();
+
+    // Handle bookmarks
+    if (window.location.hash) {
+      var self = this;
+      window.setTimeout(function() {
+        self.selectItem(window.location.hash.substring(1));
+      }, 0);
+    }
+
+    this._detailLoader.setHtml('<h1><div class="please">' + this.getSetting("title") +
+        '</div>API Documentation</h1>');
+
+  }, this);
+
+  req.addEventListener("failed", function(evt)
+  {
+    this.error("Couldn't load file: " + url);
+  }, this);
+
+  req.send();
+}
+
+
+/**
+ * Updates the tree on the left.
+ *
+ * @param docTree {Map} the documentation tree to use for updating.
+ */
+qx.Proto._updateTree = function(docTree) {
+  var inheritenceNode = new qx.ui.tree.TreeFolder("Inheritence hierarchy");
+  var packagesNode = new qx.ui.tree.TreeFolder("Packages");
+
+  this._tree.removeAll();
+  this._tree.add(inheritenceNode, packagesNode);
+
+  // Fille the packages tree (and fill the _topLevelClassNodeArr)
+  this._topLevelClassNodeArr = [];
+  this._fillPackageNode(packagesNode, docTree, 0);
+
+  // Sort the _topLevelClassNodeArr
+  this._topLevelClassNodeArr.sort(function (node1, node2) {
+    return (node1.attributes.fullName < node2.attributes.fullName) ? -1 : 1;
+  });
+
+  // Fill the inheritence tree
+  for (var i = 0; i < this._topLevelClassNodeArr.length; i++) {
+    this._createInheritanceNode(inheritenceNode, this._topLevelClassNodeArr[i], docTree);
+  }
+
+  packagesNode.open();
+
+  if (this._wantedClassName) {
+    this.showClassByName(this._wantedClassName);
+    this._wantedClassName = null;
+  }
+}
+
+
+/**
+ * Fills a package tree node with tree nodes for the sub packages and classes.
+ *
+ * @param treeNode {qx.ui.tree.TreeFolder} the package tree node.
+ * @param docNode {Map} the documentation node of the package.
+ */
+qx.Proto._fillPackageNode = function(treeNode, docNode, depth) {
+  var ApiViewer = api.Viewer;
+  var TreeUtil = api.TreeUtil;
+
+  var packagesDocNode = TreeUtil.getChild(docNode, "packages");
+  if (packagesDocNode && packagesDocNode.children) {
+    for (var i = 0; i < packagesDocNode.children.length; i++) {
+      var packageDocNode = packagesDocNode.children[i];
+      var iconUrl = TreeUtil.getIconUrl(packageDocNode);
+      var packageTreeNode = new qx.ui.tree.TreeFolder(packageDocNode.attributes.name, iconUrl);
+      packageTreeNode.docNode = packageDocNode;
+      treeNode.add(packageTreeNode);
+
+      this._fillPackageNode(packageTreeNode, packageDocNode, depth+1);
+
+      // Open the package node if it has child packages
+      if (depth < this.getSetting("initialTreeDepth") && TreeUtil.getChild(packageDocNode, "packages")) {
+        packageTreeNode.open();
+      }
+
+      // Register the tree node
+      this._classTreeNodeHash[ApiViewer.PACKAGE_TREE][packageDocNode.attributes.fullName] = packageTreeNode;
+    }
+  }
+
+  var classesDocNode = TreeUtil.getChild(docNode, "classes");
+  if (classesDocNode && classesDocNode.children) {
+    for (var i = 0; i < classesDocNode.children.length; i++) {
+      var classDocNode = classesDocNode.children[i];
+      var iconUrl = TreeUtil.getIconUrl(classDocNode);
+      var classTreeNode = new qx.ui.tree.TreeFolder(classDocNode.attributes.name, iconUrl);
+      classTreeNode.docNode = classDocNode;
+      classTreeNode.treeType = ApiViewer.PACKAGE_TREE;
+      treeNode.add(classTreeNode);
+
+      // Register the tree node
+      this._classTreeNodeHash[ApiViewer.PACKAGE_TREE][classDocNode.attributes.fullName] = classTreeNode;
+
+      // Check whether this is a top-level-class
+      if (classDocNode.attributes.superClass == null) {
+        this._topLevelClassNodeArr.push(classDocNode);
+      }
+    }
+  }
+}
+
+
+/**
+ * Creates the tree node for a class containing class nodes for all its child
+ * classes.
+ *
+ * @param classDocNode {Map} the documentation node of the class.
+ * @param docTree {Map} the documentation tree.
+ */
+qx.Proto._createInheritanceNode = function(parentTreeNode, classDocNode, docTree) {
+  var ApiViewer = api.Viewer;
+  var TreeUtil = api.TreeUtil;
+
+  // Create the tree node
+  var iconUrl = TreeUtil.getIconUrl(classDocNode);
+  var classTreeNode = new qx.ui.tree.TreeFolder(classDocNode.attributes.fullName, iconUrl);
+  classTreeNode.docNode = classDocNode;
+  classTreeNode.treeType = ApiViewer.INHERITENCE_TREE;
+  parentTreeNode.add(classTreeNode);
+
+  // Register the tree node
+  this._classTreeNodeHash[ApiViewer.INHERITENCE_TREE][classDocNode.attributes.fullName] = classTreeNode;
+
+  // Add all child classes
+  var childClassNameCsv = classDocNode.attributes.childClasses;
+  if (childClassNameCsv) {
+    var childClassNameArr = childClassNameCsv.split(",");
+    for (var i = 0; i < childClassNameArr.length; i++) {
+      var childClassDocNode = TreeUtil.getClassDocNode(docTree, childClassNameArr[i]);
+      this._createInheritanceNode(classTreeNode, childClassDocNode, docTree);
+    }
+  }
+}
+
+
+/**
+ * Event handler. Called when the tree selection has changed.
+ *
+ * @param evt {Map} the event.
+ */
+qx.Proto._onTreeSelectionChange = function(evt)
+{
+  var treeNode = evt.getData()[0];
+
+  if (treeNode && treeNode.docNode)
+  {
+    var newTitle = this._titlePrefix + " - class " + treeNode.docNode.attributes.fullName;
+
+    qx.client.History.getInstance().addToHistory(treeNode.docNode.attributes.fullName, newTitle);
+
+    this._currentTreeType = treeNode.treeType;
+
+    this._selectTreeNode(treeNode);
+
+    window.location.hash = "#" + treeNode.docNode.attributes.fullName;
+  }
+}
+
+
+qx.Proto._onHistoryRequest = function(evt)
+{
+  this.showClassByName(evt.getData());
+}
+
+qx.Proto._selectTreeNode = function(vTreeNode)
+{
+  if (!(vTreeNode && vTreeNode.docNode)) {
+    this.error("Invalid tree node: " + vTreeNode);
+  }
+
+  var vDoc = vTreeNode.docNode;
+
+  this._detailLoader.setVisibility(false);
+
+  if (vDoc.type == "class")
+  {
+    this._infoViewer.setVisibility(false);
+    this._classViewer.showClass(vDoc);
+    this._classViewer.setVisibility(true);
+  }
+  else
+  {
+    this._classViewer.setVisibility(false);
+    this._infoViewer.showInfo(vDoc);
+    this._infoViewer.setVisibility(true);
+  }
+}
+
+
+/**
+ * Selects an item (class, property, method or constant).
+ *
+ * @param fullItemName {string} the full name of the item to select.
+ *        (e.g. "qx.mypackage.MyClass" or "qx.mypackage.MyClass#myProperty")
+ */
+qx.Proto.selectItem = function(fullItemName) {
+  var className = fullItemName;
+  var itemName = null;
+  var hashPos = fullItemName.indexOf("#");
+  if (hashPos != -1) {
+    className = fullItemName.substring(0, hashPos);
+    itemName = fullItemName.substring(hashPos + 1);
+
+    var parenPos = itemName.indexOf("(");
+    if (parenPos != -1) {
+      itemName = qx.lang.String.trim(itemName.substring(0, parenPos));
+    }
+  }
+
+  this.showClassByName(className);
+  if (itemName) {
+    this._classViewer.showItem(itemName);
+  }
+}
+
+
+/**
+ * Shows a certain class.
+ *
+ * @param className {string} the name of the class to show.
+ */
+qx.Proto.showClassByName = function(className) {
+  var treeNode = this._classTreeNodeHash[this._currentTreeType][className];
+
+  if (treeNode) {
+    treeNode.setSelected(true);
+  } else if (this.getDocTree() == null) {
+    // The doc tree has not been loaded yet
+    // -> Remeber the wanted class and show when loading is done
+    this._wantedClassName = className;
+  } else {
+    this.error("Unknown class: " + className);
+  }
+}
+
+
+qx.Class.PACKAGE_TREE = 1;
+qx.Class.INHERITENCE_TREE = 2;
+
+
+
+qx.Proto.dispose = function()
+{
+  if (this.getDisposed()) {
+    return;
+  }
+
+  if (this._tree)
+  {
+    this._tree.dispose();
+    this._tree = null;
+  }
+
+  if (this._detailFrame)
+  {
+    this._detailFrame.dispose();
+    this._detailFrame = null;
+  }
+
+  if (this._detailLoader)
+  {
+    this._detailLoader.dispose();
+    this._detailLoader = null;
+  }
+
+  if (this._classViewer)
+  {
+    this._classViewer.dispose();
+    this._classViewer = null;
+  }
+
+  if (this._infoViewer)
+  {
+    this._infoViewer.dispose();
+    this._infoViewer = null;
+  }
+
+  this._classTreeNodeHash = null;
+
+  return qx.ui.layout.HorizontalBoxLayout.prototype.dispose.call(this);
+}
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/index.html b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/index.html
new file mode 100755
index 0000000000..bfd1e22c48
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/index.html
@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link type="text/css" rel="stylesheet" href="resource/css/apiviewer.css"/>
+    <script type="text/javascript" src="script/api.js"></script>
+
+    <script type="text/javascript">
+      qx.dev.log.Logger.ROOT_LOGGER.setMinLevel(qx.dev.log.Logger.LEVEL_WARN);
+
+      var viewer;
+
+      qx.core.Init.getInstance().defineInitialize(function() {
+        qx.manager.object.AliasManager.getInstance().add("api", "resource/image");
+      });
+
+      qx.core.Init.getInstance().defineMain(function()
+      {
+        viewer = new api.Viewer;
+        viewer.addToDocument();
+      });
+
+      qx.core.Init.getInstance().defineFinalize(function() {
+        viewer.load("script/data.js");
+      });
+    </script>
+  </head>
+</html>
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/css/apiviewer.css b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/css/apiviewer.css
new file mode 100755
index 0000000000..3458c8aab3
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/css/apiviewer.css
@@ -0,0 +1,263 @@
+#DetailFrame,
+#DetailFrame td,
+#DetailFrame th{
+  font-family: Verdana, "Lucida Grande", "Bitstream Vera Sans", Tahoma, "Lucida Sans Unicode", Arial, sans-serif;
+  font-size: 11px;
+  line-height: 150%;
+}
+
+#DetailFrame h1,
+#DetailFrame h2,
+#DetailFrame h3,
+#DetailFrame h4,
+#DetailFrame h5,
+#DetailFrame h6{
+  font-family: "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
+  color: #134275;
+}
+
+#DetailFrame *{
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+#DetailFrame h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+#DetailFrame h2 {
+  font-size: 18px;
+  margin-bottom: 4px;
+}
+
+#DetailFrame h3 {
+  font-size: 14px;
+}
+
+#DetailFrame img {
+  border: 0 none;
+  vertical-align: middle;
+}
+
+#DetailFrame a:link,
+#DetailFrame a:visited{
+  color: #134275;
+}
+
+#DetailFrame a:hover,
+#DetailFrame a:active{
+  color: #134275;
+  text-decoration: underline;
+}
+
+#DetailFrame td{
+  vertical-align: top;
+  padding: 2px;
+}
+
+
+
+
+
+#DetailLoader div.please{
+  font-size: 14px;
+  font-weight: normal;
+  margin-bottom: 4px;
+}
+
+
+
+
+
+
+#InfoViewer div.pkgtitle{
+  font-size: 14px;
+  font-weight: normal;
+  margin-bottom: 4px;
+}
+
+
+
+
+
+
+
+
+#ClassViewer div.classDescription{
+  font-size: 12px;
+
+  background: #E9F2FB;
+  border: 1px solid #E9F2FB;
+
+  -moz-border-radius: 5px;
+  padding: 12px;
+  padding-top: 4px;
+
+  width: 450px;
+}
+
+#ClassViewer div.classDescription p{
+  margin-top: 10px;
+}
+
+#ClassViewer div.packageName{
+  font-size: 14px;
+  font-weight: normal;
+  margin-bottom: 4px;
+}
+
+#ClassViewer span.typeInfo{
+  color: #83B300;
+  font-weight: normal;
+}
+
+
+
+
+
+
+#ClassViewer div.infoPanel {
+  margin-top: 30px;
+}
+
+#ClassViewer div.infoPanel h2{
+  cursor: default;
+}
+
+#ClassViewer div.infoPanel span.inheritCheck {
+  font-weight: normal;
+  float: right;
+  font-size: 11px;
+  vertical-align: bottom;
+}
+
+#ClassViewer div.infoPanel span.inheritCheck input,
+#ClassViewer div.infoPanel span.inheritCheck label{
+  vertical-align: middle;
+}
+
+#ClassViewer div.infoPanel span.inheritCheck label{
+  margin-left: 3px;
+}
+
+
+
+
+
+
+
+#ClassViewer table.info {
+  table-layout: fixed;
+}
+
+#ClassViewer table.info tr {
+  background: #FBFFEF;
+}
+
+#ClassViewer table.info tr.marked {
+  background: #DEFF83;
+}
+
+#ClassViewer table.info tr td,
+#ClassViewer div.empty-info-body {
+  border-top: 1px solid #ECECEC;
+}
+
+#ClassViewer table.info tr td{
+  overflow: hidden;
+}
+
+#ClassViewer table.info tr td td{
+  border-top: 0 none;
+  padding: 0;
+}
+
+#ClassViewer table.info td.icon{
+  text-align: center;
+  width: 20px;
+}
+
+#ClassViewer table.info td.type{
+  width: 100px;
+  font-size: 12px;
+  color: #83B300;
+  font-weight: bold;
+}
+
+#ClassViewer table.info td.toggle{
+  text-align: center;
+  width: 16px;
+  padding: 1px;
+}
+
+#ClassViewer table.info td.toggle img{
+  cursor: default;
+}
+
+#ClassViewer table.info td.text h3{
+  cursor: default;
+}
+
+#ClassViewer span.methodSignature{
+  font-size: 12px;
+  color: #83B300;
+}
+
+#ClassViewer table.info td.type a,
+#ClassViewer span.methodSignature a{
+  color: #83B300 !important;
+}
+
+#ClassViewer span.methodSignature span.parameterType{
+  font-style: italic;
+}
+
+#ClassViewer span.methodSignature span.separator{
+  color: #134275;
+  font-weight: bold;
+}
+
+#ClassViewer span.methodSignature span.parenthesis{
+  color: #134275;
+  font-weight: bold;
+}
+
+
+
+
+
+#ClassViewer div.item-detail-headline {
+  font-weight: bold;
+  color: #1D65B3;
+}
+
+#ClassViewer div.item-detail-text {
+  padding-left: 12px;
+}
+
+#ClassViewer div.item-detail-text p{
+  display: inline;
+}
+
+#ClassViewer div.item-detail-error {
+  font-weight: bold;
+  color: #D61F1C;
+}
+
+#ClassViewer span.item-detail-optional {
+  font-style: italic;
+}
+
+#ClassViewer code,
+#ClassViewer span.item-detail-param-name {
+  font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
+  background: #E9F2FB;
+  padding: 1px;
+}
+
+#ClassViewer span.caps{
+  color: #134275;
+}
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class18.gif
new file mode 100755
index 0000000000..df8c9291c7
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract18.gif
new file mode 100755
index 0000000000..788abd7094
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract_warning18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract_warning18.gif
new file mode 100755
index 0000000000..135f68cffd
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_abstract_warning18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static18.gif
new file mode 100755
index 0000000000..5eb75aea09
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static_warning18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static_warning18.gif
new file mode 100755
index 0000000000..75a6c72035
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_static_warning18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_warning18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_warning18.gif
new file mode 100755
index 0000000000..95e7a327f9
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/class_warning18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/close.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/close.gif
new file mode 100755
index 0000000000..3377fb65de
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/close.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constant18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constant18.gif
new file mode 100755
index 0000000000..c3a5d0cedf
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constant18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constructor18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constructor18.gif
new file mode 100644
index 0000000000..b3645ac80a
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/constructor18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/event18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/event18.gif
new file mode 100644
index 0000000000..d3555ff96d
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/event18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_protected18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_protected18.gif
new file mode 100755
index 0000000000..be71bae519
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_protected18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_public18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_public18.gif
new file mode 100755
index 0000000000..67b1785dba
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/method_public18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/nextlevel.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/nextlevel.gif
new file mode 100755
index 0000000000..48b81c80a9
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/nextlevel.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/open.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/open.gif
new file mode 100755
index 0000000000..30f815aa30
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/open.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_abstract18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_abstract18.gif
new file mode 100755
index 0000000000..16122bf4d6
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_abstract18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_constructor18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_constructor18.gif
new file mode 100755
index 0000000000..d408fe8e57
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_constructor18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_error18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_error18.gif
new file mode 100755
index 0000000000..ffde061d69
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_error18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_inherited18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_inherited18.gif
new file mode 100755
index 0000000000..81e4906fe7
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_inherited18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_overridden18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_overridden18.gif
new file mode 100755
index 0000000000..bca3e80c48
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_overridden18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_static18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_static18.gif
new file mode 100755
index 0000000000..4b1afa1a35
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_static18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_warning18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_warning18.gif
new file mode 100755
index 0000000000..ce74a2a0f2
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/overlay_warning18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package18.gif
new file mode 100755
index 0000000000..907110110d
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package_warning18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package_warning18.gif
new file mode 100755
index 0000000000..2cb875be2b
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/package_warning18.gif
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/property18.gif b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/property18.gif
new file mode 100755
index 0000000000..ab4153d6d6
--- /dev/null
+++ b/webapps/qooxdoo-0.6.3-sdk/frontend/api/source/resource/image/property18.gif