Add frontend assets and plugin bundles

Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.

assets/plugins/dynatree/doc/contextmenu/jquery.contextMenu-custom.js

@@ -0,0 +1,222 @@
+// jQuery Context Menu Plugin
+//
+// Version 1.01 customized version (see comment below)
+//
+// Cory S.N. LaViska
+// A Beautiful Site (http://abeautifulsite.net/)
+//
+// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
+//
+// Terms of Use
+//
+// This plugin is dual-licensed under the GNU General Public License
+//   and the MIT License and is copyright A Beautiful Site, LLC.
+//
+// 2011-02-17 Martin Wendt: 
+//            Changed stopPropagation() to preventDefault() in order to make it
+//            work with Dynatree drag'n'drop.  
+//            See http://code.google.com/p/dynatree/issues/detail?id=174
+// 2012-09-27 Martin Wendt: 
+//            fixed position in a fancy layout
+//
+if(jQuery)( function() {
+	$.extend($.fn, {
+		
+		contextMenu: function(o, callback) {
+			// Defaults
+			if( o.menu == undefined ) return false;
+			if( o.inSpeed == undefined ) o.inSpeed = 150;
+			if( o.outSpeed == undefined ) o.outSpeed = 75;
+			// 0 needs to be -1 for expected results (no fade)
+			if( o.inSpeed == 0 ) o.inSpeed = -1;
+			if( o.outSpeed == 0 ) o.outSpeed = -1;
+			// Loop each context menu
+			$(this).each( function() {
+				var el = $(this);
+				var offset = $(el).offset();
+				// Add contextMenu class
+				$('#' + o.menu).addClass('contextMenu');
+				// Simulate a true right click
+				$(this).mousedown( function(e) {
+					var evt = e;
+//					evt.stopPropagation();
+					evt.preventDefault();
+					$(this).mouseup( function(e) {
+//						e.stopPropagation();
+						e.preventDefault();
+						var srcElement = $(this);
+						$(this).unbind('mouseup');
+						if( evt.button == 2 ) {
+							// Hide context menus that may be showing
+							$(".contextMenu").hide();
+							// Get this context menu
+							var menu = $('#' + o.menu);
+							
+							if( $(el).hasClass('disabled') ) return false;
+							
+							// Detect mouse position
+							var d = {}, x, y;
+							if( self.innerHeight ) {
+								d.pageYOffset = self.pageYOffset;
+								d.pageXOffset = self.pageXOffset;
+								d.innerHeight = self.innerHeight;
+								d.innerWidth = self.innerWidth;
+							} else if( document.documentElement &&
+								document.documentElement.clientHeight ) {
+								d.pageYOffset = document.documentElement.scrollTop;
+								d.pageXOffset = document.documentElement.scrollLeft;
+								d.innerHeight = document.documentElement.clientHeight;
+								d.innerWidth = document.documentElement.clientWidth;
+							} else if( document.body ) {
+								d.pageYOffset = document.body.scrollTop;
+								d.pageXOffset = document.body.scrollLeft;
+								d.innerHeight = document.body.clientHeight;
+								d.innerWidth = document.body.clientWidth;
+							}
+							(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
+							(e.pageY) ? y = e.pageY : y = e.clientY + d.scrollTop;
+							
+							// Show the menu
+							$(document).unbind('click');
+							// MW: fixed position in a fancy layout
+//							$(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);
+							$(menu).fadeIn(o.inSpeed).offset({ top: y, left: x }); // must be visible, before calling offset()
+							// Hover events
+							$(menu).find('A').mouseover( function() {
+								$(menu).find('LI.hover').removeClass('hover');
+								$(this).parent().addClass('hover');
+							}).mouseout( function() {
+								$(menu).find('LI.hover').removeClass('hover');
+							});
+							
+							// Keyboard
+							$(document).keypress( function(e) {
+								switch( e.keyCode ) {
+									case 38: // up
+										if( $(menu).find('LI.hover').size() == 0 ) {
+											$(menu).find('LI:last').addClass('hover');
+										} else {
+											$(menu).find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
+											if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:last').addClass('hover');
+										}
+									break;
+									case 40: // down
+										if( $(menu).find('LI.hover').size() == 0 ) {
+											$(menu).find('LI:first').addClass('hover');
+										} else {
+											$(menu).find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
+											if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:first').addClass('hover');
+										}
+									break;
+									case 13: // enter
+										$(menu).find('LI.hover A').trigger('click');
+									break;
+									case 27: // esc
+										$(document).trigger('click');
+									break
+								}
+							});
+							
+							// When items are selected
+							$('#' + o.menu).find('A').unbind('click');
+							$('#' + o.menu).find('LI:not(.disabled) A').click( function() {
+								$(document).unbind('click').unbind('keypress');
+								$(".contextMenu").hide();
+								// Callback
+								if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
+								return false;
+							});
+							
+							// Hide bindings
+							setTimeout( function() { // Delay for Mozilla
+								$(document).click( function() {
+									$(document).unbind('click').unbind('keypress');
+									$(menu).fadeOut(o.outSpeed);
+									return false;
+								});
+							}, 0);
+						}
+					});
+				});
+				
+				// Disable text selection
+				if( $.browser.mozilla ) {
+					$('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
+				} else if( $.browser.msie ) {
+					$('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
+				} else {
+					$('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
+				}
+				// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
+				$(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; });
+				
+			});
+			return $(this);
+		},
+		
+		// Disable context menu items on the fly
+		disableContextMenuItems: function(o) {
+			if( o == undefined ) {
+				// Disable all
+				$(this).find('LI').addClass('disabled');
+				return( $(this) );
+			}
+			$(this).each( function() {
+				if( o != undefined ) {
+					var d = o.split(',');
+					for( var i = 0; i < d.length; i++ ) {
+						$(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
+						
+					}
+				}
+			});
+			return( $(this) );
+		},
+		
+		// Enable context menu items on the fly
+		enableContextMenuItems: function(o) {
+			if( o == undefined ) {
+				// Enable all
+				$(this).find('LI.disabled').removeClass('disabled');
+				return( $(this) );
+			}
+			$(this).each( function() {
+				if( o != undefined ) {
+					var d = o.split(',');
+					for( var i = 0; i < d.length; i++ ) {
+						$(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
+						
+					}
+				}
+			});
+			return( $(this) );
+		},
+		
+		// Disable context menu(s)
+		disableContextMenu: function() {
+			$(this).each( function() {
+				$(this).addClass('disabled');
+			});
+			return( $(this) );
+		},
+		
+		// Enable context menu(s)
+		enableContextMenu: function() {
+			$(this).each( function() {
+				$(this).removeClass('disabled');
+			});
+			return( $(this) );
+		},
+		
+		// Destroy context menu(s)
+		destroyContextMenu: function() {
+			// Destroy specified context menus
+			$(this).each( function() {
+				// Disable action
+				$(this).unbind('mousedown').unbind('mouseup');
+			});
+			return( $(this) );
+		}
+		
+	});
+})(jQuery);

assets/plugins/dynatree/doc/contextmenu/jquery.contextMenu.css

@@ -0,0 +1,62 @@
+/* Generic context menu styles */
+.contextMenu {
+	position: absolute;
+	width: 120px;
+	z-index: 99999;
+	border: solid 1px #CCC;
+	background: #EEE;
+	padding: 0px;
+	margin: 0px;
+	display: none;
+}
+
+.contextMenu LI {
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+}
+
+.contextMenu A {
+	color: #333;
+	text-decoration: none;
+	display: block;
+	line-height: 20px;
+	height: 20px;
+	background-position: 6px center;
+	background-repeat: no-repeat;
+	outline: none;
+	padding: 1px 5px;
+	padding-left: 28px;
+}
+
+.contextMenu LI.hover A {
+	color: #FFF;
+	background-color: #3399FF;
+}
+
+.contextMenu LI.disabled A {
+	color: #AAA;
+	cursor: default;
+}
+
+.contextMenu LI.hover.disabled A {
+	background-color: transparent;
+}
+
+.contextMenu LI.separator {
+	border-top: solid 1px #CCC;
+}
+
+/*
+	Adding Icons
+
+	You can add icons to the context menu by adding
+	classes to the respective LI element(s)
+*/
+
+.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); }
+.contextMenu LI.cut A { background-image: url(images/cut.png); }
+.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); }
+.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); }
+.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); }
+.contextMenu LI.quit A { background-image: url(images/door.png); }

assets/plugins/dynatree/doc/dynatree_server.py

@@ -0,0 +1,270 @@
+"""
+    This sample web server demonstrates how to implement a web service for 
+    Dynatree requests.
+    
+    As data source, we choose a folder in the local file system, simply
+    because it is hierarchical and has a concept of documents (files) and
+    folders (directories) and because it was easy to implement.
+    A typical web service would of course read the data from a 'real' source 
+    like an SQL database or XML file, but I hope you get the idea ;-)
+    
+    See: http://dynatree.googlecode.com
+    
+    Martin Wendt, 2009-2011
+    
+    Usage:    
+      1. Python 2.5 or later is required to run this server.
+         For Python 2.5 the simplejson module must also be installed;
+         Python 2.6 has built in json support.
+      2. Configure the rootPath variable in the main() function at the bottom
+         of this module.
+      3. Run this module:
+         > python dynatree_server.py
+         
+         Optionally pass a root folder:
+         > python dynatree_server.py c:\temp
+
+    This module
+      - Is a standalone web server that answers URLs beginning with
+            http://127.0.0.1:8001/?...
+        with JSON responses that conform to the Dynatree spec.
+        However, we don't do error checking or anything else that would be 
+        required for production environments.
+        
+      - Answers requests to initialize a tree using the 'initAjax: {}' option:
+            http://127.0.0.1:8001/?mode=baseFolders
+        with a list of files/directories in the configured root directory.
+        
+      - Answers requests to lazy-load node children using 'appendAjax({...})':
+            http://127.0.0.1:8001/?key=_25c2b6d6
+        with a list of files/directories in the directory that matches this key.
+        
+      - Supports Dynatree's 'lazy persistence':
+            http://127.0.0.1:8001/?mode=baseFolder&expandedKeyList=_41771df2%2C_4230fb68%2C...
+        will return not only the base entries, but also all children inside 
+        parents that are listed as expanded.       
+        
+      - Supports &sleep=SECONDS argument for simulating slow responses.
+
+      - Supports the JSONP protocol:
+            http://127.0.0.1:8001/?mode=baseFolder&callback=jsonp1241293219729
+        will wrap the result like this "jsonp1241293219729(<res>)".
+        This is only required, if this web service is not on the same host as 
+        the web page that contains the Dynatree widget.
+        JSONP can be enabled for jQuery.ajax() by passing dataType: 'jsonp'
+        instead of 'json'.
+        
+      - Dumps the POST body, if the request URL is '/submit_data' 
+        
+
+Sample Dynatree options to use this service:
+        $("#tree").dynatree({
+            ...
+            persist: true,
+            initAjax: {url: "http://127.0.0.1:8001",
+                       dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
+                       data: {key: "",
+//                              sleep: 3,
+//                              depth: 2,
+                              mode: "baseFolders"
+                              },
+                       addExpandedKeyList: true // Send list of expanded keys, so the webservice can deliver these children also
+                       },
+            onLazyRead: function(dtnode){
+                dtnode.appendAjax(
+                    {url: "http://127.0.0.1:8001", 
+                     dataType: "jsonp",
+                     data: {key: dtnode.data.key,
+                            mode: "branch"
+                            }
+                });
+            }
+        });
+"""
+
+import cgi 
+import os
+import sys
+import time
+from wsgiref.simple_server import WSGIServer, WSGIRequestHandler 
+from tempfile import gettempdir
+
+try:
+    import json # Available since Python 2.6
+except ImportError:
+    import simplejson as json
+
+#===============================================================================
+# Helper functions
+#===============================================================================
+
+def _keyFromString(s):
+    """Calculate a unique key for an arbitrary  string.
+    
+    Example: _keyFromString("c:\temp\wsgidav1\src\DAV") = "_25c2b6d6"
+    """
+    return "_" + hex(hash(s)) [3:]
+
+
+def _findFolderByKey(rootPath, key):
+    """Search rootPath and all sub folders for a directory that matches the key."""
+    for root, dirs, files in os.walk(rootPath):
+        for name in dirs:
+            fullPath = os.path.join(root, name)
+            fileKey = _keyFromString(fullPath) 
+            if key == fileKey:
+                return fullPath
+    return None
+
+    
+#===============================================================================
+# DynaTreeWsgiApp
+#===============================================================================
+
+class DynaTreeWsgiApp(object):
+    """This WSGI application serves a file system hierarchy for dynatree."""
+    def __init__(self, optionDict):
+        self.optionDict = optionDict
+
+    def __call__(self, environ, start_response):
+        """Handle one HTTP request."""
+        
+        # Parse URL query into a list of 2-tuples (name, value) 
+        argList = cgi.parse_qsl(environ.get("QUERY_STRING", ""))
+        # Convert to dictionary {"name": "value", ... }
+        argDict = dict(argList)
+        print "Query args: %s" % argDict
+
+        # Support &sleep=SECONDS argument to simulate slow connections for debugging 
+        if argDict.get("sleep"):
+            print "Sleeping %s seconds..." % argDict.get("sleep")
+            time.sleep(int(argDict.get("sleep")))
+            
+        # Dump POST request data, if http://HOST:PORT/submit_data was requested
+#        print "PI", environ["PATH_INFO"]
+        if environ["PATH_INFO"] == "/submit_data":
+            print "Got /submit_data request, CONTENT_LENGTH=%r" % environ.get("CONTENT_LENGTH")  
+            try:
+                length = int(environ["CONTENT_LENGTH"])
+                data = environ["wsgi.input"].read(length)
+            except:
+                print >>sys.stderr, "Couldn't read from wsgi.input! This can happen when using Firefox locally"  
+                try:
+                    data = environ["wsgi.input"].read()
+                except:
+                    print 
+            print "Data: ", data
+            start_response("200 OK", [("Content-Type", "text/html")])
+            return [ "Thanks for sending<br><pre><code>%s</code></pre>" % data ]
+
+        # Support &depth=LEVEL argument to read more than one level (1: direct children)
+        depth = int(argDict.get("depth", 0))
+        if depth > 1:
+            print "'depth' mode: loading %s levels" % depth
+
+        # Return empty list when '&returnEmpty' is passed
+        returnEmpty = "returnEmpty" in argDict
+        
+        # Eval 'mode' and 'key' arguments
+        rootPath = self.optionDict["rootPath"]
+        if argDict.get("mode") == "baseFolders":
+            folderPath = rootPath
+        elif argDict.get("key"):
+            key = argDict.get("key")
+            folderPath = _findFolderByKey(rootPath, key)
+            if not folderPath:
+                raise RuntimeError("Could not find folder for key '%s'." % key)
+        else:
+            raise RuntimeError("Missing required argument '&mode=baseFolder' or '&key=...'")
+
+        # Get list of child nodes (may be recursive)
+        childList = [ ]
+        if not returnEmpty:
+            self.makeChildList(argDict, folderPath, childList, depth)
+        
+        # Convert result list to a JSON string
+        res = json.dumps(childList, encoding="Latin-1")
+        
+        # Support for the JSONP protocol.
+        if "callback" in argDict:
+            res = argDict["callback"] + "(" + res + ")" 
+
+        # Return HTTP response 
+        start_response("200 OK", [("Content-Type", "application/json")])
+        return [ res ]
+
+
+    def makeChildList(self, argDict, folderPath, childList, depth):
+        print "makeChildList(%s, depth=%s) " % (folderPath, depth)
+        expandedKeyList = argDict.get("expandedKeyList", "").split(",")
+        filenameList = os.listdir(folderPath)
+        for fn in filenameList:
+            fullPath = os.path.join(folderPath, fn)
+            isFolder = os.path.isdir(fullPath)
+            key = _keyFromString(fullPath)
+            try:
+                size = os.path.getsize(fullPath)
+                date = time.ctime(os.path.getmtime(fullPath))
+            except:
+                # May fail when path contains funny chars (don't care in this sample)
+                size = 0
+                date = time.ctime()
+            # Create a node dictionary and append it to the child list
+            node = {"title": fn,
+                    "key": key,
+                    "isFolder": isFolder,
+                    "isLazy": isFolder,
+                    "tooltip": "%s, %s bytes, modified: %s" % (fullPath, size, date),
+                    }
+            childList.append(node)
+            # Support lazy persistence:
+            # If the current node was requested as 'expanded', load the children too 
+            if isFolder and (key in expandedKeyList or depth > 1):
+                subNodes = []
+                self.makeChildList(argDict, fullPath, subNodes, depth-1)
+                node["children"] = subNodes
+#                node["isLazy"] = False
+#                node["expand"] = True
+    
+
+#===============================================================================
+# Server
+#===============================================================================
+
+# Requires Python >= 2.5
+
+def make_server(host, port, app, server_class=WSGIServer, handler_class=WSGIRequestHandler):
+    """Create a new WSGI server listening on 'host' and 'port' for 'app'."""
+    server = server_class((host, port), handler_class)
+    server.set_app(app)
+    return server
+
+
+def main():  
+    # Configure root directory that will be exported:
+    rootPath = gettempdir()
+    if len(sys.argv) > 1:
+        rootPath =sys.argv[1]
+    
+#    rootPath = "/temp"
+
+    # Configure hostname and port on which the server will listen
+#    hostname = "127.0.0.1" # Use empty string for localhost (local access only)
+    hostname = "" # Use empty string for 0.0.0.0 (allows remote access)
+    port = 8001
+
+    wsgi_app = DynaTreeWsgiApp({"rootPath": rootPath})
+
+    httpd = make_server(hostname, port, wsgi_app)
+    
+    sa = httpd.socket.getsockname()
+
+    print "Exporting file system at ", rootPath, " for Dynatree."
+    print "Serving HTTP on", sa[0], "port", sa[1], "..."
+    assert os.path.isdir(rootPath), "Invalid root path: '%s'" % rootPath
+
+    httpd.serve_forever()
+     
+
+if __name__ == "__main__":
+    main()

assets/plugins/dynatree/doc/howto.css

@@ -0,0 +1,122 @@
+body {
+	font-family: sans-serif;
+
+}
+
+ul {
+	list-style-type: square;
+}
+
+div.hint {
+	font-size: smaller;
+}
+
+p.info,
+div.info {
+	background-color: #ffffa0;
+	background-image: url(iconInfo_32x32.png);
+	background-repeat: no-repeat;
+	padding: 5px;
+	padding-left: 40px;
+}
+
+div.codesample {
+	border: thin solid gray;
+}
+
+div.codesample a {
+	text-align: right;
+}
+
+code
+{
+	font-family: monospace;
+	font-size: 1.2em;
+}
+
+div.codesample pre,
+pre.codesample
+{
+	font-family: monospace; /* courier doesn't contain '...'*/
+	background-color: #f0f0f0;
+	padding: 5px;
+}
+
+pre.codesample {
+	border: thin solid gray;
+}
+
+dl.optionList {
+	margin-left: 20px;
+}
+dl.optionList dt {
+	font-family: monospace;
+	background-color: #f0f0f0;
+}
+dl.optionList dd {
+/*	font-style: italic; */
+	margin-bottom: 10px;
+}
+
+/*****************************************************************************
+ * jquery.planize
+ */
+
+#toc {
+	border: thin solid gray;
+/*	background-color: f0f0f0; */
+	padding: 5px;
+}
+#toc >h4 {
+/*	background-color: f0f0f0; */
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+#toc ul {
+	list-style-type: none;
+}
+
+#toc a,
+#toc a:visited
+{
+	color: blue;
+	text-decoration: none;
+}
+#toc a:hover
+{
+	text-decoration: underline;
+}
+
+/*****************************************************************************
+ * Examples
+ */
+
+body.example
+{
+	margin: 15px;
+}
+
+body.example h1
+{
+	font-size: 1.2em;
+}
+
+body.example p.description,
+body.example p.sample-links
+{
+/*	border: thin solid gray; */
+	background-color: #d0d0f0;
+	padding: 5px;
+	font-size: small;
+}
+
+p.sample-links a,
+p.sample-links a:visited
+{
+	color: navy;
+	text-decoration: none;
+}
+p.sample-links a:hover
+{
+	text-decoration: underline;
+}

