JavaScript DHTML/GUI Components/Tree

Содержание

1 Build a tree in JavaScript
2 Building Collapsible Trees
3 Build tree from xml
4 Change tree expand and collapse icons
5 Change Tree Node Color and Icon
6 Checkbox tree node: checked, unchecked, get the checked items
7 Delete, insert items in a tree
8 Drag and Drop between trees
9 Dynamic TreeView Example
10 Elegant simple tree
11 Expand, Collapse, Close, Open selected Tree item and branch
12 Explorer based on tree
13 folder tree static
14 Nano Tree
15 Navigation Tree
16 Navigation Tree menu based on XML
17 Simple Tree in Javascript
18 Tree Control
19 Tree navigation bar
20 Tree selection action handler
21 Tree which accepts drag and drop event in JavaScript (IE)
22 XML Tree
23 Yahoo! UI Library - Tree Control
24 Yahoo! UI Library - Tree Control 2
25 Yahoo! UI Library - Tree Control 3
26 Yahoo! UI Library - Tree Control 4
27 Yahoo! UI Library - Tree Control 5

Build a tree in JavaScript

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Initialize object on page</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Initialize object on page</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <table>
    <tr>
      <td>
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
    </div>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
<hr>
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
  tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagePath("treeImgs/");
    tree.loadXML("treeImgs/tree3.xml")
</script>
</XMP>
    Parameters passed to the constructor are:
      <li>object to attach tree to (should be loaded before calling constructor)</li>
      <li>width of the tree</li>
      <li>height of the tree</li>
      <li>identifier of level parent to tree root level</li><br>
    Specify Additional parameters of the tree:
      <li>setImagePath(url) - method specifies the path to the folder with tree icons</li>
      <li>loadXML("tree.xml") - load tree items from XML</li>
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("treeImgs/tree3.xml")
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Building Collapsible Trees

 
/*
Mastering JavaScript, Premium Edition
by James Jaworski 
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/

<html>
<head>
<title>Tree Test</title>
<style type="text/css">
BLOCKQUOTE {
margin-top: -5;
margin-bottom: -5;
}
TABLE {
margin-top: 0;
margin-bottom: 0;
}
A:link, A:visited {
  color: black;
  text-decoration: none;
}
</style>
<script language="JavaScript">
var tree
if(isNav4() && navigator.tree8487 != undefined)
  // Use a unique value to differentiate with other concurrent tree objects
 tree = navigator.tree8487
else tree = createTree()
   
function isDOM1Capable() {
 if(document.getElementById) return true
 return false
}
   
function isIE4() {
 if(!isDOM1Capable() && document.all) return true
 return false
}
   
function isNav4() {
 if(navigator.appName == "Netscape" &&
   parseInt(navigator.appVersion) >= 4 &&
   parseInt(navigator.appVersion) < 5) return true
 return false
}
   
function createTree() {
 var nodes = new Array(
  "Tree Component",
  "Tackles problems of persistence and redisplay",
  "How can a complex object persist between page loadings?",
  "How can I redisplay a portion of a page?",
  "Exploits browser-unique features",
  "Navigator 4",
  "Uses <code>navigator</code> property for persistence.",
  "Internet Explorer 4 and DOM1-capable browsers",
  "Uses <code>innerHTML</code> property for redisplay",
  "Just a touch of DHTML",
  "Style sheets are used to shrink margins and hide links",
  "Easily tailored")
 var branches = new Array(new Array(0,1), new Array(0,4),
  new Array(0,10), new Array(0,11), new Array(1,2), new Array(1,3),
  new Array(4,5), new Array(4,7), new Array(5,6), new Array(7,8),
  new Array(7,9)
 )
 branchID = 0
 var subtrees = new Array()
 for(var i=0; i<nodes.length; ++i)
  subtrees[i] = new Tree(nodes[i])
 for(var i=0; i<branches.length; ++i)
  subtrees[branches[i][0]].addBranch(subtrees[branches[i][1]])
 return subtrees[0]
}
   
function Tree(root) {
 this.text = root
 this.id = branchID
 ++branchID
 this.expanded = true
 this.branches = new Array()
 this.addBranch = Tree_addBranch
 this.changeState = Tree_changeState
 this.handleClick = Tree_handleClick
 this.processClick = Tree_processClick
 this.display = Tree_display
 this.getTreeString = Tree_getTreeString
}
function Tree_addBranch(tree) {
 this.branches[this.branches.length] = tree
}
function Tree_changeState() {
 this.expanded = !this.expanded
}
function Tree_handleClick(branch) {
 this.processClick(branch)
 if(isNav4()) {
  navigator.tree8487 = tree
  window.location.reload()
 }else if(isDOM1Capable()) {
  var d = document.getElementById("tree")
  if(d != null) d.innerHTML = this.getTreeString()
 }else if(isIE4()) {
  var d = document.all("tree")
  if(d != null) d.innerHTML = this.getTreeString()
 }
}
function Tree_processClick(branch) {
 if(this.id == branch) this.changeState()
 else {
  for(var i=0; i<this.branches.length; ++i)
   this.branches[i].processClick(branch)
 }
}
function Tree_getTreeString() {
 var s = "<blockquote>"
 s += "<table border="0">"
 s += "<tr>"
 s += "<td>"
 if(this.branches.length > 0)
  s += "<a href="javascript:tree.handleClick("+this.id+")">+</a>"
 else s += "-"
 s += "</td>"
 s += "<td>"
 s += this.text
 s += "</td>"
 s += "</tr>"
 s += "</table>"
 if((this.branches.length > 0) && (this.expanded == true)) {
  for(var i=0; i<this.branches.length; ++i)
   s += this.branches[i].getTreeString()
 }
 s += "</blockquote>"
 return s
}
function Tree_display() {
 document.writeln(this.getTreeString())
}
</script>
</head>
<body>
<hr>
<div id="tree">
<script language="JavaScript">
tree.display()
</script>
</div>
<hr>
</body>
</html>

Build tree from xml

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Autoloading from XML</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Autoloading from XML</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <table>
    <tr>
      <td valign="top">
<!--- [ Scand:         <div id="treeboxbox_tree2" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        <br>
        <br>   ] --->
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      Tree has unlimmited level count. Each new level loaded from asp script.



      
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
      <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
  tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      //link tree to asp script
      tree.setXMLAutoLoading("treeImgs/xml.php"); 
      
      //load first level of tree
      tree.loadXML("treeImgs/xml.asp?id=0"); 
</script>
</XMP>  
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.setXMLAutoLoading("treeImgs/xml.php");
      tree.loadXML("treeImgs/xml.php?id=0");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Change tree expand and collapse icons

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Easy skinable design</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Easy skinable design</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <script>
    function setDesign(n){
      switch(n){
      case 4:
        tree.enableTreeLines(true);
        tree.setImageArrays("plus","plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
        tree.setImageArrays("minus","minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
        tree.setStdImages("book.gif","books_open.gif","books_close.gif");          
        break;
  
          break;
      case 3:
        tree.enableTreeLines(true);
        tree.setImageArrays("plus","plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
        tree.setImageArrays("minus","minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
        tree.setStdImages("item2.gif","close2.gif","open2.gif");          
        break;
      case 2:
        tree.enableTreeLines(true);
        tree.setImageArrays("plus","open2.gif","open2.gif","open2.gif","open2.gif","open2.gif");
        tree.setImageArrays("minus","close2.gif","close2.gif","close2.gif","close2.gif","close2.gif");
        tree.setStdImages("book.gif","books_open.gif","books_close.gif");          
        break;
      case 1:
        tree.enableTreeLines(false);
        tree.setImageArrays("plus","","","","plus_ar.gif","plus_ar.gif");
        tree.setImageArrays("minus","","","","minus_ar.gif","minus_ar.gif");
        tree.setStdImages("book.gif","books_open.gif","books_close.gif");          
        break;
      }
      tree.refreshItem(0);
    }
  </script>
  <table>
    <tr>
      <td valign="top">

        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
        <br>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      
      <a href="javascript:void(0)" onclick="setDesign(1);">Set design 1</a><br>
      <a href="javascript:void(0)" onclick="setDesign(2);">Set design 2</a><br>
      <a href="javascript:void(0)" onclick="setDesign(3);">Set design 3</a><br>
      <a href="javascript:void(0)" onclick="setDesign(4);">Set design 4</a><br>
      
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("tree.xml");
        // enable/disable tree lines
        tree.enableTreeLines(false);
        // set plus images
        tree.setImageArrays("plus","","","","open2.gif");
        //set minus images
        tree.setImageArrays("minus","","","","close2.gif");
        //set default node images
        tree.setStdImages("book.gif","books_open.gif","books_close.gif");  
</script>
</XMP>  
 
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.enableDragAndDrop(0);
        tree.enableTreeLines(false);
        tree.setImageArrays("plus","","","","plus_ar.gif");
        tree.setImageArrays("minus","","","","minus_ar.gif");
        tree.setStdImages("book.gif","books_open.gif","books_close.gif");    
      tree.setXMLAutoLoading("treeImgs/tree4.xml");
      tree.loadXML("treeImgs/tree4.xml");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Change Tree Node Color and Icon

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Change text/image</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Change text/image</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <script>
    function setColor(color1,color2)
    {
      tree.setItemColor(tree.getSelectedItemId(),color1,color2);
    }
  </script>
  <table>
    <tr>
      <td valign="top">
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      
      
      <a href="javascript:void(0);" onclick="var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById("ed1").value);">Set new item label</a>&nbsp;<input type="text" value="New label" id="ed1"><br><br>
      
      To change item"s image - click on one of next images: 
      <table>
        <tr><td>
          <a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"tombs.gif","tombs.gif","tombs.gif");"><img src="treeImgs/tombs.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"book.gif","book.gif","book.gif");"><img src="treeImgs/book.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"book_titel.gif","book_titel.gif","book_titel.gif");"><img src="treeImgs/book_titel.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"magazines_close.gif","magazines_close.gif","magazines_close.gif");"><img src="treeImgs/magazines_close.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"leaf.gif","leaf.gif","leaf.gif");"><img src="treeImgs/leaf.gif" border="0"></a></td>
        </td></tr>
        <tr><td nowrap>
          <a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"iconJob.gif","iconJob.gif","iconJob.gif");"><img src="treeImgs/iconJob.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"iconTask.gif","iconTask.gif","iconTask.gif");"><img src="treeImgs/iconTask.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"iconReport.gif","iconReport.gif","iconReport.gif");"><img src="treeImgs/iconReport.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"iconClient.gif","iconClient.gif","iconClient.gif");"><img src="treeImgs/iconClient.gif" border="0"></a></td>
          <td><a href="javascript:void(0);" onclick="tree.setItemImage2(tree.getSelectedItemId(),"iconTimeRecordsEdit.gif","iconTimeRecordsEdit.gif","iconTimeRecordsEdit.gif");"><img src="treeImgs/iconTimeRecordsEdit.gif" border="0"></a></td>
        </td></tr>        
      </table>
      <br>
      To change item"s color - click on one of next colors: 
      <table>
        <tr>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#ff0000;" onclick="setColor("#ff0000","#ff0000")">&nbsp;</div></td>
          <td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffa500;" onclick="setColor("#ffa500","#ffa500")">&nbsp;</div></td>
          <td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffff00;" onclick="setColor("#ffff00","#ffff00")">&nbsp;</div></td>        
        </tr>      
        <tr> 
          <td><div style="cursor:pointer;width:20px; height:20px; background-color:#008000;" onclick="setColor("#008000","#adff2f")">&nbsp;</div></td>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#00ff7f;" onclick="setColor("#00ff7f","#adff2f")">&nbsp;</div></td>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#adff2f;" onclick="setColor("#adff2f")">&nbsp;</div></td>        
        </tr>
        <tr>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#0000ff;" onclick="setColor("#0000ff","#87ceeb")">&nbsp;</div></td>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#9932cc;" onclick="setColor("#9932cc","#9932cc")">&nbsp;</div></td>
          <td><div style="cursor:pointer; width:20px; height:20px; background-color:#87ceeb;" onclick="setColor("#87ceeb","#87ceeb")">&nbsp;</div></td>        
        </tr>
      </table>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("treeImgs/tree3.xml");
      
      ....
      //set item text
      tree.setItemText(id,"New text");
      //set item images
      tree.setItemImage2(id,"item.gif","closeItem.gif","openItem.gif");
</script>
</XMP>
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("treeImgs/tree3.xml");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Checkbox tree node: checked, unchecked, get the checked items

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Checkboxes</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Checkboxes</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  
  <table>
    <tr>
      <td valign="top">
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td  style="padding-left:25" valign="top">
      
      Two state checkboxes
      <a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),true);">Check item</a><br><br>
      <a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck item</a><br><br>
      <a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check branch</a><br><br>
      <a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck branch</a><br><br>
      
      <a href="javascript:void(0);" onclick="alert(tree.getAllChecked());">Get list of checked</a><br><br>
      </td>
    </tr>
    <tr>
      <td valign="top">
        <div id="treeboxbox_tree2" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td  style="padding-left:25" valign="top">
      
            Three state checkboxes<br>
            <br>
            
      <a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check item</a><br><br>
      <a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck item</a><br><br>
    
      <a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>
      </td>
    </tr>
  </table>
  <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      //enable checkboxes
      tree.enableCheckBoxes(1);
      tree.loadXML("tree.xml");
      
      ....
      //check item
      tree.setCheck(id,true);
      //uncheck item
      tree.setCheck(id,false);  
      //check branch
      tree.setSubChecked(id,true);
      //uncheck branch
      tree.setSubChecked(id,false);  
      //check item
      tree.setCheck(id,true);
      //return ids of checked items
      var list=tree.getAllChecked();  
</script>
</XMP>
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.enableCheckBoxes(1);
      
      tree.loadXML("treeImgs/tree3.xml");
      
      tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
      tree2.setImagePath("treeImgs/");
      tree2.enableCheckBoxes(1);
      tree2.enableThreeStateCheckboxes(true);
      tree2.loadXML("treeImgs/tree3.xml");
            
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Delete, insert items in a tree

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Add / Delete items</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Add / Delete items</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <script>
    function fixImage(id){
      switch(tree.getLevel(id)){
      case 1:
      tree.setItemImage2(id,"books_close.gif","tombs.gif","tombs.gif");
        break;
      case 2:
      tree.setItemImage2(id,"book.gif","books_open.gif","books_close.gif");      
        break;
      case 3:
      tree.setItemImage2(id,"book.gif","books_open.gif","book.gif");      
        break;      
      default:
      tree.setItemImage2(id,"book_titel.gif","book_titel.gif","book_titel.gif");      
        break;
      }
    }
  </script>
  <table>
    <tr>
      <td valign="top">

        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      
      
      <a href="javascript:void(0);" onclick="var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById("ed1").value,0,0,0,0,"SELECT"); fixImage(d.valueOf());">Insert new child item</a> Item label <input type="text" value="New item" id="ed1"><br><br>
      
      <a href="javascript:void(0);" onclick="var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById("ed2").value,0,0,0,0,"SELECT"); fixImage(d.valueOf());">Insert new item next</a> Item label <input type="text" value="New item" id="ed2"><br><br>
      
      <a href="javascript:void(0);" onclick="tree.deleteItem(tree.getSelectedItemId(),true);">Delete item</a><br><br>
      
      
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  <hr>
      
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
  tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagePath("treeImgs/");
    tree.loadXML("treeImgs/tree3.xml")
    
    tree.insertNewItem(0,100,"New Node 1",0,0,0,0,"SELECT");
    tree.insertNewNext(2,101,"New Node 2",0,0,0,0,"");
    tree.deleteItem("2");
</script>
</XMP>  
    <li>0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them</li>
    <li>Last argument is a comma delimited string of following possible value (upper case only):</li>
      <li type="circle">SELECT - move selection to this node after inserting</li>
      <li type="circle">CALL - call function on select</li>
      <li type="circle">TOP - add node to the top position </li>
      <li type="circle">CHILD - node has children</li>
      <li type="circle">CHECKED - checkbox is checked (if exists)</li>
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("treeImgs/tree3.xml");
/*    
      
      tree.insertNewItem(1,100,"New Node 1",0,0,0,0,"SELECT");
      tree.insertNewNext(2,101,"New Node 2",0,0,0,0,"");
      tree.deleteItem("2");*/
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Drag and Drop between trees

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Drag and Drop</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:14px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Drag and Drop</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <table>
    <tr>
      <td valign="top">
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
        <br>
        
      </td>
      <td rstyle="padding-left:25" valign="top">
      
        <div id="treeboxbox_tree2" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
        <br>
      </td>
    </tr>
  </table>
        Drag&ampDrop works in each tree and between trees too.
  <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      
      //enable Drag&Drop
      tree.enableDragAndDrop(1);
      //set my Drag&Drop handler
      tree.setDragHandler(myDragHandler);
      tree.loadXML("treeImgs/tree.xml");
      function myDragHandler(idFrom,idTo){
        //if we return false then drag&drop be aborted
        return true;
      }
</script>
</XMP>  
 
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.enableDragAndDrop(1);
      tree.loadXML("treeImgs/tree3.xml");
      tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
      tree2.setImagePath("treeImgs/");
      tree2.enableDragAndDrop(1);
      tree2.loadXML("treeImgs/tree5.xml");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Dynamic TreeView Example

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><!--Yahoo! User Interface Library: http://twiki.corp.yahoo.ru/view/Devel/PresentationPlatform--><!--Begin YUI CSS infrastructure, including Standard Reset, Standard Fonts, and CSS Page Grids -->
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css"><!--end YUI CSS infrastructure--><!--begin YUIL Utilities -->
<script src="./build/yahoo/yahoo.js"></script>
<script src="./build/event/event.js"></script>
<script src="./build/treeview/treeview.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/code.css">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css">
<script>
/*create namespace for examples:*/
YAHOO.namespace("example");
/* Using Crockford"s "Module Pattern": */
YAHOO.example.treeExample = function() {
  var tree, currentIconMode;
    function changeIconMode() {
        var newVal = parseInt(this.value);
        if (newVal != currentIconMode) {
            currentIconMode = newVal;
        }
        buildTree();
    }
  
    function loadNodeData(node, fnLoadComplete) {
      //We"ll randomize our loader with stock data; in many implementations,
      //this step would be replaced with an XMLHttpRequest call to the server
      //for more data.
      
      //Array of India"s States
      var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"];
    
      //Random number determines whether a node has children
      var index = Math.round(Math.random()*100);
      
      //if our random number is in range, we"ll pretend that this node
      //has children; here, we"ll indicate that 70% of nodes have
      //children.
      if (index>30) {
        //We"ll use a random number to determine the number of
        //children for each node:
        var childCount = (Math.round(Math.random()*5) + 1);
        
        //This is important: The primary job of the data loader function
        //is to determine whether the node has children and then to 
        //actually create the child nodes if they are needed; here, we"ll
        //loop through to create each child node:
        for (var i=0; i<childCount; i++) {
          thisState = aStates[Math.round(Math.random()*27)];
          var newNode = new YAHOO.widget.TextNode(thisState, node, false);
        }
      }
      
      //When we"re done creating child nodes, we execute the node"s
      //loadComplete callback method which comes in as our loader"s
      //second argument (we could also access it at node.loadComplete,
      //if necessary):
      fnLoadComplete();
    }
        function buildTree() {
       //create a new tree:
       tree = new YAHOO.widget.TreeView("treeContainer");
       
       //turn dynamic loading on for entire tree:
       tree.setDynamicLoad(loadNodeData, currentIconMode);
       
       //get root node for tree:
       var root = tree.getRoot();
       
       //add child nodes for tree:
       var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
       var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
       var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
       var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
       var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
       
       //render tree with these five nodes; all descendants of these nodes
       //will be generated as needed by the dynamic loader.
       tree.draw();
    }

  return {
    init: function() {
            YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
            var el = document.getElementById("mode1");
            if (el && el.checked) {
                currentIconMode = parseInt(el.value);
            } else {
                currentIconMode = 0;
            }
            buildTree();
        }
  }
} ();
YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
</script>
<title>Dynamic TreeView Example</title>
</head>
<body id="yahoo">

<!-- id: optional property or feature signature -->
<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7 -->
  <div id="hd">
    <h1>TreeView Example</h1>
  </div>
  <div id="bd">
    <!-- start: primary column from outer template -->
    <div id="yui-main">
      <div class="yui-b">
        <p>In
this example, the TreeView control"s dyamic loading functionality is
explored. Dynamic loading of child nodes allows you to optmize
performance by only loading data for and creating the nodes that will
be visible when the tree is rendered. Nodes that are not expanded when
the Tree"s draw method is invoked are left childless in the initial
state. When such a node is expanded (either by user action or by
script), a dynamic loader function is called. That function has three
important roles:</p>
        <ol>
          <li><strong>Check for child nodes:</strong>
The dynamic loader function will check for child nodes by evaluating
in-page data (for example, data held in a JavaScript array or object)
or by retrieving data about the expanding node from the server via
XMLHttpRequest. In the example on this page, an in-page random list
generator is used to generate the Tree structure. </li>
          <li><strong>Add child nodes, if present:</strong>
If it determines that child node"s are present for the expanding node,
the dynamic loader must add those child nodes to the Tree instance.
Because these nodes are only added when needed, the overall complexity
of the Tree"s complexity (in JavaScript and in the DOM) is reduced and
its initial render time is much faster.</li>
          <li><strong>Invoke the expanding node"s callback method:</strong>
Once the dynamic loader method determines whether the expanding node
has children (and adds any children that may be present), it must
notify the expanding node"s object that dynamic loading is complete. It
does this via a callback method which is passed into the dynamic loader
as an argument.</li>
        </ol>
        <h3>Creating a Dynamic Loader Method</h3>
        <p>In
this example, our dynamic loader method will accomplish its first task
(checking for child nodes) by using a random number generator; we"ll
specify that roughly 70% of our nodes have children. When there are
children present, there will be children will between one and six
children (also randomly enumerated) whose labels are drawn from an
array of Indian states.</p>
<p>Our method, which we"ll call <code>loadNodeData</code>, will be
passed two arguments by the Tree instance when called: The first is a
reference to the expanding node"s node object; the second is the
callback method that we need to call when we"re done adding children to
the expanding node. The method as it appears on this page (only the
array of state names has been truncated) follows, with comments
glossing each step:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">loadNodeData: function(node, fnLoadComplete) {
  //Array of India"s States
  var aStates = ["Andhra Pradesh",
    "Arunachal Pradesh","Assam",
    ...
    ];
  //Random number determines whether a node has children
  var index = Math.round(Math.random()*100);
  
  //if our random number is in range, we"ll pretend that this node
  //has children; here, we"ll indicate that 70% of nodes have
  //children.
  if (index&gt;30) {
    //We"ll use a random number to determine the number of
    //children for each node:
    var childCount = (Math.round(Math.random()*5) + 1);
    
    //This is important: The primary job of the data loader function
    //is to determine whether the node has children and then to 
    //actually create the child nodes if they are needed; here, we"ll
    //loop through to create each child node:
    for (var i=0; i&lt;childCount; i++) {
      thisState = aStates[Math.round(Math.random()*27)];
      var newNode = new YAHOO.widget.TextNode(thisState, node, false);
    }
  }
      
  //When we"re done creating child nodes, we execute the node"s
  //loadComplete callback method which comes in as our loader"s
  //second argument (we could also access it at node.loadComplete,
  //if necessary):
  fnLoadComplete();
}</textarea></pre>
  
        <h3>Setting Up the Tree Instance and Configuring It for Dynamic Loading</h3>
        <p>Creating
