if (! this.multiExpand) {            var sibs = this.getSiblings();            for (var i=0; i<sibs.length; ++i) {                if (sibs[i] != this && sibs[i].expanded) {                     sibs[i].collapse();                 }            }        }        this.showChildren();        ret = this.tree.fireEvent("expandComplete", this);    },    updateIcon: function() {        if (this.hasIcon) {            var el = this.getToggleEl();            if (el) {                el.className = this.getStyle();            }        }    },    /**     * Returns the css style name for the toggle     * @method getStyle     * @return {string} the css class for this node's toggle     */    getStyle: function() {        // this.logger.log("No children, " + " isDyanmic: " + this.isDynamic() + " expanded: " + this.expanded);        if (this.isLoading) {            this.logger.log("returning the loading icon");            return "ygtvloading";        } else {            // location top or bottom, middle nodes also get the top style            var loc = (this.nextSibling) ? "t" : "l";            // type p=plus(expand), m=minus(collapase), n=none(no children)            var type = "n";            if (this.hasChildren(true) || (this.isDynamic() && !this.getIconMode())) {            // if (this.hasChildren(true)) {                type = (this.expanded) ? "m" : "p";            }            // this.logger.log("ygtv" + loc + type);            return "ygtv" + loc + type;        }    },    /**     * Returns the hover style for the icon     * @return {string} the css class hover state     * @method getHoverStyle     */    getHoverStyle: function() {         var s = this.getStyle();        if (this.hasChildren(true) && !this.isLoading) {             s += "h";         }        return s;    },    /**     * Recursively expands all of this node's children.     * @method expandAll     */    expandAll: function() {         for (var i=0;i<this.children.length;++i) {            var c = this.children[i];            if (c.isDynamic()) {                alert("Not supported (lazy load + expand all)");                break;            } else if (! c.multiExpand) {                alert("Not supported (no multi-expand + expand all)");                break;            } else {                c.expand();                c.expandAll();            }        }    },    /**     * Recursively collapses all of this node's children.     * @method collapseAll     */    collapseAll: function() {         for (var i=0;i<this.children.length;++i) {            this.children[i].collapse();            this.children[i].collapseAll();        }    },    /**     * Configures this node for dynamically obtaining the child data     * when the node is first expanded.  Calling it without the callback     * will turn off dynamic load for the node.     * @method setDynamicLoad     * @param fmDataLoader {function} the function that will be used to get the data.     * @param iconMode {int} configures the icon that is displayed when a dynamic     * load node is expanded the first time without children.  By default, the      * "collapse" icon will be used.  If set to 1, the leaf node icon will be     * displayed.     */    setDynamicLoad: function(fnDataLoader, iconMode) {         if (fnDataLoader) {            this.dataLoader = fnDataLoader;            this._dynLoad = true;        } else {            this.dataLoader = null;            this._dynLoad = false;        }        if (iconMode) {            this.iconMode = iconMode;        }    },    /**     * Evaluates if this node is the root node of the tree     * @method isRoot     * @return {boolean} true if this is the root node     */    isRoot: function() {         return (this == this.tree.root);    },    /**     * Evaluates if this node's children should be loaded dynamically.  Looks for     * the property both in this instance and the root node.  If the tree is     * defined to load all children dynamically, the data callback function is     * defined in the root node     * @method isDynamic     * @return {boolean} true if this node's children are to be loaded dynamically     */    isDynamic: function() {         var lazy = (!this.isRoot() && (this._dynLoad || this.tree.root._dynLoad));        // this.logger.log("isDynamic: " + lazy);        return lazy;    },    /**     * Returns the current icon mode.  This refers to the way childless dynamic     * load nodes appear.     * @method getIconMode     * @return {int} 0 for collapse style, 1 for leaf node style     */    getIconMode: function() {        return (this.iconMode || this.tree.root.iconMode);    },    /**     * Checks if this node has children.  If this node is lazy-loading and the     * children have not been rendered, we do not know whether or not there     * are actual children.  In most cases, we need to assume that there are     * children (for instance, the toggle needs to show the expandable      * presentation state).  In other times we want to know if there are rendered     * children.  For the latter, "checkForLazyLoad" should be false.     * @method hasChildren     * @param checkForLazyLoad {boolean} should we check for unloaded children?     * @return {boolean} true if this has children or if it might and we are     * checking for this condition.     */    hasChildren: function(checkForLazyLoad) {         return ( this.children.length > 0 ||                 (checkForLazyLoad && this.isDynamic() && !this.dynamicLoadComplete) );    },    /**     * Expands if node is collapsed, collapses otherwise.     * @method toggle     */    toggle: function() {        if (!this.tree.locked && ( this.hasChildren(true) || this.isDynamic()) ) {            if (this.expanded) { this.collapse(); } else { this.expand(); }        }    },    /**     * Returns the markup for this node and its children.     * @method getHtml     * @return {string} the markup for this node and its expanded children.     */    getHtml: function() {        this.childrenRendered = false;        var sb = [];        sb[sb.length] = '<div class="ygtvitem" id="' + this.getElId() + '">';        sb[sb.length] = this.getNodeHtml();        sb[sb.length] = this.getChildrenHtml();        sb[sb.length] = '</div>';        return sb.join("");    },    /**     * Called when first rendering the tree.  We always build the div that will     * contain this nodes children, but we don't render the children themselves     * unless this node is expanded.     * @method getChildrenHtml     * @return {string} the children container div html and any expanded children     * @private     */    getChildrenHtml: function() {        var sb = [];        sb[sb.length] = '<div class="ygtvchildren"';        sb[sb.length] = ' id="' + this.getChildrenElId() + '"';        // This is a workaround for an IE rendering issue, the child div has layout        // in IE, creating extra space if a leaf node is created with the expanded        // property set to true.        if (!this.expanded || !this.hasChildren()) {            sb[sb.length] = ' style="display:none;"';        }        sb[sb.length] = '>';        // Don't render the actual child node HTML unless this node is expanded.        if ( (this.hasChildren(true) && this.expanded) ||                (this.renderHidden && !this.isDynamic()) ) {            sb[sb.length] = this.renderChildren();        }        sb[sb.length] = '</div>';        return sb.join("");    },    /**     * Generates the markup for the child nodes.  This is not done until the node     * is expanded.     * @method renderChildren     * @return {string} the html for this node's children     * @private     */    renderChildren: function() {        this.logger.log("rendering children for " + this.index);        var node = this;        if (this.isDynamic() && !this.dynamicLoadComplete) {            this.isLoading = true;            this.tree.locked = true;            if (this.dataLoader) {                this.logger.log("Using dynamic loader defined for this node");                setTimeout(                     function() {                        node.dataLoader(node,                             function() {                                 node.loadComplete();                             });                    }, 10);                            } else if (this.tree.root.dataLoader) {                this.logger.log("Using the tree-level dynamic loader");                setTimeout(                     function() {                        node.tree.root.dataLoader(node,                             function() {                                 node.loadComplete();                             });                    }, 10);            } else {                this.logger.log("no loader found");                return "Error: data loader not found or not specified.";            }            return "";        } else {            return this.completeRender();        }    },    /**     * Called when we know we have all the child data.     * @method completeRender     * @return {string} children html     */    completeRender: function() {        this.logger.log("completeRender: " + this.index + ", # of children: " + this.children.length);        var sb = [];        for (var i=0; i < this.children.length; ++i) {            // this.children[i].childrenRendered = false;            sb[sb.length] = this.children[i].getHtml();        }                this.childrenRendered = true;        return sb.join("");    },    /**     * Load complete is the callback function we pass to the data provider     * in dynamic load situations.     * @method loadComplete     */    loadComplete: function() {        this.logger.log("loadComplete: " + this.index);        this.getChildrenEl().innerHTML = this.completeRender();        this.dynamicLoadComplete = true;        this.isLoading = false;        this.expand();        this.tree.locked = false;    },    /**     * Returns this node's ancestor at the specified depth.     * @method getAncestor     * @param {int} depth the depth of the ancestor.     * @return {Node} the ancestor     */    getAncestor: function(depth) {        if (depth >= this.depth || depth < 0)  {            this.logger.log("illegal getAncestor depth: " + depth);            return null;        }        var p = this.parent;                while (p.depth > depth) {            p = p.parent;        }        return p;    },    /**     * Returns the css class for the spacer at the specified depth for     * this node.  If this node's ancestor at the specified depth     * has a next sibling the presentation is different than if it     * does not have a next sibling     * @method getDepthStyle     * @param {int} depth the depth of the ancestor.     * @return {string} the css class for the spacer     */    getDepthStyle: function(depth) {        return (this.getAncestor(depth).nextSibling) ?             "ygtvdepthcell" : "ygtvblankdepthcell";    },    /**     * Get the markup for the node.  This is designed to be overrided so that we can     * support different types of nodes.     * @method getNodeHtml     * @return {string} The HTML that will render this node.     */    getNodeHtml: function() {         this.logger.log("Generating html");        return "";     },    /**     * Regenerates the html for this node and its children.  To be used when the     * node is expanded and new children have been added.     * @method refresh     */    refresh: function() {        // this.loadComplete();        this.getChildrenEl().innerHTML = this.completeRender();        if (this.hasIcon) {            var el = this.getToggleEl();            if (el) {                el.className = this.getStyle();            }        }    },    /**     * Node toString     * @method toString     * @return {string} string representation of the node     */    toString: function() {        return "Node (" + this.index + ")";    }};YAHOO.augment(YAHOO.widget.Node, YAHOO.util.EventProvider);/** * The default node presentation.  The first parameter should be * either a string that will be used as the node's label, or an object * that has a string propery called label.  By default, the clicking the * label will toggle the expanded/collapsed state of the node.  By * changing the href property of the instance, this behavior can be * changed so that the label will go to the specified href. * @namespace YAHOO.widget * @class TextNode * @extends YAHOO.widget.Node * @constructor * @param oData {object} a string or object containing the data that will * be used to render this node * @param oParent {YAHOO.widget.Node} this node's parent node * @param expanded {boolean} the initial expanded/collapsed state */YAHOO.widget.TextNode = function(oData, oParent, expanded) {    if (oData) {         this.init(oData, oParent, expanded);        this.setUpLabel(oData);    }    this.logger     = new YAHOO.widget.LogWriter(this.toString());};YAHOO.extend(YAHOO.widget.TextNode, YAHOO.widget.Node, {        /**     * The CSS class for the label href.  Defaults to ygtvlabel, but can be     * overridden to provide a custom presentation for a specific node.     * @property labelStyle     * @type string     */    labelStyle: "ygtvlabel",    /**     * The derived element id of the label for this node     * @property labelElId     * @type string     */    labelElId: null,    /**     * The text for the label.  It is assumed that the oData parameter will     * either be a string that will be used as the label, or an object that     * has a property called "label" that we will use.     * @property label     * @type string     */    label: null,    textNodeParentChange: function() {         /**         * Custom event that is fired when the text node label is clicked.  The