assets/plugins/dynatree/doc/howto.js

@@ -0,0 +1,87 @@
+/*************************************************************************
+	(c) 2008-2009 Martin Wendt
+ *************************************************************************/
+
+$(function(){
+	// Replace tabs inside <pre> with 4 spaces, because some browsers display 8
+	// characters
+	$("pre.codesample, div.codesample pre, pre.prettyprint").each(function(){
+		var text = $(this).text();
+		text2 = text.replace(/\t/g, "    ");
+		$(this).text(text2)
+	});
+
+	// Show some elements only, if (not) inside the Example Browser
+	if (top.location == self.location)
+		$(".hideOutsideFS").hide();
+	else
+		$(".hideInsideFS").hide();
+});
+
+
+(function($) {
+
+$.widget("ui.toc", {
+	init: function() {
+		// The widget framework supplies this.element and this.options.
+		this.options.event += '.toc'; // namespace event
+
+		// create TOC
+		var $this = this.element;
+		var opts = this.options;
+
+		// Attach the tree object to parent element
+		var id = $this.attr("id");
+
+		$this.addClass(opts.classnames.container);
+		$this.append("<div class='" + opts.classnames.title + "'>" + opts.title + "</div>");
+
+//		var $ul = $this.append("<ul />");
+		var $ul = $("<ul />").appendTo($this);
+//		this._addSubItems($ul, 1);
+		var idx = 1;
+		$("h2").each(function() {
+			var $h = $(this);
+			$ul.append("<li><a href='#" + idx + "'>" + $h.text() + "</a></li>");
+			$h.attr("id", idx);
+			idx++;
+		});
+	},
+
+	// ------------------------------------------------------------------------
+	lastentry: undefined
+});
+
+
+// The following methods return a value (thus breaking the jQuery call chain):
+
+//$.ui.toc.getter = "getTree getRoot";
+
+
+// Plugin default options:
+
+$.ui.toc.defaults = {
+	title: "Table of contents", // Text used for the toc header.
+	startDepth: 1, // Start with <Hx> and higher (H1, H2, ...)
+	maxDepth: 3, // Max depth to scan (..., ´H2, H3)
+	addUpLink: false, // Add an clickable link to jump back upwards to the toc.
+	numberItems: false, // Use an ordered list instead of <ul>. Also the index is prepended to the <h..> tags.
+	orderedListStyleType: "decimal",
+	strings: {
+		loading: "Loading&#8230;",
+		loadError: "Load error!"
+	},
+	classnames: {
+		container: "ui-toc-container",
+		title: "ui-toc-title"
+	},
+	debugLevel: 0,
+	// templates
+	//~ tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>', // 		var $li = $(o.tabTemplate.replace(/#\{href\}/g, url).replace(/#\{label\}/g, label));
+	// ------------------------------------------------------------------------
+	lastentry: undefined
+};
+
+
+// ---------------------------------------------------------------------------
+})(jQuery);

assets/plugins/dynatree/doc/jq.context/jquery.contextMenu.css