the initial state of a Tree object that will be configured for dynamic
loading is no different than for non-dynamic Tree instances &#8212; use the
Tree constructor to create your new instance:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");</textarea></pre>
<p>In the example on this page, the entire tree is configured for
dynamic loading. That will result in all nodes having their children
populated by the dynamic loader method when they are expanded for the
first time. (You can also choose to specify individual nodes and their
descendants as being dynamically loaded.) To the Tree instance for
dynamic loading, merely pass the instance"s <code>setDynamicLoad</code> method a reference to your dynamic loader method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//turn dynamic loading on for entire tree:
tree.setDynamicLoad(this.loadNodeData);
</textarea></pre>
<p>Having created a Tree instance and configured it for dynamic
loading, we can now add the tree"s top-level nodes and then render the
Tree via its <code>draw</code> method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//add child nodes for tree:
var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
//render tree with these five nodes; all descendants of these nodes
//will be generated as needed by the dynamic loader.
tree.draw();
</textarea></pre>
<p>With that, our tree renders on the page, showing its five top-level
nodes. As the user interacts with the tree, child nodes will be added
and displayed based on the output of the <code>loadNodeData</code> method.</p>
<h3>Childless Node Style</h3><p>There are two built-in visual treatments for
childless nodes.  Before a dynamically loaded node is expanded, its icon
indicates that it can be expanded &mdash; this reflects the possibility that
the dynamic loader will find and populate children for that node if it is
expanded.  However, once the Tree determines that a node has no children, it
can reflect the childless state either through the "expanded" icon (<img
        src="">) or by omitting the icon entirely.  In this example, we"ve
added a control that enables you to experiment with each setting to explore its
visual impact</p><p>The default visual treatment for a childless node is the
"expanded" icon.  To change this setting, pass a second argument to your
<code>setDynamicLoad</code> method &mdash; pass a value of <code>1</code> to
use the iconless visual treatment.</p> </div> </div> <!-- end: primary column
from outer template -->
    
        <!-- start: secondary column from outer template --> <div
        class="yui-b"> <h3>Dynamically Loaded TreeView:</h3> <div
        id="treeContainer"></div> <h3>Childless Node Style:</h3> <dd> <label>
        <input type="radio" id="mode0" name="mode" value ="0" checked />
        Expand/Collapse </label> </dd> <dd> <label> <input type="radio"
        id="mode1" name="mode" value ="1" /> Leaf Node </label> </dd> </div>
        <!-- end: secondary column from outer template -->
    
    </div> <div id="ft"> </div> </div> <script
    src="./examples/treeview/js/dpSyntaxHighlighter.js"></script> <script language="javascript">
    dp.SyntaxHighlighter.HighlightAll("code"); </script> </body></html>

Elegant simple tree

 
<html>
<head>
<!--  
Copyright (c) 2004, 2005, 2006
   Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net>
   Vinicius Cubas Brand <viniciuscb@users.sourceforge.net>
   Frank Alcantara <frankalcantara@users.sourceforge.net>
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
   * Redistributions of source code must retain the above copyright notice,
     this list of conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice,
     this list of conditions and the following disclaimer in the documentation
     and/or other materials provided with the distribution.
   * The names of its contributors may NOT be used to endorse or promote
     products derived from this software without specific prior written
     permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

===================================================================
dFTree Dynamic Javascript Folder Tree
===================================================================
DFTree is a javascript+css folder tree with dynamic node
insertion/erasing/alteration and other functionalities. It is also very
lightweight and easy to use.
It is CSS 2.1 compliant, although it was developed to be compatible at least
with Internet Explorer version 6+ . It was tested sucessfully on Mozilla
Firefox and Internet Explorer.

To use it:
1. Place in the HEAD section of your HTML document the following tags:

<script type="text/javascript" src="dftree.js"></script>
<link rel="stylesheet" type="text/css" href="dftree.css">

The first one is to load the javascript functions that generate the folder
tree. The second one loads the css styles which the tree are based. Both two
must be included in order to the tree to work.

2. build the tree (inside a javascript section) and draw it.
2.1 To create the tree:
  tree = new dTree({name: "tree"}); //The attribute name must be the object name

2.2 Creating nodes:
  n1 = new dNode({id: "1",caption: "First Node"});
  n2 = new dNode({id: "2",caption: "Second Node"});
  n3 = new dNode({id: "3",caption: "Third Node"});
  n4 = new dNode({id: "4",caption: "Fourth Node"});

2.3 Placing nodes in the tree:
  tree.add(n1,"root");  //Places the root; second argument can be anything.
  tree.add(n2,"1");     //Adds n2 as son of the node with id="1"
  tree.add(n3,"1");     //Adds n3 as son of the node with id="1"
  tree.add(n4,"3");     //Adds n3 as son of the node with id="3"
2.4 Removing nodes from the tree
  (not implemented yet...)
2.5 Altering noded of the tree
  tree.getNodeById("1").alter({caption: "foo",onClick: "123"});
  (this alters node with id="1")
2.5 Drawing the tree:
  tree.draw();

List of methods:
  dNode()                //Constructor, sets properties
  dNode.changeState()    //If opened, closes. If closed, opens.
  dNode.open()           //Opens node
  dNode.close()          //Closes node
  dNode.alter()           //Alter node properties
  dFTree()               //Constructor, sets properties
  dFTree.draw()          //Draws the tree
  dFTree.add(node,pid)   //adds node under the tree
  dFTree.alter()         //Alters a node of the tree (helper method)
  dFTree.getNodeById(id) //Returns the node with id

  Look at the source for tree and node properties, at their constructors.
-->
<script type="text/javascript">
/* Dynamic Folder Tree
 * Generates DHTML tree dynamically (on the fly).
 * License: BSD. 
 *    See details at http://www.opensource.org/licenses/bsd-license.php
 * 
 * Copyright (c) 2004, 2005, 2006 
 *    Vinicius Cubas Brand, Raphael Derosso Pereira, Frank Alcantara
 * {viniciuscb,raphaelpereira,frankalcantara} at users.sourceforge.net
 * All rights reserved.
 */

// NODE 
//Usage: a = new dNode({id:2, caption:"tree root", url:"http://www.w3.org"});
function dNode(arrayProps) {
  //mandatory fields
  this.id;          //node id
  this.caption;     //node caption
  //optional fields
  this.url;         //url to open
  this.target;      //target to open url
  this.onClick;     //javascript to execute onclick
  this.onOpen;      //javascript to execute when a node of the tree opens
  this.onClose;     //javascript to execute when a node of the tree closes
  this.onFirstOpen; //javascript to execute only on the first open
  this.iconClosed;  //img.src of closed icon
  this.iconOpen;    //img.src of open icon
  this.runJS = true;       //(bool) if true, runs the on* props defined above
  this.plusSign = true;    //(bool) if the plus sign will appear or not
  this.captionClass = "l"; //(string) the class for this node"s caption

  //The parameters below are private
  this._opened = false; //already opened
  this._io = false; //is opened
  this._children = []; //references to children
  this._parent; //pointer to parent
  this._myTree; //pointer to myTree
  for (i in arrayProps)
  {
    if (i.charAt(0) != "_")
    {
      eval("this."+i+" = arrayProps[\""+i+"\"];");
    }
  }
}
//changes node state from open to closed, and vice-versa
dNode.prototype.changeState = function()
{
  if (this._io)
  {
    this.close();
  }
  else
  {
    this.open();
  }
  //cons = COokie of Node Status
  //setCookie("cons"+this.id,this._io);
}
dNode.prototype.open = function () {
  if (!this._io)
  {
    if (!this._opened && this.runJS && this.onFirstOpen != null)
    {
      eval(this.onFirstOpen);
    }
    else if (this.runJS && this.onOpen != null)
    {
      eval(this.onOpen);
    }
    this._opened = true;
    this._io = true;
    this._refresh();
  }
}

dNode.prototype.close = function() {
  if (this._io)
  {
    if (this.runJS && this.onClose != null)
    {
      eval(this.onClose);
    }
    this._io = false;
    this._refresh();
  }
}
//alter node label and other properties
dNode.prototype.alter = function(arrayProps)
{
  for (i in arrayProps)
  {
    if (i != "id" && i.charAt(0) != "_")
    {
      eval("this."+i+" = arrayProps[\""+i+"\"];");
    }
  }
}
//css and dhtml refresh part
dNode.prototype._refresh = function() {
  var nodeDiv      = getObjectById("n"+this.id);
  var plusSpan     = getObjectById("p"+this.id);
  var captionSpan  = getObjectById("l"+this.id);
  var childrenDiv  = getObjectById("ch"+this.id);
  if (nodeDiv != null)
  {
    //Handling open and close: checks this._io and changes class as needed
    if (!this._io) //just closed
    {
      childrenDiv.className = "closed";
    }
    else //just opened
    {
      //prevents IE undesired behaviour when displaying empty DIVs
/*      if (this._children.length > 0) 
      {*/
        childrenDiv.className = "opened";
    //  }
    }
    plusSpan.innerHTML = this._properPlus();
    captionSpan.innerHTML = this.caption;
  }
//alter onLoad, etc
}
//gets the proper plus for this moment
dNode.prototype._properPlus = function()
{
  if (!this._io) 
  {
    if (this._myTree.useIcons)
    {
      return (this.plusSign)?imageHTML(this._myTree.icons.plus):"";
    }
    else
    {
      return (this.plusSign)?"+":"";
    }
  }
  else 
  {
    if (this._myTree.useIcons)
    {
      return (this.plusSign)?imageHTML(this._myTree.icons.minus):"";
    }
    else
    {
      return (this.plusSign)?"-":"";
    }
  }
}
//changes node to selected style class. Perform further actions.
dNode.prototype._select = function()
{
  var captionSpan;
  if (this._myTree._selected)
  {
    this._myTree._selected._unselect();
  }
  this._myTree._selected = this;
  
  captionSpan  = getObjectById("l"+this.id);
  //changes class to selected link
  if (captionSpan)
  {
    captionSpan.className = "sl";
  }
}
//changes node to unselected style class. Perform further actions.
dNode.prototype._unselect = function()
{
  var captionSpan  = getObjectById("l"+this.id);
  this._myTree._lastSelected = this._myTree._selected;
  this._myTree._selected = null;
  //changes class to selected link
  if (captionSpan)
  {
    captionSpan.className = this.captionClass;
  }
}

//state can be open or closed
//warning: if drawed node is not child or root, bugs will happen
dNode.prototype._draw = function()
{
  var str;
  var div;
  var myClass = (this._io)? "opened" : "closed";
  var myPlus = this._properPlus();
  var append = true;
  var myPlusOnClick = this._myTree.name+".getNodeById(\""+this.id+"\").changeState();";
  var captionOnClickEvent = "";
//  var cook;
  var plusEventHandler = function(){
    eval(myPlusOnClick);
  }
  var captionEventHandler = function(){
    eval(captionOnClickEvent);
  }
  
/*  if (this.myTree.followCookies)
  {
    this._io = getCookie("cons"+this.id);
  }*/
  //FIXME put this in a separate function, as this will be necessary in 
  //various parts
  captionOnClickEvent = this._myTree.name+".getNodeById(\""+this.id+"\")._select(); ";
  if (this.onClick) //FIXME when onclick && url
  {
    captionOnClickEvent += this.onClick;
  }
  else if (this.url && this.target)
  {
    captionOnClickEvent += "window.open(\""+this.url+"\",\""+this.target+"\")";
  }
  else if (this.url)
  {
    captionOnClickEvent += "window.location=\""+this.url+"\"";
  }
  
  //The div of this node
  divN = document.createElement("div");
  divN.id = "n"+this.id;
  divN.className = "son";
  
  //The span that holds the plus/minus sign
  spanP = document.createElement("span");
  spanP.id = "p"+this.id;
  spanP.className = "plus";
//  spanP.addEventListener("click",plusEventHandler,false);
  spanP.onclick = plusEventHandler;
  spanP.innerHTML = myPlus;
  //The span that holds the label/caption
  spanL = document.createElement("span");
  spanL.id = "l"+this.id;
  spanL.className = this.captionClass;
//  spanL.addEventListener("click",captionEventHandler,false);
  spanL.onclick = captionEventHandler;
  spanL.innerHTML = this.caption;
  //The div that holds the children
  divCH = document.createElement("div");
  divCH.id = "ch"+this.id;
  divCH.className = myClass;
  
//  str  = "<div id="n"+this.id+"" class="son">";
//  str  = "<span id="p"+this.id+"" class="plus" onclick=""+myPlusOnClick+"">"+myPlus+"</span>";
//  str += "<span id="l"+this.id+"" class="l""+captionOnClickEvent+">"+this.caption+"</span>";
//  str += "<div id="ch"+this.id+"" class=""+myClass+""></div>";
//  div.innerHTML = str;
  divN.appendChild(spanP);
  divN.appendChild(spanL);
  divN.appendChild(divCH);
  
  if (this._parent != null)
  {
    parentChildrenDiv = getObjectById("ch"+this._parent.id);
  }
  else //is root
  {
    parentChildrenDiv = getObjectById("dftree_"+this._myTree.name);
//    append = false;
  }
  
  if (parentChildrenDiv)
  {
    parentChildrenDiv.appendChild(divN);
/*    if (append)
    {
      parentChildrenDiv.innerHTML += str;
    }
    else
    {
      parentChildrenDiv.innerHTML  = str;
    }*/
  }
}
// TREE 
//Usage: t = new dFTree({name:t, caption:"tree root", url:"http://www.w3.org"});
function dFTree(arrayProps) {
  //mandatory fields
  this.name;      //the value of this must be the name of the object
  //optional fields
  this.is_dynamic = true;   //tree is dynamic, i.e. updated on the fly
  this.followCookies = true;//use previous state (o/c) of nodes
  this.useIcons = false;     //use icons or not
  
  //arrayProps[icondir]: Icons Directory
  iconPath = (arrayProps["icondir"] != null)? arrayProps["icondir"] : "";
  this.icons = {
    root        : iconPath+"/foldertree_base.gif",
    folder      : iconPath+"/foldertree_folder.gif",
    folderOpen  : iconPath+"/foldertree_folderopen.gif",
    node        : iconPath+"/foldertree_folder.gif",
    empty       : iconPath+"/foldertree_empty.gif",
    line        : iconPath+"/foldertree_line.gif",
    join        : iconPath+"/foldertree_join.gif",
    joinBottom  : iconPath+"/foldertree_joinbottom.gif",
    plus        : iconPath+"/foldertree_plus.gif",
    plusBottom  : iconPath+"/foldertree_plusbottom.gif",
    minus       : iconPath+"/foldertree_minus.gif",
    minusBottom : iconPath+"/foldertree_minusbottom.gif",
    nlPlus      : iconPath+"/foldertree_nolines_plus.gif",
    nlMinus     : iconPath+"/foldertree_nolines_minus.gif"
  };
  //private
  this._root; //reference to root node
  this._aNodes = [];
  this._lastSelected; //The last selected node
  this._selected; //The actual selected node
  for (i in arrayProps)
  {
    if (i.charAt(0) != "_")
    {
      eval("this."+i+" = arrayProps[\""+i+"\"];");
    }
  }
}
dFTree.prototype.draw = function() {
  if (!getObjectById("dftree_"+this.name))
  {
    document.write("<div id="dftree_"+this.name+""></div>");
  }
  if (this._root != null)
  {
    this._root._draw();
    this._drawBranch(this._root._children);
  }
}
//Transforms tree in HTML code. Do not use it. Use draw() instead.
/*dFTree.prototype.toString = function() {
  var str = "";
  if (!getObjectById("dftree_"+this.name))
  {
    str = "<div id="dftree_"+this.name+""></div>";
  }
  return str;
/ *  if (this.root != false)
  {
    this.root._draw();
    this._drawBranch(this.root.children);
  }* /
}*/
//Recursive function, draws children
dFTree.prototype._drawBranch = function(childrenArray) {
  var a=0;
  for (a;a<childrenArray.length;a++)
  {
    childrenArray[a]._draw();
    this._drawBranch(childrenArray[a]._children);
  }
}
//add into a position
dFTree.prototype.add = function(node,pid) {
  var auxPos;
  var addNode = false;
  if (typeof (auxPos = this._searchNode(node.id)) != "number")
  {
    // if parent exists, add node as its child
    if (typeof (auxPos = this._searchNode(pid)) == "number")
    {
      node._parent = this._aNodes[auxPos];
      this._aNodes[auxPos]._children[this._aNodes[auxPos]._children.length] = node;
      addNode = true;
    }
    else //if parent cannot be found and there is a tree root, ignores node
    {
      if (this._root == null)
      {
        this._root = node;
        addNode = true;
      }
    }
    if (addNode)
    {
      this._aNodes[this._aNodes.length] = node;
      node._myTree = this;
      if (this.is_dynamic)
      {
        node._draw();
      }
    }
  } 
}
//arrayProps: same properties of Node
dFTree.prototype.alter = function(arrayProps) {
  if (arrayProps["id"])
  {
    this.getNodeById(arrayProps["id"]).alter(arrayProps);
  }
}
dFTree.prototype.getNodeById = function(nodeid) {
  return this._aNodes[this._searchNode(nodeid)];
}

//Searches for a node in the node array, returning the position of the array 4it
dFTree.prototype._searchNode = function(id) {
  var a=0;
  for (a;a<this._aNodes.length;a++)
  {
    if (this._aNodes[a].id == id)
    {
      return a;
    }
  }
  return false;
}

//Auxiliar functions
//For multi-browser compatibility
function getObjectById(name)
{   
    if (document.getElementById)
    {
        return document.getElementById(name);
    }
    else if (document.all)
    {
        return document.all[name];
    }
    else if (document.layers)
    {
        return document.layers[name];
    }
    return false;
}
// [Cookie] Clears a cookie
function clearCookie(cookieName) {
  var now = new Date();
  var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
  this.setCookie(cookieName, "cookieValue", yesterday);
  this.setCookie(cookieName, "cookieValue", yesterday);
};
// [Cookie] Sets value in a cookie
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
  document.cookie =
    escape(cookieName) + "=" + escape(cookieValue)
    + (expires ? "; expires=" + expires.toGMTString() : "")
    + (path ? "; path=" + path : "")
    + (domain ? "; domain=" + domain : "")
    + (secure ? "; secure" : "");
};
// [Cookie] Gets a value from a cookie
function getCookie(cookieName) {
  var cookieValue = "";
  var posName = document.cookie.indexOf(escape(cookieName) + "=");
  if (posName != -1) {
    var posValue = posName + (escape(cookieName) + "=").length;
    var endPos = document.cookie.indexOf(";", posValue);
    if (endPos != -1)
    {
      cookieValue = unescape(document.cookie.substring(posValue, endPos));
    }
    else 
    {
      cookieValue = unescape(document.cookie.substring(posValue));
    }
  }
  return (cookieValue);
};

function imageHTML(src,attributes) {
  if (attributes != null)
  {
    attributes = "";
  }
  return "<img "+attributes+" src=\""+src+"\">";
}
  
</script>
<style rel="stylesheet" type="text/css">
.son {
  position: relative;
  left: 10px;
}

.plus {
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
  color: #000000;
  font-family: monospace;
}
.plus:hover {
  color: #FF0000;
}
.opened {
  display: block;
}
.closed {
  display: none;
}
/* link */
.l {
  padding: 2px;
  font-weight: bold;
  font-size: 12px;
  color: #666666;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  white-space: nowrap;
  font-family: sans-serif;
}
.l:hover {
  text-decoration: underline;
}

/* selected link */
.sl {
  padding: 2px;
  font-weight: bold;
  font-size: 12px;
  color: #0000FF;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  white-space: nowrap;
  font-family: sans-serif;
}
.sl:hover {
  text-decoration: underline;
}

</style>
</head>
<body>
<script language="javascript">
<!--
tree = new dFTree({name: "tree"});
tree.add(new dNode({id: "0",caption: "wbex.ru"}),-1); //root node
tree.add(new dNode({id: "1",caption: "Java"}),0);
tree.add(new dNode({id: "2",caption: "JavaScript"}),0);

tree.add(new dNode({id: "3",caption: "PHP"}),1);
tree.add(new dNode({id: "4",caption: "Perl"}),1);
tree.add(new dNode({id: "5",caption: "Oracle"}),1);
tree.add(new dNode({id: "6",caption: "MySQL"}),2);
tree.add(new dNode({id: "7",caption: "C++"}),2);
tree.add(new dNode({id: "8",caption: "Python"}),7);
tree.draw();
-->
</script>
</body>
</html>

Expand, Collapse, Close, Open selected Tree item and branch

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Collapse/Expand</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Collapse/Expand</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <script>
    function closeAllRoots(){
      var rootsAr = tree.getSubItems(0).split(",")
      for(var i=0;i<rootsAr.length;i++){
        tree.closeAllItems(rootsAr[i])
      }
    }
  </script>
  <table>
    <tr>
      <td valign="top">

        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      
      
      <a href="javascript:void(0);" onclick="tree.openAllItems(0);">Expand all</a><br><br>
      <a href="javascript:void(0);" onclick="tree.closeAllItems(0);">Collapse all</a><br><br>
      <a href="javascript:void(0);" onclick="tree.closeItem(tree.getSelectedItemId());">Close selected item</a><br><br>
      <a href="javascript:void(0);" onclick="tree.openItem(tree.getSelectedItemId());">Open selected item</a><br><br>      
      <a href="javascript:void(0);" onclick="tree.closeAllItems(tree.getSelectedItemId());">Collapse selected branch</a><br><br>
      <a href="javascript:void(0);" onclick="tree.openAllItems(tree.getSelectedItemId());">Expand selected branch</a><br><br>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  <hr>  
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("../imgs/");
      tree.loadXML("tree.xml");
      
      ....
      //expand all
      tree.openAllItems(0);
      //open item
      tree.openItem(id);
      //close item
      tree.closeItem(id);
      //open branch
      tree.openAllItems(id);
      //close branch
      tree.closeAllItems(id);                  
</script>
</XMP>  
  <script>
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.loadXML("treeImgs/tree3.xml");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Explorer based on tree

 
<html>
<head>
<title>DynAPI Examples - Explorer</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.api");
  dynapi.library.include("dynapi.gui.BorderManager");
  dynapi.library.include("Explorer");
  dynapi.library.include("ExplorerBlockStyle"); //Optional
</script>
<script language="Javascript">
  var  s = Styles.getStyle("Explorer");
  var file1 = s.getStyleAttribute("imageFile");
  var env = dynapi.functions.getImage("./dynapiexamples/images/envelope.gif",15,18);
  var exp = new Explorer(70,100);
  exp.setBgColor("#EEEEEE");
  exp.addLeave("root","Root Folder");
    // Groceries
    exp.addLeave("groc","Groceries","root");
    exp.addLeave("flour","Flour","groc",file1);
    exp.addLeave("sugar","Sugar","groc",file1);
    exp.addLeave("choc","Chocolate","groc",file1);
      // Cakes
      exp.addLeave("cake","Cakes","groc");
      exp.addLeave("plain","Plain Cake","cake",file1);
      exp.addLeave("ccake","Chocolate Cake","cake",file1);
    // Fruits
    exp.addLeave("fruit","Fruits","root");
    exp.addLeave("mango","Mango","fruit",file1);
    exp.addLeave("apple","Apple","fruit",file1);
    exp.addLeave("grape","Grapes","fruit",file1);
  exp.addEventListener({
    onselect : function(e) {
      status=("Current ID is: "+e.getSource().currentPos+" and currentUrl is: "+e.getSource().currentUrl);
    }
  });
  dynapi.document.addChild(exp);
  var exp2 = new Explorer(270,100,null,null,"ExplorerBlock");
  exp2.addLeave("root","<font color="green"><b>Emails<b></font>");
    // Groceries
    exp2.addLeave("ib","<font color="Navy"><b>Inbox<b></font>","root");
    exp2.addLeave("flour","<font color="red">Just stop to say Hi..<br>Be of good cheer</font><hr>","ib",env);
    exp2.addLeave("sugar","<font color="black">This is a very long message<br>with a lot of <br>breaks...</font><hr>","ib",env);
    exp2.addLeave("choc","Chocolate","ib",env);
      // Cakes
      exp2.addLeave("ar","Archive","ib");
      exp2.addLeave("plain","Plain Cake","ar",env);
      exp2.addLeave("ccake","Chocolate Cake","ar",env);
    // Fruits
    exp2.addLeave("ob","<font color="maroon"><b>Outbox<b></font>","root");
    exp2.addLeave("mango","Mango","ob",env);
    exp2.addLeave("apple","Apple","ob",env);
    exp2.addLeave("grape","Grapes","ob",env);
  dynapi.document.addChild(exp2);
