Tree Example 2: Links are used to add behavior to the tree

<div role="application">

<script type="text/javascript">
  var tree1 = new Tree("tree1");
  widgets.add( tree1 );
</script>

<h2 id="label_1">Foods</h2>
<table class="example">
<tr>
<td valign="top">
<ul id="tree1"
    role="tree"
    tabindex="0"
    aria-labelledby="label_1"
    class="tree"
    >
    <li role="presentation">
      <a role="treeitem"
       tabindex="-1"
     aria-expanded="true"
     href="javascript:show('show1', 'Fruits')"
     aria-conrols="show1">
     <img
        role="presentation"
      src="http://test.cita.uiuc.edu/aria/images/treeExpanded.gif"
      alt="expanded tree "
      />
     Fruits
      </a>
      <ul role="group">
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Oranges')" aria-controls="show1">Oranges</a>
    </li>
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Pineapples')" aria-controls="show1">Pineapples</a>
    </li>
    <li role="presentation">
          <a role="treeitem"
           tabindex="-1"
         aria-expanded="false"
         href="javascript:show('show1', 'Fruit: Apple')"
         aria-conrols="show1">
         <img
           role="presentation"
         src="http://test.cita.uiuc.edu/aria/images/treeContracted.gif"
         alt="contracted tree "
         />
        Apple
          </a>
          <ul role="group">
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Macintosh Apple')" aria-controls="show1">Macintosh</a>
        </li>
            <li role="presentation">
              <a role="treeitem"
               tabindex="-1"
             aria-expanded="false"
             href="javascript:show('show1', 'Fruit: Granny Smith Apple')"
             aria-conrols="show1">
             <img
               role="presentation"
             src="http://test.cita.uiuc.edu/aria/images/treeContracted.gif"
             alt="contracted tree "
             />
           Granny Smith
              </a>
              <ul role="group">
                <li role="presentation">
              <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Washington State Granny Smith Apple ')" aria-controls="show1">Washington State</a>
            </li>
                <li role="presentation">
              <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Michigan Granny Smith Apple ')" aria-controls="show1">Michigan</a>
            </li>
                <li role="presentation">
              <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: New York Granny Smith Apple ')" aria-controls="show1">New York</a>
            </li>
              </ul>
            </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Fuji Apple')" aria-controls="show1">Fuji</a>
        </li>
          </ul>
        </li>
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Bannanas')" aria-controls="show1">Bannanas</a>
    </li>
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Fruit: Pears')" aria-controls="show1">Pears</a>
    </li>
      </ul>
    </li>
    <li role="presentation">
      <a role="treeitem"
       tabindex="-1"
     aria-expanded="true"
     href="javascript:show('show1', 'Vegetables')"
     aria-conrols="show1">
     <img
        role="presentation"
      src="http://test.cita.uiuc.edu/aria/images/treeExpanded.gif"
      alt="contracted tree "
      />
     Vegetables
      </a>
      <ul role="group">
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Brocolli')" aria-controls="show1">Brocolli</a>
    </li>
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Carrots')" aria-controls="show1">Carrots</a>
    </li>
    <li role="presentation">
          <a role="treeitem"
           tabindex="-1"
         aria-expanded="false"
         href="javascript:show('show1', 'Vegetable: Lettuce')"
         aria-conrols="show1">
         <img
           role="presentation"
         src="http://test.cita.uiuc.edu/aria/images/treeContracted.gif"
         alt="contracted tree "
         />
        Lettuce
          </a>
          <ul role="group">
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Romaine Lettuce')" aria-controls="show1">Romaine</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Iceberg Lettuce')" aria-controls="show1">Iceberg</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Butternut Lettuce')" aria-controls="show1">Butternut</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Red Leaf Lettuce')" aria-controls="show1">Red Leaf</a>
        </li>
      </ul>  
        </li>
        <li role="presentation">
      <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Spinach')" aria-controls="show1">Spinach</a>
    </li>
    <li role="presentation">
          <a role="treeitem"
           tabindex="-1"
         aria-expanded="false"
         href="javascript:show('show1', 'Vegetable: Squash')"
         aria-conrols="show1">
         <img
           role="presentation"
         src="http://test.cita.uiuc.edu/aria/images/treeContracted.gif"
         alt="contracted tree "
         />
        Squash
          </a>
          <ul role="group">
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Acorn Squash')" aria-controls="show1">Acorn</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Ambercup Squash')" aria-controls="show1">Ambercup</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Autumn Cup Squash')" aria-controls="show1">Autumn Cup</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Hubbard Squash')" aria-controls="show1">Hubbard</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Kobocha Squash')" aria-controls="show1">Kobocha</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Butternut Squash')" aria-controls="show1">Butternut</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Spaghetti Squash')" aria-controls="show1">Spaghetti</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Sweet Dumpling Squash')" aria-controls="show1">Sweet Dumpling</a>
        </li>
            <li role="presentation">
          <a role="treeitem" tabindex="-1" href="javascript:show('show1', 'Vegetable: Turban Squash')" aria-controls="show1">Turban</a>
        </li>
      </ul>  
        </li>
      </ul>
    </li>
  </ul>