@@ -0,0 +1,134 @@
+/*
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: 1.5.2
+ *
+ * Authors: Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://medialize.github.com/jQuery-contextMenu/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */
+
+.context-menu-list {
+    margin:0; 
+    padding:0;
+    
+    min-width: 120px;
+    max-width: 250px;
+    display: inline-block;
+    position: absolute;
+    list-style-type: none;
+    
+    border: 1px solid #DDD;
+    background: #EEE;
+    
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+       -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+         -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+}
+
+.context-menu-item {
+    padding: 2px 2px 2px 24px;
+    background-color: #EEE;
+    position: relative;
+    -moz-user-select: -moz-none;
+}
+
+.context-menu-separator {
+    padding-bottom:0;
+    border-bottom: 1px solid #DDD;
+}
+
+.context-menu-item > label {
+    -moz-user-select: text;
+}
+
+.context-menu-item.hover {
+    cursor: pointer;
+    background-color: #39F;
+}
+
+.context-menu-item.disabled {
+    color: #666;
+}
+
+.context-menu-input.hover,
+.context-menu-item.disabled.hover {
+    cursor: default;
+    background-color: #EEE;
+}
+
+.context-menu-submenu:after {
+    content: ">";
+    color: #666;
+    position: absolute;
+    top: 0;
+    right: 3px;
+    z-index: 1;
+}
+
+/* icons
+    #protip:
+    In case you want to use sprites for icons (which I would suggest you do) have a look at
+    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+    .context-menu-item.icon:before {}
+ */
+.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
+.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
+.context-menu-item.icon-cut { background-image: url(images/cut.png); }
+.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
+.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
+.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
+.context-menu-item.icon-quit { background-image: url(images/door.png); }
+
+/* vertically align inside labels */
+.context-menu-input > label > * { vertical-align: top; }
+
+/* position checkboxes and radios as icons */
+.context-menu-input > label > input[type="checkbox"],
+.context-menu-input > label > input[type="radio"] {
+    margin-left: -17px;
+}
+.context-menu-input > label > span {
+    margin-left: 5px;
+}
+
+.context-menu-input > label,
+.context-menu-input > label > input[type="text"],
+.context-menu-input > label > textarea,
+.context-menu-input > label > select {
+    display: block;
+    width: 100%;
+    
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+         -o-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+.context-menu-input > label > textarea {
+    height: 100px;
+}
+.context-menu-item > .context-menu-list {
+    display: none;
+    /* re-positioned by js */
+    right: -5px;
+    top: 5px;
+}
+
+.context-menu-item.hover > .context-menu-list {
+    display: block;
+}
+
+.context-menu-accesskey {
+    text-decoration: underline;
+}

assets/plugins/dynatree/doc/jq.context/jquery.ui.position.js

@@ -0,0 +1,252 @@
+/*
+ * jQuery UI Position 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Position
+ */
+(function( $, undefined ) {
+
+$.ui = $.ui || {};
+
+var horizontalPositions = /left|center|right/,
+	verticalPositions = /top|center|bottom/,
+	center = "center",
+	_position = $.fn.position,
+	_offset = $.fn.offset;
+
+$.fn.position = function( options ) {
+	if ( !options || !options.of ) {
+		return _position.apply( this, arguments );
+	}
+
+	// make a copy, we don't want to modify arguments
+	options = $.extend( {}, options );
+
+	var target = $( options.of ),
+		targetElem = target[0],
+		collision = ( options.collision || "flip" ).split( " " ),
+		offset = options.offset ? options.offset.split( " " ) : [ 0, 0 ],
+		targetWidth,
+		targetHeight,
+		basePosition;
+
+	if ( targetElem.nodeType === 9 ) {
+		targetWidth = target.width();
+		targetHeight = target.height();
+		basePosition = { top: 0, left: 0 };
+	// TODO: use $.isWindow() in 1.9
+	} else if ( targetElem.setTimeout ) {
+		targetWidth = target.width();
+		targetHeight = target.height();
+		basePosition = { top: target.scrollTop(), left: target.scrollLeft() };
+	} else if ( targetElem.preventDefault ) {
+		// force left top to allow flipping
+		options.at = "left top";
+		targetWidth = targetHeight = 0;
+		basePosition = { top: options.of.pageY, left: options.of.pageX };
+	} else {
+		targetWidth = target.outerWidth();
+		targetHeight = target.outerHeight();
+		basePosition = target.offset();
+	}
+
+	// force my and at to have valid horizontal and veritcal positions
+	// if a value is missing or invalid, it will be converted to center 
+	$.each( [ "my", "at" ], function() {
+		var pos = ( options[this] || "" ).split( " " );
+		if ( pos.length === 1) {
+			pos = horizontalPositions.test( pos[0] ) ?
+				pos.concat( [center] ) :
+				verticalPositions.test( pos[0] ) ?
+					[ center ].concat( pos ) :
+					[ center, center ];
+		}
+		pos[ 0 ] = horizontalPositions.test( pos[0] ) ? pos[ 0 ] : center;
+		pos[ 1 ] = verticalPositions.test( pos[1] ) ? pos[ 1 ] : center;
+		options[ this ] = pos;
+	});
+
+	// normalize collision option
+	if ( collision.length === 1 ) {
+		collision[ 1 ] = collision[ 0 ];
+	}
+
+	// normalize offset option
+	offset[ 0 ] = parseInt( offset[0], 10 ) || 0;
+	if ( offset.length === 1 ) {
+		offset[ 1 ] = offset[ 0 ];
+	}
+	offset[ 1 ] = parseInt( offset[1], 10 ) || 0;
+
+	if ( options.at[0] === "right" ) {
+		basePosition.left += targetWidth;
+	} else if ( options.at[0] === center ) {
+		basePosition.left += targetWidth / 2;
+	}
+
+	if ( options.at[1] === "bottom" ) {
+		basePosition.top += targetHeight;
+	} else if ( options.at[1] === center ) {
+		basePosition.top += targetHeight / 2;
+	}
+
+	basePosition.left += offset[ 0 ];
+	basePosition.top += offset[ 1 ];
+
+	return this.each(function() {
+		var elem = $( this ),
+			elemWidth = elem.outerWidth(),
+			elemHeight = elem.outerHeight(),
+			marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0,
+			marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0,
+			collisionWidth = elemWidth + marginLeft +
+				( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ),
+			collisionHeight = elemHeight + marginTop +
+				( parseInt( $.curCSS( this, "marginBottom", true ) ) || 0 ),
+			position = $.extend( {}, basePosition ),
+			collisionPosition;
+
+		if ( options.my[0] === "right" ) {
+			position.left -= elemWidth;
+		} else if ( options.my[0] === center ) {
+			position.left -= elemWidth / 2;
+		}
+
+		if ( options.my[1] === "bottom" ) {
+			position.top -= elemHeight;
+		} else if ( options.my[1] === center ) {
+			position.top -= elemHeight / 2;
+		}
+
+		// prevent fractions (see #5280)
+		position.left = Math.round( position.left );
+		position.top = Math.round( position.top );
+
+		collisionPosition = {
+			left: position.left - marginLeft,
+			top: position.top - marginTop
+		};
+
+		$.each( [ "left", "top" ], function( i, dir ) {
+			if ( $.ui.position[ collision[i] ] ) {
+				$.ui.position[ collision[i] ][ dir ]( position, {
+					targetWidth: targetWidth,
+					targetHeight: targetHeight,
+					elemWidth: elemWidth,
+					elemHeight: elemHeight,
+					collisionPosition: collisionPosition,
+					collisionWidth: collisionWidth,
+					collisionHeight: collisionHeight,
+					offset: offset,
+					my: options.my,
+					at: options.at
+				});
+			}
+		});
+
+		if ( $.fn.bgiframe ) {
+			elem.bgiframe();
+		}
+		elem.offset( $.extend( position, { using: options.using } ) );
+	});
+};
+
+$.ui.position = {
+	fit: {
+		left: function( position, data ) {
+			var win = $( window ),
+				over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
+			position.left = over > 0 ? position.left - over : Math.max( position.left - data.collisionPosition.left, position.left );
+		},
+		top: function( position, data ) {
+			var win = $( window ),
+				over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
+			position.top = over > 0 ? position.top - over : Math.max( position.top - data.collisionPosition.top, position.top );
+		}
+	},
+
+	flip: {
+		left: function( position, data ) {
+			if ( data.at[0] === center ) {
+				return;
+			}
+			var win = $( window ),
+				over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(),
+				myOffset = data.my[ 0 ] === "left" ?
+					-data.elemWidth :
+					data.my[ 0 ] === "right" ?
+						data.elemWidth :
+						0,
+				atOffset = data.at[ 0 ] === "left" ?
+					data.targetWidth :
+					-data.targetWidth,
+				offset = -2 * data.offset[ 0 ];
+			position.left += data.collisionPosition.left < 0 ?
+				myOffset + atOffset + offset :
+				over > 0 ?
+					myOffset + atOffset + offset :
+					0;
+		},
+		top: function( position, data ) {
+			if ( data.at[1] === center ) {
+				return;
+			}
+			var win = $( window ),
+				over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(),
+				myOffset = data.my[ 1 ] === "top" ?
+					-data.elemHeight :
+					data.my[ 1 ] === "bottom" ?
+						data.elemHeight :
+						0,
+				atOffset = data.at[ 1 ] === "top" ?
+					data.targetHeight :
+					-data.targetHeight,
+				offset = -2 * data.offset[ 1 ];
+			position.top += data.collisionPosition.top < 0 ?
+				myOffset + atOffset + offset :
+				over > 0 ?
+					myOffset + atOffset + offset :
+					0;
+		}
+	}
+};
+
+// offset setter from jQuery 1.4
+if ( !$.offset.setOffset ) {
+	$.offset.setOffset = function( elem, options ) {
+		// set position first, in-case top/left are set even on static elem
+		if ( /static/.test( $.curCSS( elem, "position" ) ) ) {
+			elem.style.position = "relative";
+		}
+		var curElem   = $( elem ),
+			curOffset = curElem.offset(),
+			curTop    = parseInt( $.curCSS( elem, "top",  true ), 10 ) || 0,
+			curLeft   = parseInt( $.curCSS( elem, "left", true ), 10)  || 0,
+			props     = {
+				top:  (options.top  - curOffset.top)  + curTop,
+				left: (options.left - curOffset.left) + curLeft
+			};
+		
+		if ( 'using' in options ) {
+			options.using.call( elem, props );
+		} else {
+			curElem.css( props );
+		}
+	};
+
+	$.fn.offset = function( options ) {
+		var elem = this[ 0 ];
+		if ( !elem || !elem.ownerDocument ) { return null; }
+		if ( options ) { 
+			return this.each(function() {
+				$.offset.setOffset( this, options );
+			});
+		}
+		return _offset.call( this );
+	};
+}
+
+}( jQuery ));

assets/plugins/dynatree/doc/jquery.planize.js

@@ -0,0 +1,148 @@
+/**
+ * The planize jQuery plugin adds some features for dealing with hierarchical headings in a given DOM element.
+ *
+ *  - adds enumerations and anchors in all headings,
+ *  - can generates an HTML table of content and append it to an existing DOM element,
+ *  - in an unobstrusive way.
+ *
+ * Example of use:
+ *
+ *    $('html *').planize();
+ *
+ * Configuration object parameters documentation:
+ *  - add_anchors      : generates anchors for each header (automatically set to true if `generate_toc` is set to true)
+ *  - callback         : a function called when processing is finished
+ *  - debug            : prints pretty debug messages into the firebug or opera console, if available
+ *  - generate_toc     : generates an html unordered list containing the table of content of the document
+ *  - min_level        : min heading level needed to be included in toc and be renumbered (0 = all headings)
+ *  - max_level        : max heading level needed to be included in toc and be renumbered (0 = all headings)
+ *  - number_suffix    : heading identifier suffix, eg. ')' in "1.2.3)"
+ *  - number_separator : separator for numbers, eg. '.' in "1.2.3)"
+ *  - toc_elem         : the dom element where the toc will be append
+ *  - toc_none         : the message to display if no headings have been found in the current document
+ *  - toc_title        : the title of the table of content
+ *
+ * @requires  jQuery v1.2 or higher
+ * @author    Nicolas Perriault <nperriault _at_ gmail _dot_ com>
+ * @license   MIT (http://www.opensource.org/licenses/mit-license.php)
+ * @param     Object  config  Plugin configuration
+ * @return    jQuery(this)
+ *
+ */
+(function(jQuery){
+
+  jQuery.fn.planize = function(config) {
+
+	var self          = jQuery(this);
+	var processed     = false;
+	var toc           = '';
+	var defaultConfig = {
+	  add_anchors      : false,
+	  callback         : null,
+	  debug            : false,
+	  generate_toc     : false,
+	  min_level        : 1,
+	  max_level        : 6,
+	  number_suffix    : '',
+	  number_separator : '.',
+	  toc_elem         : null,
+	  toc_none         : 'No heading found for this document',
+	  toc_title        : 'Table of contents'
+	};
+	config = jQuery.extend(defaultConfig, config);
+
+	/**
+	 * Prepends all headers text with the current tree number reference
+
+	 * @return void
+	 */
+	var process = function() {
+	  var level       = 0;
+	  var levels      = [0,0,0,0,0,0,0];
+	  var hLevelText  = '';
+	  var prependText = '';
+	  var prevLevel   = 0;
+	  var n           = 0;
+	  self.children('*:header:visible').each(function(index, heading) {
+		log('Processing heading %o', heading);
+		level = parseInt(heading.tagName.substring(1));
+		if (config.min_level <= level && level <= config.max_level) {
+		  n++;
+		  levels[level]++;
+		  for (var l = 1; l <= level; l++) {
+			hLevelText += levels[l] > 0 ? levels[l] + config.number_separator : '';
+		  }
+		  levels[level + 1] = 0;
+		  hLevelText = hLevelText.substring(0, hLevelText.length - 1);
+		  prependText = hLevelText;
+		  if (config.generate_toc || config.add_anchors) {
+			if (config.generate_toc) {
+			  var link = '<a href="#h' + hLevelText + '">' +jQuery('<span/>').text(jQuery(this).text()).html() + '</a>';
+			  var elem = "\n"+'<li>' + hLevelText + (config.number_suffix ? config.number_suffix : '') + ' ' + link;
+			  if (level < prevLevel) {
+				log(hLevelText + ', unnesting because:' + level + '<' + prevLevel);
+				var unnest = '';
+				while (level < prevLevel) {
+				  unnest += '</ul>';
+				  prevLevel--;
+				}
+				toc += unnest + elem + '</li>';
+			  } else if (level > prevLevel) {
+				log(hLevelText + ', nesting because:' + level + '>' + prevLevel);
+				toc += '<ul>' + elem;
+			  } else {
+				log(hLevelText + ', same level (' + level + ')');
+				toc += elem;
+			  }
+			}
+			prependText = '<span id="h' + hLevelText + '"></span>' + hLevelText;
+		  }
+		  if (config.number_suffix) {
+			prependText += config.number_suffix;
+		  }
+		  jQuery(this).prepend(prependText + ' ');
+		  prependText = hLevelText = '';
+		  prevLevel = level;
+		}
+	  });
+
+	  if (config.generate_toc) {
+		if (config.toc_title) {
+		  toc = '<h4>' + config.toc_title + '</h4>' + toc;
+		}
+		if (n == 0) {
+		  toc += config.toc_none ? '<p>' + config.toc_none + '</p>' : '';
+		}
+		jQuery(config.toc_elem ? config.toc_elem : 'body').append(toc);
+	  }
+
+	  processed = true;
+	};
+
+	/**
+	 * Logs a message into the firebug or opera console if available
+	 *
+	 */
+	var log = function() {
+	  if (!config.debug) {
+		return;
+	  }
+	  try {
+		console.log.apply(console, arguments);
+	  } catch(e) {
+		try {
+		  opera.postError.apply(opera, arguments);
+		} catch(e){}
+	  }
+	}
+
+	process();
+
+	if (config.callback) {
+	  config.callback(config.toc_elem);
+	}
+
+	return jQuery(this);
+  };
+
+})(jQuery);

assets/plugins/dynatree/doc/prettify.css

@@ -0,0 +1,52 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+.str { color: #080; }
+.kwd { color: #008; }
+.com { color: #800; }
+.typ { color: #606; }
+.lit { color: #066; }
+.pun { color: #660; }
+.pln { color: #000; }
+.tag { color: #008; }
+.atn { color: #606; }
+.atv { color: #080; }
+.dec { color: #606; }
+/*pre.prettyprint { padding: 2px; border: 1px solid #888 }*/
+pre.prettyprint {
+	padding: 2px;
+	border: 1px dashed #888;
+/*	margin-left: 30px;
+	margin-right: 10px;
+	background-color: #f0f0f0;*/
+	overflow: auto;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
+
+@media print {
+  .str { color: #060; }
+  .kwd { color: #006; font-weight: bold; }
+  .com { color: #600; font-style: italic; }
+  .typ { color: #404; font-weight: bold; }
+  .lit { color: #044; }
+  .pun { color: #440; }
+  .pln { color: #000; }
+  .tag { color: #006; font-weight: bold; }
+  .atn { color: #404; }
+  .atv { color: #060; }
+}

assets/plugins/dynatree/doc/prettify.js

@@ -0,0 +1,33 @@
+window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
+(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
+for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
+8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
+continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
+a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
+g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
+""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
+f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
+if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
+null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
+d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
+for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
+function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
+d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
+"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
+"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
+la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
+hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
+"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
+["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
+hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
+hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
+cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
+u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
+multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
+["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
+0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
+" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
+document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
+PR_TAG:"tag",PR_TYPE:S}})()

assets/plugins/dynatree/doc/sample-api.html

@@ -0,0 +1,249 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		// Initialize the tree inside the <div>element.
+		// The tree structure is read from the contained <ul> tag.
+		$("#tree").dynatree({
+			title: "Programming Sample",
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+//				alert(node.getKeyPath());
+				if( node.data.url )
+					window.open(node.data.url, node.data.target);
+			},
+			onDeactivate: function(node) {
+				$("#echoSelected").text("-");
+			},
+			onFocus: function(node) {
+				$("#echoFocused").text(node.data.title);
+			},
+			onBlur: function(node) {
+				$("#echoFocused").text("-");
+			},
+			onLazyRead: function(node){
+				var fakeJsonResult = [
+					{ title: 'Lazy node 1', isLazy: true },
+					{ title: 'Simple node 2', select: true }
+				];
+//				alert ("Let's pretend we're using this AJAX response to load the branch:\n " + jsonResult);
+				function fakeAjaxResponse() {
+					return function() {
+						node.addChild(fakeJsonResult);
+						// Remove the 'loading...' status:
+						node.setLazyNodeStatus(DTNodeStatus_Ok);
+					};
+				}
+				window.setTimeout(fakeAjaxResponse(), 1500);
+			}
+		});
+
+		$("#btnAddCode").click(function(){
+			// Sample: add an hierarchic branch using code.
+			// This is how we would add tree nodes programatically
+			var rootNode = $("#tree").dynatree("getRoot");
+			var childNode = rootNode.addChild({
+				title: "Programatically addded nodes",
+				tooltip: "This folder and all child nodes were added programmatically.",
+				isFolder: true
+			});
+			childNode.addChild({
+				title: "Document using a custom icon",
+				icon: "customdoc1.gif"
+			});
+		});
+
+		$("#btnAddObject").click(function(){
+			// Sample: add an hierarchic branch using an array
+			var obj = [
+				{ title: 'Lazy node 1', isLazy: true },
+				{ title: 'Lazy node 2', isLazy: true },
+				{ title: 'Folder node 3', isFolder: true,
+					children: [
+						{ title: 'node 3.1' },
+						{ title: 'node 3.2',
+							children: [
+								{ title: 'node 3.2.1' },
+								{ title: 'node 3.2.2',
+									children: [
+										{ title: 'node 3.2.2.1' }
+									]
+								}
+							]
+						}
+					]
+				}
+			];
+			$("#tree").dynatree("getRoot").addChild(obj);
+		});
+
+		$("#btnActiveNode").click(function(){
+			$("#tree").dynatree("getTree").activateKey("id4.3.2");
+//			$("#tree").dynatree("getTree").getNodeByKey("id4.3.2").activate();
+		});
+		$("#btnSetTitle").click(function(){
+			var node = $("#tree").dynatree("getActiveNode");
+			if( !node ) return;
+			node.setTitle(node.data.title + ", " + new Date());
+			// this is a shortcut for
+			// node.fromDict({title: node.data.title + new Date()});
+		});
+		$("#btnFromDict").click(function(){
+			var node = $("#tree").dynatree("getActiveNode");
+			if( !node ) return;
+			// Set node data and - optionally - replace children
+			node.fromDict({
+				title: node.data.title + new Date(),
+				children: [{title: "t1"}, {title: "t2"}]
+			});
+		});
+
+		$("#btnShowActive").click(function(){
+			var node = $("#tree").dynatree("getActiveNode");
+			if( node ){
+				alert("Currently active: " + node.data.title);
+			}else{
+				alert("No active node.");
+			}
+		});
+
+		$("#btnDisable").toggle(function(){
+				$("#tree").dynatree("disable");
+				$(this).text("Enable");
+				return false;
+			}, function(){
+				$("#tree").dynatree("enable");
+				$(this).text("Disable");
+				return false;
+			});
+		$("#btnToggleExpand").click(function(){
+			$("#tree").dynatree("getRoot").visit(function(node){
+				node.toggleExpand();
+			});
+			return false;
+		});
+		$("#btnCollapseAll").click(function(){
+			$("#tree").dynatree("getRoot").visit(function(node){
+				node.expand(false);
+			});
+			return false;
+		});
+		$("#btnExpandAll").click(function(){
+			$("#tree").dynatree("getRoot").visit(function(node){
+				node.expand(true);
+			});
+			return false;
+		});
+		$("#btnSortActive").click(function(){
+			var node = $("#tree").dynatree("getActiveNode");
+			// Custom compare function (optional) that sorts case insensitive
+			var cmp = function(a, b) {
+				a = a.data.title.toLowerCase();
+				b = b.data.title.toLowerCase();
+				return a > b ? 1 : a < b ? -1 : 0;
+			};
+			node.sortChildren(cmp, false);
+		});
+		$("#btnSortAll").click(function(){
+			var node = $("#tree").dynatree("getRoot");
+			node.sortChildren(null, true);
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Dynatree API</h1>
+	<p class="description">
+		This example demonstrates the usage of some DynaTree and DynaTreeNode
+		API functions.
+	</p>
+
+	<p>
+		<a href="#" id="btnExpandAll">Expand all</a> -
+		<a href="#" id="btnCollapseAll">Collapse all</a> -
+		<a href="#" id="btnToggleExpand">Toggle expand</a>
+		<br>
+		<a href="#" id="btnSortAll">Sort tree</a>
+		<a href="#" id="btnSortActive">Sort current node</a>
+		<br>
+		<a href="#" id="btnDisable">Disable</a>
+	</p>
+	<div id="tree">
+		<ul>
+			<li>This simple node (and the following) have been created from html.
+			<li id="id1" title="This is item #1">item1 with key and tooltip
+			<li id="id2">item2 with key 'id2'
+
+			<li id="id3" class="folder">Standard Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+					<li id="id3.2">Sub-item 3.2
+				</ul>
+
+			<li id="id4">item 4. Note that also non-folders (i.e. 'documents') may have child nodes
+				<ul>
+					<li id="id4.1">Sub-item 4.1
+					<li id="id4.2">Sub-item 4.2
+					<li id="id4.3">Sub-item 4.3
+						<ul>
+							<li id="id4.3.1">Sub-item 4.3.1
+							<li id="id4.3.2">Sub-item 4.3.2
+							<ul>
+								<li id="id4.3.2.1">Sub-item 4.3.2.1
+								<li id="id4.3.2.2">Sub-item 4.3.2.2
+							</ul>
+						</ul>
+					<li id="id4.4">Sub-item 4.4
+				</ul>
+
+			<li id="id5" class="expanded folder">Advanced examples
+				<ul>
+					<li data="key: 'node5.1'">item5.1: Using data attribute as an alternative way to specify a key.
+					<li data="key: 'node5.3', isFolder: true">item5.1: Using data attribute as an alternative way to specify a folder.
+					<li id="id5.2">Sub-item 5.2
+					<li>Item without a key. Keys are optional (generated automatically), but may be used in the callbacks
+				</ul>
+		</ul>
+	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+	<div>Focused node: <span id="echoFocused">-</span></div>
+	<p>
+		<button id="btnAddCode">Add nodes programmatically</button>
+		<button id="btnAddObject">Add nodes using arrays</button>
+		<button id="btnActiveNode">Activate item id4.3.2</button>
+		<button id="btnShowActive">Show active node...</button>
+		<button id="btnSetTitle">Set active node title</button>
+		<button id="btnFromDict">Modify active node fom dict</button>
+	</p>
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-contextmenu.html

@@ -0,0 +1,248 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- jquery.contextmenu,  A Beautiful Site (http://abeautifulsite.net/) -->
+	<script src="contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
+	<link href="contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<script type="text/javascript">
+
+	// --- Implement Cut/Copy/Paste --------------------------------------------
+	var clipboardNode = null;
+	var pasteMode = null;
+
+	function copyPaste(action, node) {
+		switch( action ) {
+		case "cut":
+		case "copy":
+			clipboardNode = node;
+			pasteMode = action;
+			break;
+		case "paste":
+			if( !clipboardNode ) {
+				alert("Clipoard is empty.");
+				break;
+			}
+			if( pasteMode == "cut" ) {
+				// Cut mode: check for recursion and remove source
+				var isRecursive = false;
+				var cb = clipboardNode.toDict(true, function(dict){
+					// If one of the source nodes is the target, we must not move
+					if( dict.key == node.data.key )
+						isRecursive = true;
+				});
+				if( isRecursive ) {
+					alert("Cannot move a node to a sub node.");
+					return;
+				}
+				node.addChild(cb);
+				clipboardNode.remove();
+			} else {
+				// Copy mode: prevent duplicate keys:
+				var cb = clipboardNode.toDict(true, function(dict){
+					dict.title = "Copy of " + dict.title;
+					delete dict.key; // Remove key, so a new one will be created
+				});
+				node.addChild(cb);
+			}
+			clipboardNode = pasteMode = null;
+			break;
+		default:
+			alert("Unhandled clipboard action '" + action + "'");
+		}
+	};
+
+	// --- Contextmenu helper --------------------------------------------------
+	function bindContextMenu(span) {
+		// Add context menu to this node:
+		$(span).contextMenu({menu: "myMenu"}, function(action, el, pos) {
+			// The event was bound to the <span> tag, but the node object
+			// is stored in the parent <li> tag
+			var node = $.ui.dynatree.getNode(el);
+			switch( action ) {
+			case "cut":
+			case "copy":
+			case "paste":
+				copyPaste(action, node);
+				break;
+			default:
+				alert("Todo: appply action '" + action + "' to node " + node);
+			}
+		});
+	};
+
+	// --- Init dynatree during startup ----------------------------------------
+
+	$(function(){
+
+		$("#tree").dynatree({
+			persist: true,
+			onActivate: function(node) {
+				$("#echoActivated").text(node.data.title + ", key=" + node.data.key);
+			},
+			onClick: function(node, event) {
+				// Close menu on click
+				if( $(".contextMenu:visible").length > 0 ){
+					$(".contextMenu").hide();
+//					return false;
+				}
+			},
+			onKeydown: function(node, event) {
+				// Eat keyboard events, when a menu is open
+				if( $(".contextMenu:visible").length > 0 )
+					return false;
+
+				switch( event.which ) {
+
+				// Open context menu on [Space] key (simulate right click)
+				case 32: // [Space]
+					$(node.span).trigger("mousedown", {
+						preventDefault: true,
+						button: 2
+						})
+					.trigger("mouseup", {
+						preventDefault: true,
+						pageX: node.span.offsetLeft,
+						pageY: node.span.offsetTop,
+						button: 2
+						});
+					return false;
+
+				// Handle Ctrl-C, -X and -V
+				case 67:
+					if( event.ctrlKey ) { // Ctrl-C
+						copyPaste("copy", node);
+						return false;
+					}
+					break;
+				case 86:
+					if( event.ctrlKey ) { // Ctrl-V
+						copyPaste("paste", node);
+						return false;
+					}
+					break;
+				case 88:
+					if( event.ctrlKey ) { // Ctrl-X
+						copyPaste("cut", node);
+						return false;
+					}
+					break;
+				}
+			},
+			/*Bind context menu for every node when it's DOM element is created.
+			  We do it here, so we can also bind to lazy nodes, which do not
+			  exist at load-time. (abeautifulsite.net menu control does not
+			  support event delegation)*/
+			onCreate: function(node, span){
+				bindContextMenu(span);
+			},
+			/*Load lazy content (to show that context menu will work for new items too)*/
+			onLazyRead: function(node){
+				node.appendAjax({
+					url: "sample-data2.json"
+				});
+			},
+		/* D'n'd, just to show it's compatible with a context menu.
+		   See http://code.google.com/p/dynatree/issues/detail?id=174 */
+		dnd: {
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragStart: function(node) {
+				return true;
+			},
+			onDragEnter: function(node, sourceNode) {
+				if(node.parent !== sourceNode.parent)
+					return false;
+				return ["before", "after"];
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				sourceNode.move(node, hitMode);
+			}
+		}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Context Menu</h1>
+	<p class="description">
+		Implementation of a context menu. Right-click a node and see what happens.<br>
+		Also [space] key is supported to open the menu.<br>
+		<br>
+		This example also demonstrates, how to copy or move branches and how
+		to implement clipboard functionality.
+		<br>
+		A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
+		<code>Ctrl-C</code>, <code>Ctrl-V</code>.
+	</p>
+	<p class="description">
+		This sample uses the jQuery Context Menu Plugin by Cory S.N. LaViska.
+		Visit  <a href="http://abeautifulsite.net/">A Beautiful Site</a> for usage and more information.
+		<br>
+		<b>NOTE:</b></br>
+		I had to <a href="http://code.google.com/p/dynatree/issues/detail?id=174">patch Cory's code</a> in order to make it work. Please understand, that I am not able to support this plugin. There are many other context menus
+		out there :-)
+	</p>
+
+	<!-- Definition of context menu -->
+	<ul id="myMenu" class="contextMenu">
+		<li class="edit"><a href="#edit">Edit</a></li>
+		<li class="cut separator"><a href="#cut">Cut</a></li>
+		<li class="copy"><a href="#copy">Copy</a></li>
+		<li class="paste"><a href="#paste">Paste</a></li>
+		<li class="delete"><a href="#delete">Delete</a></li>
+		<li class="quit separator"><a href="#quit">Quit</a></li>
+	</ul>
+
+	<!-- Definition tree structure -->
+	<div id="tree">
+		<ul>
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2" class="activate">item2: activated on init
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+					<li id="id3.2">Sub-item 3.2
+				</ul>
+
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1">Sub-item 4.1
+					<li id="id4.2">Sub-item 4.2
+				</ul>
+
+			<li id="id5" class="lazy folder">Lazy folder
+		</ul>
+	</div>
+
+	<div>Selected node: <span id="echoActivated">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-contextmenu2.html

@@ -0,0 +1,249 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- jquery.contextmenu,  A Beautiful Site (http://abeautifulsite.net/) -->
+	<!--
+	<script src="contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
+	<link href="contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
+	-->
+	<!-- medialize jQuery contextMenu (http://github.com/medialize/jQuery-contextMenu) -->
+	<!--
+	-->
+	<script src="jq.context/jquery.ui.position.js" type="text/javascript"></script>
+	<script src="jq.context/jquery.contextMenu.js" type="text/javascript"></script>
+	<link href="jq.context/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+
+// --- Implement Cut/Copy/Paste --------------------------------------------
+var clipboardNode = null;
+var pasteMode = null;
+
+function copyPaste(action, node) {
+	switch( action ) {
+	case "cut":
+	case "copy":
+		clipboardNode = node;
+		pasteMode = action;
+		break;
+	case "paste":
+		if( !clipboardNode ) {
+			alert("Clipoard is empty.");
+			break;
+		}
+		if( pasteMode == "cut" ) {
+			// Cut mode: check for recursion and remove source
+			var isRecursive = false;
+			var cb = clipboardNode.toDict(true, function(dict){
+				// If one of the source nodes is the target, we must not move
+				if( dict.key == node.data.key )
+					isRecursive = true;
+			});
+			if( isRecursive ) {
+				alert("Cannot move a node to a sub node.");
+				return;
+			}
+			node.addChild(cb);
+			clipboardNode.remove();
+		} else {
+			// Copy mode: prevent duplicate keys:
+			var cb = clipboardNode.toDict(true, function(dict){
+				dict.title = "Copy of " + dict.title;
+				delete dict.key; // Remove key, so a new one will be created
+			});
+			node.addChild(cb);
+		}
+		clipboardNode = pasteMode = null;
+		break;
+	default:
+		alert("Unhandled clipboard action '" + action + "'");
+	}
+};
+
+// --- Init dynatree during startup ----------------------------------------
+
+$(function(){
+
+$("#tree").dynatree({
+	persist: true,
+	onActivate: function(node) {
+		$("#echoActivated").text(node.data.title + ", key=" + node.data.key);
+	},
+	/*
+	onClick: function(node, event) {
+		// Close menu on click
+		if( $(".contextMenu:visible").length > 0 ){
+			$(".contextMenu").hide();
+//					return false;
+		}
+	},
+	*/
+	onKeydown: function(node, event) {
+		// Eat keyboard events, when a menu is open
+		if( $(".contextMenu:visible").length > 0 ){
+			return false;
+		}
+		switch( event.which ) {
+
+		// Open context menu on [Space] key (simulate right click)
+		case 32: // [Space]
+			$("a", node.span).contextMenu();
+			return false;
+
+		// Handle Ctrl-C, -X and -V
+		case 67:
+			if( event.ctrlKey ) { // Ctrl-C
+				copyPaste("copy", node);
+				return false;
+			}
+			break;
+		case 86:
+			if( event.ctrlKey ) { // Ctrl-V
+				copyPaste("paste", node);
+				return false;
+			}
+			break;
+		case 88:
+			if( event.ctrlKey ) { // Ctrl-X
+				copyPaste("cut", node);
+				return false;
+			}
+			break;
+		}
+	},
+	/*Load lazy content (to show that context menu will work for new items too)*/
+	onLazyRead: function(node){
+		node.appendAjax({
+			url: "sample-data2.json"
+		});
+	},
+	/* D'n'd, just to show it's compatible with a context menu.
+	   See http://code.google.com/p/dynatree/issues/detail?id=174 */
+	dnd: {
+		preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+		onDragStart: function(node) {
+			return true;
+		},
+		onDragEnter: function(node, sourceNode) {
+			if(node.parent !== sourceNode.parent)
+				return false;
+			return ["before", "after"];
+		},
+		onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+			sourceNode.move(node, hitMode);
+		}
+	}
+}); // $.dynatree
+/*
+$(document).on('contextmenu.contextMenu', function(e){
+	alert("on contextmenu");
+});
+*/
+
+// jQuery contextMenu blocks mouse events, so we have to catch them in order to
+// activate the node on click
+$(document).on('mousedown.contextMenu', function(e){
+	var node = $.ui.dynatree.getNode(e.target);
+	window.console && console.log("e: %o, node: %o", e, node);
+	node && node.activate();
+});
+
+$.contextMenu({
+	// bind menu to every dynatree node
+	selector: 'a.dynatree-title',
+	// called for every menu command
+	callback: function(cmd, options) {
+		var node = $.ui.dynatree.getNode(this);
+		window.console && console.log(cmd + " - " + node);
+		node.activate();
+		copyPaste(cmd, node);
+	},
+	items: {
+		"edit": {name: "Edit", icon: "edit"},
+		"cut": {name: "Cut", icon: "cut"},
+		"copy": {name: "Copy", icon: "copy"},
+		"paste": {name: "Paste", icon: "paste"},
+		"delete": {name: "Delete", icon: "delete"},
+		"sep1": "---------",
+		"quit": {name: "Quit", icon: "quit"}
+	}
+}); // $.contextMenu()
+
+}); // $(function){...}
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Context Menu</h1>
+	<p class="description">
+		Implementation of a context menu. Right-click a node and see what happens.<br>
+		Also [space] key is supported to open the menu.<br>
+		<br>
+		This example also demonstrates, how to copy or move branches and how
+		to implement clipboard functionality.
+		<br>
+		A keyboard handler implements Cut, Copy, and Paste with <code>Ctrl-X</code>,
+		<code>Ctrl-C</code>, <code>Ctrl-V</code>.
+	</p>
+	<p class="description">
+		This sample uses the jQuery Context Menu Plugin by Rodney Rehm.
+		Visit  <a href="http://medialize.github.com/jQuery-contextMenu/index.html">the project page at github</a> for usage and more information.
+		<br>
+		<b>NOTE:</b></br>
+		Please understand, that I am not able to support this plugin. There are many other context menus
+		out there :-)
+	</p>
+
+	<!-- Definition tree structure -->
+	<div id="tree">
+		<ul>
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2" class="activate">item2: activated on init
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+					<li id="id3.2">Sub-item 3.2
+				</ul>
+
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1">Sub-item 4.1
+					<li id="id4.2">Sub-item 4.2
+				</ul>
+
+			<li id="id5" class="lazy folder">Lazy folder
+		</ul>
+	</div>
+
+	<div>Selected node: <span id="echoActivated">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-data1.json

@@ -0,0 +1,16 @@
+[
+    {"title": "Item 1"},
+    {"title": "Folder 2", "isFolder": true, "key": "folder2",
+        "children": [
+            {"title": "Sub-item 2.1"},
+			{"title": "Sub-item 2.2"}
+			]
+        },
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+	    "children": [
+		    {"title": "Sub-item 3.1"},
+		    {"title": "Sub-item 3.2"}
+		    ]
+		},
+	{"title": "Item 5"}
+]

assets/plugins/dynatree/doc/sample-data2.json

@@ -0,0 +1 @@
+[ {"title": "SubItem 1", "isLazy": true }, 	{"title": "SubFolder 2", "isFolder": true, "isLazy": true } ]

assets/plugins/dynatree/doc/sample-data3.json

@@ -0,0 +1,41 @@
+[
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+                                            {"title": "Sub-item 2.1.1.1"},
+                                            {"title": "Sub-item 2.1.2.2"},
+                                            {"title": "Sub-item 2.1.1.3"},
+                                            {"title": "Sub-item 2.1.2.4"}
+										]
+								},
+                            {"title": "Sub-item 2.1.2"},
+                            {"title": "Sub-item 2.1.3"},
+                            {"title": "Sub-item 2.1.4"}
+						]
+				},
+            {"title": "Sub-item 2.2"},
+            {"title": "Sub-item 2.3 (lazy)", "isLazy": true }
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+                            {"title": "Sub-item 3.1.1"},
+                            {"title": "Sub-item 3.1.2"},
+                            {"title": "Sub-item 3.1.3"},
+                            {"title": "Sub-item 3.1.4"}
+						]
+				},
+            {"title": "Sub-item 3.2"},
+            {"title": "Sub-item 3.3"},
+            {"title": "Sub-item 3.4"}
+		]
+	},
+    {"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
+    {"title": "Item 5"}
+]

assets/plugins/dynatree/doc/sample-default.html

@@ -0,0 +1,99 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<script type="text/javascript">
+		$(function(){
+			$("#tree").dynatree({
+				// using default options
+			});
+			<!-- Start_Exclude: This block is not part of the sample code -->
+			$("#skinCombo")
+			.val(0) // set state to prevent caching
+			.change(function(){
+				var href = "../src/"
+					+ $(this).val()
+					+ "/ui.dynatree.css"
+					+ "?reload=" + new Date().getTime();
+				$("#skinSheet").attr("href", href);
+			});
+			<!-- End_Exclude -->
+		});
+	</script>
+</head>
+
+<body class="example">
+	<h1>Example: Default</h1>
+	<p class="description">
+		This tree uses default options.<br>
+		It is initalized from a hidden &lt;ul> element on this page.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree">
+		<ul id="treeData" style="display: none;">
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2">item2
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+						<ul>
+							<li id="id3.1.1">Sub-item 3.1.1
+							<li id="id3.1.2">Sub-item 3.1.2
+						</ul>
+					<li id="id3.2">Sub-item 3.2
+						<ul>
+							<li id="id3.2.1">Sub-item 3.2.1
+							<li id="id3.2.2">Sub-item 3.2.2
+						</ul>
+				</ul>
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
+						<ul>
+							<li id="id4.1.1">Sub-item 4.1.1
+							<li id="id4.1.2">Sub-item 4.1.2
+						</ul>
+					<li id="id4.2">Sub-item 4.2
+						<ul>
+							<li id="id4.2.1">Sub-item 4.2.1
+							<li id="id4.2.2">Sub-item 4.2.2
+						</ul>
+				</ul>
+		</ul>
+	</div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-dnd.html

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do thi in production code
+			});
+		},
+		dnd: {
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragStart: function(node) {
+				/** This function MUST be defined to enable dragging for the tree.
+				 *  Return false to cancel dragging of node.
+				 */
+				return true;
+			},
+			onDragEnter: function(node, sourceNode) {
+				/** sourceNode may be null for non-dynatree droppables.
+				 *  Return false to disallow dropping on node. In this case
+				 *  onDragOver and onDragLeave are not called.
+				 *  Return 'over', 'before, or 'after' to force a hitMode.
+				 *  Return ['before', 'after'] to restrict available hitModes.
+				 *  Any other return value will calc the hitMode from the cursor position.
+				 */
+				// Prevent dropping a parent below another parent (only sort
+				// nodes under the same parent)
+				if(node.parent !== sourceNode.parent){
+					return false;
+				}
+				// Don't allow dropping *over* a node (would create a child)
+				return ["before", "after"];
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				/** This function MUST be defined to enable dropping of items on
+				 *  the tree.
+				 */
+				sourceNode.move(node, hitMode);
+			}
+		}
+	});
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>Example: Sort nodes using drag-and-drop</h1>
+	<p class="description">
+		This sample uses Dynatree's built-in drag-and-drop feature to move nodes.<br>
+		- A node may only be dragged under it's original parent.<br>
+		- When dropped, the node is moved to the target.
+	</p>
+
+	<div id="tree"> </div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-dnd2.html

@@ -0,0 +1,125 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<style type="text/css">
+  ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+  };
+</style>
+
+<script type="text/javascript"><!--
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do this in production code
+			});
+		},
+		dnd: {
+			onDragStart: function(node) {
+				/** This function MUST be defined to enable dragging for the tree.
+				 *  Return false to cancel dragging of node.
+				 */
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				// This function is optional.
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				/** sourceNode may be null for non-dynatree droppables.
+				 *  Return false to disallow dropping on node. In this case
+				 *  onDragOver and onDragLeave are not called.
+				 *  Return 'over', 'before, or 'after' to force a hitMode.
+				 *  Return ['before', 'after'] to restrict available hitModes.
+				 *  Any other return value will calc the hitMode from the cursor position.
+				 */
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				/** Return false to disallow dropping this node.
+				 *
+				 */
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				// Prevent dropping a parent below it's own child
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+				// Prohibit creating childs in non-folders (only sorting allowed)
+				if( !node.data.isFolder && hitMode === "over" ){
+					return "after";
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				/** This function MUST be defined to enable dropping of items on
+				 * the tree.
+				 */
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+				// expand the drop target
+//				sourceNode.expand(true);
+			},
+			onDragLeave: function(node, sourceNode) {
+				/** Always called if onDragEnter was called.
+				 */
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>Example: Move nodes using drag-and-drop</h1>
+	<p class="description">
+		This sample uses Dynatree's built-in drag-and-drop feature to move nodes.<br>
+		- autoExpandMS option is used to expand nodes on mouse hover.<br>
+		- The container style uses `overflow: scroll` to demonstrate auto-scrolling.<br>
+		- When dropped, the node is moved to the target.
+	</p>
+
+	<div id="tree"> </div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-dnd3.html

@@ -0,0 +1,269 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+<!--
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
+-->
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<style type="text/css">
+		#draggableSample, #droppableSample {
+			height:100px;
+			padding:0.5em;
+			width:150px;
+			border:1px solid #AAAAAA;
+		}
+		#draggableSample {
+			background-color: silver;
+			color:#222222;
+		}
+		#droppableSample {
+			background-color: maroon;
+			color: white;
+		}
+		#droppableSample.drophover {
+			border: 1px solid green;
+		}
+	</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do thi in production code
+			});
+		},
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				/** This function MUST be defined to enable dragging for the tree.
+				 *  Return false to cancel dragging of node.
+				 */
+				logMsg("tree.onDragStart(%o)", node);
+				if(node.data.isFolder)
+					return false;
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do thi in production code
+			});
+		},
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		onLazyRead: function(node){
+			node.appendAjax({
+				url: "sample-data2.json"
+			});
+		},
+		dnd: {
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				/** sourceNode may be null for non-dynatree droppables.
+				 *  Return false to disallow dropping on node. In this case
+				 *  onDragOver and onDragLeave are not called.
+				 *  Return 'over', 'before, or 'after' to force a hitMode.
+				 *  Any other return value will calc the hitMode from the cursor position.
+				 */
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+//				if(node.data.isFolder)
+//					return false;
+				return true;
+//                return "over";
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				/** Return false to disallow dropping this node.
+				 *
+				 */
+//				 if(node.data.isFolder){
+//					 var dd = $.ui.ddmanager.current;
+//					 dd.cancel();
+//					 alert("folder");
+//				 }
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				/**This function MUST be defined to enable dropping of items on the tree.
+				 * sourceNode may be null, if it is a non-Dynatree droppable.
+				 */
+				logMsg("tree.onDrop(%o, %o)", node, sourceNode);
+				var copynode;
+				if(sourceNode) {
+					copynode = sourceNode.toDict(true, function(dict){
+						dict.title = "Copy of " + dict.title;
+						delete dict.key; // Remove key, so a new one will be created
+					});
+				}else{
+					copynode = {title: "This node was dropped here (" + ui.helper + ")."};
+				}
+				if(hitMode == "over"){
+					// Append as child node
+					node.addChild(copynode);
+					// expand the drop target
+					node.expand(true);
+				}else if(hitMode == "before"){
+					// Add before this, i.e. as child of current parent
+					node.parent.addChild(copynode, node);
+				}else if(hitMode == "after"){
+					// Add after this, i.e. as child of current parent
+					node.parent.addChild(copynode, node.getNextSibling());
+				}
+			},
+			onDragLeave: function(node, sourceNode) {
+				/** Always called if onDragEnter was called.
+				 */
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize simple draggable sample ----------------------------------
+	$("#draggableSample").draggable({
+		revert: true,
+		connectToDynatree: true,
+		cursorAt: { top: -5, left:-5 },
+		helper: "clone"
+	});
+	// --- Initialize simple droppable sample ----------------------------------
+	$("#droppableSample").droppable({
+		hoverClass: "drophover",
+		addClasses: true,
+		over: function(event, ui) {
+			logMsg("droppable.over, %o, %o", event, ui);
+		},
+		drop: function(event, ui) {
+			var source = ui.helper.data("dtSourceNode") || ui.draggable;
+			$(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
+//			alert("dropped");
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>Example: Standard jQuery drag-and-drop</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<table>
+	<thead>
+	<tr>
+		<th>
+		<p>This tree allows dragging.</p>
+		</th>
+		<th>
+		<p>This tree allows dropping.</p>
+		</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr valign="top">
+		<td>
+			<div id="tree"> </div>
+		</td>
+		<td>
+			<div id="tree2"></div>
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<div>Active node: <span id="echoActive">-</span></div>
+		</td>
+		<td>
+			<div>Active node: <span id="echoActive2">-</span></div>
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<div id="draggableSample" class="ui-widget-content">
+				<p>Drag me around</p>
+			</div>
+		</td>
+		<td>
+			<div id="droppableSample" class="ui-widget-content">
+				<p>Drop something here</p>
+			</div>
+		</td>
+	</tr>
+	</tbody>
+	</table>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-effects.html

@@ -0,0 +1,124 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			fx: { height: "toggle", duration: 200 },
+			autoCollapse: true,
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			}
+		});
+		$("#cbAutoCollapse")
+		.attr("checked", true) // set state, to prevent caching
+		.click(function(){
+			var f = $(this).attr("checked");
+			$("#tree").dynatree("option", "autoCollapse", f);
+		});
+		$("#cbEffects")
+		.attr("checked", true) // set state, to prevent caching
+		.click(function(){
+			var f = $(this).attr("checked");
+			if(f){
+				$("#tree").dynatree("option", "fx", { height: "toggle", duration: 200 });
+			}else{
+				$("#tree").dynatree("option", "fx", null);
+			}
+		});
+		$("#skinCombo")
+		.val(0) // set state to prevent caching
+		.change(function(){
+			var href = "../src/"
+				+ $(this).val()
+				+ "/ui.dynatree.css"
+				+ "?reload=" + new Date().getTime();
+			$("#skinSheet").attr("href", href);
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: effects</h1>
+	<p class="description">
+		This sample enables effects to expand/Collapse and sets the
+		<code>autoCollapse</code> option.
+	</p>
+	<div>
+		<input type="checkbox" id="cbAutoCollapse"><label for="cbAutoCollapse">Auto collapse</label>
+		-
+		<input type="checkbox" id="cbEffects"><label for="cbEffects">Use effects</label>
+		-
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+	<div id="tree">
+		<ul style="display: none;">
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2">item2
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+						<ul>
+							<li id="id3.1.1">Sub-item 3.1.1
+							<li id="id3.1.2">Sub-item 3.1.2
+						</ul>
+					<li id="id3.2">Sub-item 3.2
+						<ul>
+							<li id="id3.2.1">Sub-item 3.2.1
+							<li id="id3.2.2">Sub-item 3.2.2
+						</ul>
+				</ul>
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
+						<ul>
+							<li id="id4.1.1">Sub-item 4.1.1
+							<li id="id4.1.2">Sub-item 4.1.2
+						</ul>
+					<li id="id4.2">Sub-item 4.2
+						<ul>
+							<li id="id4.2.1">Sub-item 4.2.1
+							<li id="id4.2.2">Sub-item 4.2.2
+						</ul>
+				</ul>
+		</ul>
+	</div>
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-empty.json

@@ -0,0 +1 @@
+[ ]

assets/plugins/dynatree/doc/sample-events.html

@@ -0,0 +1,151 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			title: "Event samples",
+//			checkbox: true,
+//			persist: true,
+			onQueryActivate: function(activate, node) {
+				logMsg("onQueryActivate(%o, %o)", activate, node);
+//				return false;
+			},
+			onActivate: function(node) {
+				logMsg("onActivate(%o)", node);
+				$("#echoActive").text(node.data.title);
+				if( node.data.url )
+					window.open(node.data.url);
+			},
+			onDeactivate: function(node) {
+				logMsg("onDeactivate(%o)", node);
+				$("#echoActive").text("-");
+			},
+
+			onQuerySelect: function(select, node) {
+				logMsg("onQuerySelect(%o, %o)", select, node);
+				if( node.data.isFolder )
+					return false;
+			},
+			onSelect: function(select, node) {
+				logMsg("onSelect(%o, %o)", node);
+				var s = node.tree.getSelectedNodes().join(", ");
+				$("#echoSelected").text(s);
+			},
+
+			onQueryExpand: function(expand, node) {
+				logMsg("onQueryExpand(%o, %o)", expand, node);
+//				return false;
+			},
+			onExpand: function(expand, node) {
+				logMsg("onExpand(%o, %o)", expand, node);
+			},
+
+			onLazyRead: function(node) {
+				logMsg("onLazyRead(%o)", node);
+			},
+
+			onFocus: function(node) {
+				logMsg("onFocus(%o)", node);
+				$("#echoFocused").text(node.data.title);
+				// Auto-activate focused node after 2 seconds
+				node.scheduleAction("activate", 2000);
+			},
+			onBlur: function(node) {
+				logMsg("onBlur(%o)", node);
+				$("#echoFocused").text("-");
+			},
+
+			onClick: function(node, event) {
+				logMsg("onClick(%o, %o)", node, event);
+				if( event.shiftKey && node.isLazy )
+					alert("ctrl");
+				//return false;
+			},
+			onDblClick: function(node, event) {
+				logMsg("onDblClick(%o, %o)", node, event);
+				node.toggleSelect();
+			},
+			onKeydown: function(node, event) {
+				logMsg("onKeydown(%o, %o)", node, event);
+				switch( event.which ) {
+				case 32: // [space]
+					node.toggleSelect();
+					return false;
+				}
+			},
+			onKeypress: function(node, event) {
+				logMsg("onKeypress(%o, %o)", node, event);
+			}
+		});
+
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Events</h1>
+	<p class="description">
+		Implements all callbacks.<br>
+		Use the Firebug plugin in Firefox to see the event log.<br>
+		The 'links' folders contain nodes with an custom data.url option.
+		This is used to open the URL in the onActivate event. <br>
+		Note: the lazy reading is not implemented in this example.<br>
+		A focused node will automatically be activated after 2 seconds (use the
+		keyboard to try this out).
+	</p>
+
+	<div id="tree">
+		<ul>
+			<li class="folder">jQuery links
+				<ul>
+					<li data="url: 'http://jquery.com'">jQuery home
+					<li data="url: 'http://docs.jquery.com'">jQuery docs
+				</ul>
+
+			<li class="folder">Other links
+				<ul>
+					<li data="url: 'http://code.google.com'">Google Code
+				</ul>
+
+			<li class="folder">Lazy loading
+				<ul>
+					<li id="k123" class="lazy">This is a lazy loading document with key k123.
+					<li id="k234" class="lazy folder">This is a lazy loading folder with key k234.
+				</ul>
+		</ul>
+	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+	<div>Selected node list: <span id="echoSelected">-</span></div>
+	<div>Focused node: <span id="echoFocused">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-form.html

@@ -0,0 +1,113 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			checkbox: true,
+			// Override class name for checkbox icon, so rasio buttons are displayed:
+			//classNames: {checkbox: "dynatree-radio"},
+			// Select mode 3: multi-hier
+			selectMode: 3,
+			children: [
+				{title: "Item 1", key: "node1"},
+				{title: "Folder 2", isFolder: true, key: "node2",
+					children: [
+						{title: "Sub-item 2.1", key: "node2.1"},
+						{title: "Sub-item 2.2", key: "node2.2"}
+					]
+				},
+				{title: "Item 3", key: "node3"}
+			]
+		});
+		$("form").submit(function() {
+			// Serialize standard form fields:
+			var formData = $(this).serializeArray();
+
+			// then append Dynatree selected 'checkboxes':
+			var tree = $("#tree").dynatree("getTree");
+			formData = formData.concat(tree.serializeArray());
+
+			// and/or add the active node as 'radio button':
+			if(tree.getActiveNode()){
+				formData.push({name: "activeNode", value: tree.getActiveNode().data.key});
+			}
+
+			alert("POSTing this:\n" + jQuery.param(formData));
+
+			$.post("http://127.0.0.1:8001/submit_data",
+				   formData,
+				   function(response, textStatus, xhr){
+					   alert("POST returned " + response + ", " + textStatus);
+				   }
+			);
+			return false;
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Form</h1>
+	<p class="description">
+		This checkbox tree is embedded in a form.
+		The [Submit] handler serializes the selected tree nodes as if they were
+		standard checkboxes.<br>
+		The values are then POSTed to the server (together with the other form
+		elements).
+	</p>
+	<!--
+	<form action="http://127.0.0.1:8001/submit_data" method="POST">
+	 -->
+	<form>
+		Username: <input type="text" name="userName" />
+		<br>
+		<textarea name="comment"></textarea>
+		<br>
+		<input type="radio" name="rb1" value="foo" checked> Foo
+		<input type="radio" name="rb1" value="bar"> Bar
+		<input type="radio" name="rb1" value="baz"> Baz
+		<br>
+		<input type="checkbox" name="cb1" value="John" checked>John
+		<input type="checkbox" name="cb1" value="Paul">Paul
+		<input type="checkbox" name="cb1" value="George">George
+		<input type="checkbox" name="cb1" value="Ringo">Ringo
+		<br>
+
+		<!-- The name attribute is used by tree.serializeArray()  -->
+		<div id="tree" name="selNodes">
+		</div>
+
+		<input type="submit" value="Send data">
+	</form>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-iframe-1.html

@@ -0,0 +1,43 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<meta name="robots" content="noindex,follow">
+
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		$("#btnExpand").click(function(){
+			var $tree = parent.$("#tree");
+			var rootNode = parent.$("#tree").dynatree("getRoot");
+			parent.logMsg("%o", rootNode);
+			parent.$("#tree").dynatree("getRoot").visit(function(node){
+				node.toggleExpand();
+				});
+		});
+	});
+	</script>
+</head>
+
+<body class="example">
+	<p class="description">
+		This page lives inside an iframe<br>
+		Click a link in the tree to load some content here.
+		<br>
+		This button demonstrates, ho to access a tree in another frame:
+		<button id="btnExpand">Toggle tree</button>
+		<br>
+		View the source of <a href="sample-iframe-1.html" target="_blank">this iframe content</a>,
+		to see how it can be done.
+	</p>
+</body>
+</html>

assets/plugins/dynatree/doc/sample-iframe.html

@@ -0,0 +1,124 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+   <style type="text/css">
+		#tree {
+			vertical-align: top;
+			width: 250px;
+		}
+		iframe {
+			border: 1px dotted gray;
+		}
+	</style>
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		// Attach the dynatree widget to an existing <div id="tree"> element
+		// and pass the tree options as an argument to the dynatree() function:
+		$("#tree").dynatree({
+//          autoCollapse: true,
+			minExpandLevel: 1,
+//          persist: true,
+			onPostInit: function(isReloading, isError) {
+				this.reactivate();
+			},
+			onActivate: function(node) {
+				// Use <a> href and target attributes to load the content:
+				if( node.data.href ){
+					// Open target
+					window.open(node.data.href, node.data.target);
+					// or open target in iframe
+//                $("[name=contentFrame]").attr("src", node.data.href);
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body class="example">
+	<h1>Example: URL navigation and iframes</h1>
+	<p class="description">
+		This sample shows, how to use dynatree as a navigation menu.<br>
+		The tree initialisation uses <code>&lt;a href='URL', target='TARGET'>title&lt;/a></code>
+		tags.<br>
+		The <code>onActivate</code> handler then uses <code>node.data.href</code>
+		to open the the pages in the embedded iframe.<br>
+		Note that the navigation will fallback to standard HTML links,
+		when JavaScript is disabled.<br>
+		<br>
+		The [Toggle tree] button in the embedded welcome page also gives an example on
+		how to access a tree that exists outside the own frame.
+	</p>
+
+	<table>
+	<colgroup>
+		<col width="300px" valign="top">
+		<col width="90%">
+	</colgroup>
+	<tr>
+		<td valign="top">
+			<!-- Add a <div> element where the tree should appear: -->
+			<div id="tree">
+			<ul>
+				<li class="expanded folder">Search engines
+				<ul>
+					<li><a href="http://www.google.com" target="contentFrame">Google (target='contentFrame')</a>
+					<li><a href="http://www.google.com" target="_self">Google (target='_self')</a>
+					<li><a href="http://www.google.com" target="_top" title="This link replaces the current page">Google (target='_top')</a>
+					<li><a href="http://www.bing.com" target="contentFrame">Bing</a>
+					<li><a href="http://www.wolframalpha.com/" target="contentFrame">WolframAlpha</a>
+				</ul>
+				<li class="expanded folder">jQuery
+				<ul>
+					<li><a href="http://www.jquery.com/" target="contentFrame">jQuery</a>
+					<li><a href="http://ui.jquery.com/" target="contentFrame">jQuery UI</a>
+					<li><a href="http://api.jquery.com/" target="contentFrame">API browser</a>
+					<li><a href="http://code.google.com/p/dynatree/" target="contentFrame">Dynatree</a>
+				</ul>
+				<li class="expanded folder">Misc
+				<ul>
+					<li><a href="sample-iframe-1.html" target="contentFrame">Welcome</a>
+				</ul>
+			</ul>
+			</div>
+		</td>
+
+		<td>
+			<iframe src="sample-iframe-1.html" name="contentFrame" width="100%" height="500"
+					scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
+			  <p>Your browser does not support iframes</p>
+			</iframe>
+		</td>
+	</tr>
+	</table>
+
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-init-lazy.html

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			// In real life we would call a URL on the server like this:
+//          initAjax: {
+//              url: "/getTopLevelNodesAsJson",
+//              data: { mode: "funnyMode" }
+//              },
+			// .. but here we use a local file instead:
+			initAjax: {
+				url: "sample-data1.json"
+				},
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Init from Ajax request</h1>
+	<p class="description">
+		This sample initializes the tree from a JSON request.
+	</p>
+
+	<!-- Add a <div> element where the tree should appear: -->
+	<div id="tree">	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-inline-edit.html

@@ -0,0 +1,129 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Editable nodes</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+/**
+ * Implement inline editing for a dynatree node
+ */
+function editNode(node){
+	var prevTitle = node.data.title,
+		tree = node.tree;
+	// Disable dynatree mouse- and key handling
+	tree.$widget.unbind();
+	// Replace node with <input>
+	$(".dynatree-title", node.span).html("<input id='editNode' value='" + prevTitle + "'>");
+	// Focus <input> and bind keyboard handler
+	$("input#editNode")
+		.focus()
+		.keydown(function(event){
+			switch( event.which ) {
+			case 27: // [esc]
+				// discard changes on [esc]
+				$("input#editNode").val(prevTitle);
+				$(this).blur();
+				break;
+			case 13: // [enter]
+				// simulate blur to accept new value
+				$(this).blur();
+				break;
+			}
+		}).blur(function(event){
+			// Accept new value, when user leaves <input>
+			var title = $("input#editNode").val();
+			node.setTitle(title);
+			// Re-enable mouse and keyboard handlling
+			tree.$widget.bind();
+			node.focus();
+		});
+}
+
+// ----------
+
+$(function(){
+	var isMac = /Mac/.test(navigator.platform);
+	$("#tree").dynatree({
+		title: "Event samples",
+		onClick: function(node, event) {
+			if( event.shiftKey ){
+				editNode(node);
+				return false;
+			}
+		},
+		onDblClick: function(node, event) {
+			editNode(node);
+			return false;
+		},
+		onKeydown: function(node, event) {
+			switch( event.which ) {
+			case 113: // [F2]
+				editNode(node);
+				return false;
+			case 13: // [enter]
+				if( isMac ){
+					editNode(node);
+					return false;
+				}
+			}
+		}
+	});
+});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: edit nodes</h1>
+	<p class="description">
+		Demos how to edit node titles with<br>
+		- dblclick<br>
+		- Shift + click<br>
+		- [F2]<br>
+		- [Enter] (on Mac)<br>
+	</p>
+
+	<div id="tree">
+		<ul>
+			<li class="folder">Folder 1
+				<ul>
+					<li>Node 1
+					<li>Node 2
+					<li>Node 3
+				</ul>
+
+			<li class="folder">Folder 2
+				<ul>
+					<li>Node 1
+					<li>Node 2
+					<li>Node 3
+				</ul>
+		</ul>
+	</div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-lazy.html

@@ -0,0 +1,136 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+
+		// --- Initialize sample trees
+		$("#tree").dynatree({
+			title: "Lazy loading sample",
+			fx: { height: "toggle", duration: 200 },
+			autoFocus: false, // Set focus to first child, when expanding or lazy-loading.
+			// In real life we would call a URL on the server like this:
+//          initAjax: {
+//              url: "/getTopLevelNodesAsJson",
+//              data: { mode: "funnyMode" }
+//              },
+			// .. but here we use a local file instead:
+			initAjax: {
+				url: "sample-data3.json"
+				},
+
+			onActivate: function(node) {
+				$("#echoActive").text("" + node + " (" + node.getKeyPath()+ ")");
+			},
+
+			onLazyRead: function(node){
+				// In real life we would call something like this:
+//            	node.appendAjax({
+//            	    url: "/getChildrenAsJson",
+//		            data: {key: node.data.key,
+//            		       mode: "funnyMode"
+//                         }
+//              });
+				// .. but here we use a local file instead:
+				node.appendAjax({
+					url: "sample-data2.json",
+					// We don't want the next line in production code:
+					debugLazyDelay: 750
+				});
+			}
+		});
+		$("#btnReloadActive").click(function(){
+			var node = $("#tree").dynatree("getActiveNode");
+			if( node && node.isLazy() ){
+				node.reloadChildren(function(node, isOk){
+				});
+			}else{
+				alert("Please activate a lazy node first.");
+			}
+	   });
+		$("#btnLoadKeyPath").click(function(){
+			var tree = $("#tree").dynatree("getTree");
+			// Make sure that node #_27 is loaded, by traversing the parents.
+			// The callback is executed for every node as we go:
+			tree.loadKeyPath("/folder4/_23/_26/_27", function(node, status){
+				if(status == "loaded") {
+					// 'node' is a parent that was just traversed.
+					// If we call expand() here, then all nodes will be expanded
+					// as we go
+					node.expand();
+				}else if(status == "ok") {
+					// 'node' is the end node of our path.
+					// If we call activate() or makeVisible() here, then the
+					// whole branch will be exoanded now
+					node.activate();
+				}
+			});
+	   });
+		<!-- Start_Exclude: This block is not part of the sample code -->
+		$("#skinCombo")
+		.val(0) // set state to prevent caching
+		.change(function(){
+			var href = "../src/"
+				+ $(this).val()
+				+ "/ui.dynatree.css"
+				+ "?reload=" + new Date().getTime();
+			$("#skinSheet").attr("href", href);
+		});
+		<!-- End_Exclude -->
+	});
+</script>
+</head>
+
+<body class="example">
+<h1>Example: Lazy loading</h1>
+<p class="description">Using 'lazy' option to load the tree and to load the
+branches.<br>
+<br>
+You may want to try this <a href="sample-lazy-persist.html">live example</a> of
+a lazy tree that uses a simple test server.
+</p>
+<div>
+	Skin:
+	<select id="skinCombo" size="1">
+		<option value="skin">Standard ('/skin/')</option>
+		<option value="skin-vista">Vista ('/skin-vista/')</option>
+	</select>
+</div>
+<div id="tree"><!-- When using initAjax, it may be nice to put a throbber here, that spins until the initial content is loaded: -->
+</div>
+
+<div>Active node: <span id="echoActive">-</span></div>
+<p>
+	<button id="btnReloadActive">Reload active node...</button>
+	<button id="btnLoadKeyPath">Load node by path '/folder4/_23/_26/_27'...</button>
+</p>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-minexpand.html

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		$("#tree1").dynatree({
+			initAjax: {
+				url: "sample-data3.json"
+			},
+			onActivate: function(node) {
+				logMsg("Activated %o", node);
+			},
+			minExpandLevel: 1
+		});
+		$("#tree2").dynatree({
+			initAjax: {
+				url: "sample-data3.json"
+			},
+			onActivate: function(node) {
+				logMsg("Activated %o", node);
+			},
+			minExpandLevel: 2
+		});
+		$("#tree3").dynatree({
+			initAjax: {
+				url: "sample-data3.json"
+			},
+			onActivate: function(node) {
+				logMsg("Activated %o", node);
+			},
+			minExpandLevel: 3
+		});
+	});
+	</script>
+</head>
+
+<body class="example">
+	<h1>Example: Expand level</h1>
+
+	<!-- Add a <div> element where the tree should appear: -->
+	<p class="description">minExpandLevel=1<br>
+	This is the default option.</p>
+	<div id="tree1"> </div>
+
+	<hr>
+	<p class="description">minExpandLevel=2<br>
+	Top-level nodes are always expanded, so the expander icon is hidden.</p>
+	<div id="tree2"> </div>
+
+	<hr>
+	<p class="description">minExpandLevel=3.</p>
+	<div id="tree3"> </div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-multiline.html

@@ -0,0 +1,259 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<style>
+	span.ws-wrap span.dynatree-title { white-space: normal; }
+	span.ws-nowrap span.dynatree-title { white-space: nowrap; }
+	span.ws-pre span.dynatree-title { white-space: pre; }
+</style>
+<script type="text/javascript">
+	function drawCanvas() {
+		var canvas = document.getElementById("canvas1");
+		if(canvas && canvas.getContext) {
+			canvas = canvas.getContext("2d");
+			var lingrad = canvas.createLinearGradient( 0, 0, 0, 150 );
+			lingrad.addColorStop( 0, "#0099cc" );
+			lingrad.addColorStop( 0.5, "#fff" );
+			lingrad.addColorStop( 0.5, "#99cc00");
+			lingrad.addColorStop( 1, "#0099ff");
+			canvas.fillStyle = lingrad;
+			canvas.fillRect(0, 0, 400 ,100 );
+			canvas.fillStyle = "rgb(200,0,0)";
+			canvas.fillRect( 10, 10, 55, 55 );
+		}
+	}
+
+	$(function(){
+		// Initialize the tree inside the <div>element.
+		// The tree structure is read from the contained <ul> tag.
+		$("#tree").dynatree({
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+				if(node.data.key == "canvasNode1")
+					drawCanvas();
+			},
+			onDeactivate: function(node) {
+				$("#echoSelected").text("-");
+			}
+		});
+		// Dynatree renders nodes 'lazily', i.e. when they are first expanded.
+		// So we to use live event binding for embedded elements.
+		$("#btn1").live("click", function(){
+			alert("Thank you for clicking.");
+			return false;
+		});
+	});
+</script>
+</head>
+<body class="example">
+	<h1>Example: formatted and multi-line titles</h1>
+	<p class="description">
+		This example shows how multi-line and non-text contents is displayed.
+		<br>
+		The 'noLink' node-option is used for single nodes to make the form and
+		HTML5 elements clickable.
+	</p>
+
+	<div id="tree">
+		<ul>
+			<li>Using some <b>bold</b> markup in the text (&lt;li&gt; tag only).
+			<li><span>Using some <b>bold</b> markup in the text (&lt;li&gt;&lt;span&gt; tag).</span>
+
+			<li class="folder">Long paragraph, with H3, P, and BR
+				<ul>
+					<li><span><h3>Title</h3>
+					<p>
+					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
+					diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					<br>
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua.
+					<br>
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+					tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					<br>
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					</p>
+					</span>
+					<li>Node 2
+				</ul>
+
+			<li class="folder">Long line (nowrap)
+				<ul>
+					<li class="noLink"><span>
+					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
+					diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+					tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					</span>
+					<li>Node 2
+				</ul>
+
+			<li class="folder">Long line (wrapping)
+				<ul>
+					<li class="noLink" data="addClass: 'ws-wrap'"><span>
+					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
+					diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+					tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					</span>
+					<li>Node 2
+				</ul>
+
+			<li class="folder">Long line (pre formatted)
+				<ul>
+					<li class="noLink" data="addClass: 'ws-pre'"><span>
+					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed
+					diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+					tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+					</span>
+					<li>Node 2
+				</ul>
+
+			<li class="folder">Long text using BR and P
+				<ul>
+					<li class="noLink"><span>
+					<p>
+					Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed <br>
+					diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  <br>
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
+					</p>
+					<p>
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit  <br>
+					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam  <br>
+					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  <br>
+					sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br>
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
+					</p>
+					<p>
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  <br>
+					tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br>
+					At vero eos et accusam et justo duo dolores et ea rebum.  <br>
+					</p>
+					<p>
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
+					</p>
+					</span>
+					<li>Node 2
+				</ul>
+
+			<li class="folder">Form elements
+				<ul>
+					<li class="noLink"><span>
+						Name: <input type="text" name="name2" />
+						</span>
+					<li class="noLink"><span>
+						Comment:<br><textarea name="comment2"></textarea>
+						</span>
+					<li class="noLink" data="icon: false"><span>
+						<input type="radio" id="rb1_1" name="rb1" value="v1" checked>
+						  <label for="rb1_1">Foo</label>
+						<input type="radio" id="rb1_2" name="rb1" value="v2">
+						  <label for="rb1_2">Bar</label>
+						<input type="radio" id="rb1_3" name="rb1" value="v3">
+						  <label for="rb1_3">Baz</label>
+						</span>
+					<li class="noLink"><span>
+						<button id="btn1" value="123">Click me</button>
+						</span>
+				</ul>
+
+			<li class="folder">Canvas
+				<ul>
+					<li class="noLink" id="canvasNode1" data="icon: false"><span>
+						Click below to draw:<br>
+						<canvas id="canvas1" width="400" height="100">
+						Your browser does not support the <code>canvas</code> element.
+						</canvas>
+						</span>
+				</ul>
+
+			<li class="folder">Video
+				<ul>
+					<li class="noLink"><span>
+						<video src="http://www.w3schools.com/html5/movie.ogg"
+							controls="controls"
+							NO_autoplay
+							>
+						  Your browser does not support the <code>video</code> element.
+						</video>
+						</span>
+				</ul>
+
+			<li class="folder">Audio
+				<ul>
+					<li class="noLink"><span>
+						<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
+							controls="controls"
+							NO_autoplay>
+						  Your browser does not support the <code>audio</code> element.
+						</audio>
+					</span>
+				</ul>
+
+			<li>item3
+		</ul>
+	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-persist.html

@@ -0,0 +1,107 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			persist: true,
+			checkbox: true,
+			selectMode: 3,
+			onPostInit: function(isReloading, isError) {
+			   logMsg("onPostInit(%o, %o)", isReloading, isError);
+			   // Re-fire onActivate, so the text is update
+			   this.reactivate();
+			},
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			},
+			onDblClick: function(node, event) {
+				logMsg("onDblClick(%o, %o)", node, event);
+				node.toggleExpand();
+			}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Persist</h1>
+	<p class="description">
+		Cookie persistence is enabled here.<br>
+		Also, double-click handler expands document nodes.<br>
+		Select a node and hit [F5] to refresh, to see how the active node and
+		expansion and selection states are restored.<br>
+		<br>
+		NOTE: if this doesn't seem to work, it's probably because the frame
+		content is cached by the browser.<br>
+		Try this example as an
+		<a href="#" target="_blank">unframed page</a>.
+	</p>
+
+	<!-- Tree container -->
+	<div id="tree">
+		<ul>
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2">item2
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+						<ul>
+							<li id="id3.1.1">Sub-item 3.1.1
+							<li id="id3.1.2">Sub-item 3.1.2
+						</ul>
+					<li id="id3.2">Sub-item 3.2
+						<ul>
+							<li id="id3.2.1">Sub-item 3.2.1
+							<li id="id3.2.2">Sub-item 3.2.2
+						</ul>
+				</ul>
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
+						<ul>
+							<li id="id4.1.1">Sub-item 4.1.1
+							<li id="id4.1.2">Sub-item 4.1.2
+						</ul>
+					<li id="id4.2">Sub-item 4.2
+						<ul>
+							<li id="id4.2.1">Sub-item 4.2.1
+							<li id="id4.2.2">Sub-item 4.2.2
+						</ul>
+				</ul>
+		</ul>
+	</div>
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-pyserver.html

@@ -0,0 +1,184 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Local Server</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	var _activeKey = null,
+		debugDelay = 5; // seconds
+	$(function(){
+
+		$("#tree").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
+			  _log("debug", "ajaxComplete: %o", this); // dom element listening
+			});
+
+		// --- Initialize sample trees
+		$("#tree").dynatree({
+			persist: true,
+			checkbox: true,
+			selectMode: 3,
+			onPostInit: function(isReloading, isError) {
+//				alert("reloading: "+isReloading+", error:"+isError);
+			   logMsg("onPostInit(%o, %o) - %o", isReloading, isError, this);
+			   // Re-fire onActivate, so the text is updated
+			   this.reactivate();
+			},
+			fx: { height: "toggle", duration: 200 },
+			// initAjax is hard to fake, so we pass the children as object array:
+			initAjax: {url: "http://127.0.0.1:8001",
+					   dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
+					   timeout: 10000, // timeout, otherwise 'connection refused' is not recognized if server is not running
+					   data: {key: "",
+							  sleep: debugDelay,
+//	                          returnEmpty: true,
+//							  depth: 3,
+							  mode: "baseFolders"
+							  },
+					   addExpandedKeyList: true // Send list of expanded keys, so the webservice can deliver these children also
+					   },
+			onLazyRead: function(node){
+				node.appendAjax(
+					{url: "http://127.0.0.1:8001",
+					 dataType: "jsonp", // Enable JSONP, so this sample can be run from the local file system against a localhost server
+					 data: {key: node.data.key,
+							sleep: debugDelay,
+//							returnEmpty: true,
+							mode: "branch"
+							}
+				});
+			},
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.tooltip + ", key=" + node.data.key);
+				_activeKey = node.data.key;
+			},
+			dnd: {
+				onDragStart: function(node) {
+					/** This function MUST be defined to enable dragging for the tree.
+					 *  Return false to cancel dragging of node.
+					 */
+					logMsg("tree.onDragStart(%o)", node);
+					return true;
+				},
+				onDragStop: function(node) {
+					// This function is optional.
+					logMsg("tree.onDragStop(%o)", node);
+				},
+				autoExpandMS: 1000,
+				preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+				onDragEnter: function(node, sourceNode) {
+					/** sourceNode may be null for non-dynatree droppables.
+					 *  Return false to disallow dropping on node. In this case
+					 *  onDragOver and onDragLeave are not called.
+					 *  Return 'over', 'before, or 'after' to force a hitMode.
+					 *  Return ['before', 'after'] to restrict available hitModes.
+					 *  Any other return value will calc the hitMode from the cursor position.
+					 */
+					logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+					return true;
+				},
+				onDragOver: function(node, sourceNode, hitMode) {
+					/** Return false to disallow dropping this node.
+					 *
+					 */
+					logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+					// Prevent dropping a parent below it's own child
+					if(node.isDescendantOf(sourceNode)){
+						return false;
+					}
+					// Prohibit creating childs in non-folders (only sorting allowed)
+	//				if( !node.isFolder && hitMode == "over" )
+	//					return "after";
+				},
+				onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+					/** This function MUST be defined to enable dropping of items on
+					 * the tree.
+					 */
+					logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+					sourceNode.move(node, hitMode);
+					// expand the drop target
+	//				sourceNode.expand(true);
+				},
+				onDragLeave: function(node, sourceNode) {
+					/** Always called if onDragEnter was called.
+					 */
+					logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+				}
+			}
+		});
+
+		$("#btnReload").click(function(){
+			$("#tree").dynatree("getTree").reload();
+			return false;
+		});
+		$("#btnReloadNode").click(function(){
+			$("#tree").dynatree("getTree").getNodeByKey(_activeKey).reloadChildren();
+			return false;
+		});
+
+
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Lazy loading with a (local) HTTP test server</h1>
+	<p class="description">
+		Using <code>initAjax</code> option to initialize the tree using Ajax.<br>
+		The folders have the <code>isLazy</code> option set, so that they are also
+		loaded 'on demand', when expanded.<br>
+		<br>
+		Using <code>persist: true</code> and <code>initAjax: { addExpandedKeyList: true }</code>
+		we also support 'lazy persistence' (which has to be supported by the
+		web service, of course).<br>
+		<br>
+		Note:<br>
+		This sample assumes that a Dynatree Web Service is running at http://127.0.0.1:8001.<br>
+		See <a href="dynatree_server.py">dynatree_server.py</a> for a sample
+		server implementation.<br>
+		<br>
+		Note also:<br>
+		We have to enable JSONP using the option <code>initAjax: { dataType: 'jsonp' }</code>,
+		because Ajax calls will fail, if the originating HTML page and the web
+		service do not reside on the same host.<br>
+		In our case may have this sample page on the local file system and the
+		web service runs on 127.0.0.1.
+	</p>
+
+	<div id="tree">
+		<!-- When using initAjax, it may be nice to put a throbber here, that spins until the initial content is loaded: -->
+		Loading...
+	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<p>
+		<button id="btnReload">Reload tree</button>
+		<button id="btnReloadNode">Reload active node</button>
+	</p>
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-quick.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		// Attach the dynatree widget to an existing <div id="tree"> element
+		// and pass the tree options as an argument to the dynatree() function:
+		$("#tree").dynatree({
+			onActivate: function(node) {
+				// A DynaTreeNode object is passed to the activation handler
+				// Note: we also get this event, if persistence is on, and the page is reloaded.
+				alert("You activated " + node.data.title);
+			},
+			children: [
+				{title: "Item 1"},
+				{title: "Folder 2", isFolder: true, key: "folder2",
+					children: [
+						{title: "Sub-item 2.1"},
+						{title: "Sub-item 2.2"}
+					]
+				},
+				{title: "Item 3"}
+			]
+		});
+	});
+	</script>
+</head>
+<body class="example">
+	<h1>Example: Quick start</h1>
+	<p class="description">
+		This sample initializes the tree from a JavaScript object.<br>
+		An <i>onActivate</i> handler brings up an alert box when a node is selected.
+	</p>
+
+	<!-- Add a <div> element where the tree should appear: -->
+	<div id="tree"> </div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-rtl.html

