#!/tools/gnu/bin/perl-5.6.0-32bit -I/proj/icdg/bin/perlmod/lib -I/proj
+/icdg/bin/perlmod/lib/i386-linux
#
# Name:
#    hobbit.cgi.
#
# Purpose:
#    Test CGI::Explorer V 2.
#
# Note:
#    Tab = 4 spaces || die.
#
# Author:
#    Ron Savage <ron@savage.net.au>
#    http://savage.net.au/index.html

use strict;
use warnings;
use CGI qw(:standard :html3 Vars);
use CGI::Explorer;
use CGI::Carp qw(warningsToBrowser fatalsToBrowser);

my $CSSdata = <<END;
.webfx-tree-container {
    margin: 0px;
    padding: 0px;
    font: icon;
    white-space: nowrap;
}

.webfx-tree-item {
    padding: 0px;
    margin: 0px;
    font: icon;
    color: black;
    white-space: nowrap;
}

.webfx-tree-item a, .webfx-tree-item a:active, .webfx-tree-item a:hove
+r {
    margin-left: 3px;
    padding: 1px 2px 1px 2px;
}

.webfx-tree-item a {
    color: black;
    text-decoration: none;
}

.webfx-tree-item a:hover {
    color: blue;
    text-decoration: underline;
}

.webfx-tree-item a:active {
    background: highlight;
    color: highlighttext;
    text-decoration: none;
}

.webfx-tree-item img {
    vertical-align: middle;
    border: 0px;
}

.webfx-tree-icon {
    width: 16px;
    height: 16px;
}
.webfx-tree-item a.selected {
    color: selectedtext;
    background: selected;
}

.webfx-tree-item a.selected-inactive {
    color: windowtext;
    background: buttonface;
}
END

my $TREEDATA=<<ENDCODE;

var webFXTreeConfig = {
    rootIcon        : '/images/explorer/foldericon.png',
    openRootIcon    : '/images/explorer/openfoldericon.png',
    folderIcon      : '/images/explorer/foldericon.png',
    openFolderIcon  : '/images/explorer/openfoldericon.png',
    fileIcon        : '/images/explorer/file.png',
    iIcon           : '/images/explorer/I.png',
    lIcon           : '/images/explorer/L.png',
    lMinusIcon      : '/images/explorer/Lminus.png',
    lPlusIcon       : '/images/explorer/Lplus.png',
    tIcon           : '/images/explorer/T.png',
    tMinusIcon      : '/images/explorer/Tminus.png',
    tPlusIcon       : '/images/explorer/Tplus.png',
    blankIcon       : '/images/explorer/blank.png',
    defaultText     : 'Tree Item',
    defaultAction   : 'javascript:void(0);',
    defaultBehavior : 'classic',
    usePersistence    : true
};

