<html>
<head><title>Outline Tree Using Jstemplates</title>
  <script src="../util.js" type="text/javascript"></script>
  <script src="../jsevalcontext.js" type="text/javascript"></script>
  <script src="../jstemplate.js" type="text/javascript"></script>
  <script type="text/javascript">
    // Hierarchical data:
    var tplData = 
      { title: "Jstemplates", items: [
        { title: "", items: [
          { title: "The Jstemplates Module"},
          { title: "Javascript Data"},
          { title: "Template HTML"},
          { title: "Processing Templates with Javascript Statements"}
          ]
        },
        { title: "Template Processing Instructions", items: [
          { title: "Processing Environment" },
          { title: "", items: [
            {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"}, 
            {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
          ]}
        ]}
      ]};
      
	  var PEG_NAME = 'peg';
    var TEMPLATE_NAME = 'tpl';
	  var TITLE_COUNT_NAME = 'titleCountPeg';
    var TITLE_TEMPLATE_NAME = 'titleCountTpl';
    
    // Called by the body onload handler:
    function loadAll() {
      var titleCountElement = domGetElementById(document, TITLE_COUNT_NAME);
      var pegElement = domGetElementById(document, PEG_NAME);
      var counter = {full: 0, empty: 0};
      
      loadData(pegElement, TEMPLATE_NAME, tplData, counter);
      loadData(titleCountElement, TITLE_TEMPLATE_NAME, tplData, counter);
    }

    
    function loadData(peg, templateId, data, counter) {
      // Get a copy of the template:
      var templateToProcess = jstGetTemplate(templateId);
      
      // Wrap our data in a context object:
      var processingContext = new JsEvalContext(data);
  
      processingContext.setVariable('$counter', counter);
      
      // Process the template
      jstProcess(processingContext, templateToProcess);
      
      // Clear the element to which we'll attach the processed template:
      peg.innerHTML = '';
      
      // Attach the template:
      domAppendChild(peg, templateToProcess);
    }
    
    // Function called by onclick to record state of closedness and 
    // refresh the outline display
    function setClosed(jstdata, closedVal) {
      jstdata.closed = closedVal;
      loadAll();
    }
    </script>
    <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
</head>
<body onload="loadAll()">

<!-- 
This is the div to which the instantiated template will be attached.
-->
<div id="peg"></div>
<div id="titleCountPeg"></div>
<!--
A container to hide our template:
-->
<div style="display:none">
<!-- 
This is the template div. It will be copied and attached to the div above with:
 var apt = jstGetTemplate('apt');
 appendChild(panel, apt)
-->
  <div id="tpl">
  <!--
  Links to open and close outline sections:
  -->
    <a href="#" jsdisplay="closed" 
       jsvalues=".jstdata:$this"
       onclick="setClosed(this.jstdata,0)">[Open]</a> 
       
    <a href="#" jsdisplay="!closed && items.length" 
       jsvalues=".jstdata:$this" 
       onclick="setClosed(this.jstdata,1)">[Close]</a> 
       
    <span jscontent="title" 
          jseval="title? $counter.full++: $counter.empty++">
      Outline heading
    </span>
    <ul jsdisplay="items.length && !closed">
      <li jsselect="items">
        <!--Recursive tranclusion: -->
        <div transclude="tpl"></div>
      </li>
    </ul>
  </div>

  <div id="titleCountTpl">
  <p>
      This outline has <span jscontent="$counter.empty"></span> empty titles 
      and <span jscontent="$counter.full"></span> titles with content.
  </p>
  </div>
</div>
</body>
</html>