@@ -0,0 +1,130 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+	<style type="text/css">
+		.dynatree-container.dynatree-rtl .dynatree-title {
+			unicode-bidi: bidi-override; /* optional: reverse title letters */
+		}
+		ul.dynatree-container.dynatree-rtl ul {
+			padding: 0 16px 0 0;
+		}
+		ul.dynatree-container.dynatree-rtl li {
+			background-position: right 0;
+			background-image: url("../src/skin/vline-rtl.gif");
+		}
+		.dynatree-container.dynatree-rtl span.dynatree-connector,
+		.dynatree-container.dynatree-rtl span.dynatree-expander,
+		.dynatree-container.dynatree-rtl span.dynatree-icon,
+		.dynatree-container.dynatree-rtl span.dynatree-drag-helper-img,
+		.dynatree-container.dynatree-rtl #dynatree-drop-marker {
+			background-image: url("../src/skin/icons-rtl.gif");
+		}
+	</style>
+	<script type="text/javascript">
+		$(function(){
+			$("#tree").dynatree({
+				dnd: {
+					onDragStart: function(node) {
+						return true;
+					},
+					onDragEnter: function(node, sourceNode) {
+						return true;
+					},
+					onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+						sourceNode.move(node, hitMode);
+					}
+				},
+				onPostInit: function(){
+					// Set RTL attribute on init
+					this.$tree.find("ul.dynatree-container").attr("DIR", "RTL").addClass("dynatree-rtl");
+				}
+			});
+			<!-- Start_Exclude: This block is not part of the sample code -->
+			$("#skinCombo")
+			.val(0) // set state to prevent caching
+			.change(function(){
+				var href = "../src/"
+					+ $(this).val()
+					+ "/ui.dynatree.css"
+					+ "?reload=" + new Date().getTime();
+				$("#skinSheet").attr("href", href);
+			});
+			<!-- End_Exclude -->
+		});
+	</script>
+</head>
+
+<body class="example">
+	<h1>Example: RTL</h1>
+	<p class="description">
+		This tree uses some extra styles to provide RTL support (experimental).
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree">
+		<ul id="treeData" style="display: none;">
+			<li id="id1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="id2">item2
+			<li id="id3" class="folder">Folder with some children
+				<ul>
+					<li id="id3.1">Sub-item 3.1
+						<ul>
+							<li id="id3.1.1">Sub-item 3.1.1
+							<li id="id3.1.2">Sub-item 3.1.2
+						</ul>
+					<li id="id3.2">Sub-item 3.2
+						<ul>
+							<li id="id3.2.1">Sub-item 3.2.1
+							<li id="id3.2.2">Sub-item 3.2.2
+						</ul>
+				</ul>
+			<li id="id4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
+						<ul>
+							<li id="id4.1.1">Sub-item 4.1.1
+							<li id="id4.1.2">Sub-item 4.1.2
+						</ul>
+					<li id="id4.2">Sub-item 4.2
+						<ul>
+							<li id="id4.2.1">Sub-item 4.2.1
+							<li id="id4.2.2">Sub-item 4.2.2
+						</ul>
+				</ul>
+		</ul>
+	</div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-select.html