var webFXTreeHandler = {
    idCounter : 0,
    idPrefix  : "webfx-tree-object-",
    all       : {},
    behavior  : null,
    selected  : null,
    onSelect  : null, /* should be part of tree, not handler */
    getId     : function() { return this.idPrefix + this.idCounter++; 
+},
    toggle    : function (oItem) { this.all[oItem.id.replace('-plus','
+')].toggle(); },
    select    : function (oItem) { this.all[oItem.id.replace('-icon','
+')].select(); },
    focus     : function (oItem) { this.all[oItem.id.replace('-anchor'
+,'')].focus(); },
    blur      : function (oItem) { this.all[oItem.id.replace('-anchor'
+,'')].blur(); },
    keydown   : function (oItem, e) { return this.all[oItem.id].keydow
+n(e.keyCode); },
    cookies   : new WebFXCookie(),
    insertHTMLBeforeEnd    :    function (oElement, sHTML) {
        if (oElement.insertAdjacentHTML != null) {
            oElement.insertAdjacentHTML("BeforeEnd", sHTML)
            return;
        }
        var df;    // DocumentFragment
        var r = oElement.ownerDocument.createRange();
        r.selectNodeContents(oElement);
        r.collapse(false);
        df = r.createContextualFragment(sHTML);
        oElement.appendChild(df);
    }
};

function WebFXTree (sText, sAction, sBehavior, sIcon, sOpenIcon) {
    this.base = WebFXTreeAbstractNode;
    this.base(sText, sAction);
    this.icon      = sIcon || webFXTreeConfig.rootIcon;
    this.openIcon  = sOpenIcon || webFXTreeConfig.openRootIcon;
    if (webFXTreeConfig.usePersistence) {
        this.open  = (webFXTreeHandler.cookies.getCookie(this.id.subst
+r(18,this.id.length - 18)) == '0')?false:true;
    } else { this.open  = true; }
    this.folder    = true;
    this.rendered  = false;
    this.onSelect  = null;
    if (!webFXTreeHandler.behavior) {  webFXTreeHandler.behavior = sBe
+havior || webFXTreeConfig.defaultBehavior; }
}

function WebFXCookie() {
    if (document.cookie.length) { this.cookies = ' ' + document.cookie
+; }
}

WebFXCookie.prototype.setCookie = function (key, value) {
    document.cookie = key + "=" + escape(value);
}

WebFXCookie.prototype.getCookie = function (key) {
    if (this.cookies) {
        var start = this.cookies.indexOf(' ' + key + '=');
        if (start == -1) { return null; }
        var end = this.cookies.indexOf(";", start);
        if (end == -1) { end = this.cookies.length; }
        end -= start;
        var cookie = this.cookies.substr(start,end);
        return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.
+length - cookie.indexOf('=') + 1));
    }
    else { return null; }
}

function WebFXTreeAbstractNode(sText, sAction) {
    this.childNodes  = [];
    this.id     = webFXTreeHandler.getId();
    this.text   = sText || webFXTreeConfig.defaultText;
    this.action = sAction || webFXTreeConfig.defaultAction;
    this._last  = false;
    webFXTreeHandler.all[this.id] = this;
}

WebFXTreeAbstractNode.prototype.add = function (node, bNoIdent) {
    node.parentNode = this;
    this.childNodes[this.childNodes.length] = node;
    var root = this;
    if (this.childNodes.length >= 2) {
        this.childNodes[this.childNodes.length - 2]._last = false;
    }
    while (root.parentNode) { root = root.parentNode; }
    if (root.rendered) {
        if (this.childNodes.length >= 2) {
            document.getElementById(this.childNodes[this.childNodes.le
+ngth - 2].id + '-plus').src = ((this.childNodes[this.childNodes.lengt
+h -2].folder)?((this.childNodes[this.childNodes.length -2].open)?webF
+XTreeConfig.tMinusIcon:webFXTreeConfig.tPlusIcon):webFXTreeConfig.tIc
+on);
            this.childNodes[this.childNodes.length - 2].plusIcon = web
+FXTreeConfig.tPlusIcon;
            this.childNodes[this.childNodes.length - 2].minusIcon = we
+bFXTreeConfig.tMinusIcon;
            this.childNodes[this.childNodes.length - 2]._last = false;
        }
        this._last = true;
        var foo = this;
        while (foo.parentNode) {
            for (var i = 0; i < foo.parentNode.childNodes.length; i++)
+ {
                if (foo.id == foo.parentNode.childNodes[i].id) { break
+; }
            }
            if (i == foo.parentNode.childNodes.length - 1) { foo.paren
+tNode._last = true; }
            else { foo.parentNode._last = false; }
            foo = foo.parentNode;
        }
        webFXTreeHandler.insertHTMLBeforeEnd(document.getElementById(t
+his.id + '-cont'), node.toString());
        if ((!this.folder) && (!this.openIcon)) {
            this.icon = webFXTreeConfig.folderIcon;
            this.openIcon = webFXTreeConfig.openFolderIcon;
        }
        if (!this.folder) { this.folder = true; this.collapse(true); }
        if (!bNoIdent) { this.indent(); }
    }
    return node;
}

WebFXTreeAbstractNode.prototype.toggle = function() {
    if (this.folder) {
        if (this.open) { this.collapse(); }
        else { this.expand(); }
}    }

WebFXTreeAbstractNode.prototype.select = function() {
    document.getElementById(this.id + '-anchor').focus();
}

WebFXTreeAbstractNode.prototype.deSelect = function() {
    document.getElementById(this.id + '-anchor').className = '';
    webFXTreeHandler.selected = null;
}

WebFXTreeAbstractNode.prototype.focus = function() {
    if ((webFXTreeHandler.selected) && (webFXTreeHandler.selected != t
+his)) { webFXTreeHandler.selected.deSelect(); }
    webFXTreeHandler.selected = this;
    if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) {
+ document.getElementById(this.id + '-icon').src = this.openIcon; }
    document.getElementById(this.id + '-anchor').className = 'selected
+';
    document.getElementById(this.id + '-anchor').focus();
    if (webFXTreeHandler.onSelect) { webFXTreeHandler.onSelect(this); 
+}
}

WebFXTreeAbstractNode.prototype.blur = function() {
    if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) {
+ document.getElementById(this.id + '-icon').src = this.icon; }
    document.getElementById(this.id + '-anchor').className = 'selected
+-inactive';
}

WebFXTreeAbstractNode.prototype.doExpand = function() {
    if (webFXTreeHandler.behavior == 'classic') { document.getElementB
+yId(this.id + '-icon').src = this.openIcon; }
    if (this.childNodes.length) {  document.getElementById(this.id + '
+-cont').style.display = 'block'; }
    this.open = true;
    if (webFXTreeConfig.usePersistence) {
        webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.l
+ength - 18), '1');
}    }

WebFXTreeAbstractNode.prototype.doCollapse = function() {
    if (webFXTreeHandler.behavior == 'classic') { document.getElementB
+yId(this.id + '-icon').src = this.icon; }
    if (this.childNodes.length) { document.getElementById(this.id + '-
+cont').style.display = 'none'; }
    this.open = false;
    if (webFXTreeConfig.usePersistence) {
        webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.l
+ength - 18), '0');
}    }

WebFXTreeAbstractNode.prototype.expandAll = function() {
    this.expandChildren();
    if ((this.folder) && (!this.open)) { this.expand(); }
}

WebFXTreeAbstractNode.prototype.expandChildren = function() {
    for (var i = 0; i < this.childNodes.length; i++) {
        this.childNodes[i].expandAll();
} }

WebFXTreeAbstractNode.prototype.collapseAll = function() {
    this.collapseChildren();
    if ((this.folder) && (this.open)) { this.collapse(true); }
}

WebFXTreeAbstractNode.prototype.collapseChildren = function() {
    for (var i = 0; i < this.childNodes.length; i++) {
        this.childNodes[i].collapseAll();
} }

WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, leve
+l, nodesLeft) {
    if (lvl == null) { lvl = -2; }
    var state = 0;
    for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
        state = this.childNodes[i].indent(lvl + 1, del, last, level);
        if (state) { return; }
    }
    if (del) {
        if ((level >= this._level) && (document.getElementById(this.id
+ + '-plus'))) {
            if (this.folder) {
                document.getElementById(this.id + '-plus').src = (this
+.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon;
                this.plusIcon = webFXTreeConfig.lPlusIcon;
                this.minusIcon = webFXTreeConfig.lMinusIcon;
            }
            else if (nodesLeft) { document.getElementById(this.id + '-
+plus').src = webFXTreeConfig.lIcon; }
            return 1;
    }    }
    var foo = document.getElementById(this.id + '-indent-' + lvl);
    if (foo) {
        if ((foo._last) || ((del) && (last))) { foo.src =  webFXTreeCo
+nfig.blankIcon; }
        else { foo.src =  webFXTreeConfig.iIcon; }
    }
    return 0;
}


WebFXTree.prototype = new WebFXTreeAbstractNode;

WebFXTree.prototype.setBehavior = function (sBehavior) {
    webFXTreeHandler.behavior =  sBehavior;
};

WebFXTree.prototype.getBehavior = function (sBehavior) {
    return webFXTreeHandler.behavior;
};

WebFXTree.prototype.getSelected = function() {
    if (webFXTreeHandler.selected) { return webFXTreeHandler.selected;
+ }
    else { return null; }
}

WebFXTree.prototype.remove = function() { }

WebFXTree.prototype.expand = function() {
    this.doExpand();
}

WebFXTree.prototype.collapse = function(b) {
    if (!b) { this.focus(); }
    this.doCollapse();
}

WebFXTree.prototype.getFirst = function() {
    return null;
}

WebFXTree.prototype.getLast = function() {
    return null;
}

WebFXTree.prototype.getNextSibling = function() {
    return null;
}

WebFXTree.prototype.getPreviousSibling = function() {
    return null;
}

WebFXTree.prototype.keydown = function(key) {
    if (key == 39) {
        if (!this.open) { this.expand(); }
        else if (this.childNodes.length) { this.childNodes[0].select()
+; }
        return false;
    }
    if (key == 37) { this.collapse(); return false; }
    if ((key == 40) && (this.open) && (this.childNodes.length)) { this
+.childNodes[0].select(); return false; }
    return true;
}

WebFXTree.prototype.toString = function() {
    var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandl
+er.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFX
+TreeHandler.keydown(this, event)\">" +
        "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" sr
+c=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.o
+penIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">"
+ +
        "<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\"
+ onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.
+blur(this);\"" +
        (this.target ? " target=\"" + this.target + "\"" : "") +
        ">" + this.text + "</a></div>" +
        "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container
+\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
    var sb = [];
    for (var i = 0; i < this.childNodes.length; i++) {
        sb[i] = this.childNodes[i].toString(i, this.childNodes.length)
+;
    }
    this.rendered = true;
    return str + sb.join("") + "</div>";
}

function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {
    this.base = WebFXTreeAbstractNode;
    this.base(sText, sAction);
    /* Defaults to close */
    if (webFXTreeConfig.usePersistence) {
        this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr
+(18,this.id.length - 18)) == '1')?true:false;
    } else { this.open = false; }
    if (sIcon) { this.icon = sIcon; }
    if (sOpenIcon) { this.openIcon = sOpenIcon; }
    if (eParent) { eParent.add(this); }
}

WebFXTreeItem.prototype = new WebFXTreeAbstractNode;

WebFXTreeItem.prototype.remove = function() {
    var iconSrc = document.getElementById(this.id + '-plus').src;
    var parentNode = this.parentNode;
    var prevSibling = this.getPreviousSibling(true);
    var nextSibling = this.getNextSibling(true);
    var folder = this.parentNode.folder;
    var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibl
+ing.parentNode.id == parentNode.id))?false:true;
    this.getPreviousSibling().focus();
    this._remove();
    if (parentNode.childNodes.length == 0) {
        document.getElementById(parentNode.id + '-cont').style.display
+ = 'none';
        parentNode.doCollapse();
        parentNode.folder = false;
        parentNode.open = false;
    }
    if (!nextSibling || last) { parentNode.indent(null, true, last, th
+is._level, parentNode.childNodes.length); }
    if ((prevSibling == parentNode) && !(parentNode.childNodes.length)
+) {
        prevSibling.folder = false;
        prevSibling.open = false;
        iconSrc = document.getElementById(prevSibling.id + '-plus').sr
+c;
        iconSrc = iconSrc.replace('minus', '').replace('plus', '');
        document.getElementById(prevSibling.id + '-plus').src = iconSr
+c;
        document.getElementById(prevSibling.id + '-icon').src = webFXT
+reeConfig.fileIcon;
    }
    if (document.getElementById(prevSibling.id + '-plus')) {
        if (parentNode == prevSibling.parentNode) {
            iconSrc = iconSrc.replace('minus', '').replace('plus', '')
+;
            document.getElementById(prevSibling.id + '-plus').src = ic
+onSrc;
}    }    }

