<a href="javascript:atnbgshowroot()">show root</a>
<a href="javascript:atnbgeditthis()">edit this</a>
<span id="atnbgthis" style="display:none"></span>
<a href="javascript:atnbgshowprogram()">show program</a>
<a href="javascript:atnbgbuildfunction()">build function</a>
<a href="javascript:atnbgaddfunction()">add function</a>
<a href="javascript:atnbgremovefunction()">remove function</a>
function added / removed: <span id="atnbgfunctionaddedorremoved"></span>
<div id="atnbgthecode" style="display:none"></div>
<textarea id="atnbgtextarea" style="display:none"></textarea>
new function name<input id="atnbgnewfunctionname"> style="display:none"></input>
it's a little better
<script>
function atnbgbuildfunction() {
var textarea = document.getElementById("atnbgtextarea")
textarea.style.display = "inline"}
function atnbgaddfunction() {
var context = document.getElementById(document.getElementById("atnbgthis").innerHTML)
var thediv = document.createElement("div")
context.appendChild(thediv)
var theid = document.createAttribute("id")
thediv.setAttributeNode(theid)
theid.value = document.getElementById("atnbgnewfunctionname").value
var thecode = document.createTextNode(document.getElementById("atnbgtextarea").value)
thediv.appendChild(thecode)}
</script>