@@ -0,0 +1,306 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	var treeData = [
+		{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
+		{title: "item2: selected on init", select: true },
+		{title: "Folder", isFolder: true, key: "id3",
+			children: [
+				{title: "Sub-item 3.1",
+					children: [
+						{title: "Sub-item 3.1.1", key: "id3.1.1" },
+						{title: "Sub-item 3.1.2", key: "id3.1.2" }
+					]
+				},
+				{title: "Sub-item 3.2",
+					children: [
+						{title: "Sub-item 3.2.1", key: "id3.2.1" },
+						{title: "Sub-item 3.2.2", key: "id3.2.2" }
+					]
+				}
+			]
+		},
+		{title: "Document with some children (expanded on init)", key: "id4", expand: true,
+			children: [
+				{title: "Sub-item 4.1 (active on init)", activate: true,
+					children: [
+						{title: "Sub-item 4.1.1", key: "id4.1.1" },
+						{title: "Sub-item 4.1.2", key: "id4.1.2" }
+					]
+				},
+				{title: "Sub-item 4.2 (selected on init)", select: true,
+					children: [
+						{title: "Sub-item 4.2.1", key: "id4.2.1" },
+						{title: "Sub-item 4.2.2", key: "id4.2.2" }
+					]
+				},
+				{title: "Sub-item 4.3 (hideCheckbox)", hideCheckbox: true },
+				{title: "Sub-item 4.4 (unselectable)", unselectable: true }
+			]
+		}
+	];
+	$(function(){
+
+		// --- Initialize sample trees
+		$("#tree1").dynatree({
+			checkbox: true,
+			// Override class name for checkbox icon:
+			classNames: {checkbox: "dynatree-radio"},
+			selectMode: 1,
+			children: treeData,
+			onActivate: function(node) {
+				$("#echoActive1").text(node.data.title);
+			},
+			onSelect: function(select, node) {
+				// Display list of selected nodes
+				var s = node.tree.getSelectedNodes().join(", ");
+				$("#echoSelection1").text(s);
+			},
+			onDblClick: function(node, event) {
+				node.toggleSelect();
+			},
+			onKeydown: function(node, event) {
+				if( event.which == 32 ) {
+					node.toggleSelect();
+					return false;
+				}
+			},
+			// The following options are only required, if we have more than one tree on one page:
+//			initId: "treeData",
+			cookieId: "dynatree-Cb1",
+			idPrefix: "dynatree-Cb1-"
+		});
+
+		$("#tree2").dynatree({
+			checkbox: true,
+			selectMode: 2,
+			children: treeData,
+			onSelect: function(select, node) {
+				// Display list of selected nodes
+				var selNodes = node.tree.getSelectedNodes();
+				// convert to title/key array
+				var selKeys = $.map(selNodes, function(node){
+					   return "[" + node.data.key + "]: '" + node.data.title + "'";
+				});
+				$("#echoSelection2").text(selKeys.join(", "));
+			},
+			onClick: function(node, event) {
+				// We should not toggle, if target was "checkbox", because this
+				// would result in double-toggle (i.e. no toggle)
+				if( node.getEventTargetType(event) == "title" )
+					node.toggleSelect();
+			},
+			onKeydown: function(node, event) {
+				if( event.which == 32 ) {
+					node.toggleSelect();
+					return false;
+				}
+			},
+			// The following options are only required, if we have more than one tree on one page:
+			cookieId: "dynatree-Cb2",
+			idPrefix: "dynatree-Cb2-"
+		});
+
+		$("#tree3").dynatree({
+			checkbox: true,
+			selectMode: 3,
+			children: treeData,
+			onSelect: function(select, node) {
+				// Get a list of all selected nodes, and convert to a key array:
+				var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
+					return node.data.key;
+				});
+				$("#echoSelection3").text(selKeys.join(", "));
+
+				// Get a list of all selected TOP nodes
+				var selRootNodes = node.tree.getSelectedNodes(true);
+				// ... and convert to a key array:
+				var selRootKeys = $.map(selRootNodes, function(node){
+					return node.data.key;
+				});
+				$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
+				$("#echoSelectionRoots3").text(selRootNodes.join(", "));
+			},
+			onDblClick: function(node, event) {
+				node.toggleSelect();
+			},
+			onKeydown: function(node, event) {
+				if( event.which == 32 ) {
+					node.toggleSelect();
+					return false;
+				}
+			},
+			// The following options are only required, if we have more than one tree on one page:
+//				initId: "treeData",
+			cookieId: "dynatree-Cb3",
+			idPrefix: "dynatree-Cb3-"
+		});
+
+		$("#tree4").dynatree({
+			checkbox: false,
+			selectMode: 2,
+			children: treeData,
+			onQuerySelect: function(select, node) {
+				if( node.data.isFolder )
+					return false;
+			},
+			onSelect: function(select, node) {
+				// Display list of selected nodes
+				var selNodes = node.tree.getSelectedNodes();
+				// convert to title/key array
+				var selKeys = $.map(selNodes, function(node){
+					   return "[" + node.data.key + "]: '" + node.data.title + "'";
+				});
+				$("#echoSelection4").text(selKeys.join(", "));
+			},
+			onClick: function(node, event) {
+				if( ! node.data.isFolder )
+					node.toggleSelect();
+			},
+			onDblClick: function(node, event) {
+				node.toggleExpand();
+			},
+			onKeydown: function(node, event) {
+				if( event.which == 32 ) {
+					node.toggleSelect();
+					return false;
+				}
+			},
+			// The following options are only required, if we have more than one tree on one page:
+//			initId: "treeData",
+			cookieId: "dynatree-Cb4",
+			idPrefix: "dynatree-Cb4-"
+		});
+
+		$("#btnToggleSelect").click(function(){
+			$("#tree2").dynatree("getRoot").visit(function(node){
+				node.toggleSelect();
+			});
+			return false;
+		});
+		$("#btnDeselectAll").click(function(){
+			$("#tree2").dynatree("getRoot").visit(function(node){
+				node.select(false);
+			});
+			return false;
+		});
+		$("#btnSelectAll").click(function(){
+			$("#tree2").dynatree("getRoot").visit(function(node){
+				node.select(true);
+			});
+			return false;
+		});
+		<!-- Start_Exclude: This block is not part of the sample code -->
+		$("#skinCombo")
+		.val(0) // set state to prevent caching
+		.change(function(){
+			var href = "../src/"
+				+ $(this).val()
+				+ "/ui.dynatree.css"
+				+ "?reload=" + new Date().getTime();
+			$("#skinSheet").attr("href", href);
+		});
+		<!-- End_Exclude -->
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Selection and checkbox</h1>
+
+	<!-- Tree #1 -->
+
+	<p class="description">
+		This tree has <b>checkoxes and selectMode 1 (single-selection)</b> enabled.<br>
+		A double-click handler selects a <i>document</i> node (not folders).<br>
+		A keydown handler selects on [space].<br>
+		The <code>checkbox</code> class name was customized, to display radio
+		buttons.<br>
+		Note: the initialization data contains multiple selected nodes. This is
+		considered bad input data and <b>not</b> fixed automatically (only on
+		the first click).
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+	<div id="tree1"></div>
+	<div>Active node: <span id="echoActive1">-</span></div>
+	<div>Selection: <span id="echoSelection1">-</span></div>
+
+
+	<!-- Tree #2 -->
+
+	<p class="description">
+		This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>
+		A single-click handler selects the node.<br>
+		A keydown handler selects on [space].
+	</p>
+	<p>
+		<a href="#" id="btnSelectAll">Select all</a> -
+		<a href="#" id="btnDeselectAll">Deselect all</a> -
+		<a href="#" id="btnToggleSelect">Toggle select</a>
+	</p>
+	<div id="tree2"></div>
+	<div>Selected keys: <span id="echoSelection2">-</span></div>
+
+
+	<!-- Tree #3 -->
+
+	<p class="description">
+		This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
+		A double-click handler selects the node.<br>
+		A keydown handler selects on [space].
+	</p>
+	<div id="tree3"></div>
+	<div>Selected keys: <span id="echoSelection3">-</span></div>
+	<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
+	<div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div>
+
+
+	<!-- Tree #4 -->
+
+	<p class="description">
+		This tree has selectMode 2 (multi-selection) enabled, but <b>no checkboxes</b>.<br>
+		A single-click handler selects the node.<br>
+		A keydown handler selects on [space].<br>
+		A double-click handler expands documents.<br>
+		A onQuerySelect handler prevents selection of folders.
+	</p>
+	<div id="tree4"></div>
+	<div>Selected keys: <span id="echoSelection4">-</span></div>
+
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-theming.html

@@ -0,0 +1,93 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<!-- Include the basic stylesheet: -->
+	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<!-- Override CSS with a custom stylesheet : -->
+	<link href="skin-custom/custom.css" rel="stylesheet" type="text/css" >
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			title: "Sample Theming",
+			// Image folder used for data.icon attribute.
+			imagePath: "skin-custom/",
+			onSelect: function(node) {
+				alert ("You selected " + node);
+			}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Theming</h1>
+	<p class="description">
+		Includes a custom CSS <i>after</i> the standard CSS to overrride theming.<br>
+		Some nodes have their <code>data.addClass</code> attribute set.<br>
+		Finally, the last two nodes use the <code>data.icon</code> attribute.
+	</p>
+
+	<div id="tree">
+		<ul>
+			<li>Document with some children
+				<ul>
+					<li>Sub-item 4.1
+					<ul>
+						<li>Sub-item 4.1.1
+						<li>Sub-item 4.1.2
+					</ul>
+					<li>Sub-item 4.2
+				</ul>
+
+			<li class="folder">A folder (different icon when expanded)
+				<ul>
+					<li>Node 2.1
+					<li>Node 2.2
+				</ul>
+
+			<li data="addClass:'custom1'">Node with custom class 1
+
+			<li data="isFolder: true, addClass:'custom2'">Folder with custom class 2
+				<ul>
+					<li data="addClass:'custom1'">Node 4.1 (using custom class 1)
+					<li>Node 4.2
+				</ul>
+
+			<li data="icon: 'customDoc1.gif'">Node with standard CSS, but custom icon
+			<li data="isFolder: true, icon: 'folder_docs.gif'">Folder with standard CSS but custom icon
+				<ul>
+					<li>Node 4.1
+					<li>Node 4.2
+				</ul>
+
+
+		</ul>
+	</div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample-ul.html

@@ -0,0 +1,71 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Init from &lt;ul> element</h1>
+	<p class="description">
+		This sample initializes the tree from a &lt;ul> element.
+	</p>
+
+	<div id="tree">
+		<ul style="display:none">
+			<li id="key1" title="Look, a tool tip!">item1 with key and tooltip
+			<li id="key2" class="selected">item2: selected on init
+			<li id="key3" class="folder">Folder with some children
+				<ul>
+					<li id="key3.1">Sub-item 3.1
+					<li id="key3.2">Sub-item 3.2
+				</ul>
+
+			<li id="key4" class="expanded">Document with some children (expanded on init)
+				<ul>
+					<li id="key4.1">Sub-item 4.1
+					<li id="key4.2">Sub-item 4.2
+				</ul>
+		</ul>
+	</div>
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/sample.css

@@ -0,0 +1,63 @@
+body.example
+{
+	margin: 15px;
+	font-family: sans-serif;
+}
+
+body.example h1
+{
+	font-size: 1.2em;
+}
+body.example h2
+{
+	font-size: 1em;
+}
+
+a,
+a:visited
+{
+	color: navy;
+	text-decoration: none;
+	font-size: small;
+}
+a:hover
+{
+	text-decoration: underline;
+}
+
+body.example p.description,
+body.example p.sample-links
+{
+/*	border: thin solid gray; */
+	background-color: #d0d0f0;
+	padding: 5px;
+	font-size: small;
+}
+
+p.version-info
+{
+	color: gray;
+	font-size: 0.6em;
+}
+p.sample-links a,
+p.sample-links a:visited
+{
+	color: navy;
+	text-decoration: none;
+	margin-left: 15px;
+	padding: 1px 3px;
+/*	border: 1pt solid white;*/
+}
+
+p.sample-links a:hover
+{
+	text-decoration: underline;
+}
+
+pre{
+  background:#eee;
+  border:1px solid #999;
+  padding:.5em;
+  margin:.5em;
+  font-size:.9em;
+}

assets/plugins/dynatree/doc/sample.js

@@ -0,0 +1,78 @@
+/*************************************************************************
+	(c) 2008-2012 Martin Wendt
+ *************************************************************************/
+
+function viewSourceCode()
+{
+	window.location = "view-source:" + window.location.href;
+}
+
+
+function initCodeSamples()
+{
+	var $source = $("#sourceCode");
+	$("#codeExample").toggle(
+		function(){
+			$source.show("fast");
+			if( !this.old ){
+				this.old = $(this).html();
+				$.get(this.href, function(code){
+					// Remove <!-- Start_Exclude [...] End_Exclude --> blocks:
+					code = code.replace(/<!-- Start_Exclude(.|\n|\r)*?End_Exclude -->/gi, "<!-- (Irrelevant source removed.) -->");
+					// Reduce tabs from 8 to 2 characters
+					code = code.replace(/\t/g, "  ");
+					$source.text(code);
+					// Format code samples
+					try {
+						prettyPrint();
+					} catch (e) {
+						alert(e);
+					}
+				}, "html");
+			}
+			$(this).html("Hide source code");
+		},
+		function(){
+			$(this).html(this.old);
+			$source.hide("fast");
+		}
+	);
+	if(jQuery.ui){
+		var info = "Dynatree " + jQuery.ui.dynatree.version
+			+ ", jQuery UI " + jQuery.ui.version
+			+ ", jQuery " + jQuery.fn.jquery;
+/*
+		info += "\n<br>";
+		info += "document.compatMode: " + document.compatMode + "\n";
+		for(e in jQuery.support){
+			info += "<br>\n" + e + ": " + jQuery.support[e];
+		}
+*/
+		$("p.sample-links").after("<p class='version-info'>" + info + "</p>");
+	}
+}
+
+
+var _gaq = _gaq || [];
+
+$(function(){
+	// Log to Google Analytics, when not running locally
+	if ( document.URL.toLowerCase().indexOf("wwwendt.de/") >= 0 ) {
+		_gaq.push(["_setAccount", "UA-316028-1"]);
+		_gaq.push(["_trackPageview"]);
+
+		(function() {
+			var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
+			ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
+			var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
+		})();
+	}
+
+	// Show some elements only, if (not) inside the Example Browser
+	if (top.location == self.location){
+		$(".hideOutsideFS").hide();
+	}else{
+		$(".hideInsideFS").hide();
+	}
+	initCodeSamples();
+});

assets/plugins/dynatree/doc/samples-nav.html

@@ -0,0 +1,136 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<meta name="robots" content="noindex,follow">
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+	<script src="sample.js" type="text/javascript"></script>
+	<title>Dynatree - Example Browser</title>
+
+<style type="text/css">
+body {
+	background-color: #39414A;
+	color: white;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: smaller;
+	background-image: url("nav_bg.png");
+	background-repeat: repeat-x;
+}
+a {
+	color: white;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+div#tree {
+	position: absolute;
+	height: 95%;
+	width: 95%;
+	padding: 5px;
+	margin-right: 16px;
+}
+ul.dynatree-container {
+	height: 100%;
+	width: 100%;
+	background-color: transparent;
+}
+ul.dynatree-container a {
+	color: white;
+	border: 1px solid transparent;
+	background-color: transparent;
+}
+ul.dynatree-container a:hover {
+	background-color: transparent;
+}
+ul.dynatree-container a:focus, span.dynatree-focused a:link {
+	background-color: gray;
+}
+</style>
+
+<script type="text/javascript">
+	$(function(){
+		// --- Initialize sample trees
+		$("#tree").dynatree({
+			autoFocus: true,
+//			persist: true,
+			minExpandLevel: 2,
+			onFocus: function(node) {
+				// Auto-activate focused node after 1 second
+				if(node.data.href){
+					node.scheduleAction("activate", 1000);
+				}
+			},
+			onBlur: function(node) {
+				node.scheduleAction("cancel");
+			},
+			onActivate: function(node){
+				if(node.data.href){
+					window.open(node.data.href, node.data.target);
+				}
+			}
+		});
+	});
+</script>
+
+</head>
+
+<body>
+	<div id="tree">
+	<ul>
+	<li><a target="_blank" href="dynatree-doc.html">Documentation</a>
+	<li><a target="_blank" href="http://dynatree.googlecode.com">jquery.dynatree.js</a>
+	<li class="folder expnded"> Examples
+		<ul>
+			<li><a target="content" href="sample-default.html">Default options</a>
+			<li><a target="content" href="sample-quick.html">Init from JS object</a>
+			<li><a target="content" href="sample-init-lazy.html">Init from external data</a>
+			<li><a target="content" href="sample-iframe.html">URL navigation and &lt;iframe></a>
+			<li><a target="content" href="sample-api.html">Programming API</a>
+			<li><a target="content" href="sample-select.html">Checkbox &amp; select</a>
+			<li><a target="content" href="sample-theming.html">Theming</a>
+			<li><a target="content" href="sample-persist.html">Persistence</a>
+			<li><a target="content" href="sample-events.html">Event handling</a>
+			<li><a target="content" href="sample-effects.html">Effects</a>
+			<li class="folder">Drag'n'drop
+				<ul>
+				<li><a target="content" href="sample-dnd.html">Drag'n'drop</a>
+				<li><a target="content" href="sample-dnd2.html">Drag'n'drop 2</a>
+				<li><a target="content" href="sample-dnd3.html">Drag'n'drop 3</a>
+				</ul>
+			<li><a target="content" href="sample-contextmenu.html">Context menu, Copy/paste</a>
+			<li><a target="content" href="sample-minexpand.html">Fixed expand level</a>
+			<li><a target="content" href="sample-lazy.html">Lazy loading</a>
+			<li><a target="content" href="sample-form.html">Embed in forms</a>
+			<li><a target="content" href="sample-multiline.html">Large nodes</a>
+			<li class="folder">Tweaks
+				<ul>
+				<li><a target="content" href="test-table.html">Column layout</a>
+				<li><a target="content" href="sample-inline-edit.html">Edit nodes</a>
+				<li><a target="content" href="sample-rtl.html">RTL</a>
+				</ul>
+			<li class="folder">Test
+				<ul>
+				<li><a target="content" href="test-bench.html">Benchmark large trees</a>
+				<li><a target="content" href="test-latest.html">Latest jQuery</a>
+				<li><a target="content" href="sample-pyserver.html">Local server</a>
+				<li class="folder">DTD
+					<ul>
+					<li><a target="content" href="test-dtd-none.html">No DTD</a>
+					<li><a target="content" href="test-dtd-html4-transitional.html">HTML4 transitional</a>
+					<li><a target="content" href="test-dtd-html4-strict.html">HTML4 strict</a>
+					<li><a target="content" href="test-dtd-html5.html">HTML5</a>
+					<li><a target="content" href="test-dtd-xml-transitional.html">XHTML transitional</a>
+					<li><a target="content" href="test-dtd-xml-strict.html">XHTML strict</a>
+					</ul>
+				</ul>
+		</ul>
+	</ul>
+	</div>
+</body>
+</html><html><body></body></html>

assets/plugins/dynatree/doc/samples-top.html

@@ -0,0 +1,29 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<meta name="robots" content="noindex,follow">
+	<title>Dynatree - Example Browser</title>
+
+<style type="text/css">
+body {
+	background-color: #0F1923;
+	color: white;
+	padding: 3px 10px;
+	font-family: sans-serif;
+}
+h1 {
+	margin-top: 8px;
+	font-size: 1.4em;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+</style>
+</head>
+
+<body>
+	<h1><a href="samples.html" target="_top">Dynatree - Example Browser</a></h1>
+</body>
+</html>

assets/plugins/dynatree/doc/samples-welcome.html

@@ -0,0 +1,27 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+</head>
+
+<body class="example">
+	<h1>dynatree - Examples</h1>
+	<p class="description">
+		This site presents some live examples for Dynatree.<br>
+		<br>
+		Select a topic on the navigator to the left and click 'View source code'
+		at the bottom of the samples for details.<br>
+		<br>
+		More documentation and infos can be found at the
+		<a target="_blank" href="http://dynatree.googlecode.com">project home</a>.<br>
+		<br>
+		Have fun :-)
+	</p>
+</body>
+</html>

assets/plugins/dynatree/doc/samples.html

@@ -0,0 +1,25 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<meta name="robots" content="noindex,follow">
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="sample.js" type="text/javascript"></script>
+	<title>Dynatree - Example Browser</title>
+</head>
+<frameset rows="50,1*" frameborder="no" framespacing="0">
+	<frame src="samples-top.html" name="top" scrolling="NO" noresize
+		marginwidth="0" marginheight="0">
+	<frameset cols="200,1*" >
+		<frame src="samples-nav.html" name="nav" scrolling="NO"
+			marginwidth="0" marginheight="0">
+		<frame src="samples-welcome.html" name="content">
+	</frameset>
+</frameset>
+
+<noframes>
+	<body>
+		<p>This page requires frames.</p>
+	</body>
+</noframes>
+</html>

assets/plugins/dynatree/doc/skin-custom/custom.css

@@ -0,0 +1,71 @@
+/*******************************************************************************
+ * Sample for a Dynatree custom stylesheet.
+ * This is expected to be included after the standard ui.dynatree.css, thus
+ * overridung the defaults. 
+ */
+.dynatree-has-children span.dynatree-icon
+{
+    background-position: 0 0;
+	background-image: url("doc_with_children.gif");
+}
+
+.dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
+{
+	background-image: url("folder_docs.gif");
+}
+
+.dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
+{
+	background-image: url("folder_images.gif");
+}
+
+
+/*******************************************************************************
+ * Node titles
+ */
+
+span.dynatree-has-children a
+{
+	font-style: oblique;
+}
+
+span.dynatree-selected a
+{
+	color: green;
+	font-style: italic;
+}
+
+span.dynatree-active a,
+span.dynatree-active a:hover
+{
+	border: 1px solid maroon;
+	background-color: #FAD8F0 !important; /* reddish */
+}
+
+
+/*******************************************************************************
+ * Custom node classes (sample)
+ */
+
+span.custom1 a
+{
+	background-color: #ffffbb;
+	color: maroon;
+}
+span.custom1 span.dynatree-icon
+{
+    background-position: 0 0;
+	background-image: url("customDoc2.gif");
+}
+
+span.custom2 a
+{
+	font-weight: bold;
+	background-color: silver;
+	color: navy;
+}
+span.custom2 span.dynatree-icon
+{
+    background-position: 0 0;
+	background-image: url("folder_page.gif");
+}

assets/plugins/dynatree/doc/test-bench.html

@@ -0,0 +1,136 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		$("#tree").dynatree({
+			children: [
+				{title: "Add 100 nodes (flat, force update)...", isFolder: true, isLazy: true, mode: "add100_flat_u" },
+				{title: "Add 100 nodes (flat)...", isFolder: true, isLazy: true, mode: "add100_flat" },
+				{title: "Add 1.000 nodes (flat)...", isFolder: true, isLazy: true, mode: "add1000_flat" },
+				{title: "Add 1.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add1000_deep" },
+				{title: "Add 10.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add10000_deep" }
+			],
+			onSelect: function(node) {
+				alert("You selected " + node.data.title);
+			},
+			onLazyRead: function(node) {
+				var tree = node.tree;
+				logMsg("Benchmarking mode='" + node.data.mode + "'...");
+				switch( node.data.mode ) {
+					case "add100_flat_u":
+						addNodes(node, 100, 0, 0, true)
+						break;
+					case "add100_flat":
+						addNodes(node, 100, 0, 0)
+						break;
+					case "add1000_flat":
+						addNodes(node, 1000, 0, 0)
+						break;
+					case "add1000_deep":
+						addNodes(node, 10, 10, 10)
+						break;
+					case "add10000_deep":
+						addNodes(node, 10, 100, 10)
+						break;
+				}
+//				node.setLazyNodeStatus(DTNodeStatus_Ok);
+				logMsg("Benchmarking mode='" + node.data.mode + "' done.");
+				// Return true, to show we're finished
+				return true;
+			}
+		});
+
+		$("#btnClear").click(function(){
+			var root = $("#tree").dynatree("getRoot");
+			for(var i = 0; i<root.childList.length; i++)
+				root.childList[i].removeChildren();
+		});
+		$("#btnRenderAll").click(function(){
+			var tree = $("#tree").dynatree("getTree");
+			var count = tree.count();
+			logMsg("Benchmarking node creation for " + count + " nodes...");
+			tree.renderInvisibleNodes();
+			logMsg("Benchmarking node creation for " + count + " nodes done.");
+		});
+	});
+
+	function addNodes(node, level1, level2, level3, forceUpdate) {
+		if( forceUpdate != true )
+			node.tree.enableUpdate(false);
+
+		var key;
+		for (var i=0; i<level1; i++) {
+			key = "" + (i+1);
+			var f = node.addChild({title: "Folder_" + key,
+								   key: key,
+								   isFolder: true
+								   });
+			for (var j=0; j<level2; j++) {
+				key = "" + (i+1) + "." + (j+1);
+				var d = f.addChild({title: "Node_" + key,
+								  key: key
+								  });
+				for (var k=0; k<level3; k++) {
+					key = "" + (i+1) + "." + (j+1) + "." + (k+1);
+					d.addChild({title: "Node_" + key,
+							  key: key
+							  });
+				}
+			}
+		}
+		node.tree.enableUpdate(true);
+	}
+
+	</script>
+</head>
+
+<body class="example">
+	<h1>Example: Benchmark</h1>
+	<p class="description">
+		Expand a node to start a benchmark, then check the firebug console.
+	</p>
+	<p class="description">
+		Some users reported slow loading with Firefox. If you experience
+		response times longer than 3-4 for seconds for <code>Add 1.000 nodes (flat)</code>
+		please <a href="http://code.google.com/p/dynatree/issues/detail?id=182">let us know</a>.
+	</p>
+
+	<div id='tree'> </div>
+	<p>
+	enableUpdate(false) is used for speedup.
+	</p>
+	<p>
+		<button id="btnClear">remove children</button>
+		<button id="btnRenderAll">Create HTML markup for all nodes</button>
+	</p>
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-css.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+
+	<title>dynatree - temporary tests</title>
+	<!-- Include the required JavaScript libraries: -->
+
+<style type="text/css">
+.container {
+	color: red;
+}
+.container a:link {
+	text-decoration: none;
+	color: inherit;
+}
+.container span.active a {
+	color: magenta;
+}
+
+/*
+a:link { font-weight:bold; color:blue; text-decoration:none; }
+a:visited { font-weight:bold; color:silver; text-decoration:none; }
+a:focus { font-weight:bold; color:red; text-decoration:underline; }
+a:hover { font-weight:bold; color:green; text-decoration:none; }
+a:active { font-weight:bold; color:lime; text-decoration:underline; }
+*/
+</style>
+
+</head>
+<body>
+	<P>This file is only temporarily used to reproduce issues.</P>
+	<p style="color: red;">Using doctype HTML 4.01 Strict.</p>
+	<div id='tree'> </div>
+
+	<div class="container">
+		<div><span>text</span></div>
+		<div><span class="active"><a href="#">tag</a></span></div>
+		<div><span><a href="#">tag</a></span></div>
+	</div>
+
+	<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-html4-strict.html