WebFXTreeItem.prototype._remove = function() {
    for (var i = this.childNodes.length - 1; i >= 0; i--) {
        this.childNodes[i]._remove();
     }
    for (var i = 0; i < this.parentNode.childNodes.length; i++) {
        if (this == this.parentNode.childNodes[i]) {
            for (var j = i; j < this.parentNode.childNodes.length; j++
+) {
                this.parentNode.childNodes[j] = this.parentNode.childN
+odes[j+1];
            }
            this.parentNode.childNodes.length -= 1;
            if (i + 1 == this.parentNode.childNodes.length) { this.par
+entNode._last = true; }
            break;
    }    }
    webFXTreeHandler.all[this.id] = null;
    var tmp = document.getElementById(this.id);
    if (tmp) { tmp.parentNode.removeChild(tmp); }
    tmp = document.getElementById(this.id + '-cont');
    if (tmp) { tmp.parentNode.removeChild(tmp); }
}

WebFXTreeItem.prototype.expand = function() {
    this.doExpand();
    document.getElementById(this.id + '-plus').src = this.minusIcon;
}

WebFXTreeItem.prototype.collapse = function(b) {
    if (!b) { this.focus(); }
    this.doCollapse();
    document.getElementById(this.id + '-plus').src = this.plusIcon;
}