</td>
<td valign="top" class="show">
  <div id="show1">Nothing selected</div>
</td>
</tr>
</table>

</div>

  <script type="text/javascript">
/**
*
* The Globale Variables
*/

if (!window.Node) {
  var Node = {            // If there is no Node object, define one
    ELEMENT_NODE: 1,    // with the following properties and values.
    ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
    TEXT_NODE: 3,       // For XML-specific nodes, you need to add
    COMMENT_NODE: 8,    // other constants here.
    DOCUMENT_NODE: 9,
    DOCUMENT_FRAGMENT_NODE: 11
  }
}


var KEY_PAGEUP   = 33;
var KEY_PAGEDOWN = 34;
var KEY_END      = 35;
var KEY_HOME     = 36;

var KEY_LEFT     = 37;
var KEY_UP       = 38;
var KEY_RIGHT    = 39;
var KEY_DOWN     = 40;

var KEY_SPACE    = 32;
var KEY_TAB      = 9;

var KEY_BACKSPACE = 8;
var KEY_DELETE    = 46;
var KEY_ENTER     = 13;
var KEY_INSERT    = 45;
var KEY_ESCAPE    = 27;

var KEY_F1        = 112;
var KEY_F2        = 113;
var KEY_F3        = 114;
var KEY_F4        = 115;
var KEY_F5        = 116;
var KEY_F6        = 117;
var KEY_F7        = 118;
var KEY_F8        = 119;
var KEY_F9        = 120;
var KEY_F10       = 121;

var KEY_M         = 77;

var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";

// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************

/**
*
* nextSiblingElement
*
* @contructor
*/

function nextSiblingElement( node ) {

  var next_node = node.nextSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/

function previousSiblingElement( node ) {

  var next_node = node.previousSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.previousSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/

function firstChildElement( node ) {

  var next_node = node.firstChild;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile


  return next_node;
  
}

/**
*
* getTextContentOfNode
*
* @contructor
*/

function getTextContentOfNode( node ) {

  var next_node = node.firstChild;
  var str = "";

  while( next_node ) {
    
    if( (next_node.nodeType == Node.TEXT_NODE ) &&
      (next_node.length > 0 )
     )
      str += next_node.data;
    
    
    next_node = next_node.nextSibling;
    
  }  // endwhile

  return str;
  
}

/**
*
* setTextContentOfNode
*
* @contructor
*/

function setTextContentOfNode( node, text ) {

   // Generate a new text node with the text value
    var text_node = document.createTextNode(text);
  
    // Remove child nodes to remove text
    while (node.firstChild) {
      node.removeChild(node.firstChild);
    } // while

    // Append new text to the container element
    node.appendChild( text_node );

}
  </script>

  <script type="text/javascript">
// JavaScript Document


if (!window.Node) {
  var Node = {            // If there is no Node object, define one
    ELEMENT_NODE: 1,    // with the following properties and values.
    ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
    TEXT_NODE: 3,       // For XML-specific nodes, you need to add
    COMMENT_NODE: 8,    // other constants here.
    DOCUMENT_NODE: 9,
    DOCUMENT_FRAGMENT_NODE: 11
  }
}

var ARIA_STATE = "aria-";

/**
* Widgets Object is used to initialize a set of controls
* and provide a conveinence fuction to cancel event propagration
* @construtor
*/

function Widgets() {
  this.widgets = new Array();
}

/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.add = function(obj) {
  this.widgets[this.widgets.length] = obj;
}

/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.init = function() {
     
   for(var i = 0; i < this.widgets.length; i++ )
     this.widgets[i].init();
}

//
// convience function for getting the node based on id

function _$( id ) {
  return document.getElementById( id );  
}


//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {

}


//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )

WebBrowser.prototype.keyCode = function( event ) {
  var e = event || window.event;
  
  return e.keyCode;
}  

/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/

if( document.createEvent ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.simulateOnClickEvent = function( node ) {
    // W3C DOM Events way to trigger a "click" event
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );

    node.dispatchEvent( e );

  }

} else {

  // If a Microsoft IE based browser implement this function
  
  WebBrowser.prototype.simulateOnClickEvent = function( node ) {

    var e = document.createEventObject();
    node.fireEvent( "onclick", e );

  } // endif

}

