function initialize() {
var xmlDoc
var xslDoc

xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
xmlDoc.async = false;

xslDoc = new ActiveXObject('Microsoft.XMLDOM')
xslDoc.async = false;

xmlDoc.load("tree/tree.xml")
xslDoc.load("tree/tree.xsl")

folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
}

function clickOnEntity(entity) {
if(entity.open == "false") {
expand(entity, true)
}
else {
collapse(entity)
}
window.event.cancelBubble = true
}

function expand(entity) {
var oImage

oImage = entity.childNodes(0).all["image"]
oImage.src = entity.imageOpen

for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
entity.childNodes(i).style.display = "block"
}
}
entity.open = "true"
}

function collapse(entity) {
var oImage
var i

oImage = entity.childNodes(0).all["image"]
oImage.src = entity.image

// collapse and hide children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
collapse(entity.childNodes(i))
}
}
entity.open = "false"
}

function expandAll(entity) {
var oImage
var i

expand(entity, false)

// expand children
for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).tagName == "DIV") {
expandAll(entity.childNodes(i))
}
}
}

var appState = new applicationState()

function applicationState() {
this.contextMenu = null
}

function loadContextMenu(path) {
var xmlDoc
var xslDoc
var contextMenu

if(path != "") {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
xmlDoc.async = false;

xslDoc = new ActiveXObject('Microsoft.XMLDOM')
xslDoc.async = false;

xmlDoc.load(path)
xslDoc.load("context/context.xsl")

if(appState.contextMenu != null) appState.contextMenu.removeNode(true)

document.body.insertAdjacentHTML("beforeEnd", xmlDoc.documentElement.transformNode(xslDoc))
contextMenu = document.body.childNodes(document.body.childNodes.length-1)

contextMenu.style.left = window.event.x
contextMenu.style.top = window.event.y

appState.contextMenu = contextMenu
window.event.cancelBubble = true
}
}

function loadContextMenuSub(obj) {
var contextMenu
var parentMenu

parentMenu = returnContainer(obj)
contextMenu = document.all[obj.id + "Sub"]
contextMenu.style.display = "block"
contextMenu.style.top = obj.offsetTop + parentMenu.style.pixelTop
contextMenu.style.left = obj.offsetWidth + parentMenu.style.pixelLeft
parentMenu.subMenu = contextMenu
}

function contextHighlightRow(obj) {
var parentMenu
var subMenu
var i

parentMenu = returnContainer(obj)

if(obj.selected == "false") {
for(i=0; i < obj.childNodes.length; i++) {
obj.childNodes(i).style.borderTop = "1px solid white"
obj.childNodes(i).style.borderBottom = "1px solid white"

if(obj.childNodes(i).cellIndex == 0) {
obj.childNodes(i).style.borderLeft = "1px solid white"
}
else if (obj.childNodes(i).cellIndex == obj.cells.length-1) {
obj.childNodes(i).style.borderRight = "1px solid white"
}
}

if(parentMenu.subMenu != null && parentMenu != parentMenu.subMenu) {
subMenu = parentMenu.subMenu

while(subMenu != null) {
subMenu.style.display = "none"
subMenu = subMenu.subMenu
}
}
obj.selected = "true"
}
else {
for(i=0; i < obj.childNodes.length; i++) {
if(i == 0) {
obj.childNodes(i).style.borderTop = "1px solid " + obj.titlebar
obj.childNodes(i).style.borderBottom = "1px solid " + obj.titlebar
}
else {
obj.childNodes(i).style.borderTop = "1px solid " + obj.background
obj.childNodes(i).style.borderBottom = "1px solid " + obj.background
}

if(obj.childNodes(i).cellIndex == 0) {
obj.childNodes(i).style.borderLeft = "1px solid " + obj.titlebar
}
else if (obj.childNodes(i).cellIndex == obj.cells.length-1) {
obj.childNodes(i).style.borderRight = "1px solid " + obj.background
}
}
obj.selected = "false"
}
}

function clean() {
var contextMenu

// remove and destroy context menu
if(appState.contextMenu != null) {
contextMenu = appState.contextMenu.removeNode(true)
contextMenu = null
}
}