WebFXTreeItem.prototype.getFirst = function() {
    return this.childNodes[0];
}

WebFXTreeItem.prototype.getLast = function() {
    if (this.childNodes[this.childNodes.length - 1].open) { return thi
+s.childNodes[this.childNodes.length - 1].getLast(); }
    else { return this.childNodes[this.childNodes.length - 1]; }
}

WebFXTreeItem.prototype.getNextSibling = function() {
    for (var i = 0; i < this.parentNode.childNodes.length; i++) {
        if (this == this.parentNode.childNodes[i]) { break; }
    }
    if (++i == this.parentNode.childNodes.length) { return this.parent
+Node.getNextSibling(); }
    else { return this.parentNode.childNodes[i]; }
}

WebFXTreeItem.prototype.getPreviousSibling = function(b) {
    for (var i = 0; i < this.parentNode.childNodes.length; i++) {
        if (this == this.parentNode.childNodes[i]) { break; }
    }
    if (i == 0) { return this.parentNode; }
    else {
        if ((this.parentNode.childNodes[--i].open) || (b && this.paren
+tNode.childNodes[i].folder)) { return this.parentNode.childNodes[i].g
+etLast(); }
        else { return this.parentNode.childNodes[i]; }
} }

WebFXTreeItem.prototype.keydown = function(key) {
    if ((key == 39) && (this.folder)) {
        if (!this.open) { this.expand(); }
        else { this.getFirst().select(); }
        return false;
    }
    else if (key == 37) {
        if (this.open) { this.collapse(); }
        else { this.parentNode.select(); }
        return false;
    }
    else if (key == 40) {
        if (this.open) { this.getFirst().select(); }
        else {
            var sib = this.getNextSibling();
            if (sib) { sib.select(); }
        }
        return false;
    }
    else if (key == 38) { this.getPreviousSibling().select(); return f
+alse; }
    return true;
}