if ( document.addEventListener ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

    if( clickHandler )
      document.addEventListener( "click",     clickHandler, true );
    
    if( downHandler )
      document.addEventListener( "mousedown", downHandler,  true );

    if( moveHandler )
      document.addEventListener( "mousemove", moveHandler,  true );
    
    if( upHandler)
      document.addEventListener( "mouseup",   upHandler,    true );

  }

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

  if( upHandler)
      document.removeEventListener( "mouseup",   upHandler,    true );
      
    if( moveHandler )
      document.removeEventListener( "mousemove", moveHandler,  true );
    
    if( downHandler )
      document.removeEventListener( "mousedown", downHandler,  true );
      
    if( clickHandler )
      document.removeEventListener( "click",     clickHandler, true );

  }

} else {

  // If a Microsoft IE based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   node.setCapture();
   if( clickHandler)
     node.attachEvent( "onclick", clickHandler );
    
   if( downHandler)
     node.attachEvent( "onmousedown", downHandler );
    
   if( moveHandler )
     node.attachEvent( "onmousemove", moveHandler );
    
   if( upHandler )
     node.attachEvent( "onmouseup", upHandler );

  } // endif

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   if( upHandler )
     node.detachEvent( "onmouseup", upHandler );
    
   if( moveHandler )
     node.detachEvent( "onmousemove", moveHandler );
    
   if( downHandler)
     node.detachEvent( "onmousedown", downHandler );
    
   if( clickHandler)
     node.detachEvent( "onclick", clickHandler );
    
     node.releaseCapture();

  } // endif


}




if (typeof document.documentElement.setAttributeNS != 'undefined') {

  WebBrowser.prototype.stopPropagation = function( event ) {
    event.stopPropagation();
    event.preventDefault();
    return false;
  }

  WebBrowser.prototype.target = function( event ) {
  return event.target;
  }
  
  WebBrowser.prototype.attrName = function( event ) {
  return event.attrName
  }
  
  WebBrowser.prototype.charCode = function(event) {
     return event.charCode;
  }

  WebBrowser.prototype.calculateOffsetLeft = function( node ) {
  return node.offsetLeft;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function( node ) {
  return node.offsetTop;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.pageX;    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.pageY;    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    node.style.left = left+"px";
    node.style.top = top+"px";
  }


} else {

  WebBrowser.prototype.stopPropagation = function( event ) {
    event.cancelBubble = true;
    event.returnValue = false;
    return false;
  }

  WebBrowser.prototype.charCode = function(event) {
    return window.browser.keyCode( event );
  }

  WebBrowser.prototype.target = function( event ) {
    return event.srcElement;
  }

  WebBrowser.prototype.attrName = function( event ) {
  return event.propertyName;
  }
  
  WebBrowser.prototype.calculateOffsetLeft = function(node) {
  var offset = 0;
  
  while( node ) {
    offset += node.offsetLeft;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function(node) {
  var offset = 0;
  
  while( node ) {
    offset = offset + node.offsetTop;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    offsetx = 0;
    offsety = 0;
    nnode = node.offsetParent
    while( nnode ) {
      offsetx = offsetx + nnode.offsetLeft;
      offsety = offsety + nnode.offsetTop;
      nnode = nnode.offsetParent;
    }
    node.style.left = left-offsetx+"px";
    node.style.top = top-offsety+"px";
  }
  
};


if (document.addEventListener) {

     // Functions for W3C Standards compliant implementation of adding event handlers

     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.addEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.removeEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      elmTarget.addEventListener("DOMAttrModified", fCallback, false);
      returnValue = true;
    };

} else {

  if(document.attachEvent) {

     // IE Specific Event handler functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
     };

    WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
    };

  } else {

     // For browsers that do not support W3C or IE event functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
       return false;
     };

  }

}