</script>
</head>
<body bgcolor="#ffffff">
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

folder tree static

<A href="http://www.wbex.ru/Code/JavaScriptDownload/folder-tree-static.zip">folder-tree-static.zip( 21 k)</a>

1. <A href="/Code/JavaScript/GUI-Components/Explorerbasedontree.htm">Explorer based on tree</a> <A href="/Code/JavaScript/GUI-Components/Explorerbasedontree.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl.htm">Yahoo! UI Library - Tree Control</a> <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl2.htm">Yahoo! UI Library - Tree Control 2</a> <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl2.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/TreeControl.htm">Tree Control</a> <A href="/Code/JavaScript/GUI-Components/TreeControl.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/DynamicTreeViewExample.htm">Dynamic TreeView Example</a> <A href="/Code/JavaScript/GUI-Components/DynamicTreeViewExample.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl3.htm">Yahoo! UI Library - Tree Control 3</a> <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl3.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl4.htm">Yahoo! UI Library - Tree Control 4</a> <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl4.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl5.htm">Yahoo! UI Library - Tree Control 5</a> <A href="/Code/JavaScript/GUI-Components/YahooUILibraryTreeControl5.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/BuildatreeinJavaScript.htm">Build a tree in JavaScript</a> <A href="/Code/JavaScript/GUI-Components/BuildatreeinJavaScript.htm"></a> 10. <A href="/Code/JavaScript/GUI-Components/Deleteinsertitemsinatree.htm">Delete, insert items in a tree</a> <A href="/Code/JavaScript/GUI-Components/Deleteinsertitemsinatree.htm"></a> 11. <A href="/Code/JavaScript/GUI-Components/Treeselectionactionhandler.htm">Tree selection action handler</a> <A href="/Code/JavaScript/GUI-Components/Treeselectionactionhandler.htm"></a> 12. <A href="/Code/JavaScript/GUI-Components/ExpandCollapseCloseOpenselectedTreeitemandbranch.htm">Expand, Collapse, Close, Open selected Tree item and branch </a> <A href="/Code/JavaScript/GUI-Components/ExpandCollapseCloseOpenselectedTreeitemandbranch.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/ChangeTreeNodeColorandIcon.htm">Change Tree Node Color and Icon</a> <A href="/Code/JavaScript/GUI-Components/ChangeTreeNodeColorandIcon.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/Checkboxtreenodecheckeduncheckedgetthecheckeditems.htm">Checkbox tree node: checked, unchecked, get the checked items</a> <A href="/Code/JavaScript/GUI-Components/Checkboxtreenodecheckeduncheckedgetthecheckeditems.htm"></a> 15. <A href="/Code/JavaScript/GUI-Components/Changetreeexpandandcollapseicons.htm">Change tree expand and collapse icons</a> <A href="/Code/JavaScript/GUI-Components/Changetreeexpandandcollapseicons.htm"></a> 16. <A href="/Code/JavaScript/GUI-Components/DragandDropbetweentrees.htm">Drag and Drop between trees</a> <A href="/Code/JavaScript/GUI-Components/DragandDropbetweentrees.htm"></a> 17. <A href="/Code/JavaScript/GUI-Components/Buildtreefromxml.htm">Build tree from xml</a> <A href="/Code/JavaScript/GUI-Components/Buildtreefromxml.htm"></a> 18. <A href="/Code/JavaScript/GUI-Components/Treenavigationbar.htm">Tree navigation bar</a> <A href="/Code/JavaScript/GUI-Components/Treenavigationbar.htm"></a> 19. <A href="/Code/JavaScript/GUI-Components/NavigationTree.htm">Navigation Tree </a> <A href="/Code/JavaScript/GUI-Components/NavigationTree.htm"></a> 20. <A href="/Code/JavaScript/GUI-Components/NavigationTreemenubasedonXML.htm">Navigation Tree menu based on XML</a> 21. <A href="/Code/JavaScript/GUI-Components/XMLTree.htm">XML Tree</a> 22. <A href="/Code/JavaScript/GUI-Components/BuildingCollapsibleTrees.htm">Building Collapsible Trees</a> 23. <A href="/Code/JavaScript/GUI-Components/NanoTree.htm">Nano Tree</a> <A href="/Code/JavaScript/GUI-Components/NanoTree.htm"></a> 24. <A href="/Code/JavaScript/GUI-Components/TreewhichacceptsdraganddropeventinJavaScriptIE.htm">Tree which accepts drag and drop event in JavaScript (IE)</a> <A href="/Code/JavaScript/GUI-Components/TreewhichacceptsdraganddropeventinJavaScriptIE.htm"></a> 25. <A href="/Code/JavaScript/GUI-Components/SimpleTreeinJavascript.htm">Simple Tree in Javascript</a> <A href="/Code/JavaScript/GUI-Components/SimpleTreeinJavascript.htm"></a> 26. <A href="/Code/JavaScript/GUI-Components/Elegantsimpletree.htm">Elegant simple tree</a>