function returnContainer(container) {
while(container.tagName != "DIV") {
container = container.parentNode
}
return container
}

<xsl:stylesheet version="1.1"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dt="urn:schemas-microsoft-com:datatypes">

<xsl:template match="/tree">
<xsl:element name="tree">
<xsl:apply-templates select="entity"/>
</xsl:element>
</xsl:template>

<xsl:template match="entity">
<xsl:element name="entity">
<xsl:attribute name="id">
<xsl:value-of select="generate-id(.)"/>
</xsl:attribute>
<xsl:for-each select="*">
<xsl:if test="name() = 'contents'">
<xsl:element name="contents">
<xsl:apply-templates select="entity"/>
</xsl:element>
</xsl:if>
<xsl:if test="name() != 'contents'">
<xsl:element name="{name()}">
<xsl:value-of select="."/>
</xsl:element>
</xsl:if>
</xsl:for-each>
</xsl:element>
</xsl:template>
</xsl:stylesheet>

<entity id="e2">
<description>Microsoft</description>
<imageBase>images/book.gif</imageBase>
<imageOpen>images/bookOpen.gif</imageOpen>
<onClick>displayCustomer(12345)</onClick>
<onContextMenu>context/contextCustomer.xml</onContextMenu>
<contents>
</contents>
</entity>

<entity id="e2">
<description>Microsoft</description>
<imageBase>images/book.gif</imageBase>
<imageOpen>images/bookOpen.gif</imageOpen>
<onClick>displayCustomer(12345)</onClick>
<onContextMenu>context/contextCustomer.xml</onContextMenu>
<contact>Bill Gates</contact>
<address1>1234 Microsoft Dr.</address>
<address2>Suite 123</address>
<city>Microsoft City</city>
<state>MS</state>
<zip>12345</zip>
<phone>(123)132-1234</phone>
<contents>
</contents>
</entity>

<xsl:stylesheet version="1.1"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
<xsl:param name="action"/>
<xsl:param name="selectedEntity"/>

<xsl:template match="entity">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="1" WIDTH="100%">
<xsl:for-each select="*">
<xsl:if test="name() != 'contents'">
<TR>
<TD CLASS="dataLabel" STYLE="border-right: 1px solid black;
border-bottom: 1px solid black;">
<xsl:value-of select="name()"/>
</TD>
<TD STYLE="border-right: 1px solid black; border-bottom: 1px solid black;" WIDTH="100%">
<INPUT CLASS="dataInput"
ONFOCUS="document.body.onselectstart = null"
ONBLUR="document.body.onselectstart = returnFalse;">
<xsl:attribute name="NAME">
<xsl:value-of select="name()"/>
</xsl:attribute>
<xsl:if test="$action = 'update'">
<xsl:attribute name="VALUE">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:if>
</INPUT>
</TD>
</TR>
</xsl:if>
</xsl:for-each>
<TR>
<TD STYLE="padding-right: 0px;"/>
<TD STYLE="padding-top: 0px;padding-left: 0px;">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>
<INPUT TYPE="button" CLASS="buttonOff" NAME="Save" VALUE="Save" ONFOCUS="this.blur();"
ONMOUSEOVER="swapClass(this, 'buttonOver')" ONMOUSEOUT="swapClass(this, 'buttonOff')">
<xsl:attribute name="ONCLICK">
<xsl:value-of select="$action"/>Entity('<xsl:value-of select="$selectedEntity"/>')
</xsl:attribute>
</INPUT>
</TD>
<TD STYLE="padding-left: 2px;">
<INPUT TYPE="button" CLASS="buttonOff" NAME="Cancel" VALUE="Cancel"
ONFOCUS="this.blur();" ONMOUSEOVER="swapClass(this, 'buttonOver')"
ONMOUSEOUT="swapClass(this, 'buttonOff')" ONCLICK="content.innerHTML = '';"/>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</xsl:template>
</xsl:stylesheet>

