# Yahoo! UI Library

### TreeView Widget 2.6.0

Yahoo! UI Library > treeview > Node.js (source view)

Show Private Show Protected Show Deprecated

    (function () {
    	var Dom = YAHOO.util.Dom,
    		Lang = YAHOO.lang,
    		Event = YAHOO.util.Event;
    /**
     * The base class for all tree nodes.  The node's presentation and behavior in
     * response to mouse events is handled in Node subclasses.
     * @namespace YAHOO.widget
     * @class Node
     * @uses YAHOO.util.EventProvider
     * @param oData {object} a string or object containing the data that will
     * be used to render this node, and any custom attributes that should be
     * stored with the node (which is available in noderef.data).
     * All values in oData will be used to set equally named properties in the node
     * as long as the node does have such properties, they are not undefined, private or functions.
     * @param oParent {Node} this node's parent node
     * @param expanded {boolean} the initial expanded/collapsed state (deprecated, use oData.expanded)
     * @constructor
     */
    YAHOO.widget.Node = function(oData, oParent, expanded) {
        if (oData) { this.init(oData, oParent, expanded); }
    };

    YAHOO.widget.Node.prototype = {

        /**
         * The index for this instance obtained from global counter in YAHOO.widget.TreeView.
         * @property index
         * @type int
         */
        index: 0,

        /**
         * This node's child node collection.
         * @property children
         * @type Node[]
         */
        children: null,

        /**
         * Tree instance this node is part of
         * @property tree
         * @type TreeView
         */
        tree: null,

        /**
         * The data linked to this node.  This can be any object or primitive
         * value, and the data can be used in getNodeHtml().
         * @property data
         * @type object
         */
        data: null,

        /**
         * Parent node
         * @property parent
         * @type Node
         */
        parent: null,

        /**
         * The depth of this node.  We start at -1 for the root node.
         * @property depth
         * @type int
         */
        depth: -1,

        /**
         * The href for the node's label.  If one is not specified, the href will
         * be set so that it toggles the node.
         * @property href
         * @type string
         */
        href: null,

        /**
         * The label href target, defaults to current window
         * @property target
         * @type string
         */
        target: "_self",

        /**
         * The node's expanded/collapsed state
         * @property expanded
         * @type boolean
         */
        expanded: false,

        /**
         * Can multiple children be expanded at once?
         * @property multiExpand
         * @type boolean
         */
        multiExpand: true,

        /**
         * Should we render children for a collapsed node?  It is possible that the
         * implementer will want to render the hidden data...  @todo verify that we
         * need this, and implement it if we do.
         * @property renderHidden
         * @type boolean
         */
        renderHidden: false,

        /**
         * This flag is set to true when the html is generated for this node's
         * children, and set to false when new children are added.
         * @property childrenRendered
         * @type boolean
         */
        childrenRendered: false,

        /**
         * Dynamically loaded nodes only fetch the data the first time they are
         * expanded.  This flag is set to true once the data has been fetched.
         * @property dynamicLoadComplete
         * @type boolean
         */
        dynamicLoadComplete: false,

        /**
         * This node's previous sibling
         * @property previousSibling
         * @type Node
         */
        previousSibling: null,

        /**
         * This node's next sibling
         * @property nextSibling
         * @type Node
         */
        nextSibling: null,

        /**
         * We can set the node up to call an external method to get the child
         * data dynamically.
         * @property _dynLoad
         * @type boolean
         * @private
         */
        _dynLoad: false,

        /**
         * Function to execute when we need to get this node's child data.
         * @property dataLoader
         * @type function
         */
        dataLoader: null,

        /**
         * This is true for dynamically loading nodes while waiting for the
         * callback to return.
         * @property isLoading
         * @type boolean
         */
        isLoading: false,

        /**
         * The toggle/branch icon will not show if this is set to false.  This
         * could be useful if the implementer wants to have the child contain
         * extra info about the parent, rather than an actual node.
         * @property hasIcon
         * @type boolean
         */
        hasIcon: true,

        /**
         * Used to configure what happens when a dynamic load node is expanded
         * and we discover that it does not have children.  By default, it is
         * treated as if it still could have children (plus/minus icon).  Set
         * iconMode to have it display like a leaf node instead.
         * @property iconMode
         * @type int
         */
        iconMode: 0,

        /**
         * Specifies whether or not the content area of the node should be allowed
         * to wrap.
         * @property nowrap
         * @type boolean
         * @default false
         */
        nowrap: false,

     /**
         * If true, the node will alway be rendered as a leaf node.  This can be
         * used to override the presentation when dynamically loading the entire
         * tree.  Setting this to true also disables the dynamic load call for the
         * node.
         * @property isLeaf
         * @type boolean
         * @default false
         */
        isLeaf: false,

    /**
         * The CSS class for the html content container.  Defaults to ygtvhtml, but
         * can be overridden to provide a custom presentation for a specific node.
         * @property contentStyle
         * @type string
         */
        contentStyle: "",

        /**
         * The generated id that will contain the data passed in by the implementer.
         * @property contentElId
         * @type string
         */
        contentElId: null,
     /**
         * The node type
         * @property _type
         * @private
         * @type string
         * @default "Node"
    */
        _type: "Node",

        /*
        spacerPath: "http://us.i1.yimg.com/us.yimg.com/i/space.gif",
        expandedText: "Expanded",
        collapsedText: "Collapsed",
        loadingText: "Loading",
        */

        /**
         * Initializes this node, gets some of the properties from the parent
         * @method init
         * @param oData {object} a string or object containing the data that will
         * be used to render this node
         * @param oParent {Node} this node's parent node
         * @param expanded {boolean} the initial expanded/collapsed state
         */
        init: function(oData, oParent, expanded) {

            this.data       = oData;
            this.children   = [];
            this.index      = YAHOO.widget.TreeView.nodeCount;
            ++YAHOO.widget.TreeView.nodeCount;
    		this.contentElId = "ygtvcontentel" + this.index;

    		if (Lang.isObject(oData)) {
    			for (var property in oData) {
    				if (property.charAt(0) != '_'  && oData.hasOwnProperty(property) && !Lang.isUndefined(this[property]) && !Lang.isFunction(this[property]) ) {
    					this[property] = oData[property];
    				}
    			}
    		}
    		if (!Lang.isUndefined(expanded) ) {	this.expanded  = expanded;	}

            this.logger     = new YAHOO.widget.LogWriter(this.toString());

            /**
             * The parentChange event is fired when a parent element is applied
             * to the node.  This is useful if you need to apply tree-level
             * properties to a tree that need to happen if a node is moved from
             * one tree to another.
             *
             * @event parentChange
             * @type CustomEvent
             */
            this.createEvent("parentChange", this);

            // oParent should never be null except when we create the root node.
            if (oParent) {
                oParent.appendChild(this);
            }
        },

        /**
         * Certain properties for the node cannot be set until the parent
         * is known. This is called after the node is inserted into a tree.
         * the parent is also applied to this node's children in order to
         * make it possible to move a branch from one tree to another.
         * @method applyParent
         * @param {Node} parentNode this node's parent node
         * @return {boolean} true if the application was successful
         */
        applyParent: function(parentNode) {
            if (!parentNode) {
                return false;
            }

            this.tree   = parentNode.tree;
            this.parent = parentNode;
            this.depth  = parentNode.depth + 1;

            // @todo why was this put here.  This causes new nodes added at the
            // root level to lose the menu behavior.
            // if (! this.multiExpand) {
                // this.multiExpand = parentNode.multiExpand;
            // }

            this.tree.regNode(this);
            parentNode.childrenRendered = false;

            // cascade update existing children
            for (var i=0, len=this.children.length;i<len;++i) {
                this.children[i].applyParent(this);
            }

            this.fireEvent("parentChange");

            return true;
        },

        /**
         * Appends a node to the child collection.
         * @method appendChild
         * @param childNode {Node} the new node
         * @return {Node} the child node
         * @private
         */
        appendChild: function(childNode) {
            if (this.hasChildren()) {
                var sib = this.children[this.children.length - 1];
                sib.nextSibling = childNode;
                childNode.previousSibling = sib;
            }
            this.children[this.children.length] = childNode;
            childNode.applyParent(this);

            // part of the IE display issue workaround. If child nodes
            // are added after the initial render, and the node was
            // instantiated with expanded = true, we need to show the
            // children div now that the node has a child.
            if (this.childrenRendered && this.expanded) {
                this.getChildrenEl().style.display = "";
            }

            return childNode;
        },

        /**
         * Appends this node to the supplied node's child collection
         * @method appendTo
         * @param parentNode {Node} the node to append to.
         * @return {Node} The appended node
         */
        appendTo: function(parentNode) {
            return parentNode.appendChild(this);
        },

        /**
        * Inserts this node before this supplied node
        * @method insertBefore
        * @param node {Node} the node to insert this node before
        * @return {Node} the inserted node
        */
        insertBefore: function(node) {
            this.logger.log("insertBefore: " + node);
            var p = node.parent;
            if (p) {

                if (this.tree) {
                    this.tree.popNode(this);
                }

                var refIndex = node.isChildOf(p);
                //this.logger.log(refIndex);
                p.children.splice(refIndex, 0, this);
                if (node.previousSibling) {
                    node.previousSibling.nextSibling = this;
                }
                this.previousSibling = node.previousSibling;
                this.nextSibling = node;
                node.previousSibling = this;

                this.applyParent(p);
            }

            return this;
        },

        /**
        * Inserts this node after the supplied node
        * @method insertAfter
        * @param node {Node} the node to insert after
        * @return {Node} the inserted node
        */
        insertAfter: function(node) {
            this.logger.log("insertAfter: " + node);
            var p = node.parent;
            if (p) {

                if (this.tree) {
                    this.tree.popNode(this);
                }

                var refIndex = node.isChildOf(p);
                this.logger.log(refIndex);

                if (!node.nextSibling) {
                    this.nextSibling = null;
                    return this.appendTo(p);
                }

                p.children.splice(refIndex + 1, 0, this);

                node.nextSibling.previousSibling = this;
                this.previousSibling = node;
                this.nextSibling = node.nextSibling;
                node.nextSibling = this;

                this.applyParent(p);
            }

            return this;
        },

        /**
        * Returns true if the Node is a child of supplied Node
        * @method isChildOf
        * @param parentNode {Node} the Node to check
        * @return {boolean} The node index if this Node is a child of
        *                   supplied Node, else -1.
        * @private
        */
        isChildOf: function(parentNode) {
            if (parentNode && parentNode.children) {
                for (var i=0, len=parentNode.children.length; i<len ; ++i) {
                    if (parentNode.children[i] === this) {
                        return i;
                    }
                }
            }

            return -1;
        },

        /**
         * Returns a node array of this node's siblings, null if none.
         * @method getSiblings
         * @return Node[]
         */
        getSiblings: function() {
    		var sib =  this.parent.children.slice(0);
    		for (var i=0;i < sib.length && sib[i] != this;i++) {}
    		sib.splice(i,1);
    		if (sib.length) { return sib; }
    		return null;
        },

        /**
         * Shows this node's children
         * @method showChildren
         */
        showChildren: function() {
            if (!this.tree.animateExpand(this.getChildrenEl(), this)) {
                if (this.hasChildren()) {
                    this.getChildrenEl().style.display = "";
                }
            }
        },

        /**
         * Hides this node's children
         * @method hideChildren
         */
        hideChildren: function() {
            this.logger.log("hiding " + this.index);

            if (!this.tree.animateCollapse(this.getChildrenEl(), this)) {
                this.getChildrenEl().style.display = "none";
            }
        },

        /**
         * Returns the id for this node's container div
         * @method getElId
         * @return {string} the element id
         */
        getElId: function() {
            return "ygtv" + this.index;
        },

        /**
         * Returns the id for this node's children div
         * @method getChildrenElId
         * @return {string} the element id for this node's children div
         */
        getChildrenElId: function() {
            return "ygtvc" + this.index;
        },

        /**
         * Returns the id for this node's toggle element
         * @method getToggleElId
         * @return {string} the toggel element id
         */
        getToggleElId: function() {
            return "ygtvt" + this.index;
        },

        /*
         * Returns the id for this node's spacer image.  The spacer is positioned
         * over the toggle and provides feedback for screen readers.
         * @method getSpacerId
         * @return {string} the id for the spacer image
         */
        /*
        getSpacerId: function() {
            return "ygtvspacer" + this.index;
        },
        */

        /**
         * Returns this node's container html element
         * @method getEl
         * @return {HTMLElement} the container html element
         */
        getEl: function() {
            return Dom.get(this.getElId());
        },

        /**
         * Returns the div that was generated for this node's children
         * @method getChildrenEl
         * @return {HTMLElement} this node's children div
         */
        getChildrenEl: function() {
            return Dom.get(this.getChildrenElId());
        },

        /**
         * Returns the element that is being used for this node's toggle.
         * @method getToggleEl
         * @return {HTMLElement} this node's toggle html element
         */
        getToggleEl: function() {
            return Dom.get(this.getToggleElId());
        },
        /**
    	* Returns the outer html element for this node's content
    	* @method getContentEl
    	* @return {HTMLElement} the element
    	*/
        getContentEl: function() {
            return Dom.get(this.contentElId);
        },

        /*
         * Returns the element that is being used for this node's spacer.
         * @method getSpacer
         * @return {HTMLElement} this node's spacer html element
         */
        /*
        getSpacer: function() {
            return document.getElementById( this.getSpacerId() ) || {};
        },
        */

        /*
        getStateText: function() {
            if (this.isLoading) {
                return this.loadingText;
            } else if (this.hasChildren(true)) {
                if (this.expanded) {
                    return this.expandedText;
                } else {
                    return this.collapsedText;
                }
            } else {
                return "";
            }
        },
        */

      /**
         * Hides this nodes children (creating them if necessary), changes the toggle style.
         * @method collapse
         */
        collapse: function() {
            // Only collapse if currently expanded
            if (!this.expanded) { return; }

            // fire the collapse event handler
            var ret = this.tree.onCollapse(this);

            if (false === ret) {
                this.logger.log("Collapse was stopped by the abstract onCollapse");
                return;
            }

            ret = this.tree.fireEvent("collapse", this);

            if (false === ret) {
                this.logger.log("Collapse was stopped by a custom event handler");
                return;
            }

            if (!this.getEl()) {
                this.expanded = false;
            } else {
                // hide the child div
                this.hideChildren();
                this.expanded = false;

                this.updateIcon();
            }

            // this.getSpacer().title = this.getStateText();

            ret = this.tree.fireEvent("collapseComplete", this);

        },

        /**
         * Shows this nodes children (creating them if necessary), changes the
         * toggle style, and collapses its siblings if multiExpand is not set.
         * @method expand
         */
        expand: function(lazySource) {
            // Only expand if currently collapsed.
            if (this.expanded && !lazySource) {
                return;
            }

            var ret = true;

            // When returning from the lazy load handler, expand is called again
            // in order to render the new children.  The "expand" event already
            // fired before fething the new data, so we need to skip it now.
            if (!lazySource) {
                // fire the expand event handler
                ret = this.tree.onExpand(this);

                if (false === ret) {
                    this.logger.log("Expand was stopped by the abstract onExpand");
                    return;
                }

                ret = this.tree.fireEvent("expand", this);
            }

            if (false === ret) {
                this.logger.log("Expand was stopped by the custom event handler");
                return;
            }

            if (!this.getEl()) {
                this.expanded = true;
                return;
            }

            if (!this.childrenRendered) {
                this.logger.log("children not rendered yet");
                this.getChildrenEl().innerHTML = this.renderChildren();
            } else {
                this.logger.log("children already rendered");
            }

            this.expanded = true;

            this.updateIcon();

            // this.getSpacer().title = this.getStateText();

            // We do an extra check for children here because the lazy
            // load feature can expose nodes that have no children.

            // if (!this.hasChildren()) {
            if (this.isLoading) {
                this.expanded = false;
                return;
            }

            if (! this.multiExpand) {
                var sibs = this.getSiblings();
                for (var i=0; sibs && 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 = el.className.replace(/ygtv(([tl][pmn]h?)|(loading))/,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()) {
                    this.logger.log("Not supported (lazy load + expand all)");
                    break;
                } else if (! c.multiExpand) {
                    this.logger.log("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() {
            if (this.isLeaf) {
                return false;
            } else {
                return (!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 (this comes into play only after the initial dynamic
         * load request produced no children).
         * @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) {
            if (this.isLeaf) {
                return false;
            } else {
                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] = '>';

            // this.logger.log(["index", this.index,
                             // "hasChildren", this.hasChildren(true),
                             // "expanded", this.expanded,
                             // "renderHidden", this.renderHidden,
                             // "isDynamic", this.isDynamic()]);

            // 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(this.index + " loadComplete, children: " + this.children.length);
            this.getChildrenEl().innerHTML = this.completeRender();
            this.dynamicLoadComplete = true;
            this.isLoading = false;
            this.expand(true);
            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 may 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");
            var sb = [];

            sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0" class="ygtvdepth' + this.depth + '">';
            sb[sb.length] = '<tr class="ygtvrow">';

            for (var i=0;i<this.depth;++i) {
                sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"><div class="ygtvspacer"></div></td>';
            }

            if (this.hasIcon) {
                sb[sb.length] = '<td';
                sb[sb.length] = ' id="' + this.getToggleElId() + '"';
                sb[sb.length] = ' class="' + this.getStyle() + '"';
                sb[sb.length] = '><a href="#" class="ygtvspacer">&nbsp;</a></td>';
            }

            sb[sb.length] = '<td';
            sb[sb.length] = ' id="' + this.contentElId + '"';
            sb[sb.length] = ' class="' + this.contentStyle  + ' ygtvcontent" ';
            sb[sb.length] = (this.nowrap) ? ' nowrap="nowrap" ' : '';
            sb[sb.length] = ' >';
    		sb[sb.length] = this.getContentHtml();
            sb[sb.length] = '</td>';
            sb[sb.length] = '</tr>';
            sb[sb.length] = '</table>';

            return sb.join("");

        },
    	/**
         * Get the markup for the contents of the node.  This is designed to be overrided so that we can
         * support different types of nodes.
         * @method getContentHtml
         * @return {string} The HTML that will render the content of this node.
         */
    	getContentHtml: function () {
    		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 this._type + " (" + this.index + ")";
        },
    	/**
    	* array of items that had the focus set on them
    	* so that they can be cleaned when focus is lost
    	* @property _focusHighlightedItems
    	* @type Array of DOM elements
    	* @private
    	*/
    	_focusHighlightedItems: [],
    	_focusedItem: null,
    	/**
    	* Sets the focus on the node element.
    	* It will only be able to set the focus on nodes that have anchor elements in it.
    	* Toggle or branch icons have anchors and can be focused on.
    	* If will fail in nodes that have no anchor
    	* @method focus
    	* @return {boolean} success
    	*/
    	focus: function () {
    		var focused = false, self = this;

    		var removeListeners = function () {
    			var el;
    			if (self._focusedItem) {
    				Event.removeListener(self._focusedItem,'blur');
    				self._focusedItem = null;
    			}

    			while ((el = self._focusHighlightedItems.shift())) {  // yes, it is meant as an assignment, really
    				Dom.removeClass(el,YAHOO.widget.TreeView.FOCUS_CLASS_NAME );
    			}
    		};
    		removeListeners();

    		Dom.getElementsBy  (
    			function (el) {
    				return /ygtv(([tl][pmn]h?)|(content))/.test(el.className);
    			} ,
    			'td' ,
    			this.getEl().firstChild ,
    			function (el) {
    				Dom.addClass(el, YAHOO.widget.TreeView.FOCUS_CLASS_NAME );
    				if (!focused) {
    					var aEl = el.getElementsByTagName('a');
    					if (aEl.length) {
    						aEl = aEl[0];
    						aEl.focus();
    						self._focusedItem = aEl;
    						Event.on(aEl,'blur',removeListeners);
    						focused = true;
    					}
    				}
    				self._focusHighlightedItems.push(el);
    			}
    		);
    		if (!focused) { removeListeners(); }
    		return focused;
    	},

      /**
         * Count of nodes in tree
         * @method getNodeCount
         * @return {int} number of nodes in the tree
         */
        getNodeCount: function() {
    		for (var i = 0, count = 0;i< this.children.length;i++) {
    			count += this.children[i].getNodeCount();
    		}
            return count + 1;
        },

    	  /**
         * Returns an object which could be used to build a tree out of this node and its children.
         * It can be passed to the tree constructor to reproduce this node as a tree.
         * It will return false if the node or any children loads dynamically, regardless of whether it is loaded or not.
         * @method getNodeDefinition
         * @return {Object | false}  definition of the tree or false if the node or any children is defined as dynamic
         */
        getNodeDefinition: function() {

    		if (this.isDynamic()) { return false; }

    		var def, defs = this.data, children = [];

    		if (this.href) { defs.href = this.href; }
    		if (this.target != '_self') { defs.target = this.target; }
    		if (this.expanded) {defs.expanded = this.expanded; }
    		if (!this.multiExpand) { defs.multiExpand = this.multiExpand; }
    		if (!this.hasIcon) { defs.hasIcon = this.hasIcon; }
    		if (this.nowrap) { defs.nowrap = this.nowrap; }
    		defs.type = this._type;

    		for (var i = 0; i < this.children.length;i++) {
    			def = this.children[i].getNodeDefinition();
    			if (def === false) { return false;}
    			children.push(def);
    		}
    		if (children.length) { defs.children = children; }
    		return defs;
        },

        /**
         * Generates the link that will invoke this node's toggle method
         * @method getToggleLink
         * @return {string} the javascript url for toggling this node
         */
        getToggleLink: function() {
            return 'return false;';
        }

    };

    YAHOO.augment(YAHOO.widget.Node, YAHOO.util.EventProvider);
    })();

Copyright © 2008 Yahoo! Inc. All rights reserved.