Nano Tree

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>NanoTree</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- std_treelook.css -->
<style REL="STYLESHEET" TYPE="text/css">
/* Tree Style */
.treetitle {
  padding:2px;
  cursor:default;
  
  font-family: Tahoma,Verdana,Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
}
.editednode {
  padding:2px;
  cursor:default;
  background-color: #FFFFFF;;
  color: #000000;
  
  font-family: Tahoma,Verdana,Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.editednodeinput {
  background-color: #FFFFFF;;
  color: #000000;
  
  width: 150px;
  height: 17px;
  
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  
  font-family: Tahoma,Verdana,Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.treetitleselectedfocused {
  padding:2px;
  cursor:default;
  background-color: highlight;
  color: highlighttext;
  
  font-family: Tahoma,Verdana,Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.treetitleselectedblured {
  padding:2px;
  cursor:default;
  background-color: menu;
  color: windowtext;
  font-family: Tahoma,Verdana,Arial, Helvetica, sans-serif;
  font-size: 11px;
}
</style>
<!-- nanotree.js -->
<script type="text/javascript" language="JavaScript">
/**
* Original Author of this file: Martin Mouritzen. (martin@nano.dk)
*
*
* (Lack of) Documentation:
*
*
* If a finishedLoading method exists, it will be called when the tree is loaded.
* (good to display a div, etc.).
*
*
* You have to set the variable rootNode (as a TreeNode).
*
* You have to set a container element, this is the element in which the tree will be.
*
*
* TODO: 
* Save cookies better (only 1 cookie for each tree). Else the page will totally cookieclutter.
*
***********************************************************************
* Configuration variables.
************************************************************************/
// Should the rootNode be displayed.
var showRootNode = true;
// Should the dashed lines between nodes be shown.
var showLines = true;
// Should the nodes be sorted? (You can either specify a number, then it will be sorted by that, else it will
// be sorted alphabetically (by name).
var sortNodes = true;
// This is IMPORTANT... use an unique id for each document you use the tree in. (else they"ll get mixed up).
var documentID = window.location.href;
// being read from cookie.
var nodesOpen = new Array();
// RootNode of the tree.
var rootNode;
// Container to display the Tree in.
var container;
// Shows/Hides subnodes on startup
var showAllNodesOnStartup = false;
// Is the roots dragable?
var dragable = false;

/************************************************************************
* The following is just instancevariables.
************************************************************************/
var href = "";
// rootNodeCallBack name (if null, it"s not selectable).
var rootNodeCallBack = null;
// selectedNode
var selectedNode = null;
var states = "";
var statearray = new Array();
var treeNodeEdited = null;
var editaborted = false;
var floatDragElement = null;
var colouredElement = null;
var draggedNodeID = null;
var lastDraggedOnNodeID = null;

/**
* The TreeNode Object
* @param id unique id of this treenode
* @param name The title of this node
* @param icon The icon if this node (Can also be an array with 2 elements, the first one will represent the closed state, and the next one the open state)
* @param param A parameter, this can be pretty much anything. (eg. an array with information).
* @param orderNumber an orderNumber If one is given the nodes will be sorted by this (else they"ll be sorted alphabetically (If sorting is on).
*/
function TreeNode(id,name,icon,param,orderNumber) {
  this.id = id;
  this.childs = new Array();
  this.name = (name == null ? "unset name" : name);
  this.icon = (icon == null ? "" : icon);
  this.parent = null;
  this.handler = null;
  this.param = (param == null ? "" : param);
  this.orderNumber = (orderNumber == null ? -1 : orderNumber);
  
  this.openeventlisteners = new Array();
  this.editeventlisteners = new Array();
  this.moveeventlisteners = new Array();
  this.haschilds = false;
  this.editable = false;
  this.linestring = "";
  
  this.nextSibling = null;
  this.prevSibling = null;
  
  this.childsHasBeenFetched = false;
  this.getID = function() {
    return this.id;
  }
  this.setName = function(newname) {
    this.name = newname;
  }
  this.getName = function() {
    return this.name;
  }
  this.getParam = function() {
    return this.param;
  }
  this.setIcon = function(icon) {
    this.icon = icon;
  }
  this.getIcon = function() {
    if (typeof(this.icon) == "object") {
      return this.icon[0];
    }
    return this.icon;
  }
  this.getOpenIcon = function() {
    if (typeof(this.icon) == "object") {
      return this.icon[1];
    }
    return this.icon;
  }
  this.hasIcon = function () {
    return this.icon != "";
  }
  this.getOrderNumber = function() {
    return this.orderNumber;
  }
  this.addOpenEventListener = function(event) {
    this.openeventlisteners[this.openeventlisteners.length] = event;
  }
  this.gotOpenEventListeners = function() {
    return (this.openeventlisteners.length > 0);
  }
  this.addEditEventListener = function(event) {
    this.editeventlisteners[this.editeventlisteners.length] = event;
  }
  this.gotEditEventListeners = function() {
    return (this.editeventlisteners.length > 0);
  }
  this.addMoveEventListener = function(event) {
    this.moveeventlisteners[this.moveeventlisteners.length] = event;
  }
  this.gotMoveEventListeners = function() {
    return (this.moveeventlisteners.length > 0);
  }
  this.addChild = function(childNode) {
    var possiblePrevNode = this.childs[this.childs.length - 1]
    if (possiblePrevNode) {
      possiblePrevNode.nextSibling = childNode;
      childNode.prevSibling = possiblePrevNode;
      // alert(childNode.prevSibling);
    }
    this.childs[this.childs.length] = childNode;
    childNode.setParent(this);
    if (sortNodes) {
      function sortByOrder(a,b) {
        var order1 = a.getOrderNumber();
        var order2 = b.getOrderNumber();
        if (order1 == -1 || order2 == -1) {
          return a.getName().toLowerCase() > b.getName().toLowerCase() ? 1 : -1;
        }
        else {
          if (order1 == order2) {
            // If they got the same order number, then we"ll sort by their title.
            return a.getName().toLowerCase() > b.getName().toLowerCase() ? 1 : -1;
          }
          else {
            return order1 - order2;
          }
        }
      }
      this.childs.sort(sortByOrder);
    }
  }
  this.removeChild = function(childNode) {
    var found = false;
    for (var i=0;i<this.childs.length;i++) {
      if (found) {
        this.childs[i] = this.childs[i + 1];
      }
      if (this.childs[i] == childNode) {
        if (i == (this.childs.length - 1)) {
          this.childs[i] = null;
        }
        else {
          this.childs[i] = this.childs[i + 1];
        }
        found = true;
      }
    }
    if (found) {
      this.childs.length = this.childs.length-1;
    }
  }
  this.resetChilds = function() {
    this.childs = new Array();
  }
  this.setHasChilds = function(hasChilds) {
    this.haschilds = hasChilds;
  }
  this.hasChilds = function() {
    if (this.haschilds == true) {
      return true;
    }
    return (this.childs.length > 0);
  }
  this.getChildCount = function() {
    return this.childs.length;
  }
  this.getFirstChild = function() {
    if (this.hasChilds()) {
      return this.childs[0];
    }
    return null;
  }
  this.gotHandler = function() {
    return this.handler != null;
  }
  this.setHandler = function(handler) {
    this.handler = handler;
  }
  this.getHandler = function() {
    return this.handler;
  }
  this.setParent = function(parent) {
    this.parent = parent;
  }
  this.getParent = function() {
    return this.parent;
  }
  this.getLineString = function() {
    return this.linestring;
  }
  this.setLineString = function(string) {
    this.linestring = string;
  }
  this.isEditable = function() {
    return this.editable;
  }
  this.setEditable = function(editable) {
    this.editable = editable;
  }
  
}
function getTreeNode(nodeID) {
  return findNodeWithID(rootNode,nodeID);
}
function findNodeWithID(node,nodeID) {
  if (node.getID() == nodeID) {
    return node;
  }
  else {
    if (node.hasChilds()) {
      for(var i=0;i<node.getChildCount();i++) {
        var value = findNodeWithID(node.childs[i],nodeID);
        if (value != false) {
          return value;
        }
      }
    }
    return false;
  }
}
function readStates() {
  //setCookie("tree" + documentID,"");
  states = getCookie("tree" + documentID);
  if (states != null) {
    var array = states.split(";");
    for(var i=0;i<array.length;i++) {
      var singlestate = array[i].split("|");
      statearray[i] = new Array();
      statearray[i]["key"] = singlestate[0];
      statearray[i]["state"]  = singlestate[1];
    }
  }
}
function getState(nodeID) {
  for(var i=0;i<statearray.length;i++) {
    if (statearray[i]["key"] == nodeID) {
      state = statearray[i]["state"];
      if (state == null || state == "") {
        state = "closed";
      }
      return state;
    }
  }
  return "closed";
}
function writeStates(nodeID,newstate) {
  //alert(nodeID);
  var str = "";
  var found = false;
  for(var i=0;i<statearray.length;i++) {
    if (statearray[i]["key"] == nodeID) {
      statearray[i]["state"] = newstate;
      found = true;
    }
    if (statearray[i]["state"] != null) {
      str += statearray[i]["key"] + "|" + statearray[i]["state"] + ";";
    }
  }
  if (found == false) {
    statearray[statearray.length] = new Array();
    statearray[statearray.length - 1]["key"] = nodeID;
    statearray[statearray.length - 1]["state"] = newstate;
    if (newstate != null) {
      str += nodeID + "|" + newstate + ";";
    }
  }
  setCookie("tree" + documentID,str);
}
function showTree(path) {
  readStates();
  
  href = path;
  window.focus();
  window.onblur = blurSelection;
  window.onfocus = focusSelection;
  var str = "";
  str = "<div id="node" + rootNode.getID() + "" class="treetitle" style="display:" + (showRootNode == true ? "block" : "none") + "">";
  str += "<nobr>";
  if (rootNode.hasIcon()) {
    str += "<img src="" + rootNode.getIcon() + "" style="vertical-align:middle;">";
  }
  str += "<span style="vertical-align:middle;">&nbsp;" + rootNode.getName() + "</span>";
  str += "</nobr></div>";
  
  if (rootNode.hasChilds()) {
    for(i=0;i<rootNode.childs.length;i++) {
      nodeContents = showNode(rootNode.childs[i],(i == (rootNode.getChildCount() -1)));
      str = str + nodeContents;
    }
  }
  container.innerHTML = str;
  if (window.finishedLoading) {
    finishedLoading();
  }
}
/**
* Shows the given node, and subnodes.
*/
function showNode(treeNode,lastNode) {
  linestring = treeNode.getLineString();
  var state = getState(treeNode.getID());
  var str;
  str = "<div style="filter:alpha(opacity=100);" ondragenter="dragEnter(" + treeNode.getID() + ");" ondragleave="dragLeave();" ondragstart="startDrag(" + treeNode.getID() + ");" ondrag="dragMove();" ondragend="endDrag(" + treeNode.getID() + ")" id="node" + treeNode.getID() + "">";
  str += "<nobr>";
  for(var y=0;y<linestring.length;y++) {
    if (linestring.charAt(y) == "I") {
      str += "<img src="" + href + "nanoImages/" + (showLines ? "line" : "white") + ".gif" style="width:19px;height:20px;vertical-align:middle;">";
    }
    else if (linestring.charAt(y) == "B") {
      str += "<img src="" + href + "nanoImages/white.gif" style="width:19px;height:20px;vertical-align:middle;">";
    }
  }
  if (treeNode.hasChilds()) {
    // If this is the first child of the rootNode, and showRootNode is false, we want to display a different icon.
    if (!showRootNode && (treeNode.getParent() == rootNode) && (treeNode.getParent().getFirstChild() == treeNode)) {
      if (!lastNode) {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (state == "open" ? (showLines ? "minus_no_root" : "minus_nolines") : (showLines ? "plus_no_root" : "plus_nolines")) + ".gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
      else {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (state == "open" ? "minus_last" : "plus_last") + "_no_root.gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
    }
    else {
      if (!lastNode) {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (state == "open" ? (showLines ? "minus" : "minus_nolines") : (showLines ? "plus" : "plus_nolines")) + ".gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
      else {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (state == "open" ? (showLines ? "minus_last" : "minus_nolines") : (showLines ? "plus_last" : "plus_nolines")) + ".gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
    }
  }
  else {
    // If this is the first child of the rootNode, and showRootNode is false, we want to display a different icon.
    if (!showRootNode && (treeNode.getParent() == rootNode) && (treeNode.getParent().getFirstChild() == treeNode)) {
      if (!lastNode) {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (showLines ? "t_no_root" : "white") + ".gif" style="width:19px;height:20px;vertical-align:middle;">";
      }
      else {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/white.gif" style="width:19px;height:20px;vertical-align:middle;">";
      }
    }
    else {
      if (!lastNode) {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (showLines ? "t" : "white") + ".gif" style="width:19px;height:20px;vertical-align:middle;">";
      }
      else {
        str += "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (showLines ? "lastnode" : "white") + ".gif" style="width:19px;height:20px;vertical-align:middle;">";
      }
    }
  }
  iconStartImage = treeNode.getIcon();
  if (state != "closed") {
    if (treeNode.hasChilds()) {
      iconStartImage = treeNode.getOpenIcon();
    }
  }
  
  str += "<img id="iconimage" + treeNode.getID() + "" src="" + iconStartImage + "" style="vertical-align:middle;" OnClick="selectNode(" + treeNode.getID() + ")">";
  str += "&nbsp;<span unselectable="ON" style="vertical-align:middle;" class="treetitle" ID="title" + treeNode.getID() + "" OnDblClick="handleNode(" + treeNode.getID() + ")" OnClick="selectNode(" + treeNode.getID() + ")">";
  str += treeNode.getName();
  str += "</span>";
  str += "</nobr>";
  str += "</div>";
  if (treeNode.hasChilds()) {
    if (state == "open") {
      str += "<div id="node" + treeNode.getID() + "sub" style="display:block;">";
      fireOpenEvent(treeNode);
      // alert("openevent: " + treeNode.getName());
    }
    else {
      str += "<div id="node" + treeNode.getID() + "sub" style="display:" + (showAllNodesOnStartup == true ? "block;" : "none;") + ";">";
    }
    var subgroupstr = "";
    var newChar = "";
    if (!lastNode) {
      newChar = "I";
    }
    else {
      newChar = "B";
    }
    for(var z=0;z<treeNode.getChildCount();z++) {
      treeNode.childs[z].setLineString(linestring + newChar);
    }
    for(var z=0;z<treeNode.getChildCount();z++) {
      subgroupstr += showNode(treeNode.childs[z],(z == (treeNode.getChildCount() -1)));
    }
    str += subgroupstr;
    str += "</div>";
  }
  else {
    str += "<div id="node" + treeNode.getID() + "sub" style="display:none;">";
    str += "</div>";
  }
  return str;
}
/*
function mouseMove() {
  if (dragging) {
    alert("bob");
  }
}
function mouseUp() {
  if (dragging) {
    alert("dropped on something!");
  }
}
*/
function startDrag(nodeID) {
  if (!dragable) {
    return;
  }
  draggedNodeID = nodeID;
  
  var srcObj = window.event.srcElement;
  while(srcObj.tagName != "DIV") {
    srcObj = srcObj.parentElement;
  }
  floatDragElement = document.createElement("DIV");
  floatDragElement.innerHTML = srcObj.innerHTML;
  floatDragElement.childNodes[0].removeChild(floatDragElement.childNodes[0].childNodes[0]);
  
  document.body.appendChild(floatDragElement);
  floatDragElement.style.zIndex = 100;
  floatDragElement.style.position = "absolute";
  floatDragElement.style.filter="progid:DXImageTransform.Microsoft.Alpha(1,opacity=60);";
}
function findSpanChild(element) {
  if (element.tagName == "SPAN") {
    return element;
  }
  else {
    if (element.childNodes) {
      for(var i=0;i<element.childNodes.length;i++) {
        var value = findSpanChild(element.childNodes[i]);
        if (value != false) {
          return value;
        }
      }
      return false;
    }
  }
}
function dragEnter(nodeID) {
  if (!dragable) {
    return;
  }
  lastDraggedOnNodeID = nodeID;
  
  if (colouredElement) {
    findSpanChild(colouredElement).className = "treetitle";
  }
  colouredElement = window.event.srcElement;
  while(colouredElement.tagName != "DIV") {
    colouredElement = colouredElement.parentElement;
    if (colouredElement.tagName == "BODY") {
      // Something gone seriously wrong.
      alert("Drag failure, reached <BODY>!");
      return;
    }
  }  
  findSpanChild(colouredElement).className = "treetitleselectedfocused";
}
function dragLeave() {
  if (!dragable) {
    return;
  }
}
function endDrag(nodeID) {
  if (!dragable) {
    return;
  }
  if (lastDraggedOnNodeID != null) {
    fireMoveEvent(getTreeNode(lastDraggedOnNodeID),draggedNodeID,lastDraggedOnNodeID);
  }
}
function dragProceed() {
  if (!dragable) {
    return;
  }
  var dragged = getTreeNode(draggedNodeID);
  var newparent = getTreeNode(lastDraggedOnNodeID);
  var oldparent = dragged.getParent();
  
  oldparent.removeChild(dragged);
  newparent.addChild(dragged);
  
  refreshNode(oldparent);
  refreshNode(newparent);
  
  _dragClean()
}
function dragCancel() {
  if (!dragable) {
    return;
  }
  _dragClean()
}
/**
* Don"t call this yourself.
*/
function _dragClean() {
  if (!dragable) {
    return;
  }
  if (colouredElement) {
    findSpanChild(colouredElement).className = "treetitle";
  }
  
  floatDragElement.parentElement.removeChild(floatDragElement);
  floatDragElement = null;
  colouredElement = null;
  draggedNodeID = null;
  lastDraggedOnNodeID = null;
}
function dragMove() {
  if (!dragable) {
    return;
  }
  floatDragElement.style.top = window.event.clientY;
  floatDragElement.style.left = window.event.clientX;
}
function editEnded() {
  if (treeNodeEdited != null) {
    // treeNodeEdited.getID();
    var editTitle = document.getElementById("title" + treeNodeEdited.getID());
    var input = editTitle.childNodes[0];
  
    var newValue = input.value;
    
    if (newValue == treeNodeEdited.getName()) {
      editTitle.innerHTML = newValue;
      treeNodeEdited = null;
      return;
    }
  
    fireEditEvent(treeNodeEdited,newValue);
    
    if (!editaborted) {
      treeNodeEdited.setName(newValue);
      editTitle.innerHTML = newValue;
    }
  
    treeNodeEdited = null;
  }
}
function selectNode(nodeID) {
  var treeNode = getTreeNode(nodeID);
  if (selectedNode != null) {
    if (selectedNode == nodeID) {
      if (treeNode.isEditable()) {
        if (treeNodeEdited == treeNode) {
          return;
        }
        treeNodeEdited = treeNode;
        var editTitle = document.getElementById("title" + treeNode.getID());
        editTitle.className = "editednode";
        
        editTitle.innerHTML = "<input type="text" onKeypress="if (event.keyCode == 13) { this.onblur = null; editEnded(); }" name="editednode" class="editednodeinput">";
        var input = editTitle.childNodes[0];
        input.value = treeNode.getName();
        input.focus();
        input.select();
        input.onblur = editEnded;
      }
      return;
    }
    if (treeNodeEdited != null) {
      editEnded();
    }
    var oldNodeTitle = document.getElementById("title" + selectedNode);
    oldNodeTitle.className = "treetitle";
  }
  selectedNode = nodeID;
  var nodetitle = document.getElementById("title" + selectedNode);
  nodetitle.className = "treetitleselectedfocused";
  
  if (treeNode.gotHandler()) {
    eval(treeNode.getHandler() + "(getTreeNode(" + nodeID + "));");
  }
  else {
    standardClick(treeNode);
  }
}
function refreshNode(treeNode) {
  var submenu = document.getElementById("node" + treeNode.getID() + "sub");
  var str = "";
  for(var i=0;i<treeNode.getChildCount();i++) {
    var parent = treeNode.getParent();
    if (!parent) {
      treeNode.childs[i].setLineString(treeNode.getLineString() + "B");
    }
    else {
      if (parent.childs[parent.childs.length - 1] == treeNode) {
        treeNode.childs[i].setLineString(treeNode.getLineString() + "B");
      }
      else {
        treeNode.childs[i].setLineString(treeNode.getLineString() + "I");
      }
    }
    str += showNode(treeNode.childs[i],i == (treeNode.getChildCount() - 1));
  }
  var actionimage = document.getElementById("handler" + treeNode.getID());
  if (treeNode.getChildCount() == 0) {
    // TreeNode haven"t got any children, make sure the right image is displayed.
    if (actionimage.src.indexOf("last") == -1) {
      actionimage.src = href + "nanoImages/" + (showLines ? "t" : "white") + ".gif";
    }
    else {
      actionimage.src = href + "nanoImages/" + (showLines ? "lastnode" : "white") + ".gif";
    }
    actionimage.onclick = null;
    
    // Close the submenu
    if (submenu) {
      submenu.style.display = "none";
    }
  }
  else {
    // We have children, make sure to display the + and - icon.
    if (actionimage.src.indexOf("plus") != -1) {
      // The TreeNode have already got children, and displays them.
    }
    else if (actionimage.src.indexOf("minus") != -1) {
      // The TreeNode have already got children, and displays them.
    }
    else {
      if (actionimage.src.indexOf("last") == -1) {
        actionimage.outerHTML = "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/" + (showLines ? "plus" : "plus_nolines") + ".gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
      else {
        actionimage.outerHTML = "<img id="handler" + treeNode.getID() + "" src="" + href + "nanoImages/plus_last.gif" style="width:19px;height:20px;vertical-align:middle;" OnClick="handleNode(" + treeNode.getID() + ");">";
      }
    }
  }
  submenu.innerHTML = str;
}
function handleNode(nodeID) {
  var treeNode = getTreeNode(nodeID);  
  if (!treeNode.hasChilds()) { // No reason to handle a node without childs.
    return;
  }
  
  var submenu = document.getElementById("node" + nodeID + "sub");
  
  var iconimageholder = document.getElementById("iconimage" + nodeID);
  var actionimage = document.getElementById("handler" + nodeID);
  // This will be used if showRootNode is set to false.
  var firstChildOfRoot = false;
  if (actionimage.src.indexOf("_no_root") != -1) {
    firstChildOfRoot = true;
  }
  
  if (submenu.style.display == "none") {
    writeStates(nodeID,"open");
    fireOpenEvent(treeNode);
    submenu.style.display = "block";
    iconimageholder.src = treeNode.getOpenIcon();
  
    if (actionimage.src.indexOf("last") == -1) {
      actionimage.src = href + "nanoImages/" + ((firstChildOfRoot) ? "minus_no_root" : (showLines ? "minus" : "minus_nolines")) + ".gif";
    }
    else {
      actionimage.src = href + "nanoImages/" + ((firstChildOfRoot) ? "minus_last_no_root" : (showLines ? "minus_last" : "minus_nolines")) + ".gif";
    }
  }
  else {
    writeStates(nodeID,"closed");
    submenu.style.display = "none";
    
    iconimageholder.src = treeNode.getIcon();
    
    if (actionimage.src.indexOf("last") == -1) {
      actionimage.src = href + "nanoImages/" + ((firstChildOfRoot) ? "plus_no_root" : (showLines ? "plus" : "plus_nolines")) + ".gif";
    }
    else {
      actionimage.src = href + "nanoImages/" + ((firstChildOfRoot) ? "plus_last_no_root" : (showLines ? "plus_last" : "plus_nolines")) + ".gif";
    }
  }
}
function fireOpenEvent(treeNode) {
  if (treeNode.gotOpenEventListeners()) {
    for(var i=0;i<treeNode.openeventlisteners.length;i++) {
      eval(treeNode.openeventlisteners[i] + "(" + treeNode.getID() + ");");
    }
  }
}
function fireEditEvent(treeNode,newVal) {
  if (treeNode.gotEditEventListeners()) {
    for(var i=0;i<treeNode.editeventlisteners.length;i++) {
      eval(treeNode.editeventlisteners[i] + "(" + treeNode.getID() + ",\"" + escape(newVal) + "\");");
    }
  }
}
function fireMoveEvent(treeNode,draggedNodeID,droppedOnNodeID) {
  if (treeNode.gotMoveEventListeners()) {
    for(var i=0;i<treeNode.moveeventlisteners.length;i++) {
      eval(treeNode.moveeventlisteners[i] + "(" + draggedNodeID + "," + droppedOnNodeID + ");");
    }
  }
}
function blurSelection() {
  if (selectedNode != null) {
    var oldNodeTitle = document.getElementById("title" + selectedNode);
    oldNodeTitle.className = "treetitleselectedblured";
  }
}
function focusSelection() {
  if (selectedNode != null) {
    var oldNodeTitle = document.getElementById("title" + selectedNode);
    oldNodeTitle.className = "treetitleselectedfocused";
  }
}
function getCookieVal (offset) {  
  var endstr = document.cookie.indexOf (";",offset);  
  if (endstr == -1) {
    endstr = document.cookie.length;
  }
  return unescape(document.cookie.substring(offset,endstr));
}
function getCookie (name) {  
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg) {
      return getCookieVal(j);
    }
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) {
      break;
    }
  }
  return null;
}
function setCookie (name, value) {  
  var argv = setCookie.arguments;  
  var argc = setCookie.arguments.length;  
  var expires = (argc > 2) ? argv[2] : null;  
  var path = (argc > 3) ? argv[3] : null;  
  var domain = (argc > 4) ? argv[4] : null;  
  var secure = (argc > 5) ? argv[5] : false;  
  document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}
function expandNode() {
  var state = getState(selectedNode);
  if (state == "open") {
    var currentTreeNode = getTreeNode(selectedNode);
    if (currentTreeNode.hasChilds()) {
      selectNode(currentTreeNode.childs[0].getID());
    }
  }
  else {
    handleNode(selectedNode);
  }
}
function subtractNode() {
  var state = getState(selectedNode);
  if (state == "closed") {
    var currentTreeNode = getTreeNode(selectedNode);
    var parent = currentTreeNode.getParent();
    if (parent != null && parent != rootNode) {
      selectNode(parent.getID());
    }
  }
  else {
    handleNode(selectedNode);
  }
}
function selectPrevNode() {
  var currentTreeNode = getTreeNode(selectedNode);
  if (currentTreeNode.prevSibling != null) {
    var state = getState(currentTreeNode.prevSibling.getID());
    if (state == "open" && currentTreeNode.prevSibling.hasChilds()) {
      // We have to find the last open child of the previoussiblings childs.
      var current = currentTreeNode.prevSibling.childs[currentTreeNode.prevSibling.childs.length - 1];
      var currentstate = "open";
      while (current.hasChilds() && (getState(current.getID()) == "open")) {
        current = current.childs[current.childs.length - 1];
      }
      selectNode(current.getID());
    }
    else {
      selectNode(currentTreeNode.prevSibling.getID());
    }
  }
  else {
    if (currentTreeNode.getParent() != null && currentTreeNode.getParent() != rootNode) {
      selectNode(currentTreeNode.getParent().getID());
    }
  }
}
function selectNextNode() {
  var currentTreeNode = getTreeNode(selectedNode);
  var state = getState(selectedNode);
  if (state == "open" && currentTreeNode.hasChilds()) {
    selectNode(currentTreeNode.childs[0].getID());
  }  
  else {
    if (currentTreeNode.nextSibling != null) {
      selectNode(currentTreeNode.nextSibling.getID());
    }
    else {
      // Continue up the tree until we either hit null, or a parent which have a child.
      var parent = currentTreeNode;
      while ((parent = parent.getParent()) != rootNode) {
        if (parent.nextSibling != null) {
          selectNode(parent.nextSibling.getID());
          break;
        }
      }
      /*
      if (currentTreeNode.getParent().nextSibling != null) {
        selectNode(currentTreeNode.getParent().nextSibling.getID());
      }
      */
    }
  }
}
function keyDown(event) {
  if (window.event) {
    event = window.event;
  }
  if (event.keyCode == 38) { // Up
    selectPrevNode();
    return false;
  }
  else if (event.keyCode == 40) { // Down
    selectNextNode();
    return false;
  }
  else if (event.keyCode == 37) { // left
    subtractNode();
    return false;
  }
  else if (event.keyCode == 39) { // right
    expandNode();
    return false;
  }
}
document.onkeydown = keyDown;
</script>
<script type="text/javascript" language="JavaScript">
showRootNode = false;
sortNodes = false;
dragable = false;
/**
* Needed to initialize the tree.
* And to call showTree(imagePath); to actually show the tree.
* Alternatively this can be done in a script block at the bottom of the page.
* Though this method is somewhat cleaner.
*/
function init() {
  container = document.getElementById("examplediv");
  showTree("");
}
/**
* Called when a user clicks on a node.
* @param treeNode the TreeNode object which have been clicked.
*/
function standardClick(treeNode) {
  var mytext = document.getElementById("mytext");
  var param = treeNode.getParam();
  
  mytext.innerHTML = (param == "") ? treeNode.getName() : param;
}
function nodeEdited(treeNode) {
}
var closedGif = "nanoImages/folder_closed.gif";
var openGif = "nanoImages/folder_open.gif";
var pageIcon = "nanoImages/page16x16.gif";
var userIcon = "nanoImages/user_16x16.gif";
var helpIcon = "nanoImages/help_16x16.gif";
rootNode = new TreeNode(1,"RootNode");
var node1 = new TreeNode(2,"subpage 1",helpIcon,"<P>This treenode can be renamed (Try to click onnce more on the node).<br>(You have to handle the renaming itself in a function though, since this is implementation specific. ie: Go down in a database and change the titel of a page).<br>A good example would be to open a PHP script to do the renaming, this can for example be done by setting location.href on a hidden iframe, or by setting the src attribute on a script element.</P>");
node1.setEditable(true);
node1.addEditEventListener("nodeEdited");
var node2 = new TreeNode(3,"subpage 2",new Array(closedGif,openGif));
  var node2a = new TreeNode(4,"1st subpage to Node 2",new Array(closedGif,openGif));
    var node2aa = new TreeNode(5,"subpage to subpage of Node2",new Array(closedGif,openGif));
      var node2aaa = new TreeNode(6,"Some child",pageIcon);
      var node2aab = new TreeNode(7,"Some child",pageIcon);
      var node2aac = new TreeNode(8,"Some child",pageIcon);
      node2aa.addChild(node2aaa);
      node2aa.addChild(node2aab);
      node2aa.addChild(node2aac);
    node2a.addChild(node2aa);
  var node2b = new TreeNode(9,"2nd subpage to Node 2",pageIcon);
  var node2c = new TreeNode(10,"3rd subpageto Node 2",pageIcon);
  node2.addChild(node2a);
  node2.addChild(node2b);
  node2.addChild(node2c);
var node3 = new TreeNode(11,"subpage 3",new Array(closedGif,openGif));
  var node3a = new TreeNode(12,"Yet another child",pageIcon);
  node3.addChild(node3a);
var node4 = new TreeNode(13,"subpage 4",userIcon);
// rootNode.addChild(node1);
rootNode.addChild(node2);
rootNode.addChild(node3);
// rootNode.addChild(node4);
</script>
<style type="text/css">
div,p,a {
  font-family: Verdana,Arial;
  font-size: 11px;
}
#exampletable {
  width: 100%;
  height: 100%;
}
#examplediv {
  width: 250px;
  height: 100%;
  overflow: auto;
}
.explanation {
  font-weight: bold;
  font-style: italic;
}
</style>
</head>
<body OnLoad="init();">
<table id="exampletable">
  <tr>
    <td valign="top" style="width: 250px;">
      <div id="examplediv"></div>
    </td>
    <td valign="top">
      <div style="background-color:#EEE;border-style:dashed;border-color:#000000;border-width:1px;padding:5px;">
        <div style="font-weight: bold;">NanoTree.</div>
        <div id="mytext">
        <p>NanoTree is a JavaScript tree, published under the <a href="http://www.gnu.org/copyleft/lesser.html">LGPL License</a>, which is developed to work in (at least) Internet Explorer and Mozilla<br>
        <p style="font-style:italic;">CopyRight Martin Mouritzen</p>
        </div>
      </div>
      <br>
    </td>
  </tr>
</table>
</body></html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/nanotree.zip">nanotree.zip( 15 k)</a>

Navigation Tree

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 10.10.TOC</title>
<style type="text/css">
    .OLRow {vertical-align:middle; font-size:12px; line-height:11px; font-family:Arial,sans-serif}
    .OLBlock {display:none}
    img.widgetArt {vertical-align:text-top}
</style>
<script type="text/javascript">
/**********************************
          GLOBAL VARIABLES
***********************************/
// pre-cache art files and sizes for widget styles and spacers
// (all images must have same height/width)
var collapsedWidget = new Image(20, 16);
collapsedWidget.src = "oplus.gif";
var collapsedWidgetStart = new Image(20, 16);
collapsedWidgetStart.src = "oplusStart.gif";
var collapsedWidgetEnd = new Image(20, 16);
collapsedWidgetEnd.src = "oplusEnd.gif";
var expandedWidget = new Image(20, 16);
expandedWidget.src = "ominus.gif";
var expandedWidgetStart = new Image(20, 16);
expandedWidgetStart.src = "ominusStart.gif";
var expandedWidgetEnd = new Image(20, 16);
expandedWidgetEnd.src = "ominusEnd.gif";
var nodeWidget = new Image(20, 16);
nodeWidget.src = "onode.gif";
var nodeWidgetEnd = new Image(20, 16);
nodeWidgetEnd.src = "onodeEnd.gif";
var emptySpace = new Image(20, 16);
emptySpace.src = "oempty.gif";
var chainSpace = new Image(20, 16);
chainSpace.src = "ochain.gif";
// miscellaneous globals
var widgetWidth = "20";
var widgetHeight = "16";
var currState = "";
var displayTarget = "contentFrame";
/**********************************
           DATA COLLECTIONS
***********************************/
var expansionState = "";
// constructor for outline item objects
function outlineItem(text, uri) {
    this.text = text;
    this.uri = uri;
}
var olData = {childNodes:
             [{item:new outlineItem("Forms"),
               childNodes:
                   [{item:new outlineItem("Introduction", "http://www.w3.org/TR/html401/interact/forms.html#h-17.1")},
                    {item:new outlineItem("Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.2"),
                     childNodes:
                         [{item:new outlineItem("Control Types", "http://www.w3.org/TR/html401/interact/forms.html#h-17.2.1")}
                          ]},
                    {item:new outlineItem("FORM Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.3")},
                    {item:new outlineItem("INPUT Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.4"),
                     childNodes:
                         [{item:new outlineItem("INPUT Control Types", "http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1")},
                          {item:new outlineItem("Examples", "http://www.w3.org/TR/html401/interact/forms.html#h-17.4.2")}
                          ]},
                    {item:new outlineItem("BUTTON Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.5")},
                    {item:new outlineItem("SELECT, OPTGROUP, OPTION Elements", "http://www.w3.org/TR/html401/interact/forms.html#h-17.6"),
                     childNodes:
                         [{item:new outlineItem("Pre-selected Options", "http://www.w3.org/TR/html401/interact/forms.html#h-17.6.1")}
                          ]},
                    {item:new outlineItem("TEXTAREA Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.7")},
                    {item:new outlineItem("ISINDEX Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.8")},
                    {item:new outlineItem("Labels", "http://www.w3.org/TR/html401/interact/forms.html#h-17.9"),
                     childNodes:
                         [{item:new outlineItem("LABEL Element", "http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1")}
                          ]},
                    {item:new outlineItem("FIELDSET, LEGEND Elements", "http://www.w3.org/TR/html401/interact/forms.html#h-17.10")},
                    {item:new outlineItem("Element Focus", "http://www.w3.org/TR/html401/interact/forms.html#h-17.11"),
                     childNodes:
                         [{item:new outlineItem("Tabbing Navigation", "http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1")},
                          {item:new outlineItem("Access Keys", "http://www.w3.org/TR/html401/interact/forms.html#h-17.11.2")}
                          ]},
                    {item:new outlineItem("Disabled and Read-Only Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.12"),
                     childNodes:
                         [{item:new outlineItem("Disabled Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1")},
                          {item:new outlineItem("Read-Only Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2")}
                          ]},
                    {item:new outlineItem("Form Submissions", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13"),
                     childNodes:
                         [{item:new outlineItem("Form Submission Method", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.1")},
                          {item:new outlineItem("Successful Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2")},
                          {item:new outlineItem("Processing Form Data", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3"),
                           childNodes:
                               [{item:new outlineItem("1. Identify Successful Controls", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3.1")},
                                {item:new outlineItem("2. Build Form Data Set", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3.2")},
                                {item:new outlineItem("3. Encode Form Data", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3.3")},
                                {item:new outlineItem("4. Submit Encoded Data", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.3.4")}
                                ]},
                          {item:new outlineItem("Form Content Types", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4"),
                           childNodes:
                               [{item:new outlineItem("application/x-www-form-urlencoded", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1")},
                                {item:new outlineItem("multipart/form-data", "http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2")}
                                ]
                           }
                          ]
                       }
                    ]},
              {item:new outlineItem("Scripts"),
               childNodes:
                   [{item:new outlineItem("Introduction", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.1")},
                    {item:new outlineItem("Designing Documents for Scripts", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2"),
                     childNodes:
                         [{item:new outlineItem("SCRIPT Element", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.1")},
                           {item:new outlineItem("Specifying the Scripting Language", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.2"),
                           childNodes:
                               [{item:new outlineItem("Default Language", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.2.1")},
                                {item:new outlineItem("Local Language Declaration", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.2.2")},
                                {item:new outlineItem("References to HTML Elements", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.2.3")}
                                ]},
                           {item:new outlineItem("Intrinsic Events", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3")},
                           {item:new outlineItem("Dynamic Document Modification", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4")}
                          ]},
                    {item:new outlineItem("Designing for Unscriptable Clients", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.3"),
                     childNodes:
                         [{item:new outlineItem("NOSCRIPT Element", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.1")},
                          {item:new outlineItem("Hiding Scripts from Clients", "http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.2")}
                          ]}
                   ]}
                  ]
              };
          
          

/**********************************
  TOGGLE DISPLAY AND ICONS
***********************************/
// invert item state (expanded to/from collapsed)
function swapState(currState, currVal, n) {
    var newState = currState.substring(0,n);
    newState += currVal ^ 1 // Bitwise XOR item n;
    newState += currState.substring(n+1,currState.length);
    return newState;
}
// retrieve matching version of "minus" images
function getExpandedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return expandedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return expandedWidgetEnd.src;
    }
    return expandedWidget.src;
}
// retrieve matching version of "plus" images
function getCollapsedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return collapsedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return collapsedWidgetEnd.src;
    }
    return collapsedWidget.src;
}
// toggle an outline mother entry, storing new state value;
// invoked by onclick event handlers of widget image elements
function toggle(img, blockNum) {
    var newString = "";
    var expanded, n;
    // modify state string based on parameters from IMG
    expanded = currState.charAt(blockNum);
    currState = swapState(currState, expanded, blockNum);
    // dynamically change display style
    if (expanded == "0") {
        document.getElementById("OLBlock" + blockNum).style.display = "block";
        img.src = getExpandedWidgetState(img.src);
    } else {
        document.getElementById("OLBlock" + blockNum).style.display = "none";
        img.src = getCollapsedWidgetState(img.src);
    }
}
function expandAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "1";
    }
    currState = newState;
    initExpand();
}
function collapseAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "0";
    }
    currState = newState;
    initExpand();
}
/*********************************
   OUTLINE HTML GENERATION
**********************************/
// apply default expansion state from outline"s header
// info to the expanded state for one element to help 
// initialize currState variable
function calcBlockState(n) {
    // get default expansionState data
    var expandedData = (expansionState.length > 0) ? expansionState.split(",") : null;
    if (expandedData) {
        for (var j = 0; j < expandedData.length; j++) {
            if (n == expandedData[j] - 1) {
                return "1";
            }
        }
    }
    return "0";
}
// counters for reflexive calls to drawOutline()
var currID = 0;
var blockID = 0;
// generate HTML for outline
function drawOutline(ol, prefix) {
    var output = "";
    var nestCount, link, nestPrefix, lastInnerNode;
    prefix = (prefix) ? prefix : "";
    for (var i = 0; i < ol.childNodes.length ; i++) {
        nestCount = (ol.childNodes[i].childNodes) ? ol.childNodes[i].childNodes.length : 0;
        output += "<div class="OLRow" id="line" + currID++ + "">\n";
        if (nestCount > 0) {
            output += prefix;
            output += "<img id="widget" + (currID-1) + "" src="" + ((i == ol.childNodes.length-1 && blockID != 0) ? collapsedWidgetEnd.src : (blockID == 0) ? collapsedWidgetStart.src : collapsedWidget.src);
            output += "" height=" + widgetHeight + " width=" + widgetWidth;
            output += " title="Click to expand/collapse nested items." onClick="toggle(this," + blockID + ")">&nbsp;";
            link =  (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
            if (link) {
                output += "<a href="" + link + "" class="itemTitle" title="" + 
                link + "" target="" + displayTarget + "">" ;
            } else {
                output += "<a class="itemTitle" title="" + link + "">";
            }
            output += "<span style="position:relative; top:-3px; height:11px">" + ol.childNodes[i].item.text + "</span></a>";
            currState += calcBlockState(currID-1);
            output += "<span class="OLBlock" blocknum="" + blockID + "" id="OLBlock" + blockID++ + "">";
            nestPrefix = prefix;
            nestPrefix += (i == ol.childNodes.length - 1) ? 
                       "<img src="" + emptySpace.src + "" height=" + widgetHeight + " width=" + widgetWidth + ">" :
                       "<img src="" + chainSpace.src + "" height=" + widgetHeight + " width=" + widgetWidth + ">"
            output += drawOutline(ol.childNodes[i], nestPrefix);
            output += "</span></div>\n";
        } else {
            output += prefix;
            output += "<img id="widget" + (currID-1) + "" src="" + ((i == ol.childNodes.length - 1) ? nodeWidgetEnd.src : nodeWidget.src);
            output += "" height=" + widgetHeight + " width=" + widgetWidth + ">";
            link =  (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
            if (link) {
                output += "&nbsp;<a href="" + link + "" class="itemTitle" title="" + 
                link + "" target="" + displayTarget + "">";
            } else {
                output += "&nbsp;<a class="itemTitle" title="" + link + "">";
            }
            output += "<span style="position:relative; top:-3px; height:11px">" + ol.childNodes[i].item.text + "</span></a>";
            output += "</div>\n";
        }
    }
    return output;
}
/*********************************
     OUTLINE INITIALIZATIONS
**********************************/
// expand items set in expansionState var, if any
function initExpand() {
    for (var i = 0; i < currState.length; i++) {
        if (currState.charAt(i) == 1) {
            document.getElementById("OLBlock" + i).style.display = "block";
        } else {
            document.getElementById("OLBlock" + i).style.display = "none";
        }
    }
}
// initialize first time -- invoked onload
function initExpMenu(xFile) {
    // wrap whole outline HTML in a span
    var olHTML = "<span id="renderedOL">" + drawOutline(olData) + "</span>";
    // throw HTML into "content" div for display
    document.getElementById("content").innerHTML = olHTML;
    initExpand();
}
</script>
</head>
<body style="font-family:Arial, sans-serif" onload="initExpMenu()">
<h1 style="font-size:1.2em; font-weight:bold">Expandable Navigation Menu</h1>
<hr />
<div id="content"></div>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/TreeMenu.zip">TreeMenu.zip( 5 k)</a>

Navigation Tree menu based on XML

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 10.11.TOC</title>
<style type="text/css">
    .OLRow {vertical-align:middle; font-size:12px; line-height:11px; font-family:Arial,sans-serif}
    .OLBlock {display:none}
    img.widgetArt {vertical-align:text-top}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************
          GLOBAL VARIABLES
***********************************/
// pre-cache art files and sizes for widget styles and spacers
// (all images must have same height/width)
var collapsedWidget = new Image(20, 16);
collapsedWidget.src = "oplus.gif";
var collapsedWidgetStart = new Image(20, 16);
collapsedWidgetStart.src = "oplusStart.gif";
var collapsedWidgetEnd = new Image(20, 16);
collapsedWidgetEnd.src = "oplusEnd.gif";
var expandedWidget = new Image(20, 16);
expandedWidget.src = "ominus.gif";
var expandedWidgetStart = new Image(20, 16);
expandedWidgetStart.src = "ominusStart.gif";
var expandedWidgetEnd = new Image(20, 16);
expandedWidgetEnd.src = "ominusEnd.gif";
var nodeWidget = new Image(20, 16);
nodeWidget.src = "onode.gif";
var nodeWidgetEnd = new Image(20, 16);
nodeWidgetEnd.src = "onodeEnd.gif";
var emptySpace = new Image(20, 16);
emptySpace.src = "oempty.gif";
var chainSpace = new Image(20, 16);
chainSpace.src = "ochain.gif";
// miscellaneous globals
var widgetWidth = "20";
var widgetHeight = "16";
var currState = "";
var displayTarget = "contentFrame";
// XML document object
var xDoc;
/**********************************
  TOGGLE DISPLAY AND ICONS
***********************************/
// invert item state (expanded to/from collapsed)
function swapState(currState, currVal, n) {
    var newState = currState.substring(0,n);
    newState += currVal ^ 1 // Bitwise XOR item n;
    newState += currState.substring(n+1,currState.length);
    return newState;
}
// retrieve matching version of "minus" images
function getExpandedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return expandedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return expandedWidgetEnd.src;
    }
    return expandedWidget.src;
}
// retrieve matching version of "plus" images
function getCollapsedWidgetState(imgURL) {
    if (imgURL.indexOf("Start") != -1) {
        return collapsedWidgetStart.src;
    }
    if (imgURL.indexOf("End") != -1) {
        return collapsedWidgetEnd.src;
    }
    return collapsedWidget.src;
}
// toggle an outline mother entry, storing new state value;
// invoked by onclick event handlers of widget image elements
function toggle(img, blockNum) {
    var newString = "";
    var expanded, n;
    // modify state string based on parameters from IMG
    expanded = currState.charAt(blockNum);
    currState = swapState(currState, expanded, blockNum);
    // dynamically change display style
    if (expanded == "0") {
        document.getElementById("OLBlock" + blockNum).style.display = "block";
        img.src = getExpandedWidgetState(img.src);
    } else {
        document.getElementById("OLBlock" + blockNum).style.display = "none";
        img.src = getCollapsedWidgetState(img.src);
    }
}
function expandAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "1";
    }
    currState = newState;
    initExpand();
}
function collapseAll() {
    var newState = "";
    while (newState.length < currState.length) {
        newState += "0";
    }
    currState = newState;
    initExpand();
}
/*********************************
   OUTLINE HTML GENERATION
**********************************/
// apply default expansion state from outline"s header
// info to the expanded state for one element to help 
// initialize currState variable
function calcBlockState(n) {
    var ol = xDoc.getElementsByTagName("body")[0];
    var outlineLen = ol.getElementsByTagName("outline").length;
    // get OPML expansionState data
    var expandElem = xDoc.getElementsByTagName("expansionState")[0];
    var expandedData = (expandElem.childNodes.length) ? expandElem.firstChild.nodeValue.split(",") : null;
    if (expandedData) {
        for (var j = 0; j < expandedData.length; j++) {
            if (n == expandedData[j] - 1) {
                return "1";
            }
        }
    }
    return "0";
}
// counters for reflexive calls to drawOutline()
var currID = 0;
var blockID = 0;
// generate HTML for outline
function drawOutline(ol, prefix) {
    var output = "";
    var nestCount, link, nestPrefix, lastInnerNode;
    ol = (ol) ? ol : xDoc.getElementsByTagName("body")[0];
    prefix = (prefix) ? prefix : "";
    if (ol.childNodes[ol.childNodes.length - 1].nodeType == 3) {
        ol.removeChild(ol.childNodes[ol.childNodes.length - 1]);
    }
    for (var i = 0; i < ol.childNodes.length ; i++) {
        if (ol.childNodes[i].nodeType == 3) {
            continue;
        }
        if (ol.childNodes[i].childNodes.length > 0 && ol.childNodes[i].childNodes[ol.childNodes[i].childNodes.length - 1].nodeType == 3) {
             ol.childNodes[i].removeChild(ol.childNodes[i].childNodes[ol.childNodes[i].childNodes.length - 1]);
        }
        nestCount = ol.childNodes[i].childNodes.length;
        output += "<div class="OLRow" id="line" + currID++ + "">\n";
        if (nestCount > 0) {
            output += prefix;
            output += "<img id="widget" + (currID-1) + "" src="" + ((i== ol.childNodes.length-1) ? collapsedWidgetEnd.src : (blockID==0) ? collapsedWidgetStart.src : collapsedWidget.src);
            output += "" height=" + widgetHeight + " width=" + widgetWidth;
            output += " title="Click to expand/collapse nested items." onClick="toggle(this," + blockID + ")">";
            link =  (ol.childNodes[i].getAttribute("uri")) ? ol.childNodes[i].getAttribute("uri") : "";
            if (link) {
                output += "&nbsp;<a href="" + link + "" class="itemTitle" title="" + 
                link + "" target="" + displayTarget + "">" ;
            } else {
                output += "&nbsp;<a class="itemTitle" title="" + link + "">";
            }
            output += "<span style="position:relative; top:-3px; height:11px">&nbsp;" + ol.childNodes[i].getAttribute("text") + "</span></a>";
            currState += calcBlockState(currID-1);
            output += "<span class="OLBlock" blocknum="" + blockID + "" id="OLBlock" + blockID++ + "">";
            nestPrefix = prefix;
            nestPrefix += (i == ol.childNodes.length - 1) ? 
                       "<img src="" + emptySpace.src + "" height=" + widgetHeight + " width=" + widgetWidth + ">" :
                       "<img src="" + chainSpace.src + "" height=" + widgetHeight + " width=" + widgetWidth + ">"
            output += drawOutline(ol.childNodes[i], nestPrefix);
            output += "</span></div>\n";
        } else {
            output += prefix;
            output += "<img id="widget" + (currID-1) + "" src="" + ((i == ol.childNodes.length - 1) ? nodeWidgetEnd.src : nodeWidget.src);
            output += "" height=" + widgetHeight + " width=" + widgetWidth + ">";
            link =  (ol.childNodes[i].getAttribute("uri")) ? ol.childNodes[i].getAttribute("uri") : "";
            if (link) {
                output += "&nbsp;<a href="" + link + "" class="itemTitle" title="" + 
                link + "" target="" + displayTarget + "">";
            } else {
                output += "&nbsp;<a class="itemTitle" title="" + link + "">";
            }
            output +="<span style="position:relative; top:-3px; height:11px">" +  ol.childNodes[i].getAttribute("text") + "</span></a>";
            output += "</div>\n";
        }
    }
    return output;
}
/*********************************
     OUTLINE INITIALIZATIONS
**********************************/
// expand items set in expansionState OPML tag, if any
function initExpand() {
    for (var i = 0; i < currState.length; i++) {
        if (currState.charAt(i) == 1) {
            document.getElementById("OLBlock" + i).style.display = "block";
        } else {
            document.getElementById("OLBlock" + i).style.display = "none";
        }
    }
}
function finishInit() {
        // get outline body elements for iteration and conversion to HTML
        var ol = xDoc.getElementsByTagName("body")[0];
        // wrap whole outline HTML in a span
        var olHTML = "<span id="renderedOL">" + drawOutline(ol) + "</span>";
        // throw HTML into "content" div for display
        document.getElementById("content").innerHTML = olHTML;
        initExpand();
}
function continueLoad(xFile) {
    xDoc.load(escape(xFile));
    // IE needs this delay to let loading complete before reading its content
    setTimeout("finishInit()", 300);
}
// verify that browser supports XML features and load external .xml file
function loadXMLDoc(xFile) {
    if (document.implementation && document.implementation.createDocument) {
        // this is the W3C DOM way, supported so far only in NN6
        xDoc = document.implementation.createDocument("", "theXdoc", null);
    } else if (typeof ActiveXObject != "undefined") {
        // make sure real object is supported (sorry, IE5/Mac)
        if (document.getElementById("msxml").async) {
            xDoc = new ActiveXObject("Msxml.DOMDocument");
        }
    }
    if (xDoc && typeof xDoc.load != "undefined") {
        // Netscape 6+ needs this delay for loading; start two-stage sequence
        setTimeout("continueLoad("" + xFile + "")", 50);
    } else {
        var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
        if (reply) {
            history.back();
        }
    }
}
// initialize first time -- invoked onload
function initXMLOutline(xFile) {
    loadXMLDoc(xFile);
}

</script>
</head>
<body onload="initXMLOutline("SpecOutline.xml")">
<h1 style="font-size:1.2em; font-weight:bold">Expandable Navigation Menu (OPML)</h1>
<hr />
<div id="content"></div>
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>

Simple Tree in Javascript

 
<html>
<head>
<title>:: Tree Sample ::</title>
  <style type="text/css">
  body
{
  padding: 0;
  margin: 0;
}
.tree ul, .tree li
{
  list-style-type: none;
  margin: 0 0 0 2px;
  padding: 0;
  display: block;
}
.tree ul ul
{
  margin-left: 16px;
}
.tree a.selected
{
  background-color: lavender;
}
.tree .collapsed ul, .tree .collapsed span
{
  display: none;
}
.tree span
{
  display: block;
  margin: 0 0 0 16px;
  padding: 0;
  color: Gray;
  cursor: default;
  font-size: smaller;
}
.tree img
{
  border: none;
  text-align: left;
  vertical-align: middle;
  margin-right: 2px;
}
.tree img.plusminus
{
  width: 9px;
  height: 9px;
}
.tree a, .tree a:link, .tree a:visited, .tree a:active
{
  font-size: 10pt;
  color: navy;
  font-family: Verdana;
  text-decoration: none;
  text-align: left;
  margin: 0 2px 0 2px;
}
.tree a:hover
{
  text-decoration: underline;
  color: Blue;
}
  </style>
<script type="text/javascript">
/*
    _______________________            ______________________
    XML DOM Tree Component             Browsers support:
             Version 1.5                -> Internet Explorer
                                        -> Mozilla
    _____________________________       -> Opera
    Features:                           -> Firefox
     -> Server Side Independency        -> Konqueror
     -> Cross Browser Support
     -> Dynamic Loading
     -> XML Source
     -> Easy Customization


                              ______________________________
                                  Serghei Egoricev (c) 2006
                                    egoricev [at] gmail.ru
*/
// CSS import
Tree = function() {}
/*
  Use double click for navigate, single click for expand
*/
Tree.useDblClicks = true; // NOT IMPLEMENTED
Tree.saveNodesStateInCookies = true;
/*
  CSS classes
*/
Tree.expandedClassName = "";
Tree.collapsedClassName = "collapsed";
Tree.selectedClassName = "selected";
Tree.plusMinusClassName = "plusminus";
Tree.treeClass = "tree";
/*
  Images
*/
Tree.collapsedImage = "treeimg/collapsed.gif";
Tree.expandedImage = "treeimg/expanded.gif";
Tree.noChildrenImage = "treeimg/treenochild.gif";
/*
  Xml Attributes
*/
Tree.xmlCaption = "caption";
Tree.xmlUrl = "url";
Tree.xmlTarget = "target";
Tree.xmlRetreiveUrl = "retreiveUrl";
Tree.xmlIcon = "icon";
Tree.xmlExpanded = "expanded";
/*
  Text for loading
*/
Tree.loadingText = "Loading ...";
/*
  Private members
*/
Tree.obj = null;
Tree.instanceCount = 0;
Tree.instancePrefix = "alder";
Tree.cookiePrefix = "alder";
Tree.dwnldQueue = new Array;
Tree.dwnldCheckTimeout = 100;
/*
  Interval handler. Ckecks for new nodes loaded.
  Adds loaded nodes to the tree.
*/
Tree.checkLoad = function ()
{
  var i, httpReq;
  for (i = 0; i<Tree.dwnldQueue.length; i++)
    if ((httpReq = Tree.dwnldQueue[i][0]).readyState == 4 /*COMPLETED*/)
    {
      var node = Tree.dwnldQueue[i][1];
      // unqueue loaded item
      Tree.dwnldQueue.splice(i, 1);
      Tree.appendLoadedNode(httpReq, node);
      if (Tree.saveNodesStateInCookies)
        Tree.openAllSaved(Tree.getId(node));
    } // if
  // will call next time, not all nodes were loaded
  if (Tree.dwnldQueue.length != 0)
    window.setTimeout(Tree.checkLoad, Tree.dwnldCheckTimeout);
}
/*
  Adds loaded node to tree.
*/
Tree.appendLoadedNode = function (httpReq, node)
{
  // create DomDocument from loaded text
  var xmlDoc = Tree.loadXml(httpReq.responseText);
  // create tree nodes from xml loaded
  var newNode = Tree.convertXml2NodeList(xmlDoc.documentElement);
  // Add loading error handling here must be added
  Tree.appendNode(node, newNode);
}
/*
  Event handler when node is clicked.
  Navigates node link, and makes node selected.
*/
Tree.NodeClick = function (event)
{
  var node = event.srcElement /*IE*/ || event.target /*DOM*/;
  // <li><a><img> - <img> is capturing the event
  while (node.tagName != "A")
    node = node.parentNode;
  node.blur();
  node = node.parentNode;
  Tree.obj = Tree.getObj(node);
  Tree.expandNode(node);
  Tree.selectNode(node);
}
/*
  Event handler when plus/minus icon is clicked.
  Desides whenever node should be expanded or collapsed.
*/
Tree.ExpandCollapseNode = function (event)
{
  var anchorClicked = event.srcElement /*IE*/ || event.target /*DOM*/;
  // <li><a><img> - <img> is capturing the event
  while (anchorClicked.tagName != "A")
    anchorClicked  = anchorClicked.parentNode;
  anchorClicked.blur();
  var node = anchorClicked.parentNode;
  // node has no children, and cannot be expanded or collapsed
  if (node.empty)
    return;
  Tree.obj = Tree.getObj(node);
  if (Tree.isNodeCollapsed(node))
    Tree.expandNode(node);
  else
    Tree.collapseNode(node);
  // cancelling the event to prevent navigation.
  if (event.preventDefault == undefined)
  { // IE
    event.cancelBubble = true;
    event.returnValue = false;
  } // if
  else
  { // DOM
    event.preventDefault();
    event.cancelBubble = true;
  } // else
}
/*
  Determines if specified node is selected.
*/
Tree.isNodeSelected = function (node)
{
  return (node.isSelected == true) || (Tree.obj.selectedNode == node);
}
/*
  Determines if specified node is expanded.
*/
Tree.isNodeExpanded = function (node)
{
  return (Tree.expandedClassName == node.className) || (node.expanded == true);
}
/*
  Determines if specified node is collapsed.
*/
Tree.isNodeCollapsed = function (node)
{
  return (Tree.collapsedClassName == node.className) || (node.collapsed == true);
}
/*
  Determines if node currently selected is at same
  level as node specified (has same root).
*/
Tree.isSelectedNodeAtSameLevel = function (node)
{
  if (Tree.obj.selectedNode == null) // no node currently selected
    return false;
  var i, currentNode, children = node.parentNode.childNodes; // all nodes at same level (li->ul->childNodes)
  for (i = 0; i < children.length; i++)
    if ((currentNode = children[i]) != node && Tree.isNodeSelected(currentNode))
      return true;
  return false;
}
/*
  Mark node as selected and unmark prevoiusly selected.
  Node is marked with attribute and <a> is marked with css style
  to avoid mark <li> twise with css style expanded and selected.
*/
Tree.selectNode = function (node)
{
  if (Tree.isNodeSelected(node)) // already marked
    return;
  if (Tree.obj.selectedNode != null)
  {// unmark previously selected node.
    Tree.obj.selectedNode.isSelected = false;
    // remove css style from anchor
    Tree.getNodeAnchor(Tree.obj.selectedNode).className = "";
  } // if
  // collapse selected node if at same level
  if (Tree.isSelectedNodeAtSameLevel(node))
    Tree.collapseNode(Tree.obj.selectedNode);
  // mark node as selected
  Tree.obj.selectedNode = node;
  node.isSelected = true;
  Tree.getNodeAnchor(node).className = Tree.selectedClassName;
}
/*
  Expand collapsed node. Loads children nodes if needed.
*/
Tree.expandNode = function (node, avoidSaving)
{
  if (node.empty)
    return;
  Tree.getNodeImage(node).src = Tree.expandedImage;
  node.className = Tree.expandedClassName;
  node.expanded = true;
  node.collapsed = false;
  if (Tree.areChildrenNotLoaded(node))
    Tree.loadChildren(node);
  if (Tree.saveNodesStateInCookies && !avoidSaving)
    Tree.saveOpenedNode(node);
}
/*
  Collapse expanded node.
*/
Tree.collapseNode = function (node, avoidSaving)
{
  if (node.empty)
    return;
  Tree.getNodeImage(node).src = Tree.collapsedImage;
  node.className = Tree.collapsedClassName;
  node.collapsed = true;
  node.expanded = false;
  if (Tree.saveNodesStateInCookies && !avoidSaving)
    Tree.saveClosedNode(node);
}
/*
  Returns plus/minus <img> for node specified.
*/
Tree.getNodeImage = function (node)
{
  return node.getElementsByTagName("IMG")[0];
}
/*
  Returns retreiveUrl for node specified.
*/
Tree.getNodeRetreiveUrl = function (node)
{
  return node.getElementsByTagName("A")[0].href;
}
/*
  Returns node link <a> element (<li><a><img></a><a>)
*/
Tree.getNodeAnchor = function (node)
{
  return node.getElementsByTagName("A")[1];
}
/*
  Cancel loading children nodes.
*/
Tree.CancelLoad = function (event)
{ 
  var i, node = event.srcElement /*IE*/ || event.target /*DOM*/;
  while (node.tagName != "LI")
    node = node.parentNode;
  // search node in queue
  for (i = 0; i<Tree.dwnldQueue.length; i++)
    if (Tree.dwnldQueue[i][1] == node)
    {
      // remove from queue
      Tree.dwnldQueue.splice(i, 1);
      // collapse node
      Tree.collapseNode(node);
    } // if
}
/*
  Loads text from url specified and returns it as result.
*/
Tree.loadUrl = function (url, async)
{
  // create request object
  var httpReq = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  // prepare request
  httpReq.open("GET" /* method */, url /* url */, async == true /* async */, null /* login */, null /* password */);
  // send request
  httpReq.send(null);
  return async == true? httpReq : httpReq.responseText;
}
/*
  Creates XmlDom document from xml text string.
*/
Tree.loadXml = function (xmlString)
{
  var xmlDoc;
  if (window.DOMParser) /*Mozilla*/
    xmlDoc = new DOMParser().parseFromString(xmlString, "text/xml");
  else
  {
    if (document.implementation && document.implementation.createDocument)
      xmlDoc = document.implementation.createDocument("","", null); /*Konqueror*/
    else
      xmlDoc = new ActiveXObject("Microsoft.XmlDom"); /*IE*/
    
    xmlDoc.async = false;
    xmlDoc.loadXML(xmlString);
  } // else
  return xmlDoc;
}
/*
  Determines if children are loaded for node specified.
*/
Tree.areChildrenNotLoaded = function (node)
{
  return Tree.getNodeSpan(node) != null;
}
/*
  Finds loading span for node.
*/
Tree.getNodeSpan = function (node)
{
  var span = node.getElementsByTagName("SPAN");
  return (span.length > 0 && (span = span[0]).parentNode == node) ? span : null;
}
/*
  Enqueue load of children nodes for node specified.
*/
Tree.loadChildren = function (node)
{
  // get url with children
  var url = Tree.getNodeRetreiveUrl(node);
  // retreive xml text from url
  var httpReq = Tree.loadUrl(url, true);
  // enqueue node loading
  if (Tree.dwnldQueue.push(new Array (httpReq, node)) == 1)
    window.setTimeout(Tree.checkLoad, Tree.dwnldCheckTimeout);
}
/*
  Creates HTML nodes list from XML nodes.
*/
Tree.convertXml2NodeList = function (xmlElement)
{
  var ul = document.createElement("UL");
  var i, node, children = xmlElement.childNodes;
  var index = 0;
  for (i = 0; i<children.length; i++)
    if ((node = children[i]).nodeType == 1 /* ELEMENT_NODE */)
      ul.appendChild(Tree.convertXml2Node(node)).nodeIndex = index++;
  return ul;
}
/*
  Adds event handler
*/
Tree.addEvent = function (obj, fn, ev)
{
  if (ev == undefined) ev = "click"; // defaulting event to onclick
  if (obj.addEventListener)
    obj.addEventListener(ev, fn, false);
  else
    if (obj.attachEvent)
      obj.attachEvent("on"+ev, fn);
    else
      obj.onclick = fn;
}
/*
  Determines if xml node has child nodes inside.
*/
Tree.hasXmlNodeChildren = function (xmlElement)
{
  var i, children = xmlElement.childNodes;
  for (i = 0; i<children.length; i++)
    if ((node = children[i]).nodeType == 1 /* ELEMENT_NODE */)
      return true;
  return false;
}
/*
  Appends newly created node to node specified.
  Simply replace loading <span> at new node.
*/
Tree.appendNode = function (node, newNode)
{
  node.replaceChild(newNode, Tree.getNodeSpan(node));
}
/*
  Creates tree object. Loads it content from url specified.
*/
Tree.prototype.Create = function (url, obj)
{
  var div = document.createElement("DIV");
  div.id = Tree.instancePrefix + Tree.instanceCount++;
  div.className = Tree.treeClass;
  var xml = Tree.loadUrl(url, false);
  var xmlDoc = Tree.loadXml(xml);
  var newNode = Tree.convertXml2NodeList(xmlDoc.documentElement);
  div.appendChild(newNode);
  if (obj != undefined)
  {
    if (obj.appendChild) // is node
      obj.appendChild(div);
    else if (document.getElementById(obj)) // is node id
      document.getElementById(obj).appendChild(div);
  } // if
  else
    document.body.appendChild(div);
  if (Tree.saveNodesStateInCookies)
    Tree.openAllSaved(div.id);
}
/*
  Creates HTML tree node (<li>) from xml element.
*/
Tree.convertXml2Node = function (xmlElement)
{
  var li = document.createElement("LI");
  var a1 = document.createElement("A");
  var a2 = document.createElement("A");
  var i1 = document.createElement("IMG");
  var i2 = document.createElement("IMG");
  var hasChildNodes = Tree.hasXmlNodeChildren(xmlElement);
  var retreiveUrl = xmlElement.getAttribute(Tree.xmlRetreiveUrl);
  
  // plus/minus icon
  i1.className = Tree.plusMinusClassName;
  a1.appendChild(i1);
  Tree.addEvent(a1, Tree.ExpandCollapseNode);
  
  // plus/minus link
  a1.href = retreiveUrl != null && retreiveUrl.length != 0 ? retreiveUrl : "about:blank";
  li.appendChild(a1);
  
  // node icon
  i2.src = xmlElement.getAttribute(Tree.xmlIcon);
  a2.appendChild(i2);
  
  // node link
  a2.href = xmlElement.getAttribute(Tree.xmlUrl);
  a2.target = xmlElement.getAttribute(Tree.xmlTarget);
  a2.title = xmlElement.getAttribute(Tree.xmlCaption);
  a2.appendChild(document.createTextNode(xmlElement.getAttribute(Tree.xmlCaption)));
  Tree.addEvent(a2, Tree.NodeClick);
  li.appendChild(a2);
  
  // loading span
  if (!hasChildNodes && retreiveUrl != null && retreiveUrl.length != 0)
  {
    var span = document.createElement("SPAN");
    span.innerHTML = Tree.loadingText;
    Tree.addEvent(span, Tree.CancelLoad);
    li.appendChild(span);
  } // if
  
  // add children
  if (hasChildNodes)
    li.appendChild(Tree.convertXml2NodeList(xmlElement));
  if (hasChildNodes || retreiveUrl != null && retreiveUrl.length != 0)
  {
    if (xmlElement.getAttribute(Tree.xmlExpanded))
      Tree.expandNode(li, true);
    else
      Tree.collapseNode(li, true);
  } // if
  else
  {
    i1.src = Tree.noChildrenImage; // no children
    li.empty = true;
  } // else
  return li;
}
/*
  Retreives current tree object.
*/
Tree.getObj = function (node)
{
  var obj = node;
  while (obj != null && obj.tagName != "DIV")
    obj = obj.parentNode;
  return obj;
}
Tree.getId = function (node)
{
  var obj = Tree.getObj(node);
  if (obj)
    return obj.id;
  return "";
}
/*
  Retreives unique id for tree node.
*/
Tree.getNodeId = function (node)
{
  var id = "";
  var obj = node;
  while (obj != null && obj.tagName != "DIV")
  {
    if (obj.tagName == "LI" && obj.nodeIndex != null)
      id = "_" + obj.nodeIndex + id;
    obj = obj.parentNode;
  } // while
//  if (obj != null && obj.tagName == "DIV")
//    id = obj.id + "_" + id;
  return id;
}
/*
  Saves node as opened for reload.
*/
Tree.saveOpenedNode = function (node)
{
  var treeId = Tree.getId(node);
  var state = Tree.getAllNodesSavedState(treeId);
  var nodeState = Tree.getNodeId(node) + ",";
  if (state.indexOf(nodeState) == -1)
  {
    state += nodeState;
    Tree.setAllNodesSavedState(treeId, state);
  } // if
}
/*
  Saves node as closed for reload.
*/
Tree.saveClosedNode = function (node)
{
  var treeId = Tree.getId(node);
  var state = Tree.getAllNodesSavedState(treeId);
  state = state.replace(new RegExp(Tree.getNodeId(node) + ",", "g"), "");
  Tree.setAllNodesSavedState(treeId, state);
}
Tree.getAllNodesSavedState = function (treeId)
{
  var state = Tree.getCookie(Tree.cookiePrefix + "_" + treeId);
  return state == null ? "" : state;
}
Tree.setAllNodesSavedState = function (treeId, state)
{
  Tree.setCookie(Tree.cookiePrefix + "_" + treeId, state);
}
/*
  Enques list of all opened nodes
*/
Tree.openAllSaved = function(treeId)
{
  var nodes = Tree.getAllNodesSavedState(treeId).split(",");
  var i;
  for (i=0; i<nodes.length; i++)
  {
    var node = Tree.getNodeById(treeId, nodes[i]);
    if (node && Tree.isNodeCollapsed(node))
      Tree.expandNode(node);
  } // for
}
Tree.getNodeById = function(treeId, nodeId)
{
  var node = document.getElementById(treeId);
  if (!node)
    return null;
  var path = nodeId.split("_");
  var i;
  for (i=1; i<path.length; i++)
  {
    if (node != null)
    {
      node = node.firstChild;
      while (node != null && node.tagName != "UL")
        node = node.nextSibling;
    } // if
    if (node != null)
      node = node.childNodes[path[i]];
    else
      break;
  } // for
  return node;
}
Tree.setCookie = function(sName, sValue)
{
  document.cookie = sName + "=" + escape(sValue) + ";";
}
Tree.getCookie = function(sName)
{
  var a = document.cookie.split("; ");
  for (var i=0; i < a.length; i++)
  {
    var aa = a[i].split("=");
    if (sName == aa[0]) 
      return unescape(aa[1]);
  } // for
  return null;
}
</script>
</head>
<body>
<div id="tree"></div>
<hr/>
<script type="text/javascript">
new Tree().Create("tree.xml", "tree");
new Tree().Create("tree.xml");
</script>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/SimpleTree.zip">SimpleTree.zip( 7 k)</a>

Tree Control

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.ru/us.js.yimg.ru/lib/common/css/fonts_2.0.0-b3.css" />
<link rel="stylesheet" type="text/css" href="http://us.js2.yimg.ru/us.js.yimg.ru/lib/common/css/grids_2.0.0-b3.css" />
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css" />
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css" />
</head>
  
<body>
<div id="pageTitle">
  <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
</div> 

    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
    </script>
    <div id="logDiv"></div>
    
</div>
</div>

  <div id="content">
    <form id="mainForm" action="javscript:;">
  <div class="newsItem">
    <h3>Default TreeView Widget</h3>
    <p>
    
    </p>
    <div id="expandcontractdiv">
    <a href="javascript:tree.expandAll()">Expand all</a>
    <a href="javascript:tree.collapseAll()">Collapse all</a>
    </div>
    <div id="treeDiv1"></div>
  </div>
  </form>
  </div>
  
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var tree, nodeIndex;
  var nodes = [];
  
  function treeInit() {
    buildRandomTextNodeTree();
  }
  
  function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
      // tmpNode.collapse();
      // tmpNode.expand();
      // buildRandomTextBranch(tmpNode);
      buildLargeBranch(tmpNode);
    }
    tree.draw();
  }
  var callback = null;
  function buildLargeBranch(node) {
    if (node.depth < 10) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < 10; i++ ) {
        new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
      }
    }
  }
  function buildRandomTextBranch(node) {
    if (node.depth < 10) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
        var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
        buildRandomTextBranch(tmpNode);
      }
    }
  }
    YAHOO.util.Event.addListener(window, "load", treeInit);
</script>
  </body>
</html>

Tree navigation bar

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title>
<!-- The xtree script file -->
<script src="xtreeFrame_data/xtree.js">
</script>
<!-- Modify this file to change the way the tree looks -->

<link type="text/css" rel="stylesheet" href="xtreeFrame_data/xtree.css">
<style>
  body { background: white; color: black; }
  input { width: 120px; }
</style></head>

<body>
<!-- js file containing the tree content, edit this file to alter the menu,
     the menu will be inserted where this tag is located in the document -->
<script src="xtreeFrame_data/tree.js"></script>
<div id="webfx-tree-object-2" 
     ondblclick="webFXTreeHandler.toggle(this);" 
     class="webfx-tree-item" 
     onkeydown="return webFXTreeHandler.keydown(this, event)">
        <img id="webfx-tree-object-2-icon" class="webfx-tree-icon" 
             src="xtreeFrame_data/openfoldericon.png" 
             onclick="webFXTreeHandler.select(this);">
        <a href="http://www.wbex.ru" id="webfx-tree-object-2-anchor" 
           onfocus="webFXTreeHandler.focus(this);" 
           onblur="webFXTreeHandler.blur(this);" 
           target="main">Introduction</a></div>
        
        <div id="webfx-tree-object-2-cont" 
             class="webfx-tree-container" 
             style="display: block;">
        
        <div id="webfx-tree-object-3" 
             ondblclick="webFXTreeHandler.toggle(this);" 
             class="webfx-tree-item" 
             onkeydown="return webFXTreeHandler.keydown(this, event)">
            
             <img id="webfx-tree-object-3-plus" 
             src="xtreeFrame_data/Tminus.png" 
             onclick="webFXTreeHandler.toggle(this);">
             <img id="webfx-tree-object-3-icon" class="webfx-tree-icon" 
                  src="xtreeFrame_data/openfoldericon.png" 
                  onclick="webFXTreeHandler.select(this);">
             <a class="selected" 
                id="webfx-tree-object-3-anchor"> Documentation</a>
                
         </div>
         <div id="webfx-tree-object-3-cont" 
              class="webfx-tree-container" 
              style="display: block;">
              
              <div id="webfx-tree-object-4" 
                   ondblclick="webFXTreeHandler.toggle(this);" 
                   class="webfx-tree-item" 
                   onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-4-indent-0" 
                        src="xtreeFrame_data/I.png">
                        
                   <img id="webfx-tree-object-4-plus" 
                        src="xtreeFrame_data/T.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   
                   <img id="webfx-tree-object-4-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                        
                   <a href="http://www.wbex.ru" id="webfx-tree-object-4-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="main">Installation</a>
                   
                   </div>
                   
                   <div id="webfx-tree-object-4-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                   
                   <div id="webfx-tree-object-5" 
                        ondblclick="webFXTreeHandler.toggle(this);" 
                        class="webfx-tree-item" 
                        onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-5-indent-0" 
                        src="xtreeFrame_data/I.png">
                   
                   <img id="webfx-tree-object-5-plus" 
                        src="xtreeFrame_data/T.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   
                   <img id="webfx-tree-object-5-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                   
                   <a href="http://www.wbex.ru" 
                      id="webfx-tree-object-5-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="main">Configuration</a></div>
                      
                   <div id="webfx-tree-object-5-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                   
                   <div id="webfx-tree-object-6" 
                        ondblclick="webFXTreeHandler.toggle(this);" 
                        class="webfx-tree-item" 
                        onkeydown="return webFXTreeHandler.keydown(this, event)">
                   
                   <img id="webfx-tree-object-6-indent-0" 
                        src="xtreeFrame_data/I.png">
                   <img id="webfx-tree-object-6-plus" 
                        src="xtreeFrame_data/L.png" 
                        onclick="webFXTreeHandler.toggle(this);">
                   <img id="webfx-tree-object-6-icon" 
                        class="webfx-tree-icon" 
                        src="xtreeFrame_data/file.png" 
                        onclick="webFXTreeHandler.select(this);">
                   
                   <a href="http://www.wbex.ru" 
                      id="webfx-tree-object-6-anchor" 
                      onfocus="webFXTreeHandler.focus(this);" 
                      onblur="webFXTreeHandler.blur(this);" 
                      target="_blank">API</a></div>
                   
                   <div id="webfx-tree-object-6-cont" 
                        class="webfx-tree-container" 
                        style="display: none;"></div>
                </div>
                <div id="webfx-tree-object-7" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-7-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-7-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                
                <a href="http://www.wbex.ru" 
                   id="webfx-tree-object-7-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Download</a></div>
                
                <div id="webfx-tree-object-7-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                     
                <div id="webfx-tree-object-8" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-8-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-8-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                     
                <a href="http://www.wbex.ru" 
                   id="webfx-tree-object-8-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Support</a></div>
                
                <div id="webfx-tree-object-8-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                     
                <div id="webfx-tree-object-9" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                
                <img id="webfx-tree-object-9-plus" 
                     src="xtreeFrame_data/T.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-9-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                     
                <a href="http://www.wbex.ru" 
                   id="webfx-tree-object-9-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Known issues</a></div>
                
                <div id="webfx-tree-object-9-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                
                <div id="webfx-tree-object-10" 
                     ondblclick="webFXTreeHandler.toggle(this);" 
                     class="webfx-tree-item" 
                     onkeydown="return webFXTreeHandler.keydown(this, event)">
                     
                <img id="webfx-tree-object-10-plus" 
                     src="xtreeFrame_data/L.png" 
                     onclick="webFXTreeHandler.toggle(this);">
                
                <img id="webfx-tree-object-10-icon" 
                     class="webfx-tree-icon" 
                     src="xtreeFrame_data/file.png" 
                     onclick="webFXTreeHandler.select(this);">
                 
                <a href="http://www.wbex.ru" 
                   id="webfx-tree-object-10-anchor" 
                   onfocus="webFXTreeHandler.focus(this);" 
                   onblur="webFXTreeHandler.blur(this);" 
                   target="main">Themes &amp; icons</a></div>
                
                <div id="webfx-tree-object-10-cont" 
                     class="webfx-tree-container" 
                     style="display: none;"></div>
                </div>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/AfreeTreeMenuWebcontrol_files.zip">AfreeTreeMenuWebcontrol_files.zip( 9 k)</a>

Tree selection action handler

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DHTML Tree samples. dhtmlXTree - Action handlers</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Action handlers</h1>
  <!-- dhtmlXTree.css -->
  <style rel="STYLESHEET" type="text/css">
.defaultTreeTable{
      margin : 0;
      padding : 0;
      border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;   font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;     font-size : 12px;  -moz-user-select: none;  }
.standartTreeImage{ width:18px; height:18px;  overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px;   overflow:hidden;  }
.dragSpanDiv{   font-size : 12px;   border: thin solid 1 1 1 1; }
  
  </style>
  <!-- dhtmlXCommon.js -->
  <script>
 
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
 this.xmlDoc="";
 this.onloadAction=funcObject||null;
 this.mainObject=dhtmlObject||null;
 return this;
};
 
 dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
 this.check=function(){
 if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
 else{
 if(dhtmlObject.xmlDoc.readyState != 4)return false;
 else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
};
 return this.check;
};
 
 
 dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
 if(this.xmlDoc.responseXML){var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);var z=temp[0];}
 else var z=this.xmlDoc.documentElement;
 if(z)return z;
 alert("Incorrect XML");
 return document.createElement("DIV");
};
 
 
 dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
 try 
{
 var parser = new DOMParser();
 this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
 catch(e){
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.loadXML(xmlString);
}
 this.onloadAction(this.mainObject);
}
 dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
 try 
{
 this.xmlDoc = new XMLHttpRequest();
 this.xmlDoc.open("GET",filePath,true);
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
 this.xmlDoc.send(null);
}
 catch(e){
 if(document.implementation && document.implementation.createDocument)
{
 this.xmlDoc = document.implementation.createDocument("","",null);
 this.xmlDoc.onload = new this.waitLoadFunction(this);
}
 else
{
 this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 this.xmlDoc.async="true";
 this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
 this.xmlDoc.load(filePath);
}
};
 
 
function callerFunction(funcObject,dhtmlObject){
 this.handler=function(e){
 if(!e)e=event;
 funcObject(e,dhtmlObject);
 return true;
};
 return this.handler;
};
 
function getAbsoluteLeft(htmlObject){
 var xPos = htmlObject.offsetLeft;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 xPos+= temp.offsetLeft;
 temp = temp.offsetParent;
}
 return xPos;
}
 
function getAbsoluteTop(htmlObject){
 var yPos = htmlObject.offsetTop;
 var temp = htmlObject.offsetParent;
 while(temp != null){
 yPos+= temp.offsetTop;
 temp = temp.offsetParent;
}
 return yPos;
}
 
 
 
function convertStringToBoolean(inputString){if(typeof(inputString)=="string")inputString=inputString.toLowerCase();
 switch(inputString){
 case "1":
 case "true":
 case "yes":
 case "y":
 case 1: 
 case true: 
 return true;
 break;
 default: return false;
}
}
 
function getUrlSymbol(str){
 if(str.indexOf("?")!=-1)
 return "&"
 else
 return "?"
}
 
 
function dhtmlDragAndDropObject(){
 this.lastLanding=0;
 this.dragNode=0;
 this.dragStartNode=0;
 this.dragStartObject=0;
 this.tempDOMU=null;
 this.tempDOMM=null;
 this.waitDrag=0;
 if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
 window.dhtmlDragAndDrop=this;
 return this;
};
 
 dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
 htmlNode.onmousedown=null;
 htmlNode.dragStarter=null;
 htmlNode.dragLanding=null;
}
 dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
 htmlNode.onmousedown=this.preCreateDragCopy;
 htmlNode.dragStarter=dhtmlObject;
 this.addDragLanding(htmlNode,dhtmlObject);
}
 dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
 htmlNode.dragLanding=dhtmlObject;
}
 dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
 if(window.dhtmlDragAndDrop.waitDrag){
 window.dhtmlDragAndDrop.waitDrag=0;
 document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
 document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
 return;
}
 
 window.dhtmlDragAndDrop.waitDrag=1;
 window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
 window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
 window.dhtmlDragAndDrop.dragStartNode=this;
 window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
 document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
 document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
};
 dhtmlDragAndDropObject.prototype.callDrag=function(e){
 if(!e)e=window.event;
 dragger=window.dhtmlDragAndDrop;
 if(!dragger.dragNode){
 dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
 document.body.appendChild(dragger.dragNode);
 document.body.onmouseup=dragger.stopDrag;
 dragger.waitDrag=0;
}
 dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
 if(!e.srcElement)var z=e.target;else z=e.srcElement;
 dragger.checkLanding(z);
}
 dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
 if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
 this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
 else{
 if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
 else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
}
}
 dhtmlDragAndDropObject.prototype.stopDrag=function(e){
 dragger=window.dhtmlDragAndDrop;
 if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
 dragger.lastLanding=0;
 dragger.dragNode.parentNode.removeChild(dragger.dragNode);
 dragger.dragNode=0;
 dragger.dragStartNode=0;
 dragger.dragStartObject=0;
 document.body.onmouseup=dragger.tempDOMU;
 document.body.onmousemove=dragger.tempDOMM;
 dragger.tempDOMU=null;
 dragger.tempDOMM=null;
 dragger.waitDrag=0;
}
  
  </script>
  <!-- dhtmlXTree.js -->
  <script>
 
 
function dhtmlXTreeObject(htmlObject,width,height,rootId){
 if(typeof(htmlObject)!="object")
 this.parentObject=document.getElementById(htmlObject);
 else
 this.parentObject=htmlObject;
 this.mytype="tree";
 this.width=width;
 this.height=height;
 this.rootId=rootId;
 
 this.style_pointer="pointer";
 if(navigator.appName == "Microsoft Internet Explorer")this.style_pointer="hand";
 
 this.hfMode=0;
 this.nodeCut=0;
 this.XMLsource=0;
 this.XMLloadingWarning=0;
 this._globalIdStorage=new Array();
 this.globalNodeStorage=new Array();
 this._globalIdStorageSize=0;
 this.treeLinesOn=true;
 this.checkFuncHandler=0;
 this.openFuncHandler=0;
 this.dblclickFuncHandler=0;
 this.tscheck=false;
 this.timgen=true;
 
 this.imPath="treeGfx/";
 this.checkArray=new Array("iconUnCheckAll.gif","iconCheckAll.gif","iconCheckGray.gif");
 this.lineArray=new Array("line2.gif","line3.gif","line4.gif","blank.gif","blank.gif");
 this.minusArray=new Array("minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
 this.plusArray=new Array("plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
 this.imageArray=new Array("leaf.gif","folderOpen.gif","folderClosed.gif");
 this.cutImg= new Array(0,0,0);
 this.cutImage="but_cut.gif";
 
 this.dragger= new dhtmlDragAndDropObject();
 this.htmlNode=new dhtmlXTreeItemObject(this.rootId,"",0,this);
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].style.display="none";
 this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[0].className="hiddenRow";
 this.allTree=this._createSelf();
 this.allTree.appendChild(this.htmlNode.htmlNode);
 this.allTree.onselectstart=new Function("return false;");
 this.XMLLoader=new dtmlXMLLoaderObject(this._parseXMLTree,this);
 
 this.dragger.addDragLanding(this.allTree,this);
 return this;
};
 
function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode){
 this.htmlNode="";
 this.acolor="";
 this.scolor="";
 this.tr=0;
 this.childsCount=0;
 this.tempDOMM=0;
 this.tempDOMU=0;
 this.dragSpan=0;
 this.dragMove=0;
 this.span=0;
 this.closeble=1;
 this.childNodes=new Array();
 this.checkstate=0;
 this.treeNod=treeObject;
 this.label=itemText;
 this.parentObject=parentObject;
 this.actionHandler=actionHandler;
 this.images=new Array(treeObject.imageArray[0],treeObject.imageArray[1],treeObject.imageArray[2]);

 this.id=treeObject._globalIdStorageAdd(itemId,this);
 if(this.treeNod.checkBoxOff)this.htmlNode=this.treeNod._createItem(1,this,mode);
 else this.htmlNode=this.treeNod._createItem(0,this,mode);
 this.htmlNode.objBelong=this;
 return this;
};
 
 
 
 dhtmlXTreeObject.prototype._globalIdStorageAdd=function(itemId,itemObject){
 if(this._globalIdStorageFind(itemId)){d=new Date();itemId=d.valueOf()+"_"+itemId;return this._globalIdStorageAdd(itemId,itemObject);}
 this._globalIdStorage[this._globalIdStorageSize]=itemId;
 this.globalNodeStorage[this._globalIdStorageSize]=itemObject;
 this._globalIdStorageSize++;
 return itemId;
};
 
 dhtmlXTreeObject.prototype._globalIdStorageSub=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=this._globalIdStorage[this._globalIdStorageSize-1];
 this.globalNodeStorage[i]=this.globalNodeStorage[this._globalIdStorageSize-1];
 this._globalIdStorageSize--;
 this._globalIdStorage[this._globalIdStorageSize]=0;
 this.globalNodeStorage[this._globalIdStorageSize]=0;
}
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageFind=function(itemId){
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
 return this.globalNodeStorage[i];
 return 0;
};

 
 
 dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject)
{
 var tr =document.createElement("tr");
 var td1=document.createElement("td");
 var td2=document.createElement("td");
 td1.appendChild(document.createTextNode(" "));
 td2.colSpan=3;td2.appendChild(htmlObject);tr.appendChild(td1);tr.appendChild(td2);
 return tr;
};
 
 dhtmlXTreeObject.prototype.loadXMLString=function(xmlString){this.XMLLoader.loadXMLString(xmlString);};
 
 dhtmlXTreeObject.prototype.loadXML=function(file){this.XMLLoader.loadXML(file);};
 
 dhtmlXTreeObject.prototype._attachChildNode=function(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs,beforeNode){
 if(beforeNode)parentObject=beforeNode.parentObject;
 if(((parentObject.XMLload==0)&&(this.XMLsource))&&(!this.XMLloadingWarning))
{
 parentObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"itemId="+escape(parentObject.itemId));
}
 
 var Count=parentObject.childsCount;
 var Nodes=parentObject.childNodes;
 
 if((!itemActionHandler)&&(this.aFunc))itemActionHandler=this.aFunc;
 Nodes[Count]=new dhtmlXTreeItemObject(itemId,itemText,parentObject,this,itemActionHandler,1);
 
 if(image1)Nodes[Count].images[0]=image1;
 if(image2)Nodes[Count].images[1]=image2;
 if(image3)Nodes[Count].images[2]=image3;
 
 parentObject.childsCount++;
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 if(this.XMLloadingWarning)
 Nodes[Count].htmlNode.parentNode.parentNode.style.display="none";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "TOP": if(parentObject.childsCount>1)beforeNode=parentObject.htmlNode.childNodes[0].childNodes[1].nodem.previousSibling;break;
}
};
};
 
 if((beforeNode)&&(beforeNode.tr.nextSibling))
 parentObject.htmlNode.childNodes[0].insertBefore(tr,beforeNode.tr.nextSibling);
 else
 parentObject.htmlNode.childNodes[0].appendChild(tr);
 if(this.XMLsource)if((childs)&&(childs!=0))Nodes[Count].XMLload=0;else Nodes[Count].XMLload=1;
 Nodes[Count].tr=tr;
 tr.nodem=Nodes[Count];
 if(parentObject.itemId==0)
 tr.childNodes[0].className="hitemIddenRow";
 
 if(optionStr){
 var tempStr=optionStr.split(",");
 for(var i=0;i<tempStr.length;i++)
{
 switch(tempStr[i])
{
 case "SELECT": this.selectItem(itemId,false);break;
 case "CALL": this.selectItem(itemId,true);break;
 case "CHILD": Nodes[Count].XMLload=0;break;
 case "CHECKED": 
 if(this.XMLloadingWarning)
 this.setCheckList+=itemId;
 else
 this.setCheck(itemId,1);
 break;
 case "OPEN": Nodes[Count].openMe=1;break;
}
};
};
 if(!this.XMLloadingWarning)
{
 if(this._getOpenState(parentObject)<0)
 this.openItem(parentObject.id);
 
 if(beforeNode)
{
 this._correctPlus(beforeNode);
 this._correctLine(beforeNode);
}
 this._correctPlus(parentObject);
 this._correctLine(parentObject);
 this._correctPlus(Nodes[Count]);
 if(parentObject.childsCount>=2)
{
 this._correctPlus(Nodes[parentObject.childsCount-2]);
 this._correctLine(Nodes[parentObject.childsCount-2]);
}
 if(parentObject.childsCount!=2)this._correctPlus(Nodes[0]);
 if(this.tscheck)this._correctCheckStates(parentObject);
}
 
 return Nodes[Count];
};
 
 dhtmlXTreeObject.prototype.insertNewItem=function(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs){
 var parentObject=this._globalIdStorageFind(parentId);
 if(!parentObject)return(-1);
 return this._attachChildNode(parentObject,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs);
};
 
 dhtmlXTreeObject.prototype._parseXMLTree=function(dhtmlObject,node,parentId,level){
 dhtmlObject.XMLloadingWarning=1;
 var nodeAskingCall="";
 if(!node){
 node=dhtmlObject.XMLLoader.getXMLTopNode("tree");
 parentId=node.getAttribute("id");
 dhtmlObject.setCheckList="";
}
 for(var i=0;i<node.childNodes.length;i++)
{
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "item"))
{
 var name=node.childNodes[i].getAttribute("text");
 var cId=node.childNodes[i].getAttribute("id");
 
 var im0=node.childNodes[i].getAttribute("im0");
 var im1=node.childNodes[i].getAttribute("im1");
 var im2=node.childNodes[i].getAttribute("im2");
 
 var aColor=node.childNodes[i].getAttribute("aCol");
 var sColor=node.childNodes[i].getAttribute("sCol");
 
 var chd=node.childNodes[i].getAttribute("child");
 
 var atop=node.childNodes[i].getAttribute("top");
 var aopen=node.childNodes[i].getAttribute("open");
 var aselect=node.childNodes[i].getAttribute("select");
 var acall=node.childNodes[i].getAttribute("call");
 var achecked=node.childNodes[i].getAttribute("checked");
 var closeable=node.childNodes[i].getAttribute("closeable");
 
 var zST="";
 if(aselect)zST+=",SELECT";
 if(atop)zST+=",TOP";
 if(acall)nodeAskingCall=cId;
 if(achecked)zST+=",CHECKED";
 if((aopen)&&(aopen!="0"))zST+=",OPEN";
 
 var temp=dhtmlObject._globalIdStorageFind(parentId);
 temp.XMLload=1;
 dhtmlObject.insertNewItem(parentId,cId,name,0,im0,im1,im2,zST,chd);
 if(dhtmlObject.parserExtension)dhtmlObject.parserExtension._parseExtension(node.childNodes[i],dhtmlObject.parserExtension,cId,parentId);
 dhtmlObject.setItemColor(cId,aColor,sColor);
 if((closeable=="0")||(closeable=="1"))dhtmlObject.setItemCloseable(cId,closeable);
 var zcall=dhtmlObject._parseXMLTree(dhtmlObject,node.childNodes[i],cId,1);
 if(zcall!="")nodeAskingCall=zcall;
}
 else
 if((node.childNodes[i].nodeType==1)&&(node.childNodes[i].tagName == "userdata"))
{
 var name=node.childNodes[i].getAttribute("name");
 if((name)&&(node.childNodes[i].childNodes[0])){
 dhtmlObject.setUserData(parentId,name,node.childNodes[i].childNodes[0].data);
};
};
};
 if(!level){
 dhtmlObject.lastLoadedXMLId=parentId;
 dhtmlObject._redrawFrom(dhtmlObject);
 dhtmlObject.XMLloadingWarning=0;
 var chArr=dhtmlObject.setCheckList.split(",");
 for(var n=0;n<chArr.length;n++)
 if(chArr[n])dhtmlObject.setCheck(chArr[n],1);
 if(nodeAskingCall!="")dhtmlObject.selectItem(nodeAskingCall,true);
}
 return nodeAskingCall;
};
 
 
 dhtmlXTreeObject.prototype._redrawFrom=function(dhtmlObject,itemObject){
 if(!itemObject){
 var tempx=dhtmlObject._globalIdStorageFind(dhtmlObject.lastLoadedXMLId);
 dhtmlObject.lastLoadedXMLId=-1;
 if(!tempx)return 0;
}
 else tempx=itemObject;
 for(var i=0;i<tempx.childsCount;i++)
{
 if(!itemObject)tempx.childNodes[i].htmlNode.parentNode.parentNode.style.display="";
 if(tempx.childNodes[i].openMe==1)
 for(var zy=0;zy<tempx.childNodes[i].childNodes.length;zy++)
 tempx.childNodes[i].htmlNode.childNodes[0].childNodes[zy+1].style.display="";
 dhtmlObject._redrawFrom(dhtmlObject,tempx.childNodes[i]);
 dhtmlObject._correctLine(tempx.childNodes[i]);
 dhtmlObject._correctPlus(tempx.childNodes[i]);
};
 dhtmlObject._correctLine(tempx);
 dhtmlObject._correctPlus(tempx);
};
 
 dhtmlXTreeObject.prototype._createSelf=function(){
 var div=document.createElement("div");
 div.className="containerTableStyle";
 div.style.width=this.width;
 div.style.height=this.height;
 this.parentObject.appendChild(div);
 return div;
};
 
 dhtmlXTreeObject.prototype._xcloseAll=function(itemObject)
{
 if(this.rootId!=itemObject.id)this._HideShow(itemObject,1);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xcloseAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._xopenAll=function(itemObject)
{
 this._HideShow(itemObject,2);
 for(var i=0;i<itemObject.childsCount;i++)
 this._xopenAll(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._correctPlus=function(itemObject){
 var workArray=this.lineArray;
 if((this.XMLsource)&&(!itemObject.XMLload))
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
 else
try{
 if(itemObject.childsCount)
{
 if(itemObject.htmlNode.childNodes[0].childNodes[1].style.display!="none")
{
 var workArray=this.minusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[1];
}
 else
{
 var workArray=this.plusArray;
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[2];
}
}
 else
{
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[2].childNodes[0].src=this.imPath+itemObject.images[0];
}
}
 catch(e){};
 
 var tempNum=2;
 if(!itemObject.treeNod.treeLinesOn)itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[3];
 else{
 if(itemObject.parentObject)tempNum=this._getCountStatus(itemObject.id,itemObject.parentObject);
 itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src=this.imPath+workArray[tempNum];
}
};
 
 dhtmlXTreeObject.prototype._correctLine=function(itemObject){
 var sNode=itemObject.parentObject;
 try{
 if(sNode)
 if((this._getLineStatus(itemObject.id,sNode)==0)||(!this.treeLinesOn))
{
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="";
}
}
 else
 for(var i=1;i<=itemObject.childsCount;i++)
{
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundImage="url("+this.imPath+"line1.gif)";
 itemObject.htmlNode.childNodes[0].childNodes[i].childNodes[0].style.backgroundRepeat="repeat-y";
}
}
 catch(e){};
};
 
 dhtmlXTreeObject.prototype._getCountStatus=function(itemId,itemObject){
 try{
 if(itemObject.childsCount<=1){if(itemObject.id==this.rootId)return 4;else return 0;}
 
 if(itemObject.htmlNode.childNodes[0].childNodes[1].nodem.id==itemId)if(!itemObject.id)return 2;else return 1;
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
}
 catch(e){};
 return 1;
};
 
 dhtmlXTreeObject.prototype._getLineStatus =function(itemId,itemObject){
 if(itemObject.htmlNode.childNodes[0].childNodes[itemObject.childsCount].nodem.id==itemId)return 0;
 return 1;
}
 
 dhtmlXTreeObject.prototype._HideShow=function(itemObject,mode){
 if(((this.XMLsource)&&(!itemObject.XMLload))&&(!mode)){itemObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemObject.id));return;};
 var Nodes=itemObject.htmlNode.childNodes[0].childNodes;var Count=Nodes.length;
 if(Count>1){
 if(((Nodes[1].style.display!="none")||(mode==1))&&(mode!=2))nodestyle="none";else nodestyle="";
 for(var i=1;i<Count;i++)
 Nodes[i].style.display=nodestyle;
}
 this._correctPlus(itemObject);
}
 
 dhtmlXTreeObject.prototype._getOpenState=function(itemObject){
 var z=itemObject.htmlNode.childNodes[0].childNodes;
 if(z.length<=1)return 0;
 if(z[1].style.display!="none")return 1;
 else return -1;
}
 
 
 
 dhtmlXTreeObject.prototype.onRowClick2=function(){
 if(this.parentObject.treeNod.dblclickFuncHandler)if(!this.parentObject.treeNod.dblclickFuncHandler(this.parentObject.id))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 dhtmlXTreeObject.prototype.onRowClick=function(){
 if(this.parentObject.treeNod.openFuncHandler)if(!this.parentObject.treeNod.openFuncHandler(this.parentObject.id,this.parentObject.treeNod._getOpenState(this.parentObject)))return 0;
 if((this.parentObject.closeble)&&(this.parentObject.closeble!="0"))
 this.parentObject.treeNod._HideShow(this.parentObject);
 else
 this.parentObject.treeNod._HideShow(this.parentObject,2);
};
 
 
 dhtmlXTreeObject.prototype.onRowSelect=function(e,htmlObject,mode){
 if(!htmlObject)htmlObject=this;
 htmlObject.childNodes[0].className="selectedTreeRow";
 if(htmlObject.parentObject.scolor)htmlObject.parentObject.span.style.color=htmlObject.parentObject.scolor;
 if((htmlObject.parentObject.treeNod.lastSelected)&&(htmlObject.parentObject.treeNod.lastSelected!=htmlObject))
{
 htmlObject.parentObject.treeNod.lastSelected.childNodes[0].className="standartTreeRow";
 if(htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor)htmlObject.parentObject.treeNod.lastSelected.parentObject.span.style.color=htmlObject.parentObject.treeNod.lastSelected.parentObject.acolor;
}
 htmlObject.parentObject.treeNod.lastSelected=htmlObject;
 if(!mode){if(htmlObject.parentObject.actionHandler)htmlObject.parentObject.actionHandler(htmlObject.parentObject.id);}
};
 

 
 
dhtmlXTreeObject.prototype._correctCheckStates=function(dhtmlObject){
 if(!this.tscheck)return;
 if(dhtmlObject.id==this.rootId)return;
 var act=dhtmlObject.htmlNode.childNodes[0].childNodes;
 var flag1=0;var flag2=0;
 if(act.length<2)return;
 for(var i=1;i<act.length;i++)
 if(act[i].nodem.checkstate==0)flag1=1;
 else if(act[i].nodem.checkstate==1)flag2=1;
 else{flag1=1;flag2=1;break;}
 if((flag1)&&(flag2))this._setCheck(dhtmlObject,"notsure");
 else if(flag1)this._setCheck(dhtmlObject,false);
 else this._setCheck(dhtmlObject,true);
 
 this._correctCheckStates(dhtmlObject.parentObject);
}
 
 
 dhtmlXTreeObject.prototype.onCheckBoxClick=function(e){
 if(this.treeNod.tscheck)
 if(this.parentObject.checkstate==1)this.treeNod._setSubChecked(false,this.parentObject);
 else this.treeNod._setSubChecked(true,this.parentObject);
 else
 if(this.parentObject.checkstate==1)this.treeNod._setCheck(this.parentObject,false);
 else this.treeNod._setCheck(this.parentObject,true);
 this.treeNod._correctCheckStates(this.parentObject.parentObject);
 if(this.treeNod.checkFuncHandler)return(this.treeNod.checkFuncHandler(this.parentObject.id,this.parentObject.checkstate));
 else return true;
};
 
 dhtmlXTreeObject.prototype._createItem=function(acheck,itemObject,mode){
 var table=document.createElement("table");
 table.cellSpacing=0;table.cellPadding=0;
 table.border=0;
 if(this.hfMode)table.style.tableLayout="fixed";
 table.style.margin=0;table.style.padding=0;
 
 var tbody=document.createElement("tbody");
 var tr=document.createElement("tr");
 var td1=document.createElement("td");
 td1.className="standartTreeImage";
 var img0=document.createElement("img");
 img0.border="0";td1.appendChild(img0);img0.style.padding=0;
 
 var td11=document.createElement("td");
 var inp=document.createElement("img");inp.checked=0;inp.src=this.imPath+this.checkArray[0];inp.style.width="16px";inp.style.height="16px";
 if(!acheck)inp.style.display="none";
 td11.appendChild(inp);
 td11.width="16px";
 inp.onclick=this.onCheckBoxClick;
 inp.treeNod=this;
 inp.parentObject=itemObject;
 var td12=document.createElement("td");
 td12.className="standartTreeImage";
 var img=document.createElement("img");img.onmousedown=this._preventNsDrag;
 img.border="0";
 if(!mode)img.src=this.imPath+this.imageArray[0];
 td12.appendChild(img);img.style.padding=0;img.style.margin=0;
 if(this.timgen)
{img.style.width="18px";img.style.height="18px";}
 else
{img.style.width="0px";img.style.height="0px";}
 
 var td2=document.createElement("td");
 td2.noWrap=true;
 itemObject.span=document.createElement("span");
 itemObject.span.className="standartTreeRow";
 td2.style.width="100%";
 itemObject.span.appendChild(document.createTextNode(itemObject.label));
 td2.appendChild(itemObject.span);
 td2.parentObject=itemObject;td1.parentObject=itemObject;
 td2.onclick=this.onRowSelect;td1.onclick=this.onRowClick;td2.ondblclick=this.onRowClick2;
 
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td2,this);
 
 td2.style.verticalAlign="";
 td2.style.cursor=this.style_pointer;
 tr.appendChild(td1);tr.appendChild(td11);tr.appendChild(td12);
 tr.appendChild(td2);
 tbody.appendChild(tr);
 table.appendChild(tbody);
 return table;
};
 
 
 
 dhtmlXTreeObject.prototype.setImagePath=function(newPath){this.imPath=newPath;};
 
 
 
 dhtmlXTreeObject.prototype.setOnClickHandler=function(func){if(typeof(func)=="function")this.aFunc=func;else this.aFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setXMLAutoLoading=function(filePath){this.XMLsource=filePath;};
 
 dhtmlXTreeObject.prototype.setOnCheckHandler=function(func){if(typeof(func)=="function")this.checkFuncHandler=func;else this.checkFuncHandler=eval(func);};
 
 
 
 dhtmlXTreeObject.prototype.setOnOpenHandler=function(func){if(typeof(func)=="function")this.openFuncHandler=func;else this.openFuncHandler=eval(func);};
 
 
 dhtmlXTreeObject.prototype.setOnDblClickHandler=function(func){if(typeof(func)=="function")this.dblclickFuncHandler=func;else this.dblclickFuncHandler=eval(func);};
 
 
 
 


 
 dhtmlXTreeObject.prototype.openAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xopenAll(temp);
};
 
 
 dhtmlXTreeObject.prototype.getOpenState=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return "";
 return this._getOpenState(temp);
};
 
 
 dhtmlXTreeObject.prototype.closeAllItems=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._xcloseAll(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.setUserData=function(itemId,name,value){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(name=="hint")sNode.htmlNode.childNodes[0].childNodes[0].title=value;
 sNode[name]=value;
};
 
 
 dhtmlXTreeObject.prototype.getUserData=function(itemId,name){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return eval("sNode."+name);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemId=function()
{
 if(this.lastSelected)
 if(this._globalIdStorageFind(this.lastSelected.parentObject.id))
 return this.lastSelected.parentObject.id;
 return("");
};
 
 
 dhtmlXTreeObject.prototype.getItemColor=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var res= new Object();
 if(temp.acolor)res.acolor=temp.acolor;
 if(temp.acolor)res.scolor=temp.scolor;
 return res;
};
 
 dhtmlXTreeObject.prototype.setItemColor=function(itemId,defaultColor,selectedColor)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else{
 if((this.lastSelected)&&(temp.tr==this.lastSelected.parentObject.tr))
{if(selectedColor)temp.span.style.color=selectedColor;}
 else 
{if(defaultColor)temp.span.style.color=defaultColor;}
 
 if(selectedColor)temp.scolor=selectedColor;
 if(defaultColor)temp.acolor=defaultColor;
}
};
 
 
 dhtmlXTreeObject.prototype.getItemText=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return(temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML);
};
 
 dhtmlXTreeObject.prototype.getParentId=function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if((!temp)||(!temp.parentObject))return "";
 return temp.parentObject.id;
};

 
 dhtmlXTreeObject.prototype.changeItemId=function(itemId,newItemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.id=newItemId;
 for(var i=0;i<this._globalIdStorageSize;i++)
 if(this._globalIdStorage[i]==itemId)
{
 this._globalIdStorage[i]=newItemId;
}
};
 
 
 dhtmlXTreeObject.prototype.doCut=function(){
 if(this.nodeCut)this.clearCut();
 this.nodeCut=this.lastSelected;
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 this.cutImg[0]=tempa.images[0];
 this.cutImg[1]=tempa.images[1];
 this.cutImg[2]=tempa.images[2];
 tempa.images[0]=tempa.images[1]=tempa.images[2]=this.cutImage;
 this._correctPlus(tempa);
}
};
 
 
 dhtmlXTreeObject.prototype.doPaste=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this.nodeCut){
 if((!this._checkParenNodes(this.nodeCut.parentObject.id,temp))&&(id!=this.nodeCut.parentObject.parentObject.id))
 this._moveNode(temp,this.nodeCut.parentObject);
 this.clearCut();
}
};
 
 
 dhtmlXTreeObject.prototype.clearCut=function(){
 if(this.nodeCut)
{
 var tempa=this.nodeCut.parentObject;
 tempa.images[0]=this.cutImg[0];
 tempa.images[1]=this.cutImg[1];
 tempa.images[2]=this.cutImg[2];
 if(tempa.parentObject)this._correctPlus(tempa);
 if(tempa.parentObject)this._correctLine(tempa);
 this.nodeCut=0;
}
};
 

 
 dhtmlXTreeObject.prototype._moveNode=function(itemObject,targetObject){
 if(this.dragFunc)if(!this.dragFunc(itemObject.id,targetObject.id))return false;
 if((targetObject.XMLload==0)&&(this.XMLsource))
{
 targetObject.XMLload=1;this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(targetObject.id));
}
 this.openItem(targetObject.id);
 var oldTree=itemObject.treeNod;
 var c=itemObject.parentObject.childsCount;
 var z=itemObject.parentObject;
 var Count=targetObject.childsCount;var Nodes=targetObject.childNodes;
 Nodes[Count]=itemObject;
 itemObject.treeNod=targetObject.treeNod;
 targetObject.childsCount++;
 
 var tr=this._drawNewTr(Nodes[Count].htmlNode);
 targetObject.htmlNode.childNodes[0].appendChild(tr);
 
 itemObject.parentObject.htmlNode.childNodes[0].removeChild(itemObject.tr);
 
 for(var i=0;i<z.childsCount;i++)
 if(z.childNodes[i].id==itemObject.id){
 z.childNodes[i]=0;
 break;}
 oldTree._compressChildList(z.childsCount,z.childNodes);
 z.childsCount--;
 itemObject.tr=tr;
 tr.nodem=itemObject;
 itemObject.parentObject=targetObject;
 if(oldTree!=targetObject.treeNod){if(itemObject.treeNod._registerBranch(itemObject,oldTree))return;this._clearStyles(itemObject);};
 
 
 if(c>1){oldTree._correctPlus(z.childNodes[c-2]);
 oldTree._correctLine(z.childNodes[c-2]);}
 this._correctPlus(targetObject);
 this._correctLine(targetObject);
 oldTree._correctPlus(z);
 this._correctLine(itemObject);
 this._correctPlus(Nodes[Count]);
 if(targetObject.childsCount>=2)
{
 this._correctPlus(Nodes[targetObject.childsCount-2]);
 this._correctLine(Nodes[targetObject.childsCount-2]);
}
 if(this.tscheck)this._correctCheckStates(targetObject);
 if(oldTree.tscheck)oldTree._correctCheckStates(z);
 return true;
};
 
 
dhtmlXTreeObject.prototype._checkParenNodes=function(itemId,htmlObject,shtmlObject){
 if(shtmlObject){if(shtmlObject.parentObject.id==htmlObject.id)return 1;}
 if(htmlObject.id==itemId)return 1;
 if(htmlObject.parentObject)return this._checkParenNodes(itemId,htmlObject.parentObject);else return 0;
};
 
 
 
 
 dhtmlXTreeObject.prototype._clearStyles=function(itemObject){
 var td1=itemObject.htmlNode.childNodes[0].childNodes[0].childNodes[1];
 var td3=td1.nextSibling.nextSibling;
 
 if(this.checkBoxOff){td1.childNodes[0].style.display="";td1.childNodes[0].onclick=this.onCheckBoxClick;}
 else td1.childNodes[0].style.display="none";
 td1.childNodes[0].treeNod=this;
 
 this.dragger.removeDraggableItem(td3);
 if(this.dragAndDropOff)this.dragger.addDraggableItem(td3,this);
 td3.childNodes[0].className="standartTreeRow";
 td3.onclick=this.onRowSelect;td3.ondblclick=this.onRowClick2;
 td1.previousSibling.onclick=this.onRowClick;

 this._correctLine(itemObject);
 this._correctPlus(itemObject);
 for(var i=0;i<itemObject.childsCount;i++)this._clearStyles(itemObject.childNodes[i]);
};
 
 dhtmlXTreeObject.prototype._registerBranch=function(itemObject,oldTree){
 
 itemObject.id=this._globalIdStorageAdd(itemObject.id,itemObject);
 itemObject.treeNod=this;
 if(oldTree)oldTree._globalIdStorageSub(itemObject.id);
 for(var i=0;i<itemObject.childsCount;i++)
 this._registerBranch(itemObject.childNodes[i],oldTree);
 return 0;
};
 
 
 
 dhtmlXTreeObject.prototype.enableThreeStateCheckboxes=function(mode){this.tscheck=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableTreeImages=function(mode){this.timgen=convertStringToBoolean(mode);};
 
 
 
 dhtmlXTreeObject.prototype.enableFixedMode=function(mode){this.hfMode=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype.enableCheckBoxes=function(mode){this.checkBoxOff=convertStringToBoolean(mode);};
 
 dhtmlXTreeObject.prototype.setStdImages=function(image1,image2,image3){
 this.imageArray[0]=image1;this.imageArray[1]=image2;this.imageArray[2]=image3;};
 
 dhtmlXTreeObject.prototype.enableTreeLines=function(mode){
 this.treeLinesOn=convertStringToBoolean(mode);
}
 
 dhtmlXTreeObject.prototype.setImageArrays=function(arrayName,image1,image2,image3,image4,image5){
 switch(arrayName){
 case "plus": this.plusArray[0]=image1;this.plusArray[1]=image2;this.plusArray[2]=image3;this.plusArray[3]=image4;this.plusArray[4]=image5;break;
 case "minus": this.minusArray[0]=image1;this.minusArray[1]=image2;this.minusArray[2]=image3;this.minusArray[3]=image4;this.minusArray[4]=image5;break;
}
};
 
 
 dhtmlXTreeObject.prototype.openItem=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 this._HideShow(temp,2);
 if((temp.parentObject)&&(this._getOpenState(temp.parentObject)<0))
 this.openItem(temp.parentObject.id);
};
 
 
 dhtmlXTreeObject.prototype.closeItem=function(itemId){
 if(this.rootId==itemId)return 0;
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(temp.closeble)
 this._HideShow(temp,1);
};
 dhtmlXTreeObject.prototype.getLevel=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 return this._getNodeLevel(temp,0);
};
 
 
 
 dhtmlXTreeObject.prototype.setItemCloseable=function(itemId,flag)
{
 flag=convertStringToBoolean(flag);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.closeble=flag;
};
 
 
 dhtmlXTreeObject.prototype._getNodeLevel=function(itemObject,count){
 if(itemObject.parentObject)return this._getNodeLevel(itemObject.parentObject,count+1);
 return(count);
};
 
 
 dhtmlXTreeObject.prototype.hasChildren=function(itemId){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 else 
{
 if((this.XMLsource)&&(!temp.XMLload))return true;
 else 
 return temp.childsCount;
};
};
 
 
 
 dhtmlXTreeObject.prototype.setItemText=function(itemId,newLabel)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.label=newLabel;
 temp.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML=newLabel;
};
 
 dhtmlXTreeObject.prototype.refreshItem=function(itemId){
 if(!itemId)itemId=this.rootId;
 var temp=this._globalIdStorageFind(itemId);
 this.deleteChildItems(itemId);
 this.loadXML(this.XMLsource+getUrlSymbol(this.XMLsource)+"id="+escape(itemId));
};
 
 
 dhtmlXTreeObject.prototype.setItemImage2=function(itemId,image1,image2,image3){
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 temp.images[1]=image2;
 temp.images[2]=image3;
 temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 dhtmlXTreeObject.prototype.setItemImage=function(itemId,image1,image2)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(image2)
{
 temp.images[1]=image1;
 temp.images[2]=image2;
}
 else temp.images[0]=image1;
 this._correctPlus(temp);
};
 
 
 
 dhtmlXTreeObject.prototype.getSubItems =function(itemId)
{
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 var z="";
 for(i=0;i<temp.childsCount;i++)
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 return z;
};
 
 dhtmlXTreeObject.prototype.getAllSubItems =function(itemId){
 return this._getAllSubItems(itemId);
}
 
 
 dhtmlXTreeObject.prototype._getAllSubItems =function(itemId,z,node)
{
 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 
 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};


 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){
 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}
 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 


 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};
 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};

 
 
 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="standartTreeRow";
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className="selectedTreeRow";
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement("div");
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}








 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}
dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);
}
dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}

  </script>    
  <table>
    <tr>
      <td>
        <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
      </td>
      <td rowspan="2" style="padding-left:25" valign="top">
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
  <hr>
<XMP>
<div id="treeBox" style="width:200;height:200"></div>
<script>
  tree=new dhtmlXTreeObject(document.getElementById("treeBox"),"100%","100%",0);
  
  ...
  tree.setDragHandler(onDrop);//set function object to call on drop
  tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
  tree.setOnOpenHandler(aFunc);//set function to call on open/close node
  tree.setOnCheckHandler(aFunc);//set function to call on open/close node
  tree.setOnDblClickHandler(aFunc);//set function to call on dbl click
</script>
</XMP>  
    <li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
    <li>Dropped node ID and new parent node ID  will be passed to function specified as argument for setDragFunction(funcObj)</li>
    <li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
    <li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
  <script>
      function tonclick(id){
        alert("Item "+tree.getItemText(id)+" was selected");
      };
      function tondblclick(id){
        alert("Item "+tree.getItemText(id)+" was doubleclicked");
      };      
      function tondrag(id,id2){
        return confirm("Do you want to move node "+tree.getItemText(id)+" to item "+tree.getItemText(id2)+"?");
      };
      function tonopen(id,mode){
        return confirm("Do you want to "+(mode>0?"close":"open")+" node "+tree.getItemText(id)+"?");
      };
      function toncheck(id,state){
        alert("Item "+tree.getItemText(id)+" was " +((state)?"checked":"unchecked"));
      };
      
      tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
      tree.setImagePath("treeImgs/");
      tree.enableCheckBoxes(1);
      tree.enableDragAndDrop(1);
      tree.setOnOpenHandler(tonopen);
      tree.setOnClickHandler(tonclick);
      tree.setOnCheckHandler(toncheck);
      tree.setOnDblClickHandler(tondblclick);
      tree.setDragHandler(tondrag);
      
      tree.loadXML("treeImgs/tree3.xml");
  </script>