function insertUpdateDisplay(action) {
var xslDoc
var xslTemplate;
var xslProc;
var entity;

xslDoc = new ActiveXObject('MSXML2.FreeThreadedDOMDocument')
xslDoc.async = false;

xslTemplate = new ActiveXObject('MSXML2.XSLTemplate')

xslDoc.load("admin/insertUpdate.xslt");
xslTemplate.stylesheet = xslDoc;
xslProc = xslTemplate.createProcessor();
entity = xmlDoc.documentElement.selectSingleNode("//entity[@id='" + selectedEntity +"']");
xslProc.input = entity;

xslProc.addParameter("action", action);
xslProc.addParameter("selectedEntity", selectedEntity);

xslProc.transform();

content.innerHTML = xslProc.output;
}

function insertEntity(parentEntityID) {
var entity;
var newEntity;
var element;
var attribute;
var xslDoc;
var i;

xslDoc = new ActiveXObject('MSXML2.FreeThreadedDOMDocument')
xslDoc.async = false;

xslDoc.load("admin/tree.xslt");

entity = xmlDoc.documentElement.selectSingleNode("//entity[@id='" + parentEntityID +"']");
newEntity = xmlDoc.createElement("entity");
attribute = xmlDoc.createAttribute("id");
attribute.text = document.uniqueID;
newEntity.attributes.setNamedItem(attribute);

for(i=0; i < entity.childNodes.length; i++) {
element = xmlDoc.createElement(entity.childNodes(i).baseName);
if(entity.childNodes(i).baseName != "contents") {
element.text = eval(entity.childNodes(i).baseName + ".value")
}
newEntity.appendChild(element)
}
entity.selectSingleNode("contents").appendChild(newEntity);
document.all[parentEntityID].insertAdjacentHTML("beforeEnd", newEntity.transformNode(xslDoc));
document.all[parentEntityID].lastChild.style.display = "block";

if(document.all[parentEntityID].open == "false") {
document.all[parentEntityID].onclick();
}
saveXML();
}

function updateEntity(entityID) {
var entity;
var xslDoc;
var container;
var i;

xslDoc = new ActiveXObject('MSXML2.FreeThreadedDOMDocument')
xslDoc.async = false;

xslDoc.load("admin/tree.xslt");

entity = xmlDoc.documentElement.selectSingleNode("//entity[@id='" + entityID +"']");

for(i=0; i < entity.childNodes.length; i++) {
if(entity.childNodes(i).baseName != "contents") {
entity.childNodes(i).text = eval(entity.childNodes(i).baseName + ".value")
}
}
container = document.createElement("DIV");
container.innerHTML = entity.transformNode(xslDoc)

container.childNodes(0).style.display = "block";
document.all[entityID].swapNode(container.childNodes(0));
container = null;
saveXML();
}

function renameEntityBegin() {
var name;

name = document.all[selectedEntity + "name"]
name.contentEditable = true;
name.focus();
name.style.cursor = "text";
name.onkeypress = function anonymous() { renameKeyPress(selectedEntity) };
name.onblur = function anonymous() { renameEntityEnd(selectedEntity) };
name.onselectstart = null;

document.all[selectedEntity].onclick = null;
}

function deleteEntity() {
var entity;

entity = xmlDoc.documentElement.selectSingleNode("//entity[@id='" + selectedEntity +"']");

if(entity.selectSingleNode("contents").childNodes.length > 0) {
displayError("You cannot remove an entity that contains children. First remove all children."

., 8000);
}
else {
entity = entity.parentNode.removeChild(entity)
document.all[selectedEntity].removeNode(true)
saveXML();
}
}

function beginDrag(obj) {
if(window.event.button == 1) {

document.onmousemove = function anonymous() { dragControl.move(obj) };

this.origin = obj.parentNode;
this.entity = obj;

this.beginX = window.event.x;
this.beginY = window.event.y;

window.event.cancelBubble = true;
}
}