WebFXTreeItem.prototype.toString = function (nItem, nItemCount) {
    var foo = this.parentNode;
    var indent = '';
    if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
    var i = 0;
    while (foo.parentNode) {
        foo = foo.parentNode;
        indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\""
+ + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\
+">" + indent;
        i++;
    }
    this._level = i;
    if (this.childNodes.length) { this.folder = 1; }
    else { this.open = false; }
    if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
        if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
        if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFold
+erIcon; }
    }
    else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
    var label = this.text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandl
+er.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFX
+TreeHandler.keydown(this, event)\">" +
        indent +
        "<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((t
+his.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTr
+eeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIc
+on:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConf
+ig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.tog
+gle(this);\">" +
        "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" sr
+c=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.o
+penIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">"
+ +
        "<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\"
+ onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.
+blur(this);\"" +
        (this.target ? " target=\"" + this.target + "\"" : "") +
        ">" + label + "</a></div>" +
        "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container
+\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
    var sb = [];
    for (var i = 0; i < this.childNodes.length; i++) {
        sb[i] = this.childNodes[i].toString(i,this.childNodes.length);
    }
    this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon
+:webFXTreeConfig.tPlusIcon);
    this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIc
+on:webFXTreeConfig.tMinusIcon);
    return str + sb.join("") + "</div>";
}
ENDCODE
# -----------------------------------------------

sub generate_hash
{
    my(%hobbit) =
    (
        'Great grand gnome'    =>
        {
            code            => 'G-g-g', # Code of 'Great grand gnome'.
            _url            => '/test/test-menu.cgi',
            'Great gnome'    =>
            {
                code                    => 'G-g-one',
                _node_id                => 'G_g_one_00',
                _url                    => '/test/test-fancy-hash.cgi'
+,
                'Eldest great gnome'    => {code => 'E-g-g-one'},
                'Youngest great gnome'    => {code => 'Y-g-g'},
            },
            'Grand gnome' =>
            {
                code                    => 'G-g-two',
                _node_id                => 'G_g_two_00',
                'Smartest grand gnome'    => {code => undef},
                'Prettiest grand gnome'    =>
                {
                    code            => '',
                    'Evil gnome'    =>
                    {
                        code                => undef,
                        'Evil gray gnome'    => {code => ''},
                        'Evil grey gnome'    => {code => 'E-g-g-two'},
                    },
                },
                'Long lost grand gnome'    => {code => 'L-l-g-g'},
            },
        },
    );

    return \%hobbit;

}    # End of generate_hash.

