DHTML Tree View of Arbitrary Depth using AJAX

// Copyright (c)2005 Rewritten Software.  http://www.rewrittensoftware.com
// This script is supplied "as is" without any form of warranty. Rewritten Software 
// shall not be liable for any loss or damage to person or property as a result of using this script.
// Use this script at your own risk!
// You are licensed to use this script free of charge for commercial or non-commercial use providing you do not remove 
// the copyright notice or disclaimer.

///
/// Method to toggle a node in the tree by displaying or hiding relevant elements.
///
function Toggle(item)
{
    
	var div=document.getElementById("D" + item);
	var visible=(div.style.display!="none");
	var key=document.getElementById("P" + item);
	var closed=document.getElementById("C" + item);
	var open=document.getElementById("O" + item);
	
	
	// Check if the item clicked has any children. If it does not then remove the plus/minus icon
	// and replace it with a transaparent gif.
	var removeIcon = div.hasChildNodes() == false;
	
	if( key != null )
	{
		if( !removeIcon )
		{
			if (visible)
			{
		 		// Hide open icon and the node contents
		 		div.style.display="none";
		 		open.style.display="none";
		 		// Show the closed icon
		 		closed.style.display="block";
		 		key.innerHTML="<img src='img/plus.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
			}
			else
			{
			    // Show node contents and the icon
		  		div.style.display="block";
		 		open.style.display="block";
		 		// Hide the closed icon
		 		closed.style.display="none";
				key.innerHTML="<img src='img/minus.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
			}
		}
		else
			key.innerHTML="<img src='img/transparent.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
	}
}

///
/// Return a XMLHTTPRequest in a browser independent fashion.
///
function GetXMLHttp()
{
    var xmlhttp=false;
    
    try 
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) 
    {
        try 
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
            xmlhttp = false;
        }
    }

    // Mozilla then?
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
       xmlhttp = new XMLHttpRequest();
    }
    
    return xmlhttp;
}

///
/// Perform an AJAX style request for the contents of a node and put the contents
/// into the empty div.
///
function DelayLoadNode(treeid, item)
{
    var div=document.getElementById("D" + item);
    var xmlhttp = GetXMLHttp();

    // Make sure the node is empty really, and if so fill it
    if (div.innerHTML == "")
    {
        xmlhttp.open("GET", "TreeFill.aspx?tree="+treeid+"&id="+item, true);
        xmlhttp.onreadystatechange=function() 
        {
            if (xmlhttp.readyState==4)
            {
                // DEBUG: alert(xmlhttp.responseText);
                div.innerHTML = xmlhttp.responseText;
                Toggle(item);
            }
        }
        xmlhttp.send(null)
    }
    else // The node is already populated
    {
        Toggle(item);
    }
}