function endDrag() {
if(this.entity != null) {
this.entity.style.position = "static";
this.entity.style.left = null;
this.entity.style.top = null;
this.entity = this.entity.removeNode(true);

if(this.target != null) {
dragControl.target.appendChild(this.entity);
if(this.target.open != "true") {
clickOnEntity(this.target);
}
}
else {
this.origin.appendChild(this.entity);
}

document.onmousemove = null;
document.onmouseup = null;

this.entity = null;
this.target = null;
this.enabled = false;
}
}

function setTarget(obj) {
if(this.entity != null && this.entity != obj) {
this.target = obj;
}
window.event.cancelBubble = true;
}

function setPosition() {
this.entity.style.left = window.event.x;
this.entity.style.top = window.event.y - 10;
}

function move(obj) {
if(window.event.x < this.beginX - 5 || window.event.x > this.beginX + 5 ||
window.event.y < this.beginY -5 || window.event.y > this.beginY + 5 &&
this.enabled == false) {
obj.style.position = "absolute";
obj.style.filter = "alpha(opacity='60')";
this.setPosition();
this.enabled = true;

obj = obj.removeNode(true);
document.body.appendChild(obj);
document.onmouseup = function anonymous() { dragControl.endDrag() };
}
else if(this.enabled == true) {
this.setPosition();
}
}

function reset() {
document.onmouseup = null;
document.onmousemove = null;

this.entity = null;
this.origin = null;
this.target = null;
}

function ProgressIndicator_init()
{
this.xmlObj.load(this.xmlDoc);
this.xslObj.load(this.xslDoc);

this.refresh();
}

function ProgressIndicator_refresh()
{
this.target.innerHTML = this.xmlObj.documentElement.transformNode(this.xslObj);
}

function ProgressIndicator_update(percent)
{
this.percentComplete = percent;
this.xmlObj.documentElement.selectSingleNode("percentComplete").text = this.percentComplete;

this.refresh();
}

<?xml version="1.0"?>
<ProgressIndicator>
<styles>
<leftBackgroundColor>gray</leftBackgroundColor>
<leftFontColor>white</leftFontColor>
<rightBackgroundColor>white</rightBackgroundColor>
<rightFontColor>black</rightFontColor>
<borderTop>1px solid black</borderTop>
<borderLeft>1px solid black</borderLeft>
<borderBottom>1px solid black</borderBottom>
<borderRight>1px solid black</borderRight>
<height>25</height>
<width>200</width>
</styles>
<percentComplete>0</percentComplete>
</ProgressIndicator>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
<xsl:template match="ProgressIndicator">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<xsl:attribute name="STYLE">
border-top: <xsl:value-of select="styles/borderTop"/>;
border-left: <xsl:value-of select="styles/borderLeft"/>;
border-bottom: <xsl:value-of select="styles/borderBottom"/>;
border-right: <xsl:value-of select="styles/borderRight"/>;
height: <xsl:value-of select="styles/height"/>;
width: <xsl:value-of select="styles/width"/>;
</xsl:attribute>
<TR>
<TD ALIGN="right">
<xsl:attribute name="STYLE">
background-color: <xsl:value-of select="styles/leftBackgroundColor" />;
color: <xsl:value-of select="styles/leftFontColor" />;
font-family: arial;
font-size: 11px;
font-weight: bold;
width: <xsl:value-of select="styles/width div 100 * percentComplete" />px;
</xsl:attribute>
<xsl:if test="percentComplete > 50">
<span style="padding-left: 5px; padding-right: 5px;">
<xsl:value-of select="percentComplete" />%
</span>
</xsl:if>
</TD>
<TD ALIGN="left">
<xsl:attribute name="STYLE">
background-color: <xsl:value-of select="styles/rightBackgroundColor" />;
color: <xsl:value-of select="styles/rightFontColor" />;
font-family: arial;
font-size: 11px;
font-weight: bold;
width: <xsl:value-of select="styles/width - (styles/width div 100 * percentComplete)" />px;
</xsl:attribute>
<xsl:if test="percentComplete <= 50">
<span style="padding-left: 5px; padding-right: 5px;">
<xsl:value-of select="percentComplete" />%
</span>
</xsl:if>
</TD>
</TR>
</TABLE>
</xsl:template>
</xsl:stylesheet>