<br><br>
</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/fancyTree.zip">fancyTree.zip( 110 k)</a>

Tree which accepts drag and drop event in JavaScript (IE)

 
<html>
<head>
<title>DynAPI Examples - List</title>
<script language="Javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/")
dynapi.library.include("dynapi.api")
dynapi.library.include("dynapi.api.ext.DragEvent")
dynapi.library.include("dynapi.gui.NodeItem")
dynapi.library.include("dynapi.gui.Tree")
</script>
<script language="Javascript">
  var file=dynapi.functions.getImage("./dynapiexamples/images/file.gif");
  var Draglayer = new DynLayer(file.getHTML(),220,20);
  Draglayer.setHTML("<center>"+file.getHTML()+"<br>D&D Layer</center>");
  tree = new Tree(true)
  tree.setLocation(350,20);
  tree.setWidth(250);
  tree.boldOnSelect(true);
  tree.itemsResize(false,true);
  tree.add("root",1,"Content1","value1");
  tree.add("root",2,"Content2","value2");
  tree.add("root",3,"Content3","value3");
    tree.add(3,31,"Content4","value4");
    tree.add(3,32,"Content5","value5");
    tree.add(3,33,"Content6","value6");
    tree.add(3,34,"Content7","value7");
  tree.add("root",4,"Content8","value8");
    tree.add(4,41,"Content9","value9");
      tree.add(41,441,"Content10","value10");
  tree.add("root",5,"Content8","value11");
    tree.add(5,51,"Content9","value12");
      tree.add(51,551,"Content10","value13");
  Draglayer.setZIndex(100);
  DragEvent.enableDragEvents(Draglayer);
  var mylistener={
  ondrop:function(e)
    {
      var o=e.getSource();
      alert(o.getValue());
    }
  }
  tree.addItemEventListener(mylistener);
  dynapi.document.addChild(Draglayer);
  dynapi.document.addChild(tree);
  var icon = new DynLayer("<img src="./dynapiexamples/images/file.gif">",0,0,20,24);
  icon.setMinimumSize(20,24);
  icon.setMaximumSize(20,24);
  for(var i in tree.items) {
    if(i!=tree.root_name)
    {
      tree.items[i].node.setDragEnabled(true,null,true);
      tree.items[i].node.setDragIcon(icon);
    }
  }
