{if actions.length > 0}
  ${render('action/newInstanceMini')}
{/if}

<div>
  <h2>${actions.length} Completed Actions</h2>
  {if actions.length > 0}
    <table class="hoverable sortable" id="completedActions">
      <tr><td nowrap="nowrap">Action</td>
          <td nowrap="nowrap">Context</td>
          <td nowrap="nowrap">Completed at</td>
          <td></td>
          <td></td>
          </tr>
    {for action in actions}
      <tr><td nowrap="nowrap">
            <input type="checkbox" ${action.completedAt != null ? '"checked"' : ''}
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode.parentNode);{/minify}">
              ${%linkToLocal(action.name, 'action', 'show', action.id, { style: colorStyle(action) })%}</td>
          <td>${linkToLocal(action.cname, 'context', 'show', action.contextId)}</td>
          <td>${localDateString(action.completedAt)}</td>
          <td>${linkToLocal('edit', 'action', 'edit', action.id)}</td>
          <td>${%linkToLocal('delete', 'action', 'destroy', action.id, { confirm: true })%}</td>
          </tr>
    {/for}
    </table>
  {/if}
</div>

{if actions.length > 0}
<br>
${%buttonToLocal('Delete All Completed Actions', 'action', 'destroyCompleted', null, { confirm: true })%}
{/if}

{eval}
return TrimPath.junction.env.eventually("Sortable.init()");
{/eval}

${startFormTagLocal('action', 'update', action.id)}
<h2 style="${colorStyle(action)}">Action: ${action.name}</h2>
 <div class="wide">
  <label for="action[name]" class="required">Name:</label> ${%textField('action', 'name', { size: 30 })%} 
    ${errorMessageOn('action', 'name')}<br/>
  <label for="action[notes]">Notes:</label> ${%textArea('action', 'notes', { cols: 40, rows: 10 })%}<br/>
  <label for="action[contextId]">Context:</label> ${select('action', 'contextId', Context.choices())}<br/>
  <label for="action[projectId]">Project:</label> ${select('action', 'projectId', Project.choices())}<br/>
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt', { valueFilter: localDateString })%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt', { valueFilter: localDateString })%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[completedAt]">Completed at:</label> ${%textField('action', 'completedAt', { valueFilter: localDateString })%}
    <input type="submit" value="Today" onclick="{minify}
      $('action[completedAt]').value = TrimPath.junctionUtil.toLocalDateString(new Date());
      return false;
      {/minify}"/>
    <br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[repeat]">Repeat:</label> ${render('action/repeat')}<br/>
  <div class="submit">
   ${submitButtonLocal("doUpdate", "OK")}
   ${linkToLocal('Cancel', 'action', 'show', action.id)}
  </div>
 </div>
${endFormTag()}

${render('action/newInstanceMini')}

<h2>${actions.length} Remaining Actions</h2>
${render('action/indexBody')}