widgets_flag = true;
var widgets = new Widgets();
var browser = new WebBrowser();

function initApp() {
  widgets.init();
}

  </script>

  <script type="text/javascript">
// JavaScript Document

var SLIDER_KNOB_BORDER_WIDTH = 2;
var SLIDER_BORDER_WIDTH = 1;

var IMG_URL_EXPANDED = "images/treeExpanded.gif";
var IMG_URL_CONTRACTED = "images/treeContracted.gif";
var IMG_URL_EXPANDED_FOCUS = "images/treeExpandedFocus.gif";
var IMG_URL_CONTRACTED_FOCUS = "images/treeContractedFocus.gif";

var IMG_ALT_EXPANDED = "tree expanded";
var IMG_ALT_CONTRACTED = "tree contracted";

// ******************************************
//
// Show Function
//
// ******************************************

function show( id, message ) {

  document.getElementById( id ).innerHTML = message;

}

// ******************************************
//
// Tree Class
//
// ******************************************

//
// The state variable keeps track of current state of checkbox
function Tree( id ) {

  this.id = id;
  this.current_node = null;

}

//
//  
Tree.prototype.init = function() {

  this.node = document.getElementById( this.id );
  
  var obj = this;

  browser.addEvent( this.node, "keydown", function(event) {handleTreeKeyDownEvent(event, obj); }, false);
  browser.addEvent( this.node, "focus",   function(event) {handleTreeFocusEvent(event, obj); }, false);

  // add click events to expandable nodes

  var nodes = this.node.getElementsByTagName("a");
  
  for( var i = 0; i < nodes.length; i++ ) {

   if( nodes[i].getAttribute("aria-expanded") ) {
     browser.addEvent( nodes[i], "mousedown", function(event) {handleTreeItemClickEvent( event, obj); }, false );
     browser.addEvent( nodes[i], "focus", function(event) {handleTreeItemFocusEvent( event, obj); }, false );
     browser.addEvent( nodes[i], "blur", function(event) {handleTreeItemBlurEvent( event, obj); }, false );
   } // endif

  } // endfor

}

// The state variable keeps track of current state of expansion and contaction of tree group
treeToggleExpand = function( node ) {

  if( node.getAttribute("aria-expanded" ) )
    if (node.getAttribute("aria-expanded") == "true") {
      treeContractTreeGroup( node );    
    } else {
      treeExpandTreeGroup( node );  
    }
  
}

//
//
function getNextSiblingTreeItem( node ) {

// Get parent of link, should be an LI element
  var next_node = node.parentNode;

    // look for next sibling LI element
  if( next_node )
       next_node = nextSiblingElement(next_node);

    // Gwt the first link in the LI element
  if( next_node )
       next_node = next_node.getElementsByTagName("a")[0];
    
  return next_node;    
}

//
//
function getPreviousSiblingTreeItem( node ) {

// Get parent of link, should be an LI element
  var next_node = node.parentNode;

    // look for next sibling LI element
  if( next_node )
       next_node = previousSiblingElement(next_node);

    // Gwt the first link in the LI element
  if( next_node )
       next_node = next_node.getElementsByTagName("a")[0];
    
  return next_node;    
}



//
// Get the next the parent node of the current node in the tree
treeParentTreeGroupElement = function ( tree ) {

  var next_node = tree.current_node;
  
  while( next_node &&
         (next_node.getAttribute("role") != "tree") &&
         (next_node.getAttribute("role") != "group")
    ) {
  
  next_node = next_node.parentNode;

  } // endwhile
  

  if( next_node.getAttribute("role") == "group" ) {
  
   next_node = previousSiblingElement(next_node);
    
    return next_node;
  
  } else
    return null;
}


//
// When moving to the previous node you want to get to the last item in a branch
treeLastTreeItem = function( node ) {

  var new_node = null;
  var next_node;
  var element_nodes;

  if( node.getAttribute("aria-expanded") == "true" ) {
  
  // The next element should be a UL with the role of group
    next_node = nextSiblingElement( node );
  
  //
  // check to see if node exists
    if( next_node ) {
        
      element_nodes = next_node.getElementsByTagName("a");

      // start with last element
      for( var i = (element_nodes.length-1); i > 0 ; i--) {
    
        if( element_nodes[i].getAttribute("role") == "treeitem")  {
          new_node = element_nodes[i];  
          break;
        } // endif
      
      } // endfor
  
    } // endif

  }
    
  return new_node;
  
}