@@ -0,0 +1,198 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - HTML4 strict</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: HTML4 strict</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-html4-transitional.html

@@ -0,0 +1,198 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - HTML4 transitional</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: HTML4 transitional</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-html5.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - HTML5</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: HTML5</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-none.html

@@ -0,0 +1,197 @@
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - no DTD (i.e. 'Quirks')</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: no DTD ('quirks')</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-xml-strict.html

@@ -0,0 +1,199 @@
+<?xml version="1.0" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - DTD XML strict</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: XML strict</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-dtd-xml-transitional.html

@@ -0,0 +1,200 @@
+<?xml version="1.0" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - XML transitionale</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+<style type="text/css">
+#tree ul.dynatree-container {
+	overflow: scroll;
+	position: relative;
+	width: 200px;
+	height: 250px;
+}
+#tree2 {
+	position: absolute;
+	top: 150px;
+	left: 350px;
+}
+</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+var data = [
+	{"title": "Item 1"},
+	{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
+		"children": [
+			{"title": "Sub-item 2.1",
+				"children": [
+							{"title": "Sub-item 2.1.1",
+								"children": [
+											{"title": "Sub-item 2.1.1.1"},
+											{"title": "Sub-item 2.1.2.2"},
+											{"title": "Sub-item 2.1.1.3"},
+											{"title": "Sub-item 2.1.2.4"}
+										]
+								},
+							{"title": "Sub-item 2.1.2"},
+							{"title": "Sub-item 2.1.3"},
+							{"title": "Sub-item 2.1.4"}
+						]
+				},
+			{"title": "Sub-item 2.2"},
+			{"title": "Sub-item 2.3 (lazy)"}
+		]
+	},
+	{"title": "Folder 3", "isFolder": true, "key": "folder3",
+		"children": [
+			{"title": "Sub-item 3.1",
+				"children": [
+							{"title": "Sub-item 3.1.1"},
+							{"title": "Sub-item 3.1.2"},
+							{"title": "Sub-item 3.1.3"},
+							{"title": "Sub-item 3.1.4"}
+						]
+				},
+			{"title": "Sub-item 3.2"},
+			{"title": "Sub-item 3.3"},
+			{"title": "Sub-item 3.4"}
+		]
+	},
+	{"title": "Item 5"}
+];
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		children: data,
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				logMsg("tree.onDragStart(%o)", node);
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			},
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+				return true;
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+				if(node.isDescendantOf(sourceNode)){
+					return false;
+				}
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
+				sourceNode.move(node, hitMode);
+			},
+			onDragLeave: function(node, sourceNode) {
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>DTD test: XML transitional</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<div id="tree"> 1 </div>
+	<div>Active node 1: <span id="echoActive">-</span></div>
+	<hr>
+	<div id="tree2"> 2 </div>
+	<div>Active node 2: <span id="echoActive2">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-latest.html

@@ -0,0 +1,262 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Test wit latest jQuery</title>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<style type="text/css">
+		#draggableSample, #droppableSample {
+			height:100px;
+			padding:0.5em;
+			width:150px;
+			border:1px solid #AAAAAA;
+		}
+		#draggableSample {
+			background-color: silver;
+			color:#222222;
+		}
+		#droppableSample {
+			background-color: maroon;
+			color: white;
+		}
+		#droppableSample.drophover {
+			border: 1px solid green;
+		}
+	</style>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript"><!--
+$(function(){
+	// --- Initialize first Dynatree -------------------------------------------
+	$("#tree").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do thi in production code
+			});
+		},
+		onActivate: function(node) {
+			$("#echoActive").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive").text("-");
+		},
+		dnd: {
+			onDragStart: function(node) {
+				/** This function MUST be defined to enable dragging for the tree.
+				 *  Return false to cancel dragging of node.
+				 */
+				logMsg("tree.onDragStart(%o)", node);
+				if(node.data.isFolder)
+					return false;
+				return true;
+			},
+			onDragStop: function(node) {
+				logMsg("tree.onDragStop(%o)", node);
+			}
+		}
+	});
+	// --- Initialize second Dynatree ------------------------------------------
+	$("#tree2").dynatree({
+		initAjax: {
+			url: "sample-data3.json"
+		},
+		onLazyRead: function(node){
+			// Mockup a slow reqeuest ...
+			node.appendAjax({
+				url: "sample-data2.json",
+				debugLazyDelay: 750 // don't do thi in production code
+			});
+		},
+		onActivate: function(node) {
+			$("#echoActive2").text(node.data.title + "(" + node.data.key + ")");
+		},
+		onDeactivate: function(node) {
+			$("#echoActive2").text("-");
+		},
+		onLazyRead: function(node){
+			node.appendAjax({
+				url: "sample-data2.json"
+			});
+		},
+		dnd: {
+			autoExpandMS: 1000,
+			preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+			onDragEnter: function(node, sourceNode) {
+				/** sourceNode may be null for non-dynatree droppables.
+				 *  Return false to disallow dropping on node. In this case
+				 *  onDragOver and onDragLeave are not called.
+				 *  Return 'over', 'before, or 'after' to force a hitMode.
+				 *  Any other return value will calc the hitMode from the cursor position.
+				 */
+				logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
+//				if(node.data.isFolder)
+//					return false;
+				return true;
+//                return "over";
+			},
+			onDragOver: function(node, sourceNode, hitMode) {
+				/** Return false to disallow dropping this node.
+				 *
+				 */
+//				 if(node.data.isFolder){
+//					 var dd = $.ui.ddmanager.current;
+//					 dd.cancel();
+//					 alert("folder");
+//				 }
+				logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
+			},
+			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
+				/**This function MUST be defined to enable dropping of items on the tree.
+				 * sourceNode may be null, if it is a non-Dynatree droppable.
+				 */
+				logMsg("tree.onDrop(%o, %o)", node, sourceNode);
+				var copynode;
+				if(sourceNode) {
+					copynode = sourceNode.toDict(true, function(dict){
+						dict.title = "Copy of " + dict.title;
+						delete dict.key; // Remove key, so a new one will be created
+					});
+				}else{
+					copynode = {title: "This node was dropped here (" + ui.helper + ")."};
+				}
+				if(hitMode == "over"){
+					// Append as child node
+					node.addChild(copynode);
+					// expand the drop target
+					node.expand(true);
+				}else if(hitMode == "before"){
+					// Add before this, i.e. as child of current parent
+					node.parent.addChild(copynode, node);
+				}else if(hitMode == "after"){
+					// Add after this, i.e. as child of current parent
+					node.parent.addChild(copynode, node.getNextSibling());
+				}
+			},
+			onDragLeave: function(node, sourceNode) {
+				/** Always called if onDragEnter was called.
+				 */
+				logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
+			}
+		}
+	});
+	// --- Initialize simple draggable sample ----------------------------------
+	$("#draggableSample").draggable({
+		revert: true,
+		connectToDynatree: true,
+		cursorAt: { top: -5, left:-5 },
+		helper: "clone"
+	});
+	// --- Initialize simple droppable sample ----------------------------------
+	$("#droppableSample").droppable({
+		hoverClass: "drophover",
+		addClasses: true,
+		over: function(event, ui) {
+			logMsg("droppable.over, %o, %o", event, ui);
+		},
+		drop: function(event, ui) {
+			var source = ui.helper.data("dtSourceNode") || ui.draggable;
+			$(this).addClass("ui-state-highlight").find("p").html("Dropped " + source);
+//			alert("dropped");
+		}
+	});
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	$("#skinCombo")
+	.val(0) // set state to prevent caching
+	.change(function(){
+		var href = "../src/"
+			+ $(this).val()
+			+ "/ui.dynatree.css"
+			+ "?reload=" + new Date().getTime();
+		$("#skinSheet").attr("href", href);
+	});
+	<!-- End_Exclude -->
+});
+--></script>
+</head>
+
+<body class="example">
+	<h1>Example: Standard jQuery drag-and-drop</h1>
+	<p class="description">
+		This sample uses the standard jQuery draggable and droppable.
+	</p>
+	<div>
+		Skin:
+		<select id="skinCombo" size="1">
+			<option value="skin">Standard ('/skin/')</option>
+			<option value="skin-vista">Vista ('/skin-vista/')</option>
+		</select>
+	</div>
+
+	<table>
+	<thead>
+	<tr>
+		<th>
+		<p>This tree allows dragging.</p>
+		</th>
+		<th>
+		<p>This tree allows dropping.</p>
+		</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr valign="top">
+		<td>
+			<div id="tree"> </div>
+		</td>
+		<td>
+			<div id="tree2"></div>
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<div>Active node: <span id="echoActive">-</span></div>
+		</td>
+		<td>
+			<div>Active node: <span id="echoActive2">-</span></div>
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<div id="draggableSample" class="ui-widget-content">
+				<p>Drag me around</p>
+			</div>
+		</td>
+		<td>
+			<div id="droppableSample" class="ui-widget-content">
+				<p>Drop something here</p>
+			</div>
+		</td>
+	</tr>
+	</tbody>
+	</table>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-persist.html