<div id="actionsArea">
{if actions.length > 0}
${%startFormTagLocal('action', 'updateBulk', null, { style: 'border: none;'})%}
  <table class="hoverable sortable" id="actions">
    <tr><td nowrap="nowrap" style="display:none;" class="bulk">Selected</td>
        <td>Action</td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td>Context</td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td>Project</td>
        {/if}
        <td nowrap="nowrap">Active at</td>
        <td nowrap="nowrap">Due at</td>
        <td nowrap="nowrap">Repeat</td>
        <td></td><td></td>
        </tr>
  {for action in actions}
    <tr id="action_${action.id}">
        <td nowrap="nowrap" style="display:none; text-align:center;" class="bulk">
            <input type="checkbox" 
                   name="selectedActions[${action.id}]" id="selectedActions[${action.id}]"/>
            </td>
        <td nowrap="nowrap">
            <input type="submit" class="toggleAction"
                   name="toggleAction_${action.id}"
                   value="${action.completedAt == null ? 'Done' : 'Not Done'}"
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode.parentNode);
                            return false;{/minify}"
                   style="display:inline;"/>
            ${actionLink(res, action)}
        </td>
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.context}
          <td nowrap="nowrap">
            {if action.contextId != null}
               ${linkToLocal(action.getContext().name, 'context', 'show', action.contextId)}
            {/if}</td>
        {/if}
        {if !defined('actionsIgnoreColumns') || !actionsIgnoreColumns.project}
          <td>{if action.projectId != null}
               ${linkToLocal(action.getProject().name, 'project', 'show', action.projectId)}
            {/if}</td>
        {/if}
        <td nowrap="nowrap">${localDateString(action.activeAt)}</td>
        <td nowrap="nowrap">${localDateString(action.dueAt)}</td>
        <td nowrap="nowrap">${action.repeatSummary()}</td>
        <td>${linkToLocal('edit', 'action', 'edit', action.id)}</td>
        <td>${%linkToLocal('delete', 'action', 'destroy', action.id, { confirm: true })%}</td>
    </tr>
  {/for}
  </table>
 
  <br/>
  <div>
    <a href="#" 
       onclick="TrimPath.junction.env.toggleDisplay('bulkMods'); {minify}
                for (var i = 0, rows = $('actions').rows; i < rows.length; i++)
                    TrimPath.junction.env.toggleDisplay(rows[i].cells[0]);
                return false;{/minify}">
       bulk changes</a>
    <div id="bulkMods" style="display:none;">
    <br/>
    <fieldset class="bulk">
      <legend>Bulk changes to selected Actions above: 
        (<a href="#" onclick="{minify}
                              var c = $('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = true;
                              }; return false{/minify}">all</a> or 
         <a href="#" onclick="{minify}
                              var c = $('actions').getElementsByTagName('input');
                              for (var i = 0; i < c.length; i++) {
                                if (c[i].type == 'checkbox')
                                    c[i].checked = false;
                              }; return false{/minify}">none</a>)
      </legend>
      {var choices = Context.choices()}
      ${choices.unshift(["(no change)", "noop"]) |eat}
      <label>Context:</label> ${select('bulk_action', 'contextId', choices)}<br/>
      {var choices = Project.choices()}
      ${choices.unshift(["(no change)", "noop"]) |eat}
      <label>Project:</label> ${select('bulk_action', 'projectId', choices)}<br/>
      {var choices = [["(no change)", "noop"]].concat(colorChoices)}
      <label>Color:</label> ${select('bulk_action', 'color', choices)}<br/>
      <label for="bulk_action[activeAt]">Active at:</label> 
         <input type="text" name="bulk_action[activeAt]" id="bulk_action[activeAt]" value="(no change)">
         ${dateFillSelect('bulk_action[activeAt]')}<br/>
         <span class="btw">example: 2005/09/01</span><br/>
      <label for="bulk_action[dueAt]">Due at:</label> 
         <input type="text" name="bulk_action[dueAt]" id="bulk_action[dueAt]" value="(no change)">
         ${dateFillSelect('bulk_action[dueAt]')}<br/>
         <span class="btw">example: 2005/09/01</span><br/>
      <div class="submit">
        ${%submitButtonLocal("doBulkUpdate", "Change selected Actions", { confirm: true })%}
      </div>
      <div class="submit">
        ${%submitButtonLocal("doBulkDelete", "Deleted selected Actions", { confirm: true })%}
      </div>
    </fieldset>
    </div>
  </div>
${endFormTag()}
{/if}
</div>

{eval}
return TrimPath.junction.env.eventually("Sortable.init()");
{/eval}

{var normalForm = req.actionName == 'create' || req.actionName == 'newInstance'}
{var numCols    = normalForm ? 30 : 15}
${startFormTagLocal('action', 'create')}
  <h2>Create a new Action
      {if defined('action') && action.contextId != null}in ${action.getContext().name}{/if}
      </h2>
  <label for="action[name]" class="required">Name:</label> ${textField('action', 'name')} 
    ${errorMessageOn('action', 'name')}<br/>
  <label for="action[notes]">Notes:</label> ${%textArea('action', 'notes', { cols: numCols, rows: 7 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 1}
    <label for="action[contextId]">Context:</label> ${select('action', 'contextId', choices)}<br/>
  {/if}
  {var choices = Project.choices()}
  {if choices.length > 1}
    <label for="action[projectId]">Project:</label> ${select('action', 'projectId', choices)}<br/>
  {/if}
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt', { valueFilter: localDateString })%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt', { valueFilter: localDateString })%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[repeat]">Repeat:</label> ${render('action/repeat')}<br/>
  <div class="submit">
    ${submitButtonLocal("doCreate", "OK")}
    {if normalForm}
      ${linkToLocal('Cancel', 'action', 'index')}
    {/if}
  </div>
${endFormTag()}

{eval}
return TrimPath.junction.env.eventually("$('action[name]').focus()");
{/eval}

${startFormTagLocal('action', 'createBulk')}
  <h2>Bulk entry of Actions</h2>
  <label for="names" class="required">Actions:</label> 
    <textarea name="names" id="names" cols="50" rows="8"></textarea><br/>
    <span class="btw">Enter or paste one action per line</span><br/>
  <br/>
  <label for="action[contextId]">Context:</label> ${select('action', 'contextId', Context.choices())}<br/>
  <label for="action[projectId]">Project:</label> ${select('action', 'projectId', Project.choices())}<br/>
  <label for="action[color]">Color:</label> ${select('action', 'color', colorChoices)}<br/>
  <label for="action[activeAt]">Active at:</label> ${%textField('action', 'activeAt')%} ${dateFillSelect('action[activeAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="action[dueAt]">Due at:</label> ${%textField('action', 'dueAt')%} ${dateFillSelect('action[dueAt]')}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <br/>
  <div class="submit">
    ${submitButtonLocal("doCreateBulk", "Create Actions")}
    ${linkToLocal('Cancel', 'action', 'index')}
  </div>
${endFormTag()}

{eval}
return TrimPath.junction.env.eventually("$('names').focus()");
{/eval}

<table width="90%"><tr><td nowrap="nowrap">
<div class="newInstanceMini">
${%startFormTagLocal('action', 'create', null, { id: 'quickAddAction' })%}
<table>
<tr><td>Action:</td>
    <td nowrap="nowrap" width="99%">
        ${%textField('action', 'name', { size: 50 })%} 
        {var choices = Context.choices()}
        {if choices.length > 1}
          Context: ${%select('action', 'contextId', choices)%}
        {/if}
        {var choices = Project.choices()}
        {if choices.length > 1}
          Project: ${%select('action', 'projectId', choices)%}
        {/if}
        </td>
    </tr>
<tr><td>Color:</td>
    <td nowrap="nowrap">
        ${%select('action', 'color', colorChoices)%}
        Active: ${%hiddenField('action', 'activeAt', { valueFilter: localDateString })%} 
                ${%dateFillSelect('action[activeAt]')%}
        ${%submitButtonLocal("doCreate", "Add Action")%} 
        ${%linkTo('detail entry', 'action', 'newInstance', null, { onclick: "TrimPath.junction.localPost('action', 'newInstance', null, TrimPath.junction.env.formToReq('quickAddAction')); return false" })%} | 
        ${%linkToLocal('bulk entry', 'action', 'newInstanceBulk')%}
        <input type="hidden" name="from" value="${req.controllerName},${req.actionName}"/>
        </td>
    </tr>
</table>
${endFormTag()}
</div>
</td></tr></table>

{eval}
return TrimPath.junction.env.eventually("$('action[name]').focus()");
{/eval}

${res.action_repeat = Action.repeatCodeToInfo(defined('action') ? action.repeat : null) |eat}
<div class="actionRepeat">
  <table>
    <tr><td nowrap="nowrap">
      ${radioButton('action_repeat', 'type', '')} 
        Don't repeat<br/>
      ${radioButton('action_repeat', 'type', 'w')} 
        Every 
        <select name="action_repeat[w1]">
          ${optionsForSelect(dayOfWeekChoices, action_repeat.w1 != null ? action_repeat.w1 : 1)}
        </select>
        <br/>
      ${radioButton('action_repeat', 'type', 'm')} 
        On the 
        <input type="input" name="action_repeat[m1]" size="3" value="${action_repeat.m1 || 5}"/>th day of every month<br/>
      ${radioButton('action_repeat', 'type', 'n')} 
        On the
        <select name="action_repeat[n1]">
          ${optionsForSelect(weekOfMonthChoices, action_repeat.n1 || 1)}
        </select>
        <select name="action_repeat[n2]">
          ${optionsForSelect(dayOfWeekChoices, action_repeat.n2 != null ? action_repeat.n2 : 1)}
        </select>
        of each month
        <br/>
      ${radioButton('action_repeat', 'type', 'y')} 
        On 
        <input type="input" name="action_repeat[y1]" size="3" value="${action_repeat.y1 || 1}"/> /
        <input type="input" name="action_repeat[y2]" size="3" value="${action_repeat.y2 || 31}"/> of each year (mm/dd)<br/>
      ${radioButton('action_repeat', 'type', 'a')} 
        <input type="input" name="action_repeat[a1]" size="4" value="${action_repeat.a1 || 14}"/>
        days after the Action is completed<br/>
    </td></tr>
  </table>
</div>

<div class="form">
 <h2 style="${colorStyle(action)}">Action: ${action.name}</h2>
 <table>
  <tr valign="top">
    <td class="label required">Name:
    </td>
    <td style="${colorStyle(action)}">${action.name}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">Notes:
    </td>
    <td>${action.notes}
    </td>
  </tr>
  <tr>
    <td class="label">Context:
    </td>
    <td>{if action.contextId}${linkToLocal(action.getContext().name, 'context', 'show', action.contextId)}{/if}
    </td>
  </tr>
  <tr>
    <td class="label">Project:
    </td>
    <td>{if action.projectId}${linkToLocal(action.getProject().name, 'project', 'show', action.projectId)}{/if}
    </td>
  </tr>
  <tr>
    <td class="label">Color:
    </td>
    <td style="${colorStyle(action)}">${action.color}
    </td>
  </tr>
  <tr>
    <td class="label">Active at:
    </td>
    <td>${localDateString(action.activeAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Due at:
    </td>
    <td>${localDateString(action.dueAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Completed at:
    </td>
    <td>${localDateString(action.completedAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Repeat:
    </td>
    <td>${action.repeatSummary()}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      ${buttonToLocal('Edit', 'action', 'edit', action.id)} 
      {if action.completedAt == null}
        ${buttonToLocal('Mark As Completed', 'action', 'toggleComplete', action.id)}
      {/if}
      ${%buttonToLocal('Delete', 'action', 'destroy', action.id, { confirm: true })%}
    </td>
  </tr>
 </table>
</div>

${startFormTagLocal('context', 'update', context.id)}
 <h2>Context: ${context.name}</h2>
 <div class="wide">
  <label for="context[name]" class="required">Name:</label> ${textField('context', 'name')} 
    ${errorMessageOn('context', 'name')}<br/>
  <label for="context[notes]">Notes:</label> ${%textArea('context', 'notes', { cols: 40, rows: 10 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 2}
    <label for="context[parentContextId]">Parent Context:</label> ${select('context', 'parentContextId', choices)}<br/>
  {/if}
  <div class="submit">
    ${submitButtonLocal("doUpdate", "OK")}
    ${linkToLocal('Cancel', 'context', 'show', context.id)}
  </div>
 </div>
${endFormTag()}

{if contexts.length > 0}
  ${render('action/newInstanceMini')}
{/if}

<div class="contexts">
  <h2>Contexts</h2>
  <table class="hoverable">
  {if contexts.length > 0}
    {for context in contexts}
      <tr><td nowrap="nowrap">
            {if context.name == context.nameInLevel}
               <h3>${linkToLocal(context.name, 'context', 'show', context.id)}</h3>
            {else}
               <h4>${linkToLocal(context.name, 'context', 'show', context.id)}</h4>
            {/if}
          </td>
          <td>${linkToLocal('edit', 'context', 'edit', context.id)}</td>
          <td>${%linkToLocal('delete', 'context', 'destroy', context.id, { confirm: destroyConfirm(context) })%}</td>
          </tr>
    {/for}
    </table>
  {else}
    You haven't created any Contexts yet.<p>
    A Context represents a place or environment 
    where key tools are available to complete some Actions.  
    Example Contexts might be "computer & phone", "office", "backyard".<p>
    Would you like to create a Context now?<p>
  {/if}
</div>

<br/>
${buttonToLocal('Create a new Context', 'context', 'newInstance')}

${startFormTagLocal('context', 'create')}
 <h2>Create a new Context</h2>
 <div class="wide">
  <label for="context[name]" class="required">Name:</label> ${textField('context', 'name')}
    ${errorMessageOn('context', 'name')}<br/>
  <label for="context[notes]">Notes:</label> ${%textArea('context', 'notes', { cols: 40, rows: 10 })%}<br/>
  {var choices = Context.choices()}
  {if choices.length > 1}
    <label for="context[parentContextId]">Parent Context:</label> ${select('context', 'parentContextId', choices)}<br/>
  {/if}
  <div class="submit">
    ${submitButtonLocal("doCreate", "OK")}
    ${linkToLocal('Cancel', 'context', 'index')}
  </div>
 </div>
${endFormTag()}

<div class="form">
 <h2>Context: ${context.name}</h2>
 <table>
  <tr valign="top">
    <td class="label required">Name:
    </td>
    <td>${context.name}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">Notes:
    </td>
    <td>${context.notes}
    </td>
  </tr>
  <tr>
    <td class="label">Parent Context:
    </td>
    <td>{if context.parentContextId}${linkToLocal(context.getParentContext().name, 'context', 'show', context.parentContextId)}{/if}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      ${%buttonToLocal('Edit', 'context', 'edit', context.id)%}
      ${%buttonToLocal('Delete', 'context', 'destroy', context.id, { confirm: destroyConfirmMessage })%}
    </td>
  </tr>
 </table>
</div>

<div class="related">
  ${render('action/indexBody')}
  <br/>
  ${startFormTagLocal('action', 'newInstance')}
    <input type="hidden" name="action[contextId]" id="action[contextId]" value="${context.id}">
    ${%submitButtonLocal('doActionCreate', 'Add an Action to ' + TrimPath.junctionUtil.encodeQuotes(context.name))%}
  ${endFormTag()}
</div>

<div>
<h2>About Next Action</h2>
Next Action version: ${NEXT_ACTION_VERSION} beta<p>

Next Action is a <a href="http://trimpath.com/project/wiki/GettingThingsDone">Getting 
Things Done</a> todo-list tracking tool.  It's a personal database for your GTD info.

<h3>Features Include:</h3>
<ul>
<li>Free and Open Source.</li>
<li>Fast and snappy.</li>
<li>Easy to use.</li>
<li>It runs on your computer, so you can use it when you're not connected online.</li>
</ul>

<h3>Get started:</h3>
Start by saving Next Action to your computer.  Just use the 
'File -> Save Page As...' menu command in your browser (Firefox, right?).  
And, be sure to use 'Save as type:' of 'Web Page, complete', 
which will actually save an .htm file and a directory of 
any associated files (stylesheets, javascripts, etc).<p>

Next, open up that local .htm file into your browser.  Now you're working with your own local app and local data.<p>

You can create your own actions from the ${linkToLocal('Actions', 'action', 'index')} page.<p>

The ${linkToLocal('Dashboard', 'home', 'dashboard')} 
page gives you a concise overview of your remaining actions.<p>

The ${linkToLocal('Dashboard', 'home', 'dashboard')} page is 
also great for printing out as an action cheatsheet for when you're on the go.  
You can also output easily to your 
<a href="http://trimpath.com/project/wiki/HipsterTabletPc">Hipster Tablet PC</a><p>

Don't forget to save your work early and often by using 'File -> Save Page As...'.  
The Next Action tool doesn't (yet) save changes to disk automatically.<p>

Also, if you want to start from a clean database, click here: 
${%buttonToLocal('Delete All Records!', 'home', 'deleteAllRecords', null, { confirm: 'This operation is irreversible.  Are you sure you want to clear the entire database?' })%}

<h3>Software Required:</h3>
Firefox 1.0+.  This beta version will somewhat run in the IE 6.0+, too, 
but it's best right now just doing view or read-only operations.  
Opera and Safari is not supported (yet).<p>

<h3>What is 'show me the code'?</h3>
Next Action is a 
<a href="http://trimpath.com/project/wiki/SinglePageApplicationAndDevelopmentEnvironment">SPADE</a> 
application, meaning it is a single page application that 
includes a built-in development environment.  
So, you can customize and tailor Next Action 
to your exact needs, without needing any other software.<p>

If you know <a href="http://trimpath.com/project/wiki/RubyRailsVsJavaScriptJunction">Ruby On Rails</a>, 
you should be right at home with the 
<a href="http://trimpath.com/project/wiki/TrimJunction">Junction</a> 
MVC framework that was used to build Next Action.  It's also a 
frictionless way to get familiar with Rails-like concepts.<p>

<h3>Learn More:</h3>
Check back at the Next Action 
<a href="http://trimpath.com/project/wiki/NextAction">intro page</a> 
and the <a href="http://trimpath.com/blog">TrimPath blog</a> every 
once in awhile.<p>

</div>

{var NUM_ACTION_COLUMNS = Preference.getInt('dashboard.numActionColumns', 3)}
{var ACTION_DAYS_AHEAD  = Preference.getInt('dashboard.activeDaysAhead', null)}
{var FOCUS_CONTEXT_ID   = req['focusContextId'] || 'all'}
{var FOCUS_PROJECT_ID   = req['focusProjectId'] || 'all'}

{macro contextSection(contextId, contextName, contextNameInLevel, contextParentId)}
  {if FOCUS_CONTEXT_ID == 'all' ||
      FOCUS_CONTEXT_ID == contextId ||
      FOCUS_CONTEXT_ID == contextParentId}
    {var isTopLevel = (contextName == contextNameInLevel) || (contextId == null)}
    {if (isTopLevel)}
        <tr><td colspan="${NUM_ACTION_COLUMNS + 1}"><hr/></td></tr>
    {/if}
    <tr {if isTopLevel}class="topLevel"{/if}>
        <td valign="top" nowrap="nowrap">
          {if contextId != null}
            {if contextName == contextNameInLevel}
              <h3>${linkToLocal(contextNameInLevel, 'context', 'show', contextId)}</h3>
            {else}
              <h4>${linkToLocal(contextName, 'context', 'show', contextId)}</h4>
            {/if}
          {else}
            <i>${contextName}</i>
          {/if}
        </td>
        {var column = 0}
        {for action in actions}
          {if action.contextId == contextId &&
              (FOCUS_PROJECT_ID == 'all' ||
               FOCUS_PROJECT_ID == action.projectId)}
            {if column > 0 && column % NUM_ACTION_COLUMNS == 0}
              </tr><tr><td></td>
            {/if}
            <td id="action_${action.id}" valign="top">
              <span>
                <input type="checkbox" ${action.completedAt != null ? '"checked"' : ''}
                   onclick="TrimPath.junction.localPost('action', 'toggleComplete', ${action.id}, { silent: true });{minify}
                            this.parentNode.style.backgroundColor = 'red'; 
                            new Effect.Fade(this.parentNode);{/minify}">
                ${actionLink(res, action)}
              </span>
            </td>
            ${column = column + 1 |eat}
          {/if}
        {/for}
    </tr>
  {/if}
{/macro}

${render('action/newInstanceMini')}

<div>
  <h2>Dashboard <span class="btw">${localDateString(new Date())}</span></h2>
  {if (contexts.length > 0 || actions.length > 0)}
  <table><tr><td>
  <div class="dashboard">
    <table>
      <tr><th nowrap="nowrap">
            Context:
            {var choices = Context.choices(false)}
            {if choices.length > 0}
              <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { focusContextId: this.value, focusProjectId: '${FOCUS_PROJECT_ID}' }); return false;">
                ${optionsForSelect([['(show all)', 'all']].concat(choices), FOCUS_CONTEXT_ID)}
              </select>
            {/if}
            </th>
          <th colspan="${NUM_ACTION_COLUMNS}">
            Actions:
            {var choices = Project.choices(false)}
            {if choices.length > 0}
              <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { focusContextId: '${FOCUS_CONTEXT_ID}', focusProjectId: this.value }); return false;">
                ${optionsForSelect([['(for all Projects)', 'all']].concat(choices), FOCUS_PROJECT_ID)}
              </select>
            {/if}
            </th></tr>
      {for context in contexts}
        ${contextSection(context.id, context.name, context.nameInLevel, context.parentContextId)}
      {/for}
      ${contextSection(null, "no context")}
    </table>
  </div>
  <br/>
  <div class="dashboardPrefs">
    show actions for:
    <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { activeDaysAhead: this.value }); return false;">
      ${optionsForSelect(activeDaysAheadChoices, ACTION_DAYS_AHEAD)}
    </select><br/>
    show # of columns: 
    <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { numActionColumns: this.value }); return false;">
      ${optionsForSelect([1, 2, 3, 4, 5, 100], NUM_ACTION_COLUMNS)}
    </select>
  </div>
  </td></tr></table>
  {else}
    {if ACTION_DAYS_AHEAD == null}
      You have zero remaining Actions.<p>
      Please use the above Action entry area to add an Action.<p>
    {else}
      No Actions match the active date filter.<p>
      Change the Actions active date filter:
      <select onchange="TrimPath.junction.localGet('home', 'dashboard', null, { activeDaysAhead: this.value }); return false;">
        ${optionsForSelect(activeDaysAheadChoices, ACTION_DAYS_AHEAD)}
      </select>
      <p>
      Or, please use the above Action entry area to add an Action.<p>
    {/if}
  {/if}
</div>

<div class="header">
    <div class="header_tools">
      ${NEXT_ACTION_VERSION} beta
       |
      ${linkToLocal('about', 'home', 'about')}
       |
      <a href="http://trimpath.com/forum/viewforum.php?id=3" target="_blank">forums</a>
       |
      <a href="#" onclick="return TrimPath.junction.env.devAreaShow()">show me the code</a>
    </div>
    <span class="header_title">
      Next Action</span>
    <br class="clear"/>
    <div class="header_menu">
      <ul>
        <li>${linkToLocal('Dashboard', 'home', 'dashboard')}</li>
        <li>${linkToLocal('Actions', 'action', 'index')}</li>
        <li>${linkToLocal('Projects', 'project', 'index')}</li>
        <li>${linkToLocal('Contexts', 'context', 'index')}</li>
        <li>${linkToLocal('Completed', 'action', 'completed')}</li>
        <li>${linkToLocal('Statistics', 'home', 'statistics')}</li>
      </ul>
    </div>
</div>
<div class="main_flash_notice" id="main.flash_notice">
  ${render('layouts/flash_notice')}
</div>
<div>
<div class="main" id="main">
  ${render('home/dashboard')}
</div>
<br class="clear"/>
</div>
<div class="footer">
    <hr/>
    Copyright (c) 2005 <a href="http://metaha.com/">Metaha</a> 
     |
    a <a href="http://trimpath.com/">TrimPath</a> production
     | 
    ${linkToLocal('about', 'home', 'about')}
     |
    <a href="http://trimpath.com/forum/viewforum.php?id=3" target="_blank">forums</a>
     |
    <a href="#" onclick="return TrimPath.junction.env.devAreaShow()">show me the code</a>
</div>
<div id="junctionDevArea" style="display:none;"></div>

{macro statsTable(title, data, color)}
  <h3>${title}</h3>
  <table class="hoverable">
      <tr><td width="150" nowrap="nowrap">Context</td>
          <td>Actions</td>
          <td></td>
          </tr>
      {var total = 0}
      {for context in data}
        <tr><td nowrap="nowrap">
                {if context.contextId}
                  ${linkToLocal(context.contextName, 'context', 'show', context.contextId)}
                {else}
                  (no context)
                {/if}
                </td>
            <td>${context.actionCount} ${total += context.actionCount |eat}</td>
            <td><table width="${context.actionCount * 10}"
                       style="color:${color};background-color:${color}"
                       border="0">
                       <tr><td style="font-size:8px;">.</td></tr></table>
                </td>
            </tr>
      {/for}
      <tr><td>total</td>
          <td>${total}</td></tr>
  </table>
{/macro}

<div>
  <h2>Statistics</h2>
  ${statsTable("Remaining Actions", totalsRemaining, "red")}
  <br/>
  ${statsTable("Completed Actions", totalsCompleted, "green")}
</div>

Next Action (revisit this layout when server-side junction is attempted)
<hr/>
${contentForLayout()}
<hr/>
Copyright (c) Metaha 2005

${flash['notice']}

TODO: Revisit this layout later when server-side junction is attempted.

${startFormTagLocal('project', 'update', project.id)}
 <h2>Project: ${project.name}</h2>
 <div class="wide">
  <label for="project[name]" class="required">Name:</label> ${textField('project', 'name')}
    ${errorMessageOn('project', 'name')}<br/>
  <label for="project[notes]">Notes:</label> ${%textArea('project', 'notes', { cols: 40, rows: 10 })%}<br/>
  <label for="project[dueAt]">Due at:</label> ${%textField('project', 'dueAt', { valueFilter: localDateString })%}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <label for="project[completedAt]">Completed at:</label> ${%textField('project', 'completedAt', { valueFilter: localDateString })%}
    <input type="submit" value="Today" onclick="{minify}
      $('project[completedAt]').value = TrimPath.junctionUtil.toLocalDateString(new Date());
      return false;
      {/minify}"/>
    <br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <div class="submit">
    ${submitButtonLocal("doUpdate", "OK")}
    ${linkToLocal('Cancel', 'project', 'show', project.id)}
  </div>
 </div>
${endFormTag()}

{if projects.length > 0}
  ${render('action/newInstanceMini')}
{/if}

<div>
  <h2>${projects.length} Projects</h2>
  {if projects.length > 0}
    ${buttonToLocal('Create a new Project', 'project', 'newInstance')}
    <br/>
    <br/>
    <table class="hoverable sortable" id="projects">
      <tr><td>Project</td>
          <td>Due at</td>
          <td>Completed at</td>
          <td></td>
          <td></td>
          </tr>
    {for project in projects}
      <tr><td width="200">${linkToLocal(project.name, 'project', 'show', project.id)}</td>
          <td>${localDateString(project.dueAt)}</td>
          <td>${localDateString(project.completedAt)}</td>
          <td>${linkToLocal('edit', 'project', 'edit', project.id)}</td>
          <td>${%linkToLocal('delete', 'project', 'destroy', project.id, { confirm: destroyConfirm(project) })%}</td>
          </tr>
    {/for}
    </table>
  {else}
    You haven't created any Projects yet.<p>
    A Project lets you categorize Actions.  
    Example Projects might be "remodel kitchen", "prepare for baby", "take over the world".<p>
    Would you like to create a Project now?<p>
  {/if}
</div>

<br/>
${buttonToLocal('Create a new Project', 'project', 'newInstance')}

{eval}
return TrimPath.junction.env.eventually("Sortable.init()");
{/eval}

${startFormTagLocal('project', 'create')}
 <h2>Create a new Project</h2>
 <div class="wide">
  <label for="project[name]" class="required">Name:</label> ${textField('project', 'name')}
    ${errorMessageOn('project', 'name')}<br/>
  <label for="project[notes]">Notes:</label> ${%textArea('project', 'notes', { cols: 40, rows: 10 })%}<br/>
  <label for="project[dueAt]">Due at:</label> ${%textField('project', 'dueAt', { valueFilter: localDateString })%}<br/>
    <span class="btw">example: 2005/09/01</span><br/>
  <div class="submit">
    ${submitButtonLocal("doCreate", "OK")}
    ${linkToLocal('Cancel', 'project', 'index')}
  </div>
 </div>
${endFormTag()}

<div class="form">
 <h2>Project: ${project.name}</h2>
 <table>
  <tr valign="top">
    <td class="label required">Name:
    </td>
    <td>${project.name}
    </td>
  </tr>
  <tr valign="top">
    <td class="label">Notes:
    </td>
    <td>${project.notes}
    </td>
  </tr>
  <tr>
    <td class="label">Due at:
    </td>
    <td>${localDateString(project.dueAt)}
    </td>
  </tr>
  <tr>
    <td class="label">Completed at:
    </td>
    <td>${localDateString(project.completedAt)}
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      ${%buttonToLocal('Edit', 'project', 'edit', project.id)%} 
      ${%buttonToLocal('Delete', 'project', 'destroy', project.id, { confirm: destroyConfirmMessage })%}
    </td>
  </tr>
 </table>
</div>

<div class="related">
  ${render('action/indexBody')}
  <br/>
  ${startFormTagLocal('action', 'newInstance')}
    <input type="hidden" name="action[projectId]" id="action[projectId]" value="${project.id}">
    ${%submitButtonLocal('doActionCreate', 'Add an Action to ' + TrimPath.junctionUtil.encodeQuotes(project.name))%}
  ${endFormTag()}
</div>

{eval}
(function() {
    var junctionUtil = TrimPath.junctionUtil;
    var junctionEnv  = TrimPath.junction.env;

    var recordChange = function(path, op, extra) { // Records a change to file content.
        var devAreaChanges = junctionEnv.dataProvider.changesFor("!!junctionDevArea!!");
        if (devAreaChanges != null) {
            devAreaChanges[path] = (extra != null) ? [op, extra] : [op]; // Internally, we only remember the last change.
            junctionEnv.syncDOMData();
        }
    }

    var makeEventHandler = function(handler) {
        return function(evt) {
            evt = (evt) ? evt : ((window.event) ? window.event : null);
            if (evt) {
                var target = (evt.target) ? evt.target : evt.srcElement;
                return handler(evt, target);
            }
        }
    }

    var devArea = junctionEnv.devArea;
    if (devArea == null) {
        devArea = junctionEnv.devArea = {
            makeEventHandler : makeEventHandler,
            code : {
                validElement: function(srcEl) { // Returns true if the element can hold application
                    return (srcEl != null &&    // code content, like for a .js or .jst file.
                            srcEl.id != null && 
                            srcEl.id.length > 0 &&
                            srcEl.id.substring(0, 10) != "/__system/" &&
                            (srcEl.tagName == "PRE" ||     // .jst
                             srcEl.tagName == "SCRIPT" ||  // .js
                             srcEl.tagName == "STYLE"));   // .css
                },
                source: function(srcEl) { // Returns the file content or source code represented by the element.
                    if (devArea.code.validElement(srcEl)) {
                        if (srcEl.tagName == "PRE")
                            return junctionUtil.decodeAngles(junctionEnv.innerText(srcEl));
                        // The junctionEnv.innerText() doesn't work on SCRIPT tags in 
                        // Internet Explorer 6.0, so we just use innerHTML.
                        return srcEl.innerHTML;
                    }
                    return null;
                },
                applyAndSave : function(srcId, doc) { 
                    try {
                        devArea.code.apply(srcId, doc, true);
                        devArea.code.saveAll({ update  : [ { path : srcId,
                                                             src  : junctionUtil.decodeAngles(junctionEnv.innerText($(srcId))) } ], 
                                               destroy : [] });
                    } catch (e) {
                    }
                    return false;
                },
                apply : function(srcId, doc, throwErrors) { 
                    // Called by Apply button to allow code changes to take 
                    // effect but still be unsaved (not sync'ed with persistent storage).
                    var doc     = doc || document;
                    var src     = doc.getElementById(srcId);
                    var srcEdit = doc.getElementById(srcId + '_srcEdit');
                    var srcText = doc.getElementById(srcId + '_srcText');
                    if (src != null && srcEdit != null && srcText != null) {
                        if (src.tagName == "PRE") {    // Most likely jst code.
                            var v = junctionUtil.encodeAngles(srcEdit.value);
                            src.innerHTML     = v;
                            srcText.innerHTML = v;
                        }
                        if (src.tagName == "SCRIPT") { // Most likely js code.
                            var v = junctionUtil.decodeAngles(srcEdit.value);
                            try {
                                junctionUtil.safeEval(v);
                            } catch (e) {
                                alert("ERROR in script " + srcId + ": " + e);
                                if (throwErrors == true)
                                    throw(e);
                                return false;
                            }
                            src.innerHTML     = v;
                            srcText.innerHTML = junctionUtil.encodeAngles(v);
                        }
                        if (src.tagName == "STYLE") {  // Most likely css code.
                            var v = junctionUtil.decodeAngles(srcEdit.value);
                            src.innerHTML     = v;
                            srcText.innerHTML = junctionUtil.encodeAngles(v);
                        }

                        recordChange(srcId, "updated");
                        junctionEnv.templateCache = {};
                    }
                    return false;
                },
                revert : function(srcId, doc) { // Called by Cancel button to revert code changes.
                    var doc     = doc || document;
                    var src     = doc.getElementById(srcId);
                    var srcEdit = doc.getElementById(srcId + '_srcEdit');
                    if (src != null && srcEdit != null) {
                        srcEdit.value = devArea.code.source(src);
                        junctionEnv.toggleDisplay([srcId + '_srcForm', srcId + '_srcText']);
                    }
                    return false;
                },
                create: function(path, fromPath, srcText, doc) { // Invoked during create, copy, and rename.
                    var doc  = doc  || document;
                    var path = path || prompt("Please enter the path of the new .js, .jst or .css file.", "/example/newFile.js");
                    if (path != null) {
                        if (path.charAt(0) != '/')
                            path = '/' + name;
                        var src = doc.getElementById(path);
                        if (src == null) {
                            if (path.match(/(\.js|\.jst|\.css)$/) != null) {
                                if (path.slice(-3) == '.js') {
                                    var yard = doc.getElementById("junction_js_yard");
                                    src = doc.createElement("SCRIPT");
                                    if (srcText != null)
                                        src.innerHTML = junctionUtil.decodeAngles(srcText);
                                } else if (path.slice(-4) == '.jst') {
                                    var yard = doc.getElementById("junction_jst_yard");
                                    src = doc.createElement("PRE");
                                    if (srcText != null)
                                        src.innerHTML = junctionUtil.encodeAngles(srcText);
                                } else if (path.slice(-4) == '.css') {
                                    var yard = doc.getElementsByTagName("HEAD")[0];
                                    src = doc.createElement("STYLE");
                                    if (srcText != null)
                                        src.innerHTML = junctionUtil.decodeAngles(srcText);
                                }

                                src.id = path;
                                yard.appendChild(src);
    
                                var li = doc.createElement("LI");
                                li.id        = path + "_srcLI";
                                li.innerHTML = devArea.contentLI(src.id, srcText, true, "code");
                                var ul = doc.getElementById("junctionDevArea_srcList");
                                ul.insertBefore(li, ul.firstChild);
                                new Effect.Highlight(li);

                                recordChange(path, "created", fromPath);
                            } else
                                alert("Could not create the file '" + path + "', because we can only create .js, .jst or .css files.");
                        } else
                            alert("Could not create a new file,\n because a file already exists at the path '" + path + "'.");
                    }
                    return false;
                },
                copy : function(srcId, doc) {
                    var doc   = doc || document;
                    var srcEl = doc.getElementById(srcId);
                    if (srcEl != null) {
                        var path = prompt("Please enter the path for the copy of '" + srcId +  "'.", "/example/copyFile" + srcId.match(/\.jst?|\.css$/));
                        if (path != null)
                            devArea.code.create(path, srcId, devArea.code.source(srcEl), doc);                
                    }
                    return false;
                },
                rename : function(srcId, doc) {
                    var doc   = doc || document;
                    var srcEl = doc.getElementById(srcId);
                    if (srcEl != null) {
                        var path = prompt("Please enter a new path for '" + srcId +  "'.", "/example/renamedFile" + srcId.match(/\.jst?|\.css$/));
                        if (path != null) {
                            // TODO: Do a proper file rename/move one day.
                            devArea.code.create(path, srcId, devArea.code.source(srcEl), doc);                
                            devArea.code.destroy(srcId, doc, true);
                        }
                    }
                    return false;
                },
                destroy : function(srcId, doc, force) {
                    var doc   = doc || document;
                    var srcEl = doc.getElementById(srcId);
                    if (srcEl != null) {
                        if (force == true ||
                            confirm("Deleting a file is undoable.\n Are you sure you want to delete '" + srcId +  "'?\n") == true) {
                            srcEl.parentNode.removeChild(srcEl);
                            devArea.fadeAndRemove(doc.getElementById(srcId + "_srcLI"));
                            recordChange(srcId, "destroyed");
                        }
                    }
                    return false;
                },
                saveAll : function(delta) {
                    var devAreaChanges = junctionEnv.dataProvider.changesFor("!!junctionDevArea!!");
                    if (devAreaChanges != null) {
                        if (delta == null) {
                            delta = { update  : [], 
                                      destroy : [] };
                            for (var path in devAreaChanges) {
                                if (devAreaChanges[path][0] == "destroyed")
                                    delta.destroy.push(path);
                                else {
                                    var src = $(path);
                                    if (src != null) {
                                        delta.update.push({ 
                                            path : path,
                                            src  : junctionUtil.decodeAngles(junctionEnv.innerText(src)) 
                                        });
                                    }
                                }
                            }
                        }
                        if (delta.update.length > 0 || delta.destroy.length > 0) {
                            if (junctionEnv.isConnected()) {
                                new Ajax.Request("/app/sync_source/" + junctionEnv.appName, {
                                    method       : "post",
                                    asynchronous : true,
                                    parameters   : [ 'delta=', encodeURIComponent(junctionUtil.toJsonString(delta)), 
                                                     '&version=0.1',
                                                     '&conversationId=', encodeURIComponent(junctionEnv.conversationId),
                                                     '&storageRealm=', encodeURIComponent(junctionEnv.storageRealm) ].join('')
                                });
                            }
                        }
                    }
                }
            },
            data : {
                apply : function(srcId, doc, throwErrors) { 
                    // Called by Apply button to allow data changes to take 
                    // effect but still be unsaved (not sync'ed with persistent storage).
                    var doc     = doc || document;
                    var srcEdit = doc.getElementById(srcId + '_srcEdit');
                    var srcText = doc.getElementById(srcId + '_srcText');
                    if (srcEdit != null && srcText != null) {
                        try {
                            var data = junctionUtil.safeEval('(' + junctionUtil.decodeAngles(srcEdit.value) + ')');
                        } catch (e) {
                            alert("ERROR in " + srcId + ": " + e);
                            return false;
                        }
                        if (srcId == "data") {
                            TrimPath.junction.env.dataProvider = TrimPath.junctionUtil.createMemoryDataProvider(data);
                            TrimPath.junction.env.syncDOMData();
                        } else
                            devArea.data.applySchema(data);
                        srcText.innerHTML = junctionUtil.encodeAngles(srcEdit.value);
                    }
                    return false;
                },
                applySchema : function(schema) {
                    TrimPath.junction.env.dataSchemaProvider = { getSchema : function() { return schema; } };
                    TrimPath.junction.queryLang(true); // Force reset.
                },
                revert : function(srcId, doc) { // Called by Cancel button to revert code changes.
                    var doc     = doc || document;
                    var srcEdit = doc.getElementById(srcId + '_srcEdit');
                    if (srcEdit != null) {
                        var content;
                        if (srcId == "data")
                            content = TrimPath.junction.env.dataProvider.memoryData;
                        else
                            content = TrimPath.junction.env.dataSchemaProvider.getSchema();
                        srcEdit.value = TrimPath.junctionUtil.encodeAngles(TrimPath.junctionUtil.toJsonString(content, ""));
                        junctionEnv.toggleDisplay([srcId + '_srcForm', srcId + '_srcText']);
                    }
                    return false;
                },
                saveAll : function() {
                    TrimPath.junction.env.syncToServerAll();
                }
            },
            sql : {
                apply : function(srcId, doc) {
                    var doc     = doc || document;
                    var srcEdit = doc.getElementById(srcId + '_srcEdit');
                    var sql     = String(srcEdit.value).split('\n--------\n')[0];
                    try {
                        var stmt    = TrimPath.junction.queryLang().parseSQL(sql);
                        var records = TrimPath.junction.env.dataProvider.query(stmt);
                        srcEdit.value = sql + '\n--------\n' + junctionUtil.toJsonString(records, "");
                    } catch (e) {
                        srcEdit.value = sql + '\n--------\n' + e;
                    }
                    return false;
                },
                applyLabel : "run sql"
            },
            test : {
                run : function() {
                    if (devArea.test.assertCount > 0)
                        return;
                    devArea.test.assertCount = 0;

                    var start = new Date();
                    devArea.test.log(junctionUtil.toSQLDateString(start) + ": starting runTests()...");
                    $('junctionDevArea_testBar').style.backgroundColor = '#fff';

                    var testDone = function(success) {
                        $('junctionDevArea_testBar').innerHTML = "asserts #: " + devArea.test.assertCount + "<br/>";
                        if (!withDelayBegun) {
                            $('junctionDevArea_testBar').style.backgroundColor = (success ? '#3f3' : '#f33');
                            var end = new Date();
                            devArea.test.log(junctionUtil.toSQLDateString(end) + ": finished, elapsed seconds: " + ((end.getTime() - start.getTime()) / 1000));
                            devArea.test.assertCount = 0;
                        }
                        return success;
                    }

                    var withDelayBegun = false;
                    var withDelayInvoke = function(millis, currFuncIndex, funcs) {
                        var success = runFunc(funcs[currFuncIndex]);
                        if (success && currFuncIndex + 1 < funcs.length) {
                            setTimeout(function() { withDelayInvoke(millis, currFuncIndex + 1, funcs) }, millis || 2000);
                            return;
                        }
                        withDelayBegun = false;
                        return testDone(success);
                    }

                    var ctx = { log    : devArea.test.log,
                                assert : devArea.test.assert,
                                withDelay : function(millis) { 
                                    withDelayBegun = true;
                                    var funcs = arguments;
                                    setTimeout(function() { withDelayInvoke(millis, 1, funcs) }, millis || 2000);
                                } 
                               };

                    var runFunc = function(testFunc) {
                        try {
                            testFunc(ctx);
                            return testDone(true);
                        } catch (e) {
                            devArea.test.log("runTests() EXCEPTION: " + e);
                            return testDone(false);
                        }
                    }

                    runFunc(runTests);
                },
                clearLog : function() {
                    $('junctionDevArea_testBar').style.backgroundColor = '#fff';
                    $('junctionDevArea_testBar').innerHTML = "<br/>";
                    $('junctionDevArea_testLog').innerHTML = "";
                    devArea.test.assertCount = 0;
                },
                log : function(msg) {
                    var el = $('junctionDevArea_testLog');
                    if (el != null) {
                        var li = document.createElement('LI');
                        li.innerHTML = msg;
                        el.appendChild(li);
                    }
                },
                assertCount : 0,
                assert : function(t, msg) {
                    devArea.test.assertCount++;
                    $('junctionDevArea_testBar').innerHTML = "asserts #: " + devArea.test.assertCount + "<br/>";
                    if (t)
                        devArea.test.log('<span style="background-color: #cfc;">ok</span> ' + devArea.test.assertCount + ': ' + msg);
                    else {
                        devArea.test.log('<span style="background-color: #f33;">fail</span> ' + devArea.test.assertCount + ': ' + msg);
                        throw ("assert failed: " + t + ": " + msg);
                    }
                }
            },
            linesOfCode : function(srcNodes) {
                srcNodes = TrimPath.junctionUtil.toArray(srcNodes, null, devArea.code.validElement);
                var count = 0;
                for (var i = 0; i < srcNodes.length; i++)
                    count = count + devArea.code.source(srcNodes[i]).split('\n').length;
                return count;
            },
            idComparator : function(a, b) { 
                if (a.id == null || b.id == null) 
                    return 0; 
                return (a.id < b.id) ? -1 : 1;
            },
            fadeAndRemove : function(el) {
                if (el == null) 
                    return;
                var fader = new Effect.Fade(el);
                clearTimeout(fader.timer);
                fader.current  = 100;
                fader.fadeOrig = fader.fade;
                fader.fade = function() { 
                    if (this.isFinished()) { 
                        this.element.parentNode.removeChild(this.element); 
                        return; 
                    }
                    this.fadeOrig();
                }
                fader.fade();
            },
            tabPanelListInitAll : function() {
                var tabPanelLists = document.getElementsByClassName("tabpanel_list");
                for (var i = 0; i < tabPanelLists.length; i++) 
                    TrimPath.junction.env.devArea.tabPanelListInit(tabPanelLists[i]);
            },
            tabPanelListInit : function(tabPanelList) {
                var links = tabPanelList.getElementsByTagName("A");
                for (var j = 0; j < links.length; j++) {
                    links[j].onclick = TrimPath.junction.env.devArea.tabPanelLinkOnClick;
                    var content = $(links[j].href.split('#')[1]);
                    if (content) {
                        if (links[j].parentNode.className.indexOf('tabpanel_active') >= 0)
                            content.style.display = "block";
                        else
                            content.style.display = "none";
                    }
                }
            },
            tabPanelLinkOnClick : makeEventHandler(function(evt, target) {
                var liArr = target.parentNode.parentNode.getElementsByTagName("LI");
                for (var i = 0; i < liArr.length; i++) {
                    liArr[i].className = liArr[i].className.replace(/\s*tabpanel_active\s*/g, '');
                    if (liArr[i] == target.parentNode)
                        liArr[i].className = (liArr[i].className.length > 0 ? liArr[i].className + ' ' : '') + 'tabpanel_active';
                }
                devArea.tabPanelListInit(target.parentNode.parentNode);
                return false;
            })
        }
    }
}) ();

// Expose some global convenience objects.
testLib = TrimPath.junction.env.devArea.test;
{/eval}

{macro devAreaContentLI(srcId, srcText, opened, srcType)}
  {var srcText = srcText || ""}
  {var srcType = srcType || "code"}
  {var opened  = (opened == true) ? "display:block;" : "display:none;"}
  {var css     = srcId.split('.')[1]}
  <a href="#" onclick="TrimPath.junction.env.toggleDisplay('${srcId}_srcArea'); return false"
     class="junctionDevArea_content_${css}">[+]</a>
  <a href="#" onclick="TrimPath.junction.env.toggleDisplay('${srcId}_srcArea'); return false">${srcId}</a>
  <div class="junctionDevArea_srcArea" id="${srcId}_srcArea" style="${opened}{minify}
    margin: 1em;
    border: 1px solid #333;
    background: #eee;
    padding: 1em;
    {/minify}">
    <div>
      {if srcType == "code"}
        <div style="float:right;">
          <a href="#" onclick="return TrimPath.junction.env.devArea.code.copy('${srcId}')">copy</a>
          <a href="#" onclick="return TrimPath.junction.env.devArea.code.rename('${srcId}')">rename</a>
          <a href="#" onclick="return TrimPath.junction.env.devArea.code.destroy('${srcId}')">delete</a>
        </div>
      {/if}
      <div>
        <a href="#" onclick="TrimPath.junction.env.toggleDisplay(['${srcId}_srcForm', '${srcId}_srcText']); return false">edit</a>
      </div>
    </div>
    <div style="margin-top:1em;">
      {var srcTextEncoded = TrimPath.junctionUtil.encodeAngles(srcText) /* IE barfs when using h|escape modifier. */}
      <form id="${srcId}_srcForm" style="display:none;">
        <textarea id="${srcId}_srcEdit" style="width:100%;height:20em;">${srcTextEncoded}</textarea>
        <div>
          {if TrimPath.junction.env.devArea[srcType].applyAndSave != null && TrimPath.junction.env.isConnected()}
            <input type="submit" value="apply & save" 
                        onclick="return TrimPath.junction.env.devArea.${srcType}.applyAndSave('${srcId}')"> 
          {/if}
          {if TrimPath.junction.env.devArea[srcType].apply != null}
            <input type="submit" value="${TrimPath.junction.env.devArea[srcType].applyLabel || 'apply'}" 
                        onclick="return TrimPath.junction.env.devArea.${srcType}.apply('${srcId}')"> 
          {/if}
          {if TrimPath.junction.env.devArea[srcType].revert != null}
            <a href="#" onclick="return TrimPath.junction.env.devArea.${srcType}.revert('${srcId}')">cancel</a>
          {/if}
        </div>
      </form>
      <pre id="${srcId}_srcText" style="display:block;"
           ondblclick="TrimPath.junction.env.toggleDisplay(['${srcId}_srcForm', '${srcId}_srcText']); return false">${srcTextEncoded}</pre>
    </div>
  </div>
  <br/>
{/macro}

{eval} TrimPath.junction.env.devArea.contentLI = devAreaContentLI; {/eval}

<!-- =================================================== -->

<div style="margin:1em;">
  <ul class="tabpanel_list">
    <li class="tabpanel_active"><a href="#junctionDevArea_code">Code</a></li>
    <li><a href="#junctionDevArea_data">Data</a></li>
    <li><a href="#junctionDevArea_test">Test</a></li>
    <li><a href="#junctionDevArea_statistics">Statistics</a></li>
  </ul>

  <div id="junctionDevArea_code" class="tabpanel_content">
    <div>
      {if TrimPath.junction.env.isConnected()}
        <input type="submit" onclick="return TrimPath.junction.env.devArea.code.saveAll()" value="Save All Changed Files"/>
      {/if}
      <input type="submit" onclick="return TrimPath.junction.env.devArea.code.create(null, null, null)" value="New File..."/>
    </div>
    
    <div class="junctionDevArea_code_body" id="junctionDevArea_code_body">
      {var srcs = TrimPath.junctionUtil.toArray(document.getElementById("junction_js_yard").childNodes, 
                                                null, TrimPath.junction.env.devArea.code.validElement)}
      {var srcs = srcs.concat(TrimPath.junctionUtil.toArray(document.getElementById("junction_jst_yard").childNodes, 
                                                            null, TrimPath.junction.env.devArea.code.validElement))}
      {var srcs = srcs.concat(TrimPath.junctionUtil.toArray(document.getElementsByTagName("STYLE"),
                                                            null, TrimPath.junction.env.devArea.code.validElement))}
      {var srcs = srcs.sort(TrimPath.junction.env.devArea.idComparator)}
      <ul id="junctionDevArea_srcList" style="margin-left: 1em; padding: 0 0; list-style-type: none;">
        {for src in srcs}
          {var srcText = TrimPath.junction.env.devArea.code.source(src)}
          {if (srcText != null)}
            <li id="${src.id}_srcLI">${devAreaContentLI(src.id, srcText, false, "code")}</li>
          {/if}
        {/for}
      </ul>
    </div>
  </div>

  <div id="junctionDevArea_data" class="tabpanel_content">
    {if TrimPath.junction.env.isConnected()}
      <div>
        <input type="submit" onclick="return TrimPath.junction.env.devArea.data.saveAll()" value="Save All Data"/>
      </div>
    {/if}

    <div class="junctionDevArea_data_body" id="junctionDevArea_data_body">
      <ul style="margin-left: 1em; padding: 0 0; list-style-type: none;">
        {var srcText = TrimPath.junctionUtil.toJsonString(TrimPath.junction.env.dataProvider.memoryData, "")}
        <li id="__system__/data_srcLI">${devAreaContentLI("data", srcText, false, "data")}</li>
        {var srcText = TrimPath.junctionUtil.toJsonString(TrimPath.junction.env.dataSchemaProvider.getSchema(), "")}
        <li id="__system__/dataSchema_srcLI">${devAreaContentLI("dataSchema", srcText, false, "data")}</li>
        <li id="__debug__/sql">${devAreaContentLI("sql", "Type in a SQL query", false, "sql")}</li>
      </ul>
    </div>
  </div>

  <div id="junctionDevArea_test" class="tabpanel_content">
    <input type="submit" onclick="return TrimPath.junction.env.devArea.test.run()" value="Run Tests"/>
    <input type="submit" onclick="return TrimPath.junction.env.devArea.test.clearLog()" value="Clear Log"/>
    <div id="junctionDevArea_testBar" style="margin: .5em 0;"><br/></div>
    <ul id="junctionDevArea_testLog" style="padding-left: 2em; font-size: small; font-family: courier, monospace;"></ul>
  </div>

  <div id="junctionDevArea_statistics" class="tabpanel_content">
    <input type="submit"  value="Count lines of code" 
           onclick="{minify}
                     var result = [ 'lines of code:\n' ], total = 0, count;
                     count = TrimPath.junction.env.devArea.linesOfCode($('junction_js_yard').childNodes); 
                     total += count;
                     result.push('\n .js  : ' + count);
                     count = TrimPath.junction.env.devArea.linesOfCode($('junction_jst_yard').childNodes); 
                     total += count;
                     result.push('\n .jst : ' + count);
                     count = TrimPath.junction.env.devArea.linesOfCode(document.getElementsByTagName('STYLE')); 
                     total += count;
                     result.push('\n .css : ' + count);
                     result.push('\n\n total : ' + total);
                     $(junctionDevArea_statsResult).innerHTML = result.join('');
                     return false;{/minify}"/>
    <pre id="junctionDevArea_statsResult" style="padding-left: 2em; font-size: small; font-family: courier, monospace;"></pre>
  </div>
</div>

{eval}
// Delayed execution because the processed JST isn't applied into DOM tree right now.
return TrimPath.junction.env.eventually('TrimPath.junction.env.devArea.tabPanelListInitAll()');
{/eval}