</script>
</head>
<body bgcolor="#ffffff">
<script>
    dynapi.document.insertAllChildren();
</script>
<br>Set Width: <a href="#" onClick="tree.setWidth(150)">150</a>, <a href="#" onClick="tree.setWidth(250)">250</a>, <a href="#" onClick="tree.setWidth(350)">350</a>
<br>Set Mode: <a href="#" onClick="tree.setSelectionMode(true)">Multi</a>, <a href="#" onClick="tree.setSelectionMode(false)">Single</a>
<br><a href="#" onClick="tree.removeSelected()">Remove selected item</a>
<br>Set Borders: <a href="#" onClick="tree.setBorders(0)">0</a>,  <a href="#" onClick="tree.setBorders(1)">1</a>, <a href="#" onClick="tree.setBorders(3)">3</a>
<br>Set Spacing: <a href="#" onClick="tree.setSpacing(0)">0</a>,  <a href="#" onClick="tree.setSpacing(1)">1</a>, <a href="#" onClick="tree.setSpacing(3)">3</a>
<p>Get Selected:
<br><a href="#" onClick="alert("Selected Index: "+tree.getSelectedIndex())">Index</a>
<br><a href="#" onClick="alert("Selected Item: "+tree.getSelectedItem())">Item</a>
<br><a href="#" onClick="alert("Selected Indexes: "+tree.getSelectedIndexes())">Indexes (Multi only)</a>
</p>
<br><a href="#" onClick="tree.itemsResize(true,true);">Items auto resize on</a>
<br><a href="#" onClick="tree.itemsResize(false,true);">Items auto resize off</a>