@@ -0,0 +1,121 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+
+	var treeData = [
+		{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
+		{title: "item2: selected on init", select: true },
+		{title: "Folder with some children", isFolder: true, key: "id3",
+			children: [
+				{title: "Sub-item 3.1",
+					children: [
+						{title: "Sub-item 3.1.1", key: "id3.1.1" },
+						{title: "Sub-item 3.1.2", key: "id3.1.2" }
+					]
+				},
+				{title: "Sub-item 3.2",
+					children: [
+						{title: "Sub-item 3.2.1", key: "id3.2.1" },
+						{title: "Sub-item 3.2.2", key: "id3.2.2" }
+					]
+				}
+			]
+		},
+		{title: "Documnent with some children (expanded on init)", key: "id4", expand: true,
+			children: [
+				{title: "Sub-item 4.1 (active on init)", activate: true,
+					children: [
+						{title: "Sub-item 4.1.1", key: "id4.1.1" },
+						{title: "Sub-item 4.1.2", key: "id4.1.2" }
+					]
+				},
+				{title: "Sub-item 4.2 (selected on init)", select: true,
+					children: [
+						{title: "Sub-item 4.2.1", key: "id4.2.1" },
+						{title: "Sub-item 4.2.2", key: "id4.2.2" }
+					]
+				}
+			]
+		}
+	];
+
+
+	$(function(){
+		$("#tree").dynatree({
+			persist: true,
+			checkbox: true,
+			children: treeData,
+//          clickFolderMode: 1,
+			selectMode: 2,
+			onPostInit: function(isReloading, isError) {
+				logMsg("onPostInit(): tree:%o, isReloading:%o, isError:%o", this, isReloading, isError);
+				logMsg("onPostInit(): tree.isReloading:%o, tree.isInitializing:%o", this.isReloading(), this.isInitializing());
+				var persistData = this.getPersistData();
+				logMsg("persistData: %o", persistData);
+				this.reactivate();
+			},
+			onActivate: function(node) {
+				logMsg("onActivate: %o, userEvent:%o", node, node.tree.isUserEvent());
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			},
+			onDblClick: function(node, event) {
+				logMsg("onDblClick(%o, %o)", node, event);
+				node.toggleExpand();
+			}
+		});
+		logMsg("after widget init: %o", this);
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>TEST: Persist</h1>
+	<p class="description">
+		Cookie persistence and is enabled here.<br>
+		(Also, double-click handler expands document nodes.)<br>
+		Select a node and hit [F5] to refresh, to see how the active node and
+		expansion and selection states are restored.<br>
+		<br>
+		NOTE: if this doesn't seem to work, it's probably because the frame
+		content is cached by the browser.<br>
+		Try this example as an
+		<a href="#" target="_blank">unframed page</a>.
+	</p>
+
+	<!-- Tree container -->
+	<div id="tree"></div>
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-preload.html

@@ -0,0 +1,115 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<!--
+	jQuery.Preload Plugin by Ariel Flesler
+	http://flesler.blogspot.com/2008/01/jquerypreload.html
+	 -->
+	<script src="../jquery/jquery.preload-min.js" type="text/javascript"></script>
+
+	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+
+<script type="text/javascript">
+	$(function(){
+		// Preload images (roughly sorted by importance)
+		// Uses jQuery.Preload Plugin by Ariel Flesler (http://flesler.blogspot.com/2008/01/jquerypreload.html)
+		$.preload([
+			"ltWait",
+			"vline",
+			"ltFld", "ltFld_o",
+			"ltL_", "ltL_ne", "ltL_nes", "ltL_ns", "ltM_ne", "ltM_nes", "ltP_ne", "ltP_nes",
+			"ltD_ne", "ltD_nes", "ltDoc",
+			"ltError",
+			"cbUnchecked", "cbUnchecked_hover",
+			"cbChecked", "cbChecked_hover",
+			"cbIntermediate", "cbIntermediate_hover",
+			"rbUnchecked", "rbUnchecked_hover",
+			"rbChecked", "rbChecked_hover",
+			"rbIntermediate", "rbIntermediate_hover",
+			"move_here", "copy_here",
+			"drop_accept", "drop_here", "drop_reject", "drop_sibling_here"
+			], {
+			base: "skin/",
+			ext: ".jpg",
+			onComplete: function(data){
+				// Loaded one image
+				logMsg("Loaded " + data.image);
+			},
+			onFinish: function(data){
+				// All images loaded:
+				logMsg("Loaded " + data.loaded + ", failed: " + data.failed);
+			}
+		});
+		$("#tree").dynatree({
+			// In real life we would call a URL on the server like this:
+//          initAjax: {
+//              url: "/getTopLevelNodesAsJson",
+//              data: { mode: "funnyMode" }
+//              },
+			// .. but here we use a local file instead:
+			initAjax: {
+				url: "sample-data3.json",
+				cache: true,
+				dataType: "json",
+				type: "GET",
+				timeout: 5000,
+				async: false
+				},
+			onLazyRead: function(node){
+				node.appendAjax({
+					url: "sample-data3.json",
+					cache: true,
+					dataType: "json",
+					type: "GET",
+					timeout: 5000,
+					async: false
+				});
+			},
+			onActivate: function(node) {
+				$("#echoActive").text(node.data.title);
+			},
+			onDeactivate: function(node) {
+				$("#echoActive").text("-");
+			}
+		});
+	});
+</script>
+</head>
+
+<body class="example">
+	<h1>Example: Init from Ajax request</h1>
+	<p class="description">
+		This sample initializes the tree from a JSON request.
+	</p>
+
+	<!-- Add a <div> element where the tree should appear: -->
+	<div id="tree">	</div>
+
+	<div>Active node: <span id="echoActive">-</span></div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-release.html

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+
+	<title>dynatree - Q'n'd test for release</title>
+
+<!--
+OLD jQuery 1.3 UI 1.7
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+LATEST CDN
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+DIST
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+MINIFIED DIST
+	<script src="../jquery/jquery.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.min.js" type="text/javascript"></script>
+-->
+	<!-- Include the required JavaScript libraries: -->
+	<script src="../jquery/jquery.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.min.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.min.js" type="text/javascript"></script>
+
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+
+	alert("$.ui.version: " + $.ui.version + "\n"
+			+ "$.jquery.version: " + jQuery.fn.jquery);
+
+	$(function(){
+		// Attach the dynatree widget to an existing <div id="tree"> element
+		// and pass the tree options as an argument to the dynatree() function:
+		$("#tree").dynatree({
+			onActivate: function(node) {
+				// A DynaTreeNode object is passed to the activation handler
+				// Note: we also get this event, if persistence is on, and the page is reloaded.
+				alert("You activated " + node.data.title);
+			},
+			onSelect: function(select, node) {
+				logMsg("onSelect(%o, %o)", node);
+				var s = node.tree.getSelectedNodes().join(", ");
+				$("#echoSelected").text(s);
+			},
+//			persist: true,
+			children: [
+				{title: "Item 1"},
+				{title: "Folder 2", isFolder: true, key: "folder2",
+					children: [
+						{title: "Sub-item 2.1"},
+						{title: "Sub-item 2.2"}
+					]
+				},
+				{title: "Item 3"}
+			]
+		});
+		});
+	</script>
+</head>
+<body>
+	<!-- Add a <div> element where the tree should appear: -->
+	<p>This tree uses the minified JS library. (Check this with IE!)</p>
+	<div id="tree"> ERROR: Tree could not be loaded!</div>
+
+</body>
+</html>

assets/plugins/dynatree/doc/test-table.html

@@ -0,0 +1,104 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<title>Dynatree - Example</title>
+
+	<script src="../jquery/jquery.js" type="text/javascript"></script>
+	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<link href="prettify.css" rel="stylesheet">
+	<script src="prettify.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css">
+	<script src="sample.js" type="text/javascript"></script>
+	<!-- End_Exclude -->
+	<style type="text/css">
+	ul.dynatree-container span.td {
+	   position: absolute;
+	   display: inline;
+	   border-size: 1px;
+	   overflow: hidden;
+	   background-color: white;
+	}
+	ul.dynatree-container span.td:nth-child(1) {
+	   position: static;
+	}
+	ul.dynatree-container span.td:nth-child(2) {
+	   color: red;
+	   left: 150px;
+	   width: 50px;
+	}
+	ul.dynatree-container span.td:nth-child(3) {
+	   color: green;
+	   left: 200px;
+	   width: 150px;
+	}
+	</style>
+	<!-- Add code to initialize the tree when the document is loaded: -->
+	<script type="text/javascript">
+	$(function(){
+		// Attach the dynatree widget to an existing <div id="tree"> element
+		// and pass the tree options as an argument to the dynatree() function:
+		$("#tree").dynatree({
+			onActivate: function(node) {
+			},
+			onCustomRender: function(node) {
+				// Render title as columns
+				if(node.data.title.indexOf("~") === -1){
+					// Default rendering
+					return false;
+				}
+				var cols = node.data.title.split("~"),
+					html = "<a class='dynatree-title' href='#'>";
+				for(var i=0; i<cols.length; i++){
+					html += "<span class='td'>" + cols[i] + "</span>";
+				}
+				return html + "</a>";
+			},
+			children: [
+				{title: "Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
+				{title: "Item 2~ico1~fkjd kjhdf"},
+				{title: "Folder 2", isFolder: true, key: "folder2",
+					children: [
+					   {title: "Sub Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
+					   {title: "Sub Item 2 xxx~ico1~fkjd kjhdf"}
+					]
+				},
+				{title: "Folder 3", isFolder: true, key: "folder3",
+					children: [
+					   {title: "Sub Item 1~ico1~sdflkh sdfkjuhds fkjd kjhdf"},
+					   {title: "Sub Item 2 xxx~ico1~fkjd kjhdf"}
+					]
+				},
+				{title: "Item 3"}
+			]
+		});
+	});
+	</script>
+</head>
+<body class="example">
+	<h1>Example: column simulation</h1>
+	<p class="description">
+		This sample shows, how titles could displayed as aligned columns.
+	</p>
+
+	<!-- Add a <div> element where the tree should appear: -->
+	<div id="tree"> </div>
+
+	<!-- Start_Exclude: This block is not part of the sample code -->
+	<hr>
+	<p class="sample-links  no_code">
+		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
+		<a class="hideOutsideFS" href="#">Link to this page</a>
+		<a class="hideInsideFS" href="samples.html">Example Browser</a>
+		<a href="#" id="codeExample">View source code</a>
+	</p>
+	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
+	<!-- End_Exclude -->
+</body>
+</html>

assets/plugins/dynatree/doc/test-xhtml.xhtml

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="ISO-8859-1" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+	<head>
+    <title>dynatree - temporary tests</title>
+
+    <script src="../jquery/jquery.js" type="text/javascript"></script>
+    <script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
+    <script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
+
+    <link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
+    <script src="../src/jquery.dynatree.js" type="text/javascript"></script>
+
+    <!-- Add code to initialize the tree when the document is loaded: -->
+    <script type='text/javascript'>
+    /* <![CDATA[ */
+
+	$(function(){
+		$("#tree").dynatree({
+			rootVisible: true,
+			rootCollapsible: false,
+			keyboard: true,
+			persist: true,
+			children: [
+				{title: "Node 1", expand: true, key: "_1",
+				 children: [
+					{title: "Node 1.1" }, 
+					{title: "Node 1.2", isFolder: true, expand: true, key: "_12",
+						 children: [
+									{title: "Node 1.2.1" }, 
+									{title: "Node 1.2.2", key: "_122",
+										 children: [
+													{title: "Node 1.2.2.1" }, 
+													{title: "Node 1.2.2.2" }, 
+													{title: "Node 1.2.2.3" }
+													] 
+										 }, 
+									{title: "Node 1.2.3",
+										children: [] 
+									}
+									] 
+						 }, 
+					{title: "Node 1.3" }
+					] 
+					},
+				{title: "Node 2" } 
+			],
+			onSelect: function(dtnode) {
+				$("#echoSelected").text(dtnode.data.title);
+				//alert("You selected " + dtnode.data.title);
+			},
+			onLazyRead: function(dtnode) {
+				logMsg("Benchmarking mode='" + dtnode.data.mode + "' done.");
+			}
+		});
+		$("#tree2").dynatree({
+			onSelect: function(dtnode) {
+				$("#echoSelected").text(dtnode.data.title);
+				//alert("You selected " + dtnode.data.title);
+			}
+		});
+		$("#btnRemoveDiv").click(function(){
+			logMsg("removing %o", $("#tree"));
+			$("#tree").remove();
+		});
+		$("#btn50").click(function(){
+			$("#tree").dynatree("getRoot").append({title: 'i50', expand: true});
+		});
+
+	});
+
+    /* ]]> */
+    </script>
+</head>
+<body>
+	<p>This file is only temporarily used to reproduce issues.</p>
+	<p style="color: red;">Using doctype XHTML 1.0 Strict.</p>
+	<div id='tree'> </div>
+
+	<div>Selected node: <span id="echoSelected">-</span></div>
+	<div>Focused node: <span id="echoFocused">-</span></div>
+    <p>
+        <button id="btnRemoveDiv">Remove main div</button>
+        <button id="btn50">issue #50</button>
+        <button id="btnDiv">dynamic div issue</button>
+    </p>
+	<div id='tree2'>
+	<ul>
+	<li data="{title: 'node1'}">node1</li>
+	<li data="{title: 'node2'}">node2</li>
+	</ul> 
+	</div>
+
+
+	<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
+</body>
+</html>