# -----------------------------------------------

my($title)        = 'Test CGI::Explorer';
my($q)            = CGI -> new();
my($url)        = $q -> url();
my($current_id)    = $q -> path_info() || '';
$current_id        =~ s|^/||;

my($explorer, @html);

my($hash)            = generate_hash();
$explorer            = CGI::Explorer -> new(behavior => 'explorer', cu
+rrent_icon => '/cgi_explorer/images/current.png', url => $url);
my($tree)            = $explorer -> hash2tree(current_id => $current_i
+d, hashref => $hash);
my($current_key)    = $explorer -> id2key();
my(@current_key)    = split(/$;/, $current_key);
my($breadcrumb)        = '';

my($crumb);

for (0 .. $#current_key)
{
    $crumb        = $q -> a({href => $explorer -> key2url(current_key 
+=> join($;, @current_key[0 .. $_]) )}, $current_key[$_]);
    $breadcrumb    .= ($_ ? (' ' x ($_ - 1) . ' &gt; ') : '') . $crumb
+;
}

$breadcrumb    = 'Your breadcrumb trail here' if (! $breadcrumb);
my($name)    = 'field01';

if (@current_key)
{
    @current_key    = map{$name++; $q -> td($q -> textfield({name => $
+name, size => 60, value => $_}) )} @current_key;
    my($node)        = $explorer -> get_node();

    push @current_key, map{$q -> td("$_: $$node{$_}")} grep{ref($$node
+{$_}) ne 'HASH'} sort keys %$node if (ref($node) eq 'HASH');
    push @current_key, $q -> td($q -> submit({name => $name, style => 
+'background: #80c0ff', value => 'Update'}) );
}
else
{
    @current_key = $q -> td('No items selected yet');
}

my($table) = $q -> table($q -> Tr([@current_key]) );

my($mids) = $q -> span({style => 'color: #0000ff; text-align: center; 
+width: 80%'}, 'Hobbits and Hackers');
push(@html, $q -> div({style => 'position: absolute; top: 0.25em; left
+: 0.25em; padding: 0em; overflow: auto; height: 2.50em; width: 100%; 
+border-bottom: solid thin #e0e0e0;'}, 'Your logo here' . $mids) );
my($menu) = $q -> span({style => 'color: #0000ff; text-align: left; wi
+dth: 80%'}, 'Your menu here');
push(@html, $q -> div({style => 'position: absolute; top: 3.00em; left
+: 0.25em; padding: 0em; overflow: auto;'}, $menu) );
$breadcrumb = $q -> span({style => 'color: #0000ff; font-size: 10pt'},
+ $breadcrumb);
push(@html, $q -> div({style => 'position: absolute; top: 4.50em; left
+: 0.25em; padding: 0em; overflow: auto; '}, $breadcrumb) );
push(@html, $q -> div({style => $explorer -> get('left_style')}, $q ->
+ script({language => 'JavaScript'}, $tree) ) );
push(@html, $q -> div({style => $explorer -> get('right_style')}, $tab
+le) );

print    $q -> header({type => $explorer -> get('header_type')});

#print $q -> start_html({script => "/js/xtree.js", style => {src => $e
+xplorer -> get('css')}, title => $title});
#print $q -> start_html(-script=>{-language=>'JAVASCRIPT',-src=>'/js/x
+tree.js'});
print $q -> start_html({script =>$TREEDATA, style => {-code=>$CSSdata}
+, title => $title});
#print    $q -> start_html({script => {src => $explorer -> get('js')},
+ style => {src => $explorer -> get('css')}, title => $title});
print        $q -> start_form({action => 'hobbit.cgi', name => $explor
+er -> get('form_name')}),@html;
print        $q -> end_form();
print        $q -> end_html();
[download]