compass-jquery-plugin 0.3.0.0 → 0.3.1.beta.2

data/templates/dynatree/jquery.dynatree.js

@@ -2,7 +2,7 @@
 	jquery.dynatree.js
 	Dynamic tree view control, with support for lazy loading of branches.
 
-	Copyright (c) 2008-2010,  Martin Wendt (http://wwWendt.de)
+	Copyright (c) 2008-2010, Martin Wendt (http://wwWendt.de)
 	Dual licensed under the MIT or GPL Version 2 licenses.
 	http://code.google.com/p/dynatree/wiki/LicenseInfo
 
@@ -17,6 +17,7 @@
 	@depends: jquery.cookie.js
 *************************************************************************/
 
+/*jslint laxbreak: true */
 
 /*************************************************************************
  *	Debug functions
@@ -64,7 +65,7 @@ function logMsg(msg) {
 
 
 // Forward declaration
-var getDynaTreePersistData = undefined;
+var getDynaTreePersistData = null;
 
 
 
@@ -127,6 +128,9 @@ DynaTreeNode.prototype = {
 		this.childList = null; // no subnodes yet
 		this.isLoading = false; // Lazy content is being loaded
 		this.hasSubSel = false;
+		this.bExpanded = false;
+		this.bSelected = false;
+
 	},
 
 	toString: function() {
@@ -155,7 +159,7 @@ DynaTreeNode.prototype = {
 
 	fromDict: function(dict) {
 		/**
-		 * Update node data. If dict contains 'children', then also replace 
+		 * Update node data. If dict contains 'children', then also replace
 		 * the hole sub tree.
 		 */
 		var children = dict.children;
@@ -170,7 +174,7 @@ DynaTreeNode.prototype = {
 		this.removeChildren();
 		this.addChild(children);
 	},
-	
+
 	_getInnerHtml: function() {
 		var opts = this.tree.options;
 		var cache = this.tree.cache;
@@ -479,22 +483,27 @@ DynaTreeNode.prototype = {
 		// Create, modify or remove the status child node (pass 'null', to remove it).
 		var firstChild = ( this.childList ? this.childList[0] : null );
 		if( !data ) {
-			if ( firstChild ) {
+			if ( firstChild && firstChild.isStatusNode()) {
 				try{
-					this.ul.removeChild(firstChild.li);
+					// I've seen exceptions here with loadKeyPath...
+					if(this.ul){
+						this.ul.removeChild(firstChild.li);
+					}
 				}catch(e){};
 				if( this.childList.length === 1 ){
-					this.childList = null;
+					this.childList = [];
 				}else{
 					this.childList.shift();
 				}
 			}
 		} else if ( firstChild ) {
 			data.isStatusNode = true;
+			data.key = "_statusNode";
 			firstChild.data = data;
 			firstChild.render();
 		} else {
 			data.isStatusNode = true;
+			data.key = "_statusNode";
 			firstChild = this.addChild(data);
 		}
 	},
@@ -505,12 +514,11 @@ DynaTreeNode.prototype = {
 		switch( lts ) {
 			case DTNodeStatus_Ok:
 				this._setStatusNode(null);
-//				this.isRead = true;
+				$(this.span).removeClass(this.tree.options.classNames.nodeLoading);
 				this.isLoading = false;
 				this.render();
 				if( this.tree.options.autoFocus ) {
-//					if( this === this.tree.tnRoot && !this.tree.options.rootVisible && this.childList ) {
-					if( this === this.tree.tnRoot && this.childList ) {
+					if( this === this.tree.tnRoot && this.childList && this.childList.length > 0) {
 						// special case: using ajaxInit
 						this.childList[0].focus();
 					} else {
@@ -520,14 +528,19 @@ DynaTreeNode.prototype = {
 				break;
 			case DTNodeStatus_Loading:
 				this.isLoading = true;
-				this._setStatusNode({
-					title: this.tree.options.strings.loading + info,
-					tooltip: tooltip,
-					addClass: this.tree.options.classNames.nodeWait
-				});
+				$(this.span).addClass(this.tree.options.classNames.nodeLoading);
+				// The root is hidden, so we set a temporary status child
+				if(!this.parent){
+					this._setStatusNode({
+						title: this.tree.options.strings.loading + info,
+						tooltip: tooltip,
+						addClass: this.tree.options.classNames.nodeWait
+					});
+				}
 				break;
 			case DTNodeStatus_Error:
 				this.isLoading = false;
+//				$(this.span).addClass(this.tree.options.classNames.nodeError);
 				this._setStatusNode({
 					title: this.tree.options.strings.loadError + info,
 					tooltip: tooltip,
@@ -651,6 +664,10 @@ DynaTreeNode.prototype = {
 		} catch(e) { }
 	},
 
+	isFocused: function() {
+		return (this.tree.tnFocused === this);
+	},
+
 	_activate: function(flag, fireEvents) {
 		// (De)Activate - but not focus - this node.
 		this.tree.logDebug("dtnode._activate(%o, fireEvents=%o) - %o", flag, fireEvents, this);
@@ -679,7 +696,7 @@ DynaTreeNode.prototype = {
 			}
 			this.tree.persistence.activeKey = this.data.key;
 			$(this.span).addClass(opts.classNames.active);
-			if ( fireEvents && opts.onActivate ){ // Pass element as 'this' (jQuery convention)
+			if ( fireEvents && opts.onActivate ){
 				opts.onActivate.call(this.tree, this);
 			}
 		} else {
@@ -710,6 +727,10 @@ DynaTreeNode.prototype = {
 		this._activate(true, true);
 	},
 
+	activateSilently: function() {
+		this._activate(true, false);
+	},
+
 	deactivate: function() {
 //		this.tree.logDebug("dtnode.deactivate(): %o", this);
 		this._activate(false, true);
@@ -899,7 +920,7 @@ DynaTreeNode.prototype = {
 		}
 	},
 
-	_expand: function(bExpand) {
+	_expand: function(bExpand, forceSync) {
 		if( this.bExpanded === bExpand ) {
 			this.tree.logDebug("dtnode._expand(%o) IGNORED - %o", bExpand, this);
 			return;
@@ -924,7 +945,9 @@ DynaTreeNode.prototype = {
 			}
 		}
 		// Do not apply animations in init phase, or before lazy-loading
-		var allowEffects = !(this.data.isLazy && this.childList === null) && !this.isLoading;
+		var allowEffects = !(this.data.isLazy && this.childList === null)
+			&& !this.isLoading
+			&& !forceSync;
 		this.render(allowEffects);
 
 		// Auto-collapse mode: collapse all siblings
@@ -949,6 +972,7 @@ DynaTreeNode.prototype = {
 	},
 
 	expand: function(flag) {
+		flag = (flag !== false);
 		if( !this.childList && !this.data.isLazy && flag ){
 			return; // Prevent expanding empty nodes
 		} else if( this.parent === null && !flag ){
@@ -963,7 +987,7 @@ DynaTreeNode.prototype = {
 		 */
 		if( this.tree.timer ) {
 			clearTimeout(this.tree.timer);
-			logMsg("clearTimeout(%o)", this.tree.timer);
+			this.tree.logDebug("clearTimeout(%o)", this.tree.timer);
 		}
 		var self = this; // required for closures
 		switch (mode) {
@@ -972,19 +996,20 @@ DynaTreeNode.prototype = {
 			break;
 		case "expand":
 			this.tree.timer = setTimeout(function(){
-				logMsg("setTimeout: trigger");
+				self.tree.logDebug("setTimeout: trigger expand");
 				self.expand(true);
 			}, ms);
 			break;
 		case "activate":
 			this.tree.timer = setTimeout(function(){
+				self.tree.logDebug("setTimeout: trigger activate");
 				self.activate();
 			}, ms);
 			break;
 		default:
 			throw "Invalid mode " + mode;
 		}
-		logMsg("setTimeout(%s, %s): %s", mode, ms, this.tree.timer);
+		this.tree.logDebug("setTimeout(%s, %s): %s", mode, ms, this.tree.timer);
 	},
 
 	toggleExpand: function() {
@@ -1003,7 +1028,7 @@ DynaTreeNode.prototype = {
 		}
 	},
 
-	onClick: function(event) {
+	_onClick: function(event) {
 //		this.tree.logDebug("dtnode.onClick(" + event.type + "): dtnode:" + this + ", button:" + event.button + ", which: " + event.which);
 		var targetType = this.getEventTargetType(event);
 		if( targetType === "expander" ) {
@@ -1017,11 +1042,11 @@ DynaTreeNode.prototype = {
 		} else {
 			this._userActivate();
 			var aTag = this.span.getElementsByTagName("a");
-			if(aTag[0]){ 
+			if(aTag[0]){
 				// issue 154
 				// TODO: check if still required on IE 9:
-				// Chrome and Safari don't focus the a-tag on click, 
-				// but calling focus() seem to have problems on IE: 
+				// Chrome and Safari don't focus the a-tag on click,
+				// but calling focus() seem to have problems on IE:
 				// http://code.google.com/p/dynatree/issues/detail?id=154
 				if(!$.browser.msie){
 					aTag[0].focus();
@@ -1035,11 +1060,11 @@ DynaTreeNode.prototype = {
 		return false;
 	},
 
-	onDblClick: function(event) {
+	_onDblClick: function(event) {
 //		this.tree.logDebug("dtnode.onDblClick(" + event.type + "): dtnode:" + this + ", button:" + event.button + ", which: " + event.which);
 	},
 
-	onKeydown: function(event) {
+	_onKeydown: function(event) {
 //		this.tree.logDebug("dtnode.onKeydown(" + event.type + "): dtnode:" + this + ", charCode:" + event.charCode + ", keyCode: " + event.keyCode + ", which: " + event.which);
 		var handled = true;
 //		alert("keyDown" + event.which);
@@ -1124,13 +1149,13 @@ DynaTreeNode.prototype = {
 		return !handled;
 	},
 
-	onKeypress: function(event) {
+	_onKeypress: function(event) {
 		// onKeypress is only hooked to allow user callbacks.
 		// We don't process it, because IE and Safari don't fire keypress for cursor keys.
 //		this.tree.logDebug("dtnode.onKeypress(" + event.type + "): dtnode:" + this + ", charCode:" + event.charCode + ", keyCode: " + event.keyCode + ", which: " + event.which);
 	},
 
-	onFocus: function(event) {
+	_onFocus: function(event) {
 		// Handles blur and focus events.
 //		this.tree.logDebug("dtnode.onFocus(%o): %o", event, this);
 		var opts = this.tree.options;
@@ -1152,7 +1177,7 @@ DynaTreeNode.prototype = {
 				$(this.tree.tnFocused.span).removeClass(opts.classNames.focused);
 			}
 			this.tree.tnFocused = this;
-			if ( opts.onFocus ){ // Pass element as 'this' (jQuery convention)
+			if ( opts.onFocus ){
 				opts.onFocus.call(this.tree, this);
 			}
 			$(this.tree.tnFocused.span).addClass(opts.classNames.focused);
@@ -1242,7 +1267,7 @@ DynaTreeNode.prototype = {
 
 	removeChildren: function(isRecursiveCall, retainPersistence) {
 		// Remove all child nodes (more efficiently than recursive remove())
-		this.tree.logDebug ("%s.removeChildren(%o)", this, isRecursiveCall);
+		this.tree.logDebug("%s.removeChildren(%o)", this, isRecursiveCall);
 		var tree = this.tree;
 		var ac = this.childList;
 		if( ac ) {
@@ -1261,14 +1286,20 @@ DynaTreeNode.prototype = {
 					}
 				}
 				tn.removeChildren(true, retainPersistence);
-//				this.div.removeChild(tn.div);
+				if(this.ul){
+					this.ul.removeChild(tn.li);
+				}
+/*
 				try{
 					this.ul.removeChild(tn.li);
 				}catch(e){
-					this.tree.logDebug ("%s.removeChildren: couldnt remove LI", this, e);
+					this.tree.logDebug("%s.removeChildren: couldnt remove LI", this, e);
 				}
+*/
 				delete tn;
 			}
+			// Set to 'null' which is interpreted as 'not yet loaded' for lazy
+			// nodes
 			this.childList = null;
 		}
 		if( ! isRecursiveCall ) {
@@ -1298,7 +1329,7 @@ DynaTreeNode.prototype = {
 		// We listen to this, if a callback was passed to reloadChildren
 		if(callback){
 			var self = this;
-			var eventType = "nodeLoaded.dynatree." + this.tree.$tree.attr("id") 
+			var eventType = "nodeLoaded.dynatree." + this.tree.$tree.attr("id")
 				+ "." + this.data.key;
 			this.tree.$tree.bind(eventType, function(e, node, isOk){
 				self.tree.$tree.unbind(eventType);
@@ -1310,58 +1341,67 @@ DynaTreeNode.prototype = {
 			});
 		}
 		// The expansion state is maintained
-		if( this.bExpanded ) {
-			// Remove children first, to prevent effects being applied
-			this.removeChildren();
-			// then force re-expand to trigger lazy loading
-//			this.expand(false);
-//			this.expand(true);
-			this._loadContent();
-		} else {
-			this.removeChildren();
-			this._loadContent();
-		}
+		this.removeChildren();
+		this._loadContent();
+//		if( this.bExpanded ) {
+//			// Remove children first, to prevent effects being applied
+//			this.removeChildren();
+//			// then force re-expand to trigger lazy loading
+////			this.expand(false);
+////			this.expand(true);
+//			this._loadContent();
+//		} else {
+//			this.removeChildren();
+//			this._loadContent();
+//		}
 	},
 
-	loadKeyPath: function(keyPath, expand, callback) {
-		this.tree.logDebug("%s.loadKeyPath(%s, %s)", this, keyPath, expand);
+	/**
+	 * Make sure the node with a given key path is available in the tree.
+	 */
+	_loadKeyPath: function(keyPath, callback) {
+		var tree = this.tree;
+		tree.logDebug("%s._loadKeyPath(%s)", this, keyPath);
 		if(keyPath === ""){
-			this.tree.logDebug("%s.loadKeyPath(%s, %s): end node!", this, keyPath, expand);
-			if( expand ){
-				this.makeVisible();
-			}
-			return;
+			throw "Key path must not be empty";
 		}
-		var segList = keyPath.split(this.tree.options.keyPathSeparator);
-		if(segList[0] == ""){
+		var segList = keyPath.split(tree.options.keyPathSeparator);
+		if(segList[0] === ""){
 			throw "Key path must be relative (don't start with '/')";
 		}
 		var seg = segList.shift();
-		
+
 		for(var i = 0; i < this.childList.length; i++){
 			var child = this.childList[i];
 			if( child.data.key === seg ){
-				if(child.data.isLazy && (child.childlist === null || child.childlist === undefined)){
-					this.tree.logDebug("%s.loadKeyPath(%s, %s) -> reloading %s...", this, keyPath, expand, child);
+				if(segList.length === 0) {
+					// Found the end node
+					callback.call(tree, child, "ok");
+
+				}else if(child.data.isLazy && (child.childList === null || child.childList === undefined)){
+					tree.logDebug("%s._loadKeyPath(%s) -> reloading %s...", this, keyPath, child);
 					var self = this;
 					child.reloadChildren(function(node, isOk){
 						// After loading, look for direct child with that key
 						if(isOk){
-							self.tree.logDebug("%s.loadKeyPath(%s, %s) -> reloaded %s.", node, keyPath, expand, node);
-							node.loadKeyPath(segList.join(self.tree.options.keyPathSeparator), expand, callback);
+							tree.logDebug("%s._loadKeyPath(%s) -> reloaded %s.", node, keyPath, node);
+							callback.call(tree, child, "loaded");
+							node._loadKeyPath(segList.join(tree.options.keyPathSeparator), callback);
 						}else{
-							this.tree.logWarning("%s.loadKeyPath(%s, %s) -> reloadChildren() failed.", self, keyPath, expand);
+							tree.logWarning("%s._loadKeyPath(%s) -> reloadChildren() failed.", self, keyPath);
+							callback.call(tree, child, "error");
 						}
 					});
 				} else {
+					callback.call(tree, child, "loaded");
 					// Look for direct child with that key
-					child.loadKeyPath(segList.join(this.tree.options.keyPathSeparator), expand, callback);
+					child._loadKeyPath(segList.join(tree.options.keyPathSeparator), callback);
 				}
 				return;
-			} 
+			}
 		}
 		// Could not find key
-		this.tree.logWarning("Node not found: " + seg);
+		tree.logWarning("Node not found: " + seg);
 		return;
 	},
 
@@ -1514,12 +1554,14 @@ DynaTreeNode.prototype = {
 		 *
 		 */
 //		this.tree.logDebug("%s.addChild(%o, %o)", this, obj, beforeNode);
-		if( !obj || obj.length === 0 ){ // Passed null or undefined or empty array
+		if(typeof(obj) == "string"){
+			throw "Invalid data type for " + obj;
+		}else if( !obj || obj.length === 0 ){ // Passed null or undefined or empty array
 			return;
-		}
-		if( obj instanceof DynaTreeNode ){
+		}else if( obj instanceof DynaTreeNode ){
 			return this._addChildNode(obj, beforeNode);
 		}
+
 		if( !obj.length ){ // Passed a single data object
 			obj = [ obj ];
 		}
@@ -1549,43 +1591,56 @@ DynaTreeNode.prototype = {
 	appendAjax: function(ajaxOptions) {
 		this.removeChildren(false, true);
 		this.setLazyNodeStatus(DTNodeStatus_Loading);
+		// Debug feature: force a delay, to simulate slow loading...
+		if(ajaxOptions.debugLazyDelay){
+			var ms = ajaxOptions.debugLazyDelay;
+			var self = this;
+			ajaxOptions.debugLazyDelay = 0;
+			this.tree.logInfo("appendAjax: waiting for debugLazyDelay " + ms);
+			setTimeout(function(){self.appendAjax(ajaxOptions);}, ms);
+			return;
+		}
 		// Ajax option inheritance: $.ajaxSetup < $.ui.dynatree.prototype.options.ajaxDefaults < tree.options.ajaxDefaults < ajaxOptions
 		var self = this;
 		var orgSuccess = ajaxOptions.success;
 		var orgError = ajaxOptions.error;
-		var eventType = "nodeLoaded.dynatree." + this.tree.$tree.attr("id") 
+		var eventType = "nodeLoaded.dynatree." + this.tree.$tree.attr("id")
 			+ "." + this.data.key;
 		var options = $.extend({}, this.tree.options.ajaxDefaults, ajaxOptions, {
-/*
-			complete: function(req, textStatus){
-				alert("ajax complete");
-			},
-			timeout: 5000, // 5 sec
-*/
 			success: function(data, textStatus){
 				// <this> is the request options
 //				self.tree.logDebug("appendAjax().success");
 				var prevPhase = self.tree.phase;
 				self.tree.phase = "init";
-//				self.append(data);
-				self.addChild(data, null);
+
+				if(!$.isArray(data) || data.length !== 0){
+					self.addChild(data, null);
+				}
 				self.tree.phase = "postInit";
-				self.setLazyNodeStatus(DTNodeStatus_Ok);
 				if( orgSuccess ){
 					orgSuccess.call(options, self);
 				}
-				self.tree.logInfo("trigger "+ eventType);
+				self.tree.logInfo("trigger " + eventType);
 				self.tree.$tree.trigger(eventType, [self, true]);
 				self.tree.phase = prevPhase;
+				// This should be the last command, so node.isLoading is true
+				// while the callbacks run
+				self.setLazyNodeStatus(DTNodeStatus_Ok);
+				if($.isArray(data) && data.length === 0){
+					// Set to [] which is interpreted as 'no children' for lazy
+					// nodes
+					self.childList = [];
+					self.render();
+				}
 				},
 			error: function(XMLHttpRequest, textStatus, errorThrown){
 				// <this> is the request options
 				self.tree.logWarning("appendAjax failed:", textStatus, ":\n", XMLHttpRequest, "\n", errorThrown);
-				self.setLazyNodeStatus(DTNodeStatus_Error, {info: textStatus, tooltip: ""+errorThrown});
 				if( orgError ){
 					orgError.call(options, self, XMLHttpRequest, textStatus, errorThrown);
 				}
 				self.tree.$tree.trigger(eventType, [self, false]);
+				self.setLazyNodeStatus(DTNodeStatus_Error, {info: textStatus, tooltip: ""+errorThrown});
 				}
 		});
 		$.ajax(options);
@@ -1736,7 +1791,7 @@ DynaTreeStatus._getTreePersistData = function(cookieId, cookieOpts) {
 	var ts = new DynaTreeStatus(cookieId, cookieOpts);
 	ts.read();
 	return ts.toDict();
-}
+};
 // Make available in global scope
 getDynaTreePersistData = DynaTreeStatus._getTreePersistData;
 
@@ -1874,13 +1929,17 @@ DynaTree.prototype = {
 		this.timer = null;
 		// find container element
 		this.divTree = this.$tree.get(0);
-		//
+
+//		var parentPos = $(this.divTree).parent().offset();
+//		this.parentTop = parentPos.top;
+//		this.parentLeft = parentPos.left;
+
 		_initDragAndDrop(this);
 	},
 
 	// member functions
 
-	_load: function() {
+	_load: function(callback) {
 		var $widget = this.$widget;
 		var opts = this.options;
 		this.bEnableUpdate = true;
@@ -1899,12 +1958,19 @@ DynaTree.prototype = {
 			_log("warn", "Option 'minExpandLevel' must be >= 1.");
 			opts.minExpandLevel = 1;
 		}
+//		_log("warn", "jQuery.support.boxModel " + jQuery.support.boxModel);
 
 		// If a 'options.classNames' dictionary was passed, still use defaults
 		// for undefined classes:
 		if( opts.classNames !== $.ui.dynatree.prototype.options.classNames ) {
 			opts.classNames = $.extend({}, $.ui.dynatree.prototype.options.classNames, opts.classNames);
 		}
+		if( opts.ajaxDefaults !== $.ui.dynatree.prototype.options.ajaxDefaults ) {
+			opts.ajaxDefaults = $.extend({}, $.ui.dynatree.prototype.options.ajaxDefaults, opts.ajaxDefaults);
+		}
+		if( opts.dnd !== $.ui.dynatree.prototype.options.dnd ) {
+			opts.dnd = $.extend({}, $.ui.dynatree.prototype.options.dnd, opts.dnd);
+		}
 		// Guess skin path, if not specified
 		if(!opts.imagePath) {
 			$("script").each( function () {
@@ -1915,7 +1981,7 @@ DynaTree.prototype = {
 					}else{
 						opts.imagePath = "skin/";
 					}
-    				logMsg("Guessing imagePath from '%s': '%s'", this.src, opts.imagePath);
+					logMsg("Guessing imagePath from '%s': '%s'", this.src, opts.imagePath);
 					return false; // first match
 				}
 			});
@@ -1963,6 +2029,7 @@ DynaTree.prototype = {
 */
 		// Create the root element
 		this.tnRoot = new DynaTreeNode(null, this, {});
+		this.tnRoot.bExpanded = true;
 		this.tnRoot.render();
 		this.divTree.appendChild(this.tnRoot.ul);
 
@@ -1982,7 +2049,7 @@ DynaTree.prototype = {
 			// Init tree from AJAX request
 			isLazy = true;
 			root.data.isLazy = true;
-			this._reloadAjax();
+			this._reloadAjax(callback);
 
 		} else if( opts.initId ) {
 			// Init tree from another UL element
@@ -2023,26 +2090,26 @@ DynaTree.prototype = {
 		this.phase = "idle";
 	},
 
-	_setNoUpdate: function(silent) {
-		// TODO: set options to disable and re-enable updates while loading 
-		var opts = this.options;
-		var prev = {
-			fx: opts.fx, 
-			autoFocus: opts.autoFocus,
-			autoCollapse: opts.autoCollapse };
-		if(silent === true){
-			opts.autoFocus = false;
-			opts.fx = null;
-			opts.autoCollapse = false;
-		} else {
-			opts.autoFocus = silent.autoFocus;
-			opts.fx = silent.fx;
-			opts.autoCollapse = silent.autoCollapse;
-		}
-		return prev;
-	},
-
-	_reloadAjax: function() {
+//	_setNoUpdate: function(silent) {
+//		// TODO: set options to disable and re-enable updates while loading
+//		var opts = this.options;
+//		var prev = {
+//			fx: opts.fx,
+//			autoFocus: opts.autoFocus,
+//			autoCollapse: opts.autoCollapse };
+//		if(silent === true){
+//			opts.autoFocus = false;
+//			opts.fx = null;
+//			opts.autoCollapse = false;
+//		} else {
+//			opts.autoFocus = silent.autoFocus;
+//			opts.fx = silent.fx;
+//			opts.autoCollapse = silent.autoCollapse;
+//		}
+//		return prev;
+//	},
+
+	_reloadAjax: function(callback) {
 		// Reload
 		var opts = this.options;
 		if( ! opts.initAjax || ! opts.initAjax.url ){
@@ -2073,8 +2140,18 @@ DynaTree.prototype = {
 				this.logWarning("initAjax: error callback is ignored when onPostInit was specified.");
 			}
 			var isReloading = pers.isReloading();
-			ajaxOpts["success"] = function(dtnode) { opts.onPostInit.call(dtnode.tree, isReloading, false); };
-			ajaxOpts["error"] = function(dtnode) { opts.onPostInit.call(dtnode.tree, isReloading, true); };
+			ajaxOpts["success"] = function(dtnode) {
+				opts.onPostInit.call(dtnode.tree, isReloading, false);
+				if(callback){
+					callback.call(dtnode.tree, "ok");
+				}
+			};
+			ajaxOpts["error"] = function(dtnode) {
+				opts.onPostInit.call(dtnode.tree, isReloading, true);
+				if(callback){
+					callback.call(dtnode.tree, "error");
+				}
+			};
 		}
 		this.logDebug("Dynatree._init(): send Ajax request...");
 		this.tnRoot.appendAjax(ajaxOpts);
@@ -2089,6 +2166,18 @@ DynaTree.prototype = {
 		return this.tnRoot.toDict(true);
 	},
 
+	serializeArray: function(stopOnParents) {
+		// Return a JavaScript array of objects, ready to be encoded as a JSON
+		// string for selected nodes
+		var nodeList = this.getSelectedNodes(stopOnParents),
+			name = this.$tree.attr("name") || this.$tree.attr("id"),
+			arr = [];
+		for(var i=0, l=nodeList.length; i<l; i++){
+			arr.push({name: name, value: nodeList[i].data.key});
+		}
+		return arr;
+	},
+
 	getPersistData: function() {
 		return this.persistence.toDict();
 	},
@@ -2124,12 +2213,12 @@ DynaTree.prototype = {
 
 	redraw: function() {
 		this.logDebug("dynatree.redraw()...");
-		this.tnRoot.render();
+		this.tnRoot.render(false);
 		this.logDebug("dynatree.redraw() done.");
 	},
 
-	reload: function() {
-		this._load();
+	reload: function(callback) {
+		this._load(callback);
 	},
 
 	getRoot: function() {
@@ -2207,10 +2296,10 @@ DynaTree.prototype = {
 		return dtnode;
 	},
 
-	loadKeyPath: function(keyPath, expand, callback) {
+	loadKeyPath: function(keyPath, callback) {
 		var segList = keyPath.split(this.options.keyPathSeparator);
 		// Remove leading '/'
-		if(segList[0] == ""){
+		if(segList[0] === ""){
 			segList.shift();
 		}
 		// Remove leading system root key
@@ -2219,9 +2308,9 @@ DynaTree.prototype = {
 			segList.shift();
 		}
 		keyPath = segList.join(this.options.keyPathSeparator);
-		return this.tnRoot.loadKeyPath(keyPath, expand, callback);
+		return this.tnRoot._loadKeyPath(keyPath, callback);
 	},
-	
+
 	selectKey: function(key, select) {
 		var dtnode = this.getNodeByKey(key);
 		if( !dtnode ){
@@ -2294,7 +2383,7 @@ TODO: better?
 				var dataAttr = $.trim($li.attr("data"));
 				if( dataAttr ) {
 					if( dataAttr.charAt(0) != "{" ){
-						dataAttr = "{" + dataAttr + "}"
+						dataAttr = "{" + dataAttr + "}";
 					}
 					try {
 						$.extend(data, eval("(" + dataAttr + ")"));
@@ -2323,7 +2412,8 @@ TODO: better?
 		if( !this.$dndMarker ) {
 			this.$dndMarker = $("<div id='dynatree-drop-marker'></div>")
 				.hide()
-				.prependTo("body");
+				.prependTo($(this.divTree).parent());
+//				.prependTo("body");
 			logMsg("Creating marker: %o", this.$dndMarker);
 		}
 		if(hitMode === "start"){
@@ -2424,14 +2514,14 @@ TODO: better?
 				.append($(event.target).closest('a').clone());
 			// Attach node reference to helper object
 			helper.data("dtSourceNode", node);
-			logMsg("helper.sourceNode=%o", helper.data("dtSourceNode"));
+			this.logDebug("helper.sourceNode=%o", helper.data("dtSourceNode"));
 			res = helper;
 			break;
 		case "start":
 			if(node.isStatusNode()) {
 				res = false;
 			} else if(dnd.onDragStart) {
-				res = dnd.onDragStart(node)
+				res = dnd.onDragStart(node);
 			}
 			if(res === false) {
 				this.logDebug("tree.onDragStart() cancelled");
@@ -2464,11 +2554,21 @@ TODO: better?
 				hitMode = enterResponse;
 			} else {
 				// Calculate hitMode from relative cursor position.
-				var nodeOfs = nodeTag.position();
-				var relPos = { x: event.clientX - nodeOfs.left,
-							y: event.clientY - nodeOfs.top };
+				var nodeOfs = nodeTag.offset();
+//				var relPos = { x: event.clientX - nodeOfs.left,
+//							y: event.clientY - nodeOfs.top };
+//				nodeOfs.top += this.parentTop;
+//				nodeOfs.left += this.parentLeft;
+				var relPos = { x: event.pageX - nodeOfs.left,
+							   y: event.pageY - nodeOfs.top };
 				var relPos2 = { x: relPos.x / nodeTag.width(),
-							y: relPos.y / nodeTag.height() };
+								y: relPos.y / nodeTag.height() };
+//				this.logDebug("event.page: %s/%s", event.pageX, event.pageY);
+//				this.logDebug("event.client: %s/%s", event.clientX, event.clientY);
+//				this.logDebug("nodeOfs: %s/%s", nodeOfs.left, nodeOfs.top);
+////				this.logDebug("parent: %s/%s", this.parentLeft, this.parentTop);
+//				this.logDebug("relPos: %s/%s", relPos.x, relPos.y);
+//				this.logDebug("relPos2: %s/%s", relPos2.x, relPos2.y);
 				if( enterResponse.after && relPos2.y > 0.75 ){
 					hitMode = "after";
 				} else if(!enterResponse.over && enterResponse.after && relPos2.y > 0.5 ){
@@ -2484,23 +2584,24 @@ TODO: better?
 				// TODO: these are no-ops when moving nodes, but not in copy mode
 				if( dnd.preventVoidMoves ){
 					if(node === otherNode){
-						logMsg("    drop over source node prevented");
+						this.logDebug("    drop over source node prevented");
 						hitMode = null;
 					}else if(hitMode === "before" && otherNode && node === otherNode.getNextSibling()){
-						logMsg("    drop after source node prevented");
+						this.logDebug("    drop after source node prevented");
 						hitMode = null;
 					}else if(hitMode === "after" && otherNode && node === otherNode.getPrevSibling()){
-						logMsg("    drop before source node prevented");
+						this.logDebug("    drop before source node prevented");
 						hitMode = null;
 					}else if(hitMode === "over" && otherNode
 							&& otherNode.parent === node && otherNode.isLastSibling() ){
-						logMsg("    drop last child over own parent prevented");
+						this.logDebug("    drop last child over own parent prevented");
 						hitMode = null;
 					}
 				}
-				logMsg("hitMode: %s - %s - %s", hitMode, (node.parent === otherNode), node.isLastSibling());
+				this.logDebug("hitMode: %s - %s - %s", hitMode, (node.parent === otherNode), node.isLastSibling());
 				ui.helper.data("hitMode", hitMode);
 //    			logMsg("    clientPos: %s/%s", event.clientX, event.clientY);
+//    			logMsg("    clientPos: %s/%s", event.pageX, event.pageY);
 //    			logMsg("    nodeOfs: %s/%s", nodeOfs.left, nodeOfs.top);
 //    			logMsg("    relPos: %s/%s", relPos.x, relPos.y);
 //    			logMsg("    relPos2: %s/%s: %s", relPos2.x, relPos2.y, hitMode);
@@ -2557,6 +2658,13 @@ TODO: better?
 		return res;
 	},
 
+	cancelDrag: function() {
+		 var dd = $.ui.ddmanager.current;
+		 if(dd){
+			 dd.cancel();
+		 }
+	},
+
 	// --- end of class
 	lastentry: undefined
 };
@@ -2603,42 +2711,40 @@ $.widget("ui.dynatree", {
 	},
 
 	bind: function() {
-		var $this = this.element;
-		var o = this.options;
-
 		// Prevent duplicate binding
 		this.unbind();
 
 		var eventNames = "click.dynatree dblclick.dynatree";
-		if( o.keyboard ){ 
+		if( this.options.keyboard ){
 			// Note: leading ' '!
 			eventNames += " keypress.dynatree keydown.dynatree";
 		}
-		$this.bind(eventNames, function(event){
+		this.element.bind(eventNames, function(event){
 			var dtnode = getDtNodeFromElement(event.target);
 			if( !dtnode ){
 				return true;  // Allow bubbling of other events
 			}
-			var prevPhase = dtnode.tree.phase;
-			dtnode.tree.phase = "userEvent";
+			var tree = dtnode.tree;
+			var o = tree.options;
+			tree.logDebug("event(%s): dtnode: %s", event.type, dtnode);
+			var prevPhase = tree.phase;
+			tree.phase = "userEvent";
 			try {
-				dtnode.tree.logDebug("bind(%o): dtnode: %o", event, dtnode);
-
 				switch(event.type) {
 				case "click":
-					return ( o.onClick && o.onClick(dtnode, event)===false ) ? false : dtnode.onClick(event);
+					return ( o.onClick && o.onClick.call(tree, dtnode, event)===false ) ? false : dtnode._onClick(event);
 				case "dblclick":
-					return ( o.onDblClick && o.onDblClick(dtnode, event)===false ) ? false : dtnode.onDblClick(event);
+					return ( o.onDblClick && o.onDblClick.call(tree, dtnode, event)===false ) ? false : dtnode._onDblClick(event);
 				case "keydown":
-					return ( o.onKeydown && o.onKeydown(dtnode, event)===false ) ? false : dtnode.onKeydown(event);
+					return ( o.onKeydown && o.onKeydown.call(tree, dtnode, event)===false ) ? false : dtnode._onKeydown(event);
 				case "keypress":
-					return ( o.onKeypress && o.onKeypress(dtnode, event)===false ) ? false : dtnode.onKeypress(event);
+					return ( o.onKeypress && o.onKeypress.call(tree, dtnode, event)===false ) ? false : dtnode._onKeypress(event);
 				}
 			} catch(e) {
 				var _ = null; // issue 117
-				dtnode.tree.logWarning("bind(%o): dtnode: %o, error: %o", event, dtnode, e);
+				tree.logWarning("bind(%o): dtnode: %o, error: %o", event, dtnode, e);
 			} finally {
-				dtnode.tree.phase = prevPhase;
+				tree.phase = prevPhase;
 			}
 		});
 
@@ -2650,7 +2756,7 @@ $.widget("ui.dynatree", {
 			// Fix event for IE:
 			event = arguments[0] = $.event.fix( event || window.event );
 			var dtnode = getDtNodeFromElement(event.target);
-			return dtnode ? dtnode.onFocus(event) : false;
+			return dtnode ? dtnode._onFocus(event) : false;
 		}
 		var div = this.tree.divTree;
 		if( div.addEventListener ) {
@@ -2710,15 +2816,14 @@ $.widget("ui.dynatree", {
 
 
 // The following methods return a value (thus breaking the jQuery call chain):
-
-// @@ 1.8
-//$.ui.dynatree.getter = "getTree getRoot getActiveNode getSelectedNodes";
+if( parseFloat($.ui.version) < 1.8 ) {
+	$.ui.dynatree.getter = "getTree getRoot getActiveNode getSelectedNodes";
+}
 
 
 /*******************************************************************************
  * Plugin default options:
  */
-//$.ui.dynatree.defaults = {  @@ 1.8
 $.ui.dynatree.prototype.options = {
 	title: "Dynatree", // Tree's name (only used for debug outpu)
 	minExpandLevel: 1, // 1: root node is not collapsible
@@ -2781,7 +2886,7 @@ $.ui.dynatree.prototype.options = {
 	},
 	generateIds: false, // Generate id attributes like <span id='dynatree-id-KEY'>
 	idPrefix: "dynatree-id-", // Used to generate node id's like <span id="dynatree-id-<key>">.
-	keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath(). 
+	keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
 //    cookieId: "dynatree-cookie", // Choose a more unique name, to allow multiple trees.
 	cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
 	cookie: {
@@ -2813,6 +2918,7 @@ $.ui.dynatree.prototype.options = {
 		hidden: "dynatree-hidden",
 		combinedExpanderPrefix: "dynatree-exp-",
 		combinedIconPrefix: "dynatree-ico-",
+		nodeLoading: "dynatree-loading",
 //		disabled: "dynatree-disabled",
 		hasChildren: "dynatree-has-children",
 		active: "dynatree-active",
@@ -2828,6 +2934,10 @@ $.ui.dynatree.prototype.options = {
 	// ------------------------------------------------------------------------
 	lastentry: undefined
 };
+//
+if( parseFloat($.ui.version) < 1.8 ) {
+	$.ui.dynatree.defaults = $.ui.dynatree.prototype.options;
+}
 
 /*******************************************************************************
  * Reserved data attributes for a tree node.
@@ -2926,7 +3036,7 @@ var _registerDnd = function() {
 //	            draggable.offset.click.left -= event.target.offsetLeft;
 				draggable.offset.click.top = -2;
 				draggable.offset.click.left = + 16;
-				logMsg("    draggable.offset.click FIXED: %s/%s", draggable.offset.click.left, draggable.offset.click.top);
+//				logMsg("    draggable.offset.click FIXED: %s/%s", draggable.offset.click.left, draggable.offset.click.top);
 				// Trigger onDragStart event
 				// TODO: when called as connectTo..., the return value is ignored(?)
 				return sourceNode.tree._onDragEvent("start", sourceNode, null, event, ui, draggable);
@@ -2937,6 +3047,7 @@ var _registerDnd = function() {
 			var sourceNode = ui.helper.data("dtSourceNode") || null;
 			var prevTargetNode = ui.helper.data("dtTargetNode") || null;
 			var targetNode = getDtNodeFromElement(event.target);
+//			logMsg("getDtNodeFromElement(%o): %s", event.target, targetNode);
 			if(event.target && !targetNode){
 				// We got a drag event, but the targetNode could not be found
 				// at the event location. This may happen, if the mouse