</body>
</html>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

XML Tree

 
/*
Mastering JavaScript, Premium Edition
by James Jaworski 
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/

<html><head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Tree Component</title>
   <style type="text/css" >
BLOCKQUOTE {
margin-top: -5;
margin-bottom: -5;
}
TABLE {
margin-top: 0;
margin-bottom: 0;
}
A:link, A:visited {
  color: black;
  text-decoration: none;
}   
   </style>
   <script language="JavaScript">
var nodes = new Array("XML, XSLT, and JavaScript Tree Component",
"Features",
"The nodes and structure of the tree are specified in XML.",
"An XSLT stylesheet enables the tree to be rendered in HTML.",
"The display and operation of the tree is handled in JavaScript.",
"Design", "The tree component consists of the following files:",
"tree.xml", "Defines the tree"s text and structure.",
"tree.dtd", "Provides a DTD for tree.xml.",
"tree.xsl", "Transforms the tree into HTML and JavaScript.",
"tree.js", "Defines the Tree object.",
"tree.css", "Styles the transformed tree."
)
var branches = new Array(new Array(0,1),new Array(1,2),
new Array(1,3),new Array(1,4),new Array(0,5),new Array(5,6),
new Array(6,7),new Array(7,8),new Array(6,9),new Array(9,10),
new Array(6,11),new Array(11,12),new Array(6,13),new Array(13,14),
new Array(6,15),new Array(15,16),new Array(-1,-1))
</script>
<script language="JavaScript" >
   
var tree = createTree()
   
function createTree() {
 branchID = 0
 var subtrees = new Array()
 for(var i=0; i<nodes.length; ++i)
  subtrees[i] = new Tree(nodes[i])
 for(var i=0; i<branches.length - 1; ++i)
  subtrees[branches[i][0]].addBranch(subtrees[branches[i][1]])
 return subtrees[0]
}
function Tree(root) {
 this.text = root
 this.id = branchID
 ++branchID
 this.expanded = true
 this.branches = new Array()
 this.addBranch = Tree_addBranch
 this.changeState = Tree_changeState
 this.handleClick = Tree_handleClick
 this.processClick = Tree_processClick
 this.display = Tree_display
 this.getTreeString = Tree_getTreeString
}
function Tree_addBranch(tree) {
 this.branches[this.branches.length] = tree
}
function Tree_changeState() {
 this.expanded = !this.expanded
}
function Tree_handleClick(branch) {
 this.processClick(branch)
 var d = document.getElementById("tree")
 if(d != null) d.innerHTML = this.getTreeString()
}
function Tree_processClick(branch) {
 if(this.id == branch) this.changeState()
 else {
  for(var i=0; i<this.branches.length; ++i)
   this.branches[i].processClick(branch)
 }
}
function Tree_getTreeString() {
 var s = "<blockquote>"
 s += "<table border="0">"
 s += "<tr>"
 s += "<td>"
 if(this.branches.length > 0)
  s += "<a href="javascript:tree.handleClick("+this.id+")">+</a>"
 else s += "-"
 s += "</td>"
 s += "<td>"
 s += this.text
 s += "</td>"
 s += "</tr>"
 s += "</table>"
 if((this.branches.length > 0) && (this.expanded == true)) {
  for(var i=0; i<this.branches.length; ++i)
   s += this.branches[i].getTreeString()
 }
 s += "</blockquote>"
 return s
}
function Tree_display() {
 document.writeln(this.getTreeString())
}
</script>
</head>
<body>
<hr>
<div id="tree"><script language="JavaScript">
tree.display()
</script>
</div>
<hr>
</body>
</html>

Yahoo! UI Library - Tree Control

 
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css">
<div id="pageTitle">
  <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
    </script>
    <div id="logDiv"></div>
    
</div>
</div>

<script type="text/javascript" src="./build/animation/animation.js"></script>
  <div id="content">
    <form name="mainForm" action="javscript:;">
  <div class="newsItem">
    <h3>Animated TreeView Widget</h3>
    <p> </p>
    <div id="expandcontractdiv">
    <a href="javascript:tree.expandAll()">Expand all</a>
    <a href="javascript:tree.collapseAll()">Collapse all</a>
    </div>
    <div id="treeDiv1"></div>
  </div>
  </form>
  </div>
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>
  <script type="text/javascript">
  var tree;
  var nodes = new Array();
  var nodeIndex;
  
  function treeInit() {
    buildRandomTextNodeTree();
  }
  
  function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
    tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
      buildRandomTextBranch(tmpNode);
    }
    tree.draw();
  }
  var callback = null;
  function buildRandomTextBranch(node) {
    if (node.depth < 6) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < Math.floor(Math.random() * 6) ; i++ ) {
        var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
        buildRandomTextBranch(tmpNode);
      }
    }
  }
  </script>
  </body>
</html>

Yahoo! UI Library - Tree Control 2

 
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
</head>
  
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/check/tree.css">
<div id="pageTitle">
  <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
</div> 

    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);

    </script>
    <div id="logDiv"></div>
    
</div>
</div>

<script type="text/javascript" src="./examples/treeview/js/TaskNode.js"></script>
  <div id="content">
    <form name="mainForm" action="javscript:;">
  <div class="newsItem">
    <h3>Task List</h3>
    <p>
    The check boxes have three states:
    unchecked, partially checked (some sub-tasks are finished), checked (all sub-tasks complete)
    </p>
    <div id="expandcontractdiv">
    <a href="javascript:tree.expandAll()">Expand all</a>
    <a href="javascript:tree.collapseAll()">Collapse all</a>
    <a href="javascript:checkAll()">Check all</a>
    <a href="javascript:uncheckAll()">Uncheck all</a>
    </div>
    <div id="treeDiv1"></div>
  </div>
  </form>
  </div>
  
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--
<input type="button" id="showButton" />
-->
<script type="text/javascript">
  var tree;
  var nodes = new Array();
  var nodeIndex;
  
  function treeInit() {
    buildRandomTextNodeTree();
  }
  
  function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var tmpNode = new YAHOO.widget.TaskNode("task-" + i, tree.getRoot(), false);
            tmpNode.onCheckClick = onCheckClick;
      buildRandomTextBranch(tmpNode);
    }
        
    tree.draw();
        // tree.checkClickEvent.subscribe(onCheckClick);
  }
  var callback = null;
  function buildRandomTextBranch(node) {
    if (node.depth < 5) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
        var tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false);
                tmpNode.onCheckClick = onCheckClick;
        buildRandomTextBranch(tmpNode);
      }
    } else {
        // tmpNode = new YAHOO.widget.TaskNode(node.label + "-" + i, node, false, true);
        }
  }

    // function onCheckClick(eventType, args, tree) {
    //var node = args[0];
    function onCheckClick(eventType, args, tree) {
        var node = this;
        YAHOO.log(node.label + " check was clicked, new state: " + 
                node.checkState);
    }
    function showTreeState() {
        var out = [];
        for (var i in tree._nodes) {
            var n = tree._nodes[i];
            if (n && "undefined" != typeof n.checkState) {
                out.push(n.data + ": " + n.checkState);
            }
        }
        alert(out.join("\n"));
    }
    function checkAll() {
        var topNodes = tree.getRoot().children;
        for(var i = 0; i <= topNodes.length; ++i) {
            topNodes[i].check();
        }
    }
    function uncheckAll() {
        var topNodes = tree.getRoot().children;
        for(var i = 0; i <= topNodes.length; ++i) {
            topNodes[i].uncheck();
        }
    }
    function showJSON() {
        alert(JSON.stringify(tree._nodes));
    }
    //YAHOO.util.Event.on("showButton", "click", showTreeState);
    // YAHOO.util.Event.on("showButton", "click", showJSON);
</script>
  </body>
</html>

Yahoo! UI Library - Tree Control 3

 
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
</head>
  
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/folders/tree.css">
<div id="pageTitle">
  <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
<div id="linkage">
<ul>
<li><a href="default.html?mode=dist">Default tree widget</a></li>
<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>

<li><a href="folders.html?mode=dist">Folder view</a></li>
<li><a href="menu.html?mode=dist">Menu</a></li>
<li><a href="html.html?mode=dist">HTML node</a></li>
<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
<li><a href="check.html?mode=dist">Task list</a></li>
<li><a href="anim.html?mode=dist">Fade animation</a></li>
</ul>
</div> 

    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
    </script>
    <div id="logDiv"></div>
    
</div>
</div>

  <div id="content">
    <form name="mainForm" action="javscript:;">
  <div class="newsItem">
    <h3>Folders</h3>
    <p>
    
    </p>
    <div id="expandcontractdiv">
    <a href="javascript:tree.expandAll()">Expand all</a>
    <a href="javascript:tree.collapseAll()">Collapse all</a>
    </div>
    <div id="treeDiv1"></div>
  </div>
  </form>
  </div>
  
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  var tree;
  var nodes = new Array();
  var nodeIndex;
  
  function treeInit() {
    buildRandomTextNodeTree();
  }
  
  function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
      buildRandomTextBranch(tmpNode);
    }
    tree.draw();
  }
  var callback = null;
  function buildRandomTextBranch(node) {
    if (node.depth < 6) {
      YAHOO.log("buildRandomTextBranch: " + node.index);
      for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
        var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
        buildRandomTextBranch(tmpNode);
      }
    }
  }
</script>
  </body>
</html>

Yahoo! UI Library - Tree Control 4

 
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
</head>
  
<body>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css">
<div id="pageTitle">
    <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
    </script>
    <div id="logDiv"></div>
    
</div>
</div>

  <div id="content">
    <form name="mainForm" action="javscript:;">
    <div class="newsItem">
      <h3>HTML Node</h3>
      <p>
        
      </p>
      <div id="expandcontractdiv">
        <a href="javascript:tree.expandAll()">Expand all</a>
        <a href="javascript:tree.collapseAll()">Collapse all</a>
      </div>
      <div id="treeDiv1"></div>
    </div>
    </form>
  </div>
    
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
var tree;
function treeInit() {
    buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
        var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
        buildRandomTextBranch(tmpNode);
        // var tmpNode2 = new YAHOO.widget.HTMLNode("label-" + i, tree.getRoot(), false, true);
        buildRandomTextBranch(tmpNode);
        // buildRandomTextBranch(tmpNode2);
    }
    tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
    if (node.depth < 3) {
        YAHOO.log("buildRandomTextBranch: " + node.index);
        for ( var i = 0; i < Math.floor(Math.random() * 4) + 1 ; i++ ) {
            tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
            // tmpNode2 = new YAHOO.widget.HTMLNode(node.html + "-" + i, node, false, true);
            // if (node.depth == 2) {
                buildRandomHTMLBranch(tmpNode);
                // buildRandomHTMLBranch(tmpNode2);
            // } else {
                // buildRandomTextBranch(tmpNode);
            // }
        }
    }
}
var counter = 0;
function buildRandomHTMLBranch(node) {
    YAHOO.log("buildRandomHTMLBranch: " + node.index);
    var id = "htmlnode_" + counter++;
    var html = "<div id="" + id + """ + 
                " onmouseover="enableDragDrop(this, \"" + id + "\")"" + 
                " style="border:1px solid #aaaaaa; " +
                " position:relative; " +
                " height:100px; width:200px; " +
                " margin-bottom:10px; " +
                " background-color: #c5dbfc">" +
                "Info " + id + "</div>";
    // new YAHOO.widget.HTMLNode(html, node, false, true);
    new YAHOO.widget.HTMLNode(html, node, false, false);
}
function enableDragDrop(el, id) {
    new YAHOO.util.DD(id);
    el.onmouseover = null;
}
YAHOO.util.Event.addListener(window, "load", treeInit);
</script>
</body>
</html>

Yahoo! UI Library - Tree Control 5

 
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
<style type="text/css">
    .emLabel, .emLabel:link, .emLabel:visited, .emLabel:hover { 
        font-weight: bold;
    }
</style>
</head>
  
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/menu/tree.css">
<div id="pageTitle">
  <h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
</style>

<div id="container">
<img class="ylogo" src="img/logo.gif" alt="" />
  <div id="containerTop">
    <div id="header">
      <h1>
      
      </h1>
      <h4>&nbsp;</h4>
    </div>
    <div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
    <script type="text/javascript">
    YAHOO.example.logApp = function() {
        var divId;
        return {
            init: function(p_divId, p_toggleElId, p_clearElId) {
                divId = p_divId
            },
            onload: function() {
                if (YAHOO.widget.Logger) {
                    new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
                }
            }
        };
    } (); 
    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
    </script>
    <div id="logDiv"></div>
    
</div>
</div>

  <div id="content">
    <form name="mainForm" action="javscript:;">
  <div class="newsItem">
    <h3>Menu TreeView Widget</h3>
    <p>
    The presentation differences between the default treeview widget and this
    one were accomplished by modifying the css styles in tree.css.  The
    functionality is the same, except the menu does not allow multiple siblings
    to be expanded at one time (when you expand a node, all of its expanded 
    siblings are collapsed.
    </p>
    <div id="expandcontractdiv">
    <a href="javascript:tree.expandAll()">Expand all</a>
    <a href="javascript:tree.collapseAll()">Collapse all</a>
    </div>
    <div id="treeDiv1"></div>
  </div>
  </form>
  </div>
  
      <div id="footerContainer">
        <div id="footer">
          <p>&nbsp;</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var tree;
  var nodes = new Array();
  var nodeIndex = 0;
  
  function treeInit() {
    buildRandomTextNodeTree();
  }
  function buildRandomTextNodeTree() {
    tree = new YAHOO.widget.TreeView("treeDiv1");
    tree.onExpand = function(node) {
      // alert(node.index + " was expanded"); 
    }
    tree.onCollapse = function(node) {
      // alert(node.index + " was collapsed"); 
    }
    for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
      var thisId = nodeIndex++;
      var thisLabel = "menu" + i;
      // nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, tree.getRoot(), false);
      // nodes[thisId] = new YAHOO.widget.MenuNode({label:thisLabel, href:"http://asdf"}, tree.getRoot(), false);
      nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, tree.getRoot(), false);
      var p1 = nodes[thisId];
      var l1 = thisLabel;
      for (var j = 0; j < Math.floor(Math.random()*6) + 1; j++) { 
        thisId = nodeIndex++;
        thisLabel = l1 + "-" + j;
        // nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, p1, true);
        nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p1, false);
        var p2 = nodes[thisId];
        var l2 = thisLabel;
        for (var k =0; k < Math.floor(Math.random()*6) + 1; k++) { 
          thisId = nodeIndex++;
          thisLabel = l2 + "-" + k;
                    /*
          var data = {
              id: thisId,
              label: thisLabel, 
              href: "javascript:onLabelClick(" + thisId + ")" 
            }
*/
          var data = {
              label: thisLabel, 
                            href: "javascript:void(window.open("http://www.yahoo.ru"))" 
            }
          nodes[thisId] = new YAHOO.widget.TextNode(data, p2, false);
                    nodes[thisId].labelStyle = "emLabel";
          // nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p2, false);
        }
      }
    }
    // nodes[0] = new YAHOO.widget.TextNode(tree.getRoot(), false, "label-0");
    tree.draw();
  }
  var selectedId = null;
  function onLabelClick(id) {
    var node = tree.getNodeByProperty("id", id);
    // alert(node.label);
    var el = node.getLabelEl()
        YAHOO.log("pos: " + YAHOO.util.Dom.getXY(el));
        el.style.backgroundColor = "#c5dbfc";
    
    if (selectedId != null) {
      node = tree.getNodeByProperty("id", selectedId);
      node.getLabelEl().style.backgroundColor = "white";
    }
    selectedId = id;
  }
</script>
  </body>
</html>

JavaScript DHTML/GUI Components/Tree

Содержание

Build a tree in JavaScript

Building Collapsible Trees

Build tree from xml

Change tree expand and collapse icons

Change Tree Node Color and Icon

Checkbox tree node: checked, unchecked, get the checked items

Delete, insert items in a tree

Drag and Drop between trees

Dynamic TreeView Example

Elegant simple tree

Expand, Collapse, Close, Open selected Tree item and branch

Explorer based on tree

folder tree static

Nano Tree

Navigation Tree

Navigation Tree menu based on XML

Simple Tree in Javascript

Tree Control

Tree navigation bar

Tree selection action handler

Tree which accepts drag and drop event in JavaScript (IE)

XML Tree

Yahoo! UI Library - Tree Control

Yahoo! UI Library - Tree Control 2

Yahoo! UI Library - Tree Control 3

Yahoo! UI Library - Tree Control 4

Yahoo! UI Library - Tree Control 5

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты