jssource/src_files/include/ytree/TreeView/TreeView.js

   1 /*
   2 Copyright (c) 2006, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 0.12.0
   6
   7 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
   8 WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
   9 PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
  10 ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  11 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  12 INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
  13 TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
  14 ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  15 */
  16
  17 /**
  18  * The treeview widget is a generic tree building tool.
  19  * @module treeview
  20  * @title TreeView Widget
  21  * @requires yahoo
  22  * @optional animation
  23  * @namespace YAHOO.widget
  24  */
  25
  26 /**
  27  * Contains the tree view state data and the root node.
  28  *
  29  * @class TreeView
  30  * @constructor
  31  * @param {string|HTMLElement} id The id of the element, or the element
  32  * itself that the tree will be inserted into.
  33  */
  34 YAHOO.widget.TreeView = function(id) {
  35     if (id) { this.init(id); }
  36 };
  37
  38 YAHOO.widget.TreeView.prototype = {
  39
  40     /**
  41      * The id of tree container element
  42      * @property id
  43      * @type String
  44      */
  45     id: null,
  46
  47     /**
  48      * The host element for this tree
  49      * @property _el
  50      * @private
  51      */
  52     _el: null,
  53
  54      /**
  55      * Flat collection of all nodes in this tree
  56      * @property _nodes
  57      * @type Node[]
  58      * @private
  59      */
  60     _nodes: null,
  61
  62     /**
  63      * We lock the tree control while waiting for the dynamic loader to return
  64      * @property locked
  65      * @type boolean
  66      */
  67     locked: false,
  68
  69     /**
  70      * The animation to use for expanding children, if any
  71      * @property _expandAnim
  72      * @type string
  73      * @private
  74      */
  75     _expandAnim: null,
  76
  77     /**
  78      * The animation to use for collapsing children, if any
  79      * @property _collapseAnim
  80      * @type string
  81      * @private
  82      */
  83     _collapseAnim: null,
  84
  85     /**
  86      * The current number of animations that are executing
  87      * @property _animCount
  88      * @type int
  89      * @private
  90      */
  91     _animCount: 0,
  92
  93     /**
  94      * The maximum number of animations to run at one time.
  95      * @property maxAnim
  96      * @type int
  97      */
  98     maxAnim: 2,
  99
 100     /**
 101      * Sets up the animation for expanding children
 102      * @method setExpandAnim
 103      * @param {string} type the type of animation (acceptable values defined
 104      * in YAHOO.widget.TVAnim)
 105      */
 106     setExpandAnim: function(type) {
 107         if (YAHOO.widget.TVAnim.isValid(type)) {
 108             this._expandAnim = type;
 109         }
 110     },
 111
 112     /**
 113      * Sets up the animation for collapsing children
 114      * @method setCollapseAnim
 115      * @param {string} the type of animation (acceptable values defined in
 116      * YAHOO.widget.TVAnim)
 117      */
 118     setCollapseAnim: function(type) {
 119         if (YAHOO.widget.TVAnim.isValid(type)) {
 120             this._collapseAnim = type;
 121         }
 122     },
 123
 124     /**
 125      * Perform the expand animation if configured, or just show the
 126      * element if not configured or too many animations are in progress
 127      * @method animateExpand
 128      * @param el {HTMLElement} the element to animate
 129      * @param node {YAHOO.util.Node} the node that was expanded
 130      * @return {boolean} true if animation could be invoked, false otherwise
 131      */
 132     animateExpand: function(el, node) {
 133
 134         if (this._expandAnim && this._animCount < this.maxAnim) {
 135             // this.locked = true;
 136             var tree = this;
 137             var a = YAHOO.widget.TVAnim.getAnim(this._expandAnim, el,
 138                             function() { tree.expandComplete(node); });
 139             if (a) {
 140                 ++this._animCount;
 141                 this.fireEvent("animStart", {
 142                         "node": node,
 143                         "type": "expand"
 144                     });
 145                 a.animate();
 146             }
 147
 148             return true;
 149         }
 150
 151         return false;
 152     },
 153
 154     /**
 155      * Perform the collapse animation if configured, or just show the
 156      * element if not configured or too many animations are in progress
 157      * @method animateCollapse
 158      * @param el {HTMLElement} the element to animate
 159      * @param node {YAHOO.util.Node} the node that was expanded
 160      * @return {boolean} true if animation could be invoked, false otherwise
 161      */
 162     animateCollapse: function(el, node) {
 163
 164         if (this._collapseAnim && this._animCount < this.maxAnim) {
 165             // this.locked = true;
 166             var tree = this;
 167             var a = YAHOO.widget.TVAnim.getAnim(this._collapseAnim, el,
 168                             function() { tree.collapseComplete(node); });
 169             if (a) {
 170                 ++this._animCount;
 171                 this.fireEvent("animStart", {
 172                         "node": node,
 173                         "type": "collapse"
 174                     });
 175                 a.animate();
 176             }
 177
 178             return true;
 179         }
 180
 181         return false;
 182     },
 183
 184     /**
 185      * Function executed when the expand animation completes
 186      * @method expandComplete
 187      */
 188     expandComplete: function(node) {
 189         --this._animCount;
 190         this.fireEvent("animComplete", {
 191                 "node": node,
 192                 "type": "expand"
 193             });
 194         // this.locked = false;
 195     },
 196
 197     /**
 198      * Function executed when the collapse animation completes
 199      * @method collapseComplete
 200      */
 201     collapseComplete: function(node) {
 202         --this._animCount;
 203         this.fireEvent("animComplete", {
 204                 "node": node,
 205                 "type": "collapse"
 206             });
 207         // this.locked = false;
 208     },
 209
 210     /**
 211      * Initializes the tree
 212      * @method init
 213      * @parm {string|HTMLElement} id the id of the element that will hold the tree
 214      * @private
 215      */
 216     init: function(id) {
 217
 218         this.id = id;
 219
 220         if ("string" !== typeof id) {
 221             this._el = id;
 222             this.id = this.generateId(id);
 223         }
 224
 225         /**
 226          * When animation is enabled, this event fires when the animation
 227          * starts
 228          * @event animStart
 229          * @type CustomEvent
 230          * @param {YAHOO.widget.Node} node the node that is expanding/collapsing
 231          * @parm {String} type the type of animation ("expand" or "collapse")
 232          */
 233         this.createEvent("animStart", this);
 234
 235         /**
 236          * When animation is enabled, this event fires when the animation
 237          * completes
 238          * @event animComplete
 239          * @type CustomEvent
 240          * @param {YAHOO.widget.Node} node the node that is expanding/collapsing
 241          * @parm {String} type the type of animation ("expand" or "collapse")
 242          */
 243         this.createEvent("animComplete", this);
 244
 245         /**
 246          * Fires when a node is going to be expanded.  Return false to stop
 247          * the expand.
 248          * @event collapse
 249          * @type CustomEvent
 250          * @param {YAHOO.widget.Node} node the node that is expanding/collapsing
 251          */
 252         this.createEvent("collapse", this);
 253
 254         /**
 255          * Fires when a node is going to be collapsed.  Return false to stop
 256          * the collapse.
 257          * @event expand
 258          * @type CustomEvent
 259          * @param {YAHOO.widget.Node} node the node that is expanding/collapsing
 260          */
 261         this.createEvent("expand", this);
 262
 263         this._nodes = [];
 264
 265         // store a global reference
 266         YAHOO.widget.TreeView.trees[this.id] = this;
 267
 268         // Set up the root node
 269         this.root = new YAHOO.widget.RootNode(this);
 270
 271
 272     },
 273
 274
 275     /**
 276      * Returns the tree's host element
 277      * @method getEl
 278      * @return {HTMLElement} the host element
 279      */
 280     getEl: function() {
 281         if (! this._el) {
 282             this._el = document.getElementById(this.id);
 283         }
 284         return this._el;
 285     },
 286
 287     /**
 288      * Renders the tree boilerplate and visible nodes
 289      * @method draw
 290      */
 291     draw: function() {
 292         var html = this.root.getHtml();
 293         this.getEl().innerHTML = html;
 294 //        document.getElementById('frameFolders').innerHTML = html;
 295         this.firstDraw = false;
 296     },
 297
 298
 299     /**
 300      * Nodes register themselves with the tree instance when they are created.
 301      * @method regNode
 302      * @param node {Node} the node to register
 303      * @private
 304      */
 305     regNode: function(node) {
 306         this._nodes[node.index] = node;
 307     },
 308
 309     /**
 310      * Returns the root node of this tree
 311      * @method getRoot
 312      * @return {Node} the root node
 313      */
 314     getRoot: function() {
 315         return this.root;
 316     },
 317
 318     /**
 319      * Configures this tree to dynamically load all child data
 320      * @method setDynamicLoad
 321      * @param {function} fnDataLoader the function that will be called to get the data
 322      * @param iconMode {int} configures the icon that is displayed when a dynamic
 323      * load node is expanded the first time without children.  By default, the
 324      * "collapse" icon will be used.  If set to 1, the leaf node icon will be
 325      * displayed.
 326      */
 327     setDynamicLoad: function(fnDataLoader, iconMode) {
 328         this.root.setDynamicLoad(fnDataLoader, iconMode);
 329     },
 330
 331     /**
 332      * Expands all child nodes.  Note: this conflicts with the "multiExpand"
 333      * node property.  If expand all is called in a tree with nodes that
 334      * do not allow multiple siblings to be displayed, only the last sibling
 335      * will be expanded.
 336      * @method expandAll
 337      */
 338     expandAll: function() {
 339         if (!this.locked) {
 340             this.root.expandAll();
 341         }
 342     },
 343
 344     /**
 345      * Collapses all expanded child nodes in the entire tree.
 346      * @method collapseAll
 347      */
 348     collapseAll: function() {
 349         if (!this.locked) {
 350             this.root.collapseAll();
 351         }
 352     },
 353
 354     /**
 355      * Returns a node in the tree that has the specified index (this index
 356      * is created internally, so this function probably will only be used
 357      * in html generated for a given node.)
 358      * @method getNodeByIndex
 359      * @param {int} nodeIndex the index of the node wanted
 360      * @return {Node} the node with index=nodeIndex, null if no match
 361      */
 362     getNodeByIndex: function(nodeIndex) {
 363         var n = this._nodes[nodeIndex];
 364         return (n) ? n : null;
 365     },
 366
 367     /**
 368      * Returns a node that has a matching property and value in the data
 369      * object that was passed into its constructor.
 370      * @method getNodeByProperty
 371      * @param {object} property the property to search (usually a string)
 372      * @param {object} value the value we want to find (usuall an int or string)
 373      * @return {Node} the matching node, null if no match
 374      */
 375     getNodeByProperty: function(property, value) {
 376         for (var i in this._nodes) {
 377             var n = this._nodes[i];
 378             if (n.data && value == n.data[property]) {
 379                 return n;
 380             }
 381         }
 382
 383         return null;
 384     },
 385
 386     /**
 387      * Returns a collection of nodes that have a matching property
 388      * and value in the data object that was passed into its constructor.
 389      * @method getNodesByProperty
 390      * @param {object} property the property to search (usually a string)
 391      * @param {object} value the value we want to find (usuall an int or string)
 392      * @return {Array} the matching collection of nodes, null if no match
 393      */
 394     getNodesByProperty: function(property, value) {
 395         var values = [];
 396         for (var i in this._nodes) {
 397             var n = this._nodes[i];
 398             if (n.data && value == n.data[property]) {
 399                 values.push(n);
 400             }
 401         }
 402
 403         return (values.length) ? values : null;
 404     },
 405
 406     /**
 407      * Removes the node and its children, and optionally refreshes the
 408      * branch of the tree that was affected.
 409      * @method removeNode
 410      * @param {Node} The node to remove
 411      * @param {boolean} autoRefresh automatically refreshes branch if true
 412      * @return {boolean} False is there was a problem, true otherwise.
 413      */
 414     removeNode: function(node, autoRefresh) {
 415
 416         // Don't delete the root node
 417         if (node.isRoot()) {
 418             return false;
 419         }
 420
 421         // Get the branch that we may need to refresh
 422         var p = node.parent;
 423         if (p.parent) {
 424             p = p.parent;
 425         }
 426
 427         // Delete the node and its children
 428         this._deleteNode(node);
 429
 430         // Refresh the parent of the parent
 431         if (autoRefresh && p && p.childrenRendered) {
 432             p.refresh();
 433         }
 434
 435         return true;
 436     },
 437
 438     /**
 439      * Deletes this nodes child collection, recursively.  Also collapses
 440      * the node, and resets the dynamic load flag.  The primary use for
 441      * this method is to purge a node and allow it to fetch its data
 442      * dynamically again.
 443      * @method removeChildren
 444      * @param {Node} node the node to purge
 445      */
 446     removeChildren: function(node) {
 447         while (node.children.length) {
 448              this._deleteNode(node.children[0]);
 449         }
 450
 451         node.childrenRendered = false;
 452         node.dynamicLoadComplete = false;
 453         if (node.expanded) {
 454             node.collapse();
 455         } else {
 456             node.updateIcon();
 457         }
 458     },
 459
 460     /**
 461      * Deletes the node and recurses children
 462      * @method _deleteNode
 463      * @private
 464      */
 465     _deleteNode: function(node) {
 466         // Remove all the child nodes first
 467         this.removeChildren(node);
 468
 469         // Remove the node from the tree
 470         this.popNode(node);
 471     },
 472
 473     /**
 474      * Removes the node from the tree, preserving the child collection
 475      * to make it possible to insert the branch into another part of the
 476      * tree, or another tree.
 477      * @method popNode
 478      * @param {Node} the node to remove
 479      */
 480     popNode: function(node) {
 481         var p = node.parent;
 482
 483         // Update the parent's collection of children
 484         var a = [];
 485
 486         for (var i=0, len=p.children.length;i<len;++i) {
 487             if (p.children[i] != node) {
 488                 a[a.length] = p.children[i];
 489             }
 490         }
 491
 492         p.children = a;
 493
 494         // reset the childrenRendered flag for the parent
 495         p.childrenRendered = false;
 496
 497          // Update the sibling relationship
 498         if (node.previousSibling) {
 499             node.previousSibling.nextSibling = node.nextSibling;
 500         }
 501
 502         if (node.nextSibling) {
 503             node.nextSibling.previousSibling = node.previousSibling;
 504         }
 505
 506         node.parent = null;
 507         node.previousSibling = null;
 508         node.nextSibling = null;
 509         node.tree = null;
 510
 511         // Update the tree's node collection
 512         delete this._nodes[node.index];
 513     },
 514
 515     /**
 516      * TreeView instance toString
 517      * @method toString
 518      * @return {string} string representation of the tree
 519      */
 520     toString: function() {
 521         return "TreeView " + this.id;
 522     },
 523
 524     /**
 525      * Generates an unique id for an element if it doesn't yet have one
 526      * @method generateId
 527      * @private
 528      */
 529     generateId: function(el) {
 530         var id = el.id;
 531
 532         if (!id) {
 533             id = "yui-tv-auto-id-" + YAHOO.widget.TreeView.counter;
 534             ++YAHOO.widget.TreeView.counter;
 535         }
 536
 537         return id;
 538     },
 539
 540     /**
 541      * Abstract method that is executed when a node is expanded
 542      * @method onExpand
 543      * @param node {Node} the node that was expanded
 544      * @deprecated use treeobj.subscribe("expand") instead
 545      */
 546     onExpand: function(node) { },
 547
 548     /**
 549      * Abstract method that is executed when a node is collapsed.
 550      * @method onCollapse
 551      * @param node {Node} the node that was collapsed.
 552      * @deprecated use treeobj.subscribe("collapse") instead
 553      */
 554     onCollapse: function(node) { }
 555
 556 };
 557
 558 YAHOO.augment(YAHOO.widget.TreeView, YAHOO.util.EventProvider);
 559
 560 /**
 561  * Count of all nodes in all trees
 562  * @property YAHOO.widget.TreeView.nodeCount
 563  * @type int
 564  * @static
 565  */
 566 YAHOO.widget.TreeView.nodeCount = 0;
 567
 568 /**
 569  * Global cache of tree instances
 570  * @property YAHOO.widget.TreeView.trees
 571  * @type Array
 572  * @static
 573  * @private
 574  */
 575 YAHOO.widget.TreeView.trees = [];
 576
 577 /**
 578  * Counter for generating a new unique element id
 579  * @property YAHOO.widget.TreeView.counter
 580  * @static
 581  * @private
 582  */
 583 YAHOO.widget.TreeView.counter = 0;
 584
 585 /**
 586  * Global method for getting a tree by its id.  Used in the generated
 587  * tree html.
 588  * @method YAHOO.widget.TreeView.getTree
 589  * @param treeId {String} the id of the tree instance
 590  * @return {TreeView} the tree instance requested, null if not found.
 591  * @static
 592  */
 593 YAHOO.widget.TreeView.getTree = function(treeId) {
 594     var t = YAHOO.widget.TreeView.trees[treeId];
 595     return (t) ? t : null;
 596 };
 597
 598 /**
 599  * Global method for getting a node by its id.  Used in the generated
 600  * tree html.
 601  * @method YAHOO.widget.TreeView.getNode
 602  * @param treeId {String} the id of the tree instance
 603  * @param nodeIndex {String} the index of the node to return
 604  * @return {Node} the node instance requested, null if not found
 605  * @static
 606  */
 607 YAHOO.widget.TreeView.getNode = function(treeId, nodeIndex) {
 608     var t = YAHOO.widget.TreeView.getTree(treeId);
 609     return (t) ? t.getNodeByIndex(nodeIndex) : null;
 610 };
 611
 612 /**
 613  * Add a DOM event
 614  * @method YAHOO.widget.TreeView.addHandler
 615  * @param el the elment to bind the handler to
 616  * @param {string} sType the type of event handler
 617  * @param {function} fn the callback to invoke
 618  * @static
 619  */
 620 YAHOO.widget.TreeView.addHandler = function (el, sType, fn) {
 621     if (el.addEventListener) {
 622         el.addEventListener(sType, fn, false);
 623     } else if (el.attachEvent) {
 624         el.attachEvent("on" + sType, fn);
 625     }
 626 };
 627
 628 /**
 629  * Remove a DOM event
 630  * @method YAHOO.widget.TreeView.removeHandler
 631  * @param el the elment to bind the handler to
 632  * @param {string} sType the type of event handler
 633  * @param {function} fn the callback to invoke
 634  * @static
 635  */
 636
 637 YAHOO.widget.TreeView.removeHandler = function (el, sType, fn) {
 638     if (el.removeEventListener) {
 639         el.removeEventListener(sType, fn, false);
 640     } else if (el.detachEvent) {
 641         el.detachEvent("on" + sType, fn);
 642     }
 643 };
 644
 645 /**
 646  * Attempts to preload the images defined in the styles used to draw the tree by
 647  * rendering off-screen elements that use the styles.
 648  * @method YAHOO.widget.TreeView.preload
 649  * @param {string} prefix the prefix to use to generate the names of the
 650  * images to preload, default is ygtv
 651  * @static
 652  */
 653 YAHOO.widget.TreeView.preload = function(prefix) {
 654     prefix = prefix || "ygtv";
 655     var styles = ["tn","tm","tmh","tp","tph","ln","lm","lmh","lp","lph","loading"];
 656
 657     var sb = [];
 658
 659     for (var i = 0; i < styles.length; ++i) {
 660         sb[sb.length] = '<span class="' + prefix + styles[i] + '">&#160;</span>';
 661     }
 662
 663     var f = document.createElement("div");
 664     var s = f.style;
 665     s.position = "absolute";
 666     s.top = "-1000px";
 667     s.left = "-1000px";
 668     f.innerHTML = sb.join("");
 669
 670     document.body.appendChild(f);
 671
 672     YAHOO.widget.TreeView.removeHandler(window,
 673                 "load", YAHOO.widget.TreeView.preload);
 674
 675 };
 676
 677 YAHOO.widget.TreeView.addHandler(window,
 678                 "load", YAHOO.widget.TreeView.preload);
 679
 680 /**
 681  * The base class for all tree nodes.  The node's presentation and behavior in
 682  * response to mouse events is handled in Node subclasses.
 683  * @namespace YAHOO.widget
 684  * @class Node
 685  * @param oData {object} a string or object containing the data that will
 686  * be used to render this node
 687  * @param oParent {Node} this node's parent node
 688  * @param expanded {boolean} the initial expanded/collapsed state
 689  * @constructor
 690  */
 691 YAHOO.widget.Node = function(oData, oParent, expanded) {
 692     if (oData) { this.init(oData, oParent, expanded); }
 693 };
 694
 695 YAHOO.widget.Node.prototype = {
 696
 697     /**
 698      * The index for this instance obtained from global counter in YAHOO.widget.TreeView.
 699      * @property index
 700      * @type int
 701      */
 702     index: 0,
 703
 704     /**
 705      * This node's child node collection.
 706      * @property children
 707      * @type Node[]
 708      */
 709     children: null,
 710
 711     /**
 712      * Tree instance this node is part of
 713      * @property tree
 714      * @type TreeView
 715      */
 716     tree: null,
 717
 718     /**
 719      * The data linked to this node.  This can be any object or primitive
 720      * value, and the data can be used in getNodeHtml().
 721      * @property data
 722      * @type object
 723      */
 724     data: null,
 725
 726     /**
 727      * Parent node
 728      * @property parent
 729      * @type Node
 730      */
 731     parent: null,
 732
 733     /**
 734      * The depth of this node.  We start at -1 for the root node.
 735      * @property depth
 736      * @type int
 737      */
 738     depth: -1,
 739
 740     /**
 741      * The href for the node's label.  If one is not specified, the href will
 742      * be set so that it toggles the node.
 743      * @property href
 744      * @type string
 745      */
 746     href: null,
 747
 748     /**
 749      * The label href target, defaults to current window
 750      * @property target
 751      * @type string
 752      */
 753     target: "_self",
 754
 755     /**
 756      * The node's expanded/collapsed state
 757      * @property expanded
 758      * @type boolean
 759      */
 760     expanded: false,
 761
 762     /**
 763      * Can multiple children be expanded at once?
 764      * @property multiExpand
 765      * @type boolean
 766      */
 767     multiExpand: true,
 768
 769     /**
 770      * Should we render children for a collapsed node?  It is possible that the
 771      * implementer will want to render the hidden data...  @todo verify that we
 772      * need this, and implement it if we do.
 773      * @property renderHidden
 774      * @type boolean
 775      */
 776     renderHidden: false,
 777
 778     /**
 779      * This flag is set to true when the html is generated for this node's
 780      * children, and set to false when new children are added.
 781      * @property childrenRendered
 782      * @type boolean
 783      */
 784     childrenRendered: false,
 785
 786     /**
 787      * Dynamically loaded nodes only fetch the data the first time they are
 788      * expanded.  This flag is set to true once the data has been fetched.
 789      * @property dynamicLoadComplete
 790      * @type boolean
 791      */
 792     dynamicLoadComplete: false,
 793
 794     /**
 795      * This node's previous sibling
 796      * @property previousSibling
 797      * @type Node
 798      */
 799     previousSibling: null,
 800
 801     /**
 802      * This node's next sibling
 803      * @property nextSibling
 804      * @type Node
 805      */
 806     nextSibling: null,
 807
 808     /**
 809      * We can set the node up to call an external method to get the child
 810      * data dynamically.
 811      * @property _dynLoad
 812      * @type boolean
 813      * @private
 814      */
 815     _dynLoad: false,
 816
 817     /**
 818      * Function to execute when we need to get this node's child data.
 819      * @property dataLoader
 820      * @type function
 821      */
 822     dataLoader: null,
 823
 824     /**
 825      * This is true for dynamically loading nodes while waiting for the
 826      * callback to return.
 827      * @property isLoading
 828      * @type boolean
 829      */
 830     isLoading: false,
 831
 832     /**
 833      * The toggle/branch icon will not show if this is set to false.  This
 834      * could be useful if the implementer wants to have the child contain
 835      * extra info about the parent, rather than an actual node.
 836      * @property hasIcon
 837      * @type boolean
 838      */
 839     hasIcon: true,
 840
 841     /**
 842      * Used to configure what happens when a dynamic load node is expanded
 843      * and we discover that it does not have children.  By default, it is
 844      * treated as if it still could have children (plus/minus icon).  Set
 845      * iconMode to have it display like a leaf node instead.
 846      * @property iconMode
 847      * @type int
 848      */
 849     iconMode: 0,
 850
 851     /**
 852      * The node type
 853      * @property _type
 854      * @private
 855      */
 856     _type: "Node",
 857
 858     /*
 859     spacerPath: "http://us.i1.yimg.com/us.yimg.com/i/space.gif",
 860     expandedText: "Expanded",
 861     collapsedText: "Collapsed",
 862     loadingText: "Loading",
 863     */
 864
 865     /**
 866      * Initializes this node, gets some of the properties from the parent
 867      * @method init
 868      * @param oData {object} a string or object containing the data that will
 869      * be used to render this node
 870      * @param oParent {Node} this node's parent node
 871      * @param expanded {boolean} the initial expanded/collapsed state
 872      */
 873     init: function(oData, oParent, expanded) {
 874
 875         this.data       = oData;
 876         this.children   = [];
 877         this.index      = YAHOO.widget.TreeView.nodeCount;
 878         ++YAHOO.widget.TreeView.nodeCount;
 879         this.expanded   = expanded;
 880
 881         /**
 882          * The parentChange event is fired when a parent element is applied
 883          * to the node.  This is useful if you need to apply tree-level
 884          * properties to a tree that need to happen if a node is moved from
 885          * one tre to another.
 886          *
 887          * @event parentChange
 888          * @type CustomEvent
 889          */
 890         this.createEvent("parentChange", this);
 891
 892         // oParent should never be null except when we create the root node.
 893         if (oParent) {
 894             oParent.appendChild(this);
 895         }
 896     },
 897
 898     /**
 899      * Certain properties for the node cannot be set until the parent
 900      * is known. This is called after the node is inserted into a tree.
 901      * the parent is also applied to this node's children in order to
 902      * make it possible to move a branch from one tree to another.
 903      * @method applyParent
 904      * @param {Node} parentNode this node's parent node
 905      * @return {boolean} true if the application was successful
 906      */
 907     applyParent: function(parentNode) {
 908         if (!parentNode) {
 909             return false;
 910         }
 911
 912         this.tree   = parentNode.tree;
 913         this.parent = parentNode;
 914         this.depth  = parentNode.depth + 1;
 915
 916         if (!this.href) {
 917             this.href = "javascript:" + this.getToggleLink();
 918         }
 919
 920         if (! this.multiExpand) {
 921             this.multiExpand = parentNode.multiExpand;
 922         }
 923
 924         this.tree.regNode(this);
 925         parentNode.childrenRendered = false;
 926
 927         // cascade update existing children
 928         for (var i=0, len=this.children.length;i<len;++i) {
 929             this.children[i].applyParent(this);
 930         }
 931
 932         this.fireEvent("parentChange");
 933
 934         return true;
 935     },
 936
 937     /**
 938      * Appends a node to the child collection.
 939      * @method appendChild
 940      * @param childNode {Node} the new node
 941      * @return {Node} the child node
 942      * @private
 943      */
 944     appendChild: function(childNode) {
 945         if (this.hasChildren()) {
 946             var sib = this.children[this.children.length - 1];
 947             sib.nextSibling = childNode;
 948             childNode.previousSibling = sib;
 949         }
 950         this.children[this.children.length] = childNode;
 951         childNode.applyParent(this);
 952
 953         return childNode;
 954     },
 955
 956     /**
 957      * Appends this node to the supplied node's child collection
 958      * @method appendTo
 959      * @param parentNode {Node} the node to append to.
 960      * @return {Node} The appended node
 961      */
 962     appendTo: function(parentNode) {
 963         return parentNode.appendChild(this);
 964     },
 965
 966     /**
 967     * Inserts this node before this supplied node
 968     * @method insertBefore
 969     * @param node {Node} the node to insert this node before
 970     * @return {Node} the inserted node
 971     */
 972     insertBefore: function(node) {
 973         var p = node.parent;
 974         if (p) {
 975
 976             if (this.tree) {
 977                 this.tree.popNode(this);
 978             }
 979
 980             var refIndex = node.isChildOf(p);
 981             p.children.splice(refIndex, 0, this);
 982             if (node.previousSibling) {
 983                 node.previousSibling.nextSibling = this;
 984             }
 985             this.previousSibling = node.previousSibling;
 986             this.nextSibling = node;
 987             node.previousSibling = this;
 988
 989             this.applyParent(p);
 990         }
 991
 992         return this;
 993     },
 994
 995     /**
 996     * Inserts this node after the supplied node
 997     * @method insertAfter
 998     * @param node {Node} the node to insert after
 999     * @return {Node} the inserted node
1000     */
1001     insertAfter: function(node) {
1002         var p = node.parent;
1003         if (p) {
1004
1005             if (this.tree) {
1006                 this.tree.popNode(this);
1007             }
1008
1009             var refIndex = node.isChildOf(p);
1010
1011             if (!node.nextSibling) {
1012                 return this.appendTo(p);
1013             }
1014
1015             p.children.splice(refIndex + 1, 0, this);
1016
1017             node.nextSibling.previousSibling = this;
1018             this.previousSibling = node;
1019             this.nextSibling = node.nextSibling;
1020             node.nextSibling = this;
1021
1022             this.applyParent(p);
1023         }
1024
1025         return this;
1026     },
1027
1028     /**
1029     * Returns true if the Node is a child of supplied Node
1030     * @method isChildOf
1031     * @param parentNode {Node} the Node to check
1032     * @return {boolean} The node index if this Node is a child of
1033     *                   supplied Node, else -1.
1034     * @private
1035     */
1036     isChildOf: function(parentNode) {
1037         if (parentNode && parentNode.children) {
1038             for (var i=0, len=parentNode.children.length; i<len ; ++i) {
1039                 if (parentNode.children[i] === this) {
1040                     return i;
1041                 }
1042             }
1043         }
1044
1045         return -1;
1046     },
1047
1048     /**
1049      * Returns a node array of this node's siblings, null if none.
1050      * @method getSiblings
1051      * @return Node[]
1052      */
1053     getSiblings: function() {
1054         return this.parent.children;
1055     },
1056
1057     /**
1058      * Shows this node's children
1059      * @method showChildren
1060      */
1061     showChildren: function() {
1062         if (!this.tree.animateExpand(this.getChildrenEl(), this)) {
1063             if (this.hasChildren()) {
1064                 this.getChildrenEl().style.display = "";
1065             }
1066         }
1067     },
1068
1069     /**
1070      * Hides this node's children
1071      * @method hideChildren
1072      */
1073     hideChildren: function() {
1074
1075         if (!this.tree.animateCollapse(this.getChildrenEl(), this)) {
1076             this.getChildrenEl().style.display = "none";
1077         }
1078     },
1079
1080     /**
1081      * Returns the id for this node's container div
1082      * @method getElId
1083      * @return {string} the element id
1084      */
1085     getElId: function() {
1086         return "ygtv" + this.index;
1087     },
1088
1089     /**
1090      * Returns the id for this node's children div
1091      * @method getChildrenElId
1092      * @return {string} the element id for this node's children div
1093      */
1094     getChildrenElId: function() {
1095         return "ygtvc" + this.index;
1096     },
1097
1098     /**
1099      * Returns the id for this node's toggle element
1100      * @method getToggleElId
1101      * @return {string} the toggel element id
1102      */
1103     getToggleElId: function() {
1104         return "ygtvt" + this.index;
1105     },
1106
1107     /*
1108      * Returns the id for this node's spacer image.  The spacer is positioned
1109      * over the toggle and provides feedback for screen readers.
1110      * @method getSpacerId
1111      * @return {string} the id for the spacer image
1112      */
1113     /*
1114     getSpacerId: function() {
1115         return "ygtvspacer" + this.index;
1116     },
1117     */
1118
1119     /**
1120      * Returns this node's container html element
1121      * @method getEl
1122      * @return {HTMLElement} the container html element
1123      */
1124     getEl: function() {
1125         return document.getElementById(this.getElId());
1126     },
1127
1128     /**
1129      * Returns the div that was generated for this node's children
1130      * @method getChildrenEl
1131      * @return {HTMLElement} this node's children div
1132      */
1133     getChildrenEl: function() {
1134         return document.getElementById(this.getChildrenElId());
1135     },
1136
1137     /**
1138      * Returns the element that is being used for this node's toggle.
1139      * @method getToggleEl
1140      * @return {HTMLElement} this node's toggle html element
1141      */
1142     getToggleEl: function() {
1143         return document.getElementById(this.getToggleElId());
1144     },
1145
1146     /*
1147      * Returns the element that is being used for this node's spacer.
1148      * @method getSpacer
1149      * @return {HTMLElement} this node's spacer html element
1150      */
1151     /*
1152     getSpacer: function() {
1153         return document.getElementById( this.getSpacerId() ) || {};
1154     },
1155     */
1156
1157     /*
1158     getStateText: function() {
1159         if (this.isLoading) {
1160             return this.loadingText;
1161         } else if (this.hasChildren(true)) {
1162             if (this.expanded) {
1163                 return this.expandedText;
1164             } else {
1165                 return this.collapsedText;
1166             }
1167         } else {
1168             return "";
1169         }
1170     },
1171     */
1172
1173     /**
1174      * Generates the link that will invoke this node's toggle method
1175      * @method getToggleLink
1176      * @return {string} the javascript url for toggling this node
1177      */
1178     getToggleLink: function() {
1179         return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
1180             this.index + ").toggle()";
1181     },
1182
1183     /**
1184      * Hides this nodes children (creating them if necessary), changes the
1185      * @method collapse
1186      * toggle style.
1187      */
1188     collapse: function() {
1189         // Only collapse if currently expanded
1190         if (!this.expanded) { return; }
1191
1192         // fire the collapse event handler
1193         var ret = this.tree.onCollapse(this);
1194
1195         if (false === ret) {
1196             return;
1197         }
1198
1199         ret = this.tree.fireEvent("collapse", this);
1200
1201         if (false === ret) {
1202             return;
1203         }
1204
1205         if (!this.getEl()) {
1206             this.expanded = false;
1207             return;
1208         }
1209
1210         // hide the child div
1211         this.hideChildren();
1212         this.expanded = false;
1213
1214         this.updateIcon();
1215
1216         // this.getSpacer().title = this.getStateText();
1217
1218     },
1219
1220     /**
1221      * Shows this nodes children (creating them if necessary), changes the
1222      * toggle style, and collapses its siblings if multiExpand is not set.
1223      * @method expand
1224      */
1225     expand: function() {
1226         // Only expand if currently collapsed.
1227         if (this.expanded) { return; }
1228
1229         // fire the expand event handler
1230         var ret = this.tree.onExpand(this);
1231
1232         if (false === ret) {
1233             return;
1234         }
1235
1236         ret = this.tree.fireEvent("expand", this);
1237
1238         if (false === ret) {
1239             return;
1240         }
1241
1242         if (!this.getEl()) {
1243             this.expanded = true;
1244             return;
1245         }
1246
1247         if (! this.childrenRendered) {
1248             this.getChildrenEl().innerHTML = this.renderChildren();
1249         } else {
1250         }
1251
1252         this.expanded = true;
1253
1254         this.updateIcon();
1255
1256         // this.getSpacer().title = this.getStateText();
1257
1258         // We do an extra check for children here because the lazy
1259         // load feature can expose nodes that have no children.
1260
1261         // if (!this.hasChildren()) {
1262         if (this.isLoading) {
1263             this.expanded = false;
1264             return;
1265         }
1266
1267         if (! this.multiExpand) {
1268             var sibs = this.getSiblings();
1269             for (var i=0; i<sibs.length; ++i) {
1270                 if (sibs[i] != this && sibs[i].expanded) {
1271                     sibs[i].collapse();
1272                 }
1273             }
1274         }
1275
1276         this.showChildren();
1277     },
1278
1279     updateIcon: function() {
1280         if (this.hasIcon) {
1281             var el = this.getToggleEl();
1282             if (el) {
1283                 el.className = this.getStyle();
1284             }
1285         }
1286     },
1287
1288     /**
1289      * Returns the css style name for the toggle
1290      * @method getStyle
1291      * @return {string} the css class for this node's toggle
1292      */
1293     getStyle: function() {
1294         if (this.isLoading) {
1295             return "ygtvloading";
1296         } else {
1297             // location top or bottom, middle nodes also get the top style
1298             var loc = (this.nextSibling) ? "t" : "l";
1299
1300             // type p=plus(expand), m=minus(collapase), n=none(no children)
1301             var type = "n";
1302             if (this.hasChildren(true) || (this.isDynamic() && !this.getIconMode())) {
1303             // if (this.hasChildren(true)) {
1304                 type = (this.expanded) ? "m" : "p";
1305             }
1306
1307             return "ygtv" + loc + type;
1308         }
1309     },
1310
1311     /**
1312      * Returns the hover style for the icon
1313      * @return {string} the css class hover state
1314      * @method getHoverStyle
1315      */
1316     getHoverStyle: function() {
1317         var s = this.getStyle();
1318         if (this.hasChildren(true) && !this.isLoading) {
1319             s += "h";
1320         }
1321         return s;
1322     },
1323
1324     /**
1325      * Recursively expands all of this node's children.
1326      * @method expandAll
1327      */
1328     expandAll: function() {
1329         for (var i=0;i<this.children.length;++i) {
1330             var c = this.children[i];
1331             if (c.isDynamic()) {
1332                 alert("Not supported (lazy load + expand all)");
1333                 break;
1334             } else if (! c.multiExpand) {
1335                 alert("Not supported (no multi-expand + expand all)");
1336                 break;
1337             } else {
1338                 c.expand();
1339                 c.expandAll();
1340             }
1341         }
1342     },
1343
1344     /**
1345      * Recursively collapses all of this node's children.
1346      * @method collapseAll
1347      */
1348     collapseAll: function() {
1349         for (var i=0;i<this.children.length;++i) {
1350             this.children[i].collapse();
1351             this.children[i].collapseAll();
1352         }
1353     },
1354
1355     /**
1356      * Configures this node for dynamically obtaining the child data
1357      * when the node is first expanded.  Calling it without the callback
1358      * will turn off dynamic load for the node.
1359      * @method setDynamicLoad
1360      * @param fmDataLoader {function} the function that will be used to get the data.
1361      * @param iconMode {int} configures the icon that is displayed when a dynamic
1362      * load node is expanded the first time without children.  By default, the
1363      * "collapse" icon will be used.  If set to 1, the leaf node icon will be
1364      * displayed.
1365      */
1366     setDynamicLoad: function(fnDataLoader, iconMode) {
1367         if (fnDataLoader) {
1368             this.dataLoader = fnDataLoader;
1369             this._dynLoad = true;
1370         } else {
1371             this.dataLoader = null;
1372             this._dynLoad = false;
1373         }
1374
1375         if (iconMode) {
1376             this.iconMode = iconMode;
1377         }
1378     },
1379
1380     /**
1381      * Evaluates if this node is the root node of the tree
1382      * @method isRoot
1383      * @return {boolean} true if this is the root node
1384      */
1385     isRoot: function() {
1386         return (this == this.tree.root);
1387     },
1388
1389     /**
1390      * Evaluates if this node's children should be loaded dynamically.  Looks for
1391      * the property both in this instance and the root node.  If the tree is
1392      * defined to load all children dynamically, the data callback function is
1393      * defined in the root node
1394      * @method isDynamic
1395      * @return {boolean} true if this node's children are to be loaded dynamically
1396      */
1397     isDynamic: function() {
1398         var lazy = (!this.isRoot() && (this._dynLoad || this.tree.root._dynLoad));
1399         return lazy;
1400     },
1401
1402     /**
1403      * Returns the current icon mode.  This refers to the way childless dynamic
1404      * load nodes appear.
1405      * @method getIconMode
1406      * @return {int} 0 for collapse style, 1 for leaf node style
1407      */
1408     getIconMode: function() {
1409         return (this.iconMode || this.tree.root.iconMode);
1410     },
1411
1412     /**
1413      * Checks if this node has children.  If this node is lazy-loading and the
1414      * children have not been rendered, we do not know whether or not there
1415      * are actual children.  In most cases, we need to assume that there are
1416      * children (for instance, the toggle needs to show the expandable
1417      * presentation state).  In other times we want to know if there are rendered
1418      * children.  For the latter, "checkForLazyLoad" should be false.
1419      * @method hasChildren
1420      * @param checkForLazyLoad {boolean} should we check for unloaded children?
1421      * @return {boolean} true if this has children or if it might and we are
1422      * checking for this condition.
1423      */
1424     hasChildren: function(checkForLazyLoad) {
1425         return ( this.children.length > 0 ||
1426                 (checkForLazyLoad && this.isDynamic() && !this.dynamicLoadComplete) );
1427     },
1428
1429     /**
1430      * Expands if node is collapsed, collapses otherwise.
1431      * @method toggle
1432      */
1433     toggle: function() {
1434         if (!this.tree.locked && ( this.hasChildren(true) || this.isDynamic()) ) {
1435             if (this.expanded) { this.collapse(); } else { this.expand(); }
1436         }
1437     },
1438
1439     /**
1440      * Returns the markup for this node and its children.
1441      * @method getHtml
1442      * @return {string} the markup for this node and its expanded children.
1443      */
1444     getHtml: function() {
1445
1446         this.childrenRendered = false;
1447
1448         var sb = [];
1449         sb[sb.length] = '<div class="ygtvitem" id="' + this.getElId() + '">';
1450         sb[sb.length] = this.getNodeHtml();
1451         sb[sb.length] = this.getChildrenHtml();
1452         sb[sb.length] = '</div>';
1453         return sb.join("");
1454     },
1455
1456     /**
1457      * Called when first rendering the tree.  We always build the div that will
1458      * contain this nodes children, but we don't render the children themselves
1459      * unless this node is expanded.
1460      * @method getChildrenHtml
1461      * @return {string} the children container div html and any expanded children
1462      * @private
1463      */
1464     getChildrenHtml: function() {
1465
1466         var sb = [];
1467         sb[sb.length] = '<div class="ygtvchildren"';
1468         sb[sb.length] = ' id="' + this.getChildrenElId() + '"';
1469         if (!this.expanded) {
1470             sb[sb.length] = ' style="display:none;"';
1471         }
1472         sb[sb.length] = '>';
1473
1474         // Don't render the actual child node HTML unless this node is expanded.
1475         if ( (this.hasChildren(true) && this.expanded) ||
1476                 (this.renderHidden && !this.isDynamic()) ) {
1477             sb[sb.length] = this.renderChildren();
1478         }
1479
1480         sb[sb.length] = '</div>';
1481
1482         return sb.join("");
1483     },
1484
1485     /**
1486      * Generates the markup for the child nodes.  This is not done until the node
1487      * is expanded.
1488      * @method renderChildren
1489      * @return {string} the html for this node's children
1490      * @private
1491      */
1492     renderChildren: function() {
1493
1494
1495         var node = this;
1496
1497         if (this.isDynamic() && !this.dynamicLoadComplete) {
1498             this.isLoading = true;
1499             this.tree.locked = true;
1500
1501             if (this.dataLoader) {
1502
1503                 setTimeout(
1504                     function() {
1505                         node.dataLoader(node,
1506                             function() {
1507                                 node.loadComplete();
1508                             });
1509                     }, 10);
1510
1511             } else if (this.tree.root.dataLoader) {
1512
1513                 setTimeout(
1514                     function() {
1515                         node.tree.root.dataLoader(node,
1516                             function() {
1517                                 node.loadComplete();
1518                             });
1519                     }, 10);
1520
1521             } else {
1522                 return "Error: data loader not found or not specified.";
1523             }
1524
1525             return "";
1526
1527         } else {
1528             return this.completeRender();
1529         }
1530     },
1531
1532     /**
1533      * Called when we know we have all the child data.
1534      * @method completeRender
1535      * @return {string} children html
1536      */
1537     completeRender: function() {
1538         var sb = [];
1539
1540         for (var i=0; i < this.children.length; ++i) {
1541             // this.children[i].childrenRendered = false;
1542             sb[sb.length] = this.children[i].getHtml();
1543         }
1544
1545         this.childrenRendered = true;
1546
1547         return sb.join("");
1548     },
1549
1550     /**
1551      * Load complete is the callback function we pass to the data provider
1552      * in dynamic load situations.
1553      * @method loadComplete
1554      */
1555     loadComplete: function() {
1556         this.getChildrenEl().innerHTML = this.completeRender();
1557         this.dynamicLoadComplete = true;
1558         this.isLoading = false;
1559         this.expand();
1560         this.tree.locked = false;
1561     },
1562
1563     /**
1564      * Returns this node's ancestor at the specified depth.
1565      * @method getAncestor
1566      * @param {int} depth the depth of the ancestor.
1567      * @return {Node} the ancestor
1568      */
1569     getAncestor: function(depth) {
1570         if (depth >= this.depth || depth < 0)  {
1571             return null;
1572         }
1573
1574         var p = this.parent;
1575
1576         while (p.depth > depth) {
1577             p = p.parent;
1578         }
1579
1580         return p;
1581     },
1582
1583     /**
1584      * Returns the css class for the spacer at the specified depth for
1585      * this node.  If this node's ancestor at the specified depth
1586      * has a next sibling the presentation is different than if it
1587      * does not have a next sibling
1588      * @method getDepthStyle
1589      * @param {int} depth the depth of the ancestor.
1590      * @return {string} the css class for the spacer
1591      */
1592     getDepthStyle: function(depth) {
1593         return (this.getAncestor(depth).nextSibling) ?
1594             "ygtvdepthcell" : "ygtvblankdepthcell";
1595     },
1596
1597     /**
1598      * Get the markup for the node.  This is designed to be overrided so that we can
1599      * support different types of nodes.
1600      * @method getNodeHtml
1601      * @return {string} The HTML that will render this node.
1602      */
1603     getNodeHtml: function() {
1604         return "";
1605     },
1606
1607     /**
1608      * Regenerates the html for this node and its children.  To be used when the
1609      * node is expanded and new children have been added.
1610      * @method refresh
1611      */
1612     refresh: function() {
1613         // this.loadComplete();
1614         this.getChildrenEl().innerHTML = this.completeRender();
1615
1616         if (this.hasIcon) {
1617             var el = this.getToggleEl();
1618             if (el) {
1619                 el.className = this.getStyle();
1620             }
1621         }
1622     },
1623
1624     /**
1625      * Node toString
1626      * @method toString
1627      * @return {string} string representation of the node
1628      */
1629     toString: function() {
1630         return "Node (" + this.index + ")";
1631     }
1632
1633 };
1634
1635 YAHOO.augment(YAHOO.widget.Node, YAHOO.util.EventProvider);
1636
1637 /**
1638  * A custom YAHOO.widget.Node that handles the unique nature of
1639  * the virtual, presentationless root node.
1640  * @namespace YAHOO.widget
1641  * @class RootNode
1642  * @extends YAHOO.widget.Node
1643  * @param oTree {YAHOO.widget.TreeView} The tree instance this node belongs to
1644  * @constructor
1645  */
1646 YAHOO.widget.RootNode = function(oTree) {
1647         // Initialize the node with null params.  The root node is a
1648         // special case where the node has no presentation.  So we have
1649         // to alter the standard properties a bit.
1650         this.init(null, null, true);
1651
1652         /*
1653          * For the root node, we get the tree reference from as a param
1654          * to the constructor instead of from the parent element.
1655          */
1656         this.tree = oTree;
1657 };
1658
1659 YAHOO.extend(YAHOO.widget.RootNode, YAHOO.widget.Node, {
1660
1661     // overrides YAHOO.widget.Node
1662     getNodeHtml: function() {
1663         return "";
1664     },
1665
1666     toString: function() {
1667         return "RootNode";
1668     },
1669
1670     loadComplete: function() {
1671         this.tree.draw();
1672     }
1673
1674 });
1675 /**
1676  * The default node presentation.  The first parameter should be
1677  * either a string that will be used as the node's label, or an object
1678  * that has a string propery called label.  By default, the clicking the
1679  * label will toggle the expanded/collapsed state of the node.  By
1680  * changing the href property of the instance, this behavior can be
1681  * changed so that the label will go to the specified href.
1682  * @namespace YAHOO.widget
1683  * @class TextNode
1684  * @extends YAHOO.widget.Node
1685  * @constructor
1686  * @param oData {object} a string or object containing the data that will
1687  * be used to render this node
1688  * @param oParent {YAHOO.widget.Node} this node's parent node
1689  * @param expanded {boolean} the initial expanded/collapsed state
1690  */
1691 YAHOO.widget.TextNode = function(oData, oParent, expanded) {
1692
1693     if (oData) {
1694         this.init(oData, oParent, expanded);
1695         this.setUpLabel(oData);
1696     }
1697
1698 };
1699
1700 YAHOO.extend(YAHOO.widget.TextNode, YAHOO.widget.Node, {
1701
1702     /**
1703      * The CSS class for the label href.  Defaults to ygtvlabel, but can be
1704      * overridden to provide a custom presentation for a specific node.
1705      * @property labelStyle
1706      * @type string
1707      */
1708     labelStyle: "ygtvlabel",
1709
1710     /**
1711      * The derived element id of the label for this node
1712      * @property labelElId
1713      * @type string
1714      */
1715     labelElId: null,
1716
1717     /**
1718      * The text for the label.  It is assumed that the oData parameter will
1719      * either be a string that will be used as the label, or an object that
1720      * has a property called "label" that we will use.
1721      * @property label
1722      * @type string
1723      */
1724     label: null,
1725
1726     textNodeParentChange: function() {
1727
1728         /**
1729          * Custom event that is fired when the text node label is clicked.  The
1730          * custom event is defined on the tree instance, so there is a single
1731          * event that handles all nodes in the tree.  The node clicked is
1732          * provided as an argument
1733          *
1734          * @event labelClick
1735          * @for YAHOO.widget.TreeView
1736          * @param {YAHOO.widget.Node} node the node clicked
1737          */
1738         if (this.tree && !this.tree.hasEvent("labelClick")) {
1739             this.tree.createEvent("labelClick", this.tree);
1740         }
1741
1742     },
1743
1744     /**
1745      * Sets up the node label
1746      * @method setUpLabel
1747      * @param oData string containing the label, or an object with a label property
1748      */
1749     setUpLabel: function(oData) {
1750
1751         // set up the custom event on the tree
1752         this.textNodeParentChange();
1753         this.subscribe("parentChange", this.textNodeParentChange);
1754
1755         if (typeof oData == "string") {
1756             oData = { label: oData };
1757         }
1758         this.label = oData.label;
1759
1760         // update the link
1761         if (oData.href) {
1762             this.href = oData.href;
1763         }
1764
1765         // set the target
1766         if (oData.target) {
1767             this.target = oData.target;
1768         }
1769
1770         if (oData.style) {
1771             this.labelStyle = oData.style;
1772         }
1773
1774         this.labelElId = "ygtvlabelel" + this.index;
1775     },
1776
1777     /**
1778      * Returns the label element
1779      * @for YAHOO.widget.TextNode
1780      * @method getLabelEl
1781      * @return {object} the element
1782      */
1783     getLabelEl: function() {
1784         return document.getElementById(this.labelElId);
1785     },
1786
1787     // overrides YAHOO.widget.Node
1788     getNodeHtml: function() {
1789         var sb = [];
1790
1791         sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
1792         sb[sb.length] = '<tr>';
1793
1794         for (var i=0;i<this.depth;++i) {
1795             // sb[sb.length] = '<td class="ygtvdepthcell">&#160;</td>';
1796             sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
1797         }
1798
1799         var getNode = 'YAHOO.widget.TreeView.getNode(\'' +
1800                         this.tree.id + '\',' + this.index + ')';
1801
1802         sb[sb.length] = '<td';
1803         // sb[sb.length] = ' onselectstart="return false"';
1804         sb[sb.length] = ' id="' + this.getToggleElId() + '"';
1805         sb[sb.length] = ' class="' + this.getStyle() + '"';
1806         if (this.hasChildren(true)) {
1807             sb[sb.length] = ' onmouseover="this.className=';
1808             sb[sb.length] = getNode + '.getHoverStyle()"';
1809             sb[sb.length] = ' onmouseout="this.className=';
1810             sb[sb.length] = getNode + '.getStyle()"';
1811         }
1812         sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">';
1813
1814         /*
1815         sb[sb.length] = '<img id="' + this.getSpacerId() + '"';
1816         sb[sb.length] = ' alt=""';
1817         sb[sb.length] = ' tabindex=0';
1818         sb[sb.length] = ' src="' + this.spacerPath + '"';
1819         sb[sb.length] = ' title="' + this.getStateText() + '"';
1820         sb[sb.length] = ' class="ygtvspacer"';
1821         // sb[sb.length] = ' onkeypress="return ' + getNode + '".onKeyPress()"';
1822         sb[sb.length] = ' />';
1823         */
1824
1825         sb[sb.length] = '&#160;';
1826
1827         sb[sb.length] = '</td>';
1828         sb[sb.length] = '<td>';
1829         sb[sb.length] = '<a';
1830         sb[sb.length] = ' id="' + this.labelElId + '"';
1831         sb[sb.length] = ' class="' + this.labelStyle + '"';
1832         //sb[sb.length] = ' href="' + this.href + '"';
1833         sb[sb.length] = ' href="javascript:set_selected_node(\''+this.tree.id + '\',\''+this.index+'\');'+ this.href +'"';
1834         sb[sb.length] = ' target="' + this.target + '"';
1835         sb[sb.length] = ' onclick="return ' + getNode + '.onLabelClick(' + getNode +')"';
1836         if (this.hasChildren(true)) {
1837             sb[sb.length] = ' onmouseover="document.getElementById(\'';
1838             sb[sb.length] = this.getToggleElId() + '\').className=';
1839             sb[sb.length] = getNode + '.getHoverStyle()"';
1840             sb[sb.length] = ' onmouseout="document.getElementById(\'';
1841             sb[sb.length] = this.getToggleElId() + '\').className=';
1842             sb[sb.length] = getNode + '.getStyle()"';
1843         }
1844         sb[sb.length] = ' >';
1845         sb[sb.length] = this.label;
1846         sb[sb.length] = '</a>';
1847         sb[sb.length] = '</td>';
1848         sb[sb.length] = '</tr>';
1849         sb[sb.length] = '</table>';
1850
1851         return sb.join("");
1852     },
1853
1854     /**
1855      * Executed when the label is clicked.  Fires the labelClick custom event.
1856      * @method onLabelClick
1857      * @param me {Node} this node
1858      * @scope the anchor tag clicked
1859      * @return false to cancel the anchor click
1860      */
1861     onLabelClick: function(me) {
1862         return me.tree.fireEvent("labelClick", me);
1863         //return true;
1864     },
1865
1866     toString: function() {
1867         return "TextNode (" + this.index + ") " + this.label;
1868     }
1869
1870 });
1871 /**
1872  * A menu-specific implementation that differs from TextNode in that only
1873  * one sibling can be expanded at a time.
1874  * @namespace YAHOO.widget
1875  * @class MenuNode
1876  * @extends YAHOO.widget.TextNode
1877  * @param oData {object} a string or object containing the data that will
1878  * be used to render this node
1879  * @param oParent {YAHOO.widget.Node} this node's parent node
1880  * @param expanded {boolean} the initial expanded/collapsed state
1881  * @constructor
1882  */
1883 YAHOO.widget.MenuNode = function(oData, oParent, expanded) {
1884         if (oData) {
1885                 this.init(oData, oParent, expanded);
1886                 this.setUpLabel(oData);
1887         }
1888
1889     /*
1890      * Menus usually allow only one branch to be open at a time.
1891      */
1892         this.multiExpand = false;
1893
1894
1895 };
1896
1897 YAHOO.extend(YAHOO.widget.MenuNode, YAHOO.widget.TextNode, {
1898
1899     toString: function() {
1900         return "MenuNode (" + this.index + ") " + this.label;
1901     }
1902
1903 });
1904 /**
1905  * This implementation takes either a string or object for the
1906  * oData argument.  If is it a string, we will use it for the display
1907  * of this node (and it can contain any html code).  If the parameter
1908  * is an object, we look for a parameter called "html" that will be
1909  * used for this node's display.
1910  * @namespace YAHOO.widget
1911  * @class HTMLNode
1912  * @extends YAHOO.widget.Node
1913  * @constructor
1914  * @param oData {object} a string or object containing the data that will
1915  * be used to render this node
1916  * @param oParent {YAHOO.widget.Node} this node's parent node
1917  * @param expanded {boolean} the initial expanded/collapsed state
1918  * @param hasIcon {boolean} specifies whether or not leaf nodes should
1919  * have an icon
1920  */
1921 YAHOO.widget.HTMLNode = function(oData, oParent, expanded, hasIcon) {
1922     if (oData) {
1923         this.init(oData, oParent, expanded);
1924         this.initContent(oData, hasIcon);
1925     }
1926 };
1927
1928 YAHOO.extend(YAHOO.widget.HTMLNode, YAHOO.widget.Node, {
1929
1930     /**
1931      * The CSS class for the html content container.  Defaults to ygtvhtml, but
1932      * can be overridden to provide a custom presentation for a specific node.
1933      * @property contentStyle
1934      * @type string
1935      */
1936     contentStyle: "ygtvhtml",
1937
1938     /**
1939      * The generated id that will contain the data passed in by the implementer.
1940      * @property contentElId
1941      * @type string
1942      */
1943     contentElId: null,
1944
1945     /**
1946      * The HTML content to use for this node's display
1947      * @property content
1948      * @type string
1949      */
1950     content: null,
1951
1952     /**
1953      * Sets up the node label
1954      * @property initContent
1955      * @param {object} An html string or object containing an html property
1956      * @param {boolean} hasIcon determines if the node will be rendered with an
1957      * icon or not
1958      */
1959     initContent: function(oData, hasIcon) {
1960         if (typeof oData == "string") {
1961             oData = { html: oData };
1962         }
1963
1964         this.html = oData.html;
1965         this.contentElId = "ygtvcontentel" + this.index;
1966         this.hasIcon = hasIcon;
1967
1968     },
1969
1970     /**
1971      * Returns the outer html element for this node's content
1972      * @method getContentEl
1973      * @return {HTMLElement} the element
1974      */
1975     getContentEl: function() {
1976         return document.getElementById(this.contentElId);
1977     },
1978
1979     // overrides YAHOO.widget.Node
1980     getNodeHtml: function() {
1981         var sb = [];
1982
1983         sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
1984         sb[sb.length] = '<tr>';
1985
1986         for (var i=0;i<this.depth;++i) {
1987             sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
1988         }
1989
1990         if (this.hasIcon) {
1991             sb[sb.length] = '<td';
1992             sb[sb.length] = ' id="' + this.getToggleElId() + '"';
1993             sb[sb.length] = ' class="' + this.getStyle() + '"';
1994             sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"';
1995             if (this.hasChildren(true)) {
1996                 sb[sb.length] = ' onmouseover="this.className=';
1997                 sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
1998                 sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
1999                 sb[sb.length] = ' onmouseout="this.className=';
2000                 sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
2001                 sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
2002             }
2003             sb[sb.length] = '>&#160;</td>';
2004         }
2005
2006         sb[sb.length] = '<td';
2007         sb[sb.length] = ' id="' + this.contentElId + '"';
2008         sb[sb.length] = ' class="' + this.contentStyle + '"';
2009         sb[sb.length] = ' >';
2010         sb[sb.length] = this.html;
2011         sb[sb.length] = '</td>';
2012         sb[sb.length] = '</tr>';
2013         sb[sb.length] = '</table>';
2014
2015         return sb.join("");
2016     },
2017
2018     toString: function() {
2019         return "HTMLNode (" + this.index + ")";
2020     }
2021
2022 });
2023 /**
2024  * A static factory class for tree view expand/collapse animations
2025  * @class TVAnim
2026  * @static
2027  */
2028 YAHOO.widget.TVAnim = function() {
2029     return {
2030         /**
2031          * Constant for the fade in animation
2032          * @property FADE_IN
2033          * @type string
2034          * @static
2035          */
2036         FADE_IN: "TVFadeIn",
2037
2038         /**
2039          * Constant for the fade out animation
2040          * @property FADE_OUT
2041          * @type string
2042          * @static
2043          */
2044         FADE_OUT: "TVFadeOut",
2045
2046         /**
2047          * Returns a ygAnim instance of the given type
2048          * @method getAnim
2049          * @param type {string} the type of animation
2050          * @param el {HTMLElement} the element to element (probably the children div)
2051          * @param callback {function} function to invoke when the animation is done.
2052          * @return {YAHOO.util.Animation} the animation instance
2053          * @static
2054          */
2055         getAnim: function(type, el, callback) {
2056             if (YAHOO.widget[type]) {
2057                 return new YAHOO.widget[type](el, callback);
2058             } else {
2059                 return null;
2060             }
2061         },
2062
2063         /**
2064          * Returns true if the specified animation class is available
2065          * @method isValid
2066          * @param type {string} the type of animation
2067          * @return {boolean} true if valid, false if not
2068          * @static
2069          */
2070         isValid: function(type) {
2071             return (YAHOO.widget[type]);
2072         }
2073     };
2074 } ();
2075
2076 /**
2077  * A 1/2 second fade-in animation.
2078  * @class TVFadeIn
2079  * @constructor
2080  * @param el {HTMLElement} the element to animate
2081  * @param callback {function} function to invoke when the animation is finished
2082  */
2083 YAHOO.widget.TVFadeIn = function(el, callback) {
2084     /**
2085      * The element to animate
2086      * @property el
2087      * @type HTMLElement
2088      */
2089     this.el = el;
2090
2091     /**
2092      * the callback to invoke when the animation is complete
2093      * @property callback
2094      * @type function
2095      */
2096     this.callback = callback;
2097
2098 };
2099
2100 YAHOO.widget.TVFadeIn.prototype = {
2101     /**
2102      * Performs the animation
2103      * @method animate
2104      */
2105     animate: function() {
2106         var tvanim = this;
2107
2108         var s = this.el.style;
2109         s.opacity = 0.1;
2110         s.filter = "alpha(opacity=10)";
2111         s.display = "";
2112
2113         var dur = 0.4;
2114         var a = new YAHOO.util.Anim(this.el, {opacity: {from: 0.1, to: 1, unit:""}}, dur);
2115         a.onComplete.subscribe( function() { tvanim.onComplete(); } );
2116         a.animate();
2117     },
2118
2119     /**
2120      * Clean up and invoke callback
2121      * @method onComplete
2122      */
2123     onComplete: function() {
2124         this.callback();
2125     },
2126
2127     /**
2128      * toString
2129      * @method toString
2130      * @return {string} the string representation of the instance
2131      */
2132     toString: function() {
2133         return "TVFadeIn";
2134     }
2135 };
2136
2137 /**
2138  * A 1/2 second fade out animation.
2139  * @class TVFadeOut
2140  * @constructor
2141  * @param el {HTMLElement} the element to animate
2142  * @param callback {Function} function to invoke when the animation is finished
2143  */
2144 YAHOO.widget.TVFadeOut = function(el, callback) {
2145     /**
2146      * The element to animate
2147      * @property el
2148      * @type HTMLElement
2149      */
2150     this.el = el;
2151
2152     /**
2153      * the callback to invoke when the animation is complete
2154      * @property callback
2155      * @type function
2156      */
2157     this.callback = callback;
2158
2159 };
2160
2161 YAHOO.widget.TVFadeOut.prototype = {
2162     /**
2163      * Performs the animation
2164      * @method animate
2165      */
2166     animate: function() {
2167         var tvanim = this;
2168         var dur = 0.4;
2169         var a = new YAHOO.util.Anim(this.el, {opacity: {from: 1, to: 0.1, unit:""}}, dur);
2170         a.onComplete.subscribe( function() { tvanim.onComplete(); } );
2171         a.animate();
2172     },
2173
2174     /**
2175      * Clean up and invoke callback
2176      * @method onComplete
2177      */
2178     onComplete: function() {
2179         var s = this.el.style;
2180         s.display = "none";
2181         // s.opacity = 1;
2182         s.filter = "alpha(opacity=100)";
2183         this.callback();
2184     },
2185
2186     /**
2187      * toString
2188      * @method toString
2189      * @return {string} the string representation of the instance
2190      */
2191     toString: function() {
2192         return "TVFadeOut";
2193     }
2194 };
2195