//
//  Move the current node to the next node in the tree
treeNextTreeItem = function( tree ) {
  
  var new_node = null;
  var next_node = null;
  var element_nodes = null;
  
  if(tree.current_node  == null) {
  // Get the first link, since in this tree all the interactive elements are links  
    tree.current_node = tree.node.getElementsByTagName("a")[0];
  }  // endif

  // alert(tree.current_node.getAttribute("role"));
  // alert(tree.current_node.getAttribute("role") + " " + tree.current_node.getAttribute("aria-expanded"));

  // If on a group node check to see if its children are visible
  if( tree.current_node.getAttribute("aria-expanded") == "true" ) {

    // get the group node, this is a UL element
  
    next_node = nextSiblingElement( tree.current_node );
  
    if( next_node ) {
      
      // alert(next_node.tagName + " " + next_node.getAttribute("role"));
    
      element_nodes = next_node.getElementsByTagName("a");

      for( var i = 0; i < element_nodes.length; i++) {
    
        if( element_nodes[i].getAttribute("role") == "treeitem")  {
          new_node = element_nodes[i];  
          break;
        } // endif
      
      } // endfor
  
    } // endif
      
  } else {
  
  // Get next sibling tree item
    next_node = getNextSiblingTreeItem( tree.current_node );

    while( next_node ) {

      if( next_node.getAttribute("role") == "treeitem" )  {
  
        new_node = next_node;  
        break;
      } // endif
      
      next_node = getNextSiblingTreeItem( next_node);
    
    }  // endwhile
        
    // see there is no sibling then check parent nodes
  
    if( !next_node ) {

       // look for parent nodes
       next_node = tree.current_node.parentNode;

       while( next_node &&
              (next_node.getAttribute("role") != "tree") &&
              !getNextSiblingTreeItem(next_node)
            ) {
      
          next_node = next_node.parentNode;    
      
       }  // endwhile
      
       if( (next_node.getAttribute("role") != "tree") &&
           getNextSiblingTreeItem(next_node)            
      ) {
       new_node = getNextSiblingTreeItem(next_node);
     } // endif
    
  } // endif
  
  }  // endif
  
  if( new_node != null ) {
  tree.current_node = new_node;  
  tree.current_node.focus();          
  } // endif

}

// ***************************************
// previousTreeItem
//
treePreviousTreeItem = function( tree ) {
  var new_node = null;
  var next_node = null;

  //
  // check to see if their are any previous siblings that are treeitems or groups
  
  new_node = getPreviousSiblingTreeItem( tree.current_node );
  
  while( new_node && (new_node.getAttribute("role") != "treeitem") ) {
    new_node = getPreviousSiblingTreeItem( new_node );  
  } // while


  // see if new node is group and if the group is expanded
  if( new_node ) {
    
     while (new_node.getAttribute("aria-expanded") == "true") {
       new_node = treeLastTreeItem(new_node);            
     }  // endwhile

  } else {
    
    // if no previous tree element check for parent tree element
  
     new_node = treeParentTreeGroupElement(tree);
  
  }  // endif
  
  if( new_node != null ) {
  tree.current_node = new_node;  
  tree.current_node.focus();          
  } // endif
}

// ***************************************
// ContractTreeGroup
//
treeContractTreeGroup = function( node ) {
  
  if( node && node.getAttribute("aria-expanded") ) {
    
    node.setAttribute("aria-expanded", "false");
  
    // Kick IE 7 to update css styling based on changes in attribute values
  node.className += "";
    
  // Update in-line image
    var node_img = node.getElementsByTagName("img")[0];
    
  if( node_img ) {
     node_img.src = IMG_URL_CONTRACTED_FOCUS;
     node_img.alt = IMG_ALT_CONTRACTED;
  }
        
  } // endif
  
}


// ***************************************
// expandTreeGroup
//
treeExpandTreeGroup = function( node ) {

  if( node && node.getAttribute("aria-expanded") ) {
    
    node.setAttribute("aria-expanded", "true");
  
    // Kick IE 7 to update css styling based on changes in attribute values
    node.className += "";
  
  // Update in-line image
    var node_img = node.getElementsByTagName("img")[0];
    
  if( node_img ) {
     node_img.src = IMG_URL_EXPANDED_FOCUS;
     node_img.alt = IMG_ALT_EXPANDED;
  }  // endif
      
  }  // endif
  
}

//
// Keyboard Event Handler for Tree Role
function handleTreeFocusEvent( event, tree ) {

  if(tree.current_node  == null) {
    tree.current_node = tree.node.getElementsByTagName("a")[0];
  }

  tree.current_node.focus();

}

//
// Keyboard Event Handler for Tree Role
function handleTreeKeyDownEvent( event, tree ) {
  var e = event || window.event;

  switch(e.keyCode) {
  
  case  KEY_DOWN:
              if( !e.ctrlKey && !e.altKey ) {
          treeNextTreeItem( tree );
                return browser.stopPropagation(e);
              } // endif
        break;
      
  case  KEY_UP:
              if( !e.ctrlKey && !e.altKey ) {
          treePreviousTreeItem( tree );
                return browser.stopPropagation(e);
              } // endif
        break;

  case  KEY_RIGHT:
              if( !e.ctrlKey && !e.altKey ) {
                treeExpandTreeGroup( tree.current_node );
                return browser.stopPropagation(e);
              }  // endif
        break;

  case  KEY_LEFT:
              if( !e.ctrlKey && !e.altKey ) {
                treeContractTreeGroup( tree.current_node );
                return browser.stopPropagation(e);
              }  // endif
        break;

  case  KEY_SPACE:
              if( !e.ctrlKey && !e.altKey ) {
                location.href = tree.current_node.href;
                return browser.stopPropagation(e);
              }  // endif
        break;

    default:
        return true;
              break;
  }  // endswitch

  return true;

}


//
//  
function handleTreeItemClickEvent( event, tree ) {
  var e = event || window.event;

  var node = browser.target( e );

  // if IMG element than pass to parent node
  if( node.tagName == "IMG" )
     node = node.parentNode;

  if( node && node.getAttribute("role") == "treeitem" ) {
    tree.current_node = node;
    tree.current_node.focus();
  
    if( tree.current_node.getAttribute("aria-expanded") )
      treeToggleExpand( node );
  
  // Don't sop propogation so the href will also be executed in the tree node
//    return browser.stopPropagation(e);
  }
  
  return true;
  
}

//
//  
function handleTreeItemFocusEvent( event, tree ) {
  var e = event || window.event;

  var node = browser.target( e );
  
  node_img = node.getElementsByTagName( "IMG")[0];
  
  if( node_img ) {
   if( node.getAttribute("aria-expanded") == "true" )
      node_img.src = IMG_URL_EXPANDED_FOCUS;
   else
      node_img.src = IMG_URL_CONTRACTED_FOCUS;
  }

}

//
//  
function handleTreeItemBlurEvent( event, tree ) {
  var e = event || window.event;

  var node = browser.target( e );
  
  node_img = node.getElementsByTagName( "IMG")[0];
  
  if( node_img ) {
   if( node.getAttribute("aria-expanded") == "true" )
      node_img.src = IMG_URL_EXPANDED;
   else
      node_img.src = IMG_URL_CONTRACTED;
  }

}





  </script>

  <style type="text/css">
/* CSS Document */

table.example td.show {
  border: thin solid black;
  width: 50%;
  padding: .25em;
}

ul.tree,
ul.tree  ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 20px;
}

ul.tree li
{
  padding: 0;
  margin: 0;
  border: none;
}


ul.tree a {
  display: block;
  margin: 0;
  padding: .125em;
  margin-left: 20px;
  width: 10em;
  text-decoration: none;
  color: black;
  font-weight: normal;
}

ul.tree a img {
  margin: 0;
  padding: 0;
}

ul.tree  a[aria-expanded] {
  margin-left: 0px;
  font-weight: bold;
}

#container ul.tree a:focus,
ul.tree a:focus,
#container ul.tree a:active,
ul.tree a:active
{
  background: black;
  color: white;
}


ul.tree a[aria-expanded="true"] + ul {
  display: block;
}

ul.tree a[aria-expanded="false"] + ul {
  display: none;
}

  </style>