<% content_for('page_scripts') do -%>
    var SiteMap = Class.create();
    SiteMap.prototype = Object.extend({}, RuledTable.prototype); // Inherit from RuledTable
    Object.extend(SiteMap.prototype, {

      onRowSetup: function(row) {
        Event.observe(row, 'click', this.onMouseClickRow.bindAsEventListener(this), false);
      },
      
      onMouseClickRow: function(event) {
        var element = Event.element(event);
        if (this.isExpander(element)) {
          var row = Event.findElement(event, 'tr');
          if (this.hasChildren(row)) {
            this.toggleBranch(row, element);
          }
        }
      },
      
      hasChildren: function(row) {
        return ! /\bno-children\b/.test(row.className);
      },
      
      isExpander: function(element) {
        return (element.tagName.strip().downcase() == 'img') && /\bexpander\b/i.test(element.className);
      },
      
      isExpanded: function(row) {
        return /\bchildren-visible\b/i.test(row.className);
      },
      
      isRow: function(element) {
        return element.tagName && (element.tagName.strip().downcase() == 'tr');
      },
      
      extractLevel: function(row) {
        if (/level-(\d+)/i.test(row.className))
          return RegExp.$1.toInteger();
      },
      
      extractPageId: function(row) {
        if (/page-(\d+)/i.test(row.id))
          return RegExp.$1.toInteger();
      },
      
      getExpanderImageForRow: function(row) {
        var images = $A(row.getElementsByTagName('img', row));
        var expanders = [];
        images.each(function(image){
          expanders.push(image);
        }.bind(this));
        return expanders.first();
      },      
      
      hideBranch: function(row, img) {
        var level = this.extractLevel(row);
        var sibling = row.nextSibling;
        while(sibling != null) {
          if (this.isRow(sibling)) {
            if (this.extractLevel(sibling) <= level) break;
            Element.hide(sibling);
          }
          sibling = sibling.nextSibling;
        }
        if (img == null)
          img = this.getExpanderImageForRow(row);
        img.src = img.src.replace(/collapse/, 'expand');
        Element.removeClassName(row, 'children-visible');
        Element.addClassName(row, 'children-hidden');
      },
      
      showBranch: function(row, img) {
        var level = this.extractLevel(row);
        var sibling = row.nextSibling;
        var children = false;
        while(sibling != null) {
          if (this.isRow(sibling)) {
            var siblingLevel = this.extractLevel(sibling);
            if (siblingLevel <= level) break;
            if (siblingLevel == level + 1) {
              Element.show(sibling);
              this.hideBranch(sibling);
            }
            children = true;
          }
          sibling = sibling.nextSibling;
        }
        if (!children)
          this.getBranch(row);
        if (img == null)
          img = this.getExpanderImageForRow(row);
        img.src = img.src.replace(/expand/, 'collapse');
        Element.removeClassName(row, 'children-hidden');
        Element.addClassName(row, 'children-visible');
      },
      
      getBranch: function(row) {
        var level = this.extractLevel(row).toString();
        var id = this.extractPageId(row).toString();
        new Ajax.Updater(
          row,
          '<%= admin_url %>/ui/pages/children/' + id + '/' + level,
          {
            asynchronous: true,
            insertion: Insertion.After,
            onLoading: function(request) {
              Element.show('busy-' + id);
              this.updating = true;
            }.bind(this),
            onComplete: function(request) {
              var sibling = row.nextSibling;
              while (sibling != null) {
                if (this.isRow(sibling)) {
                  var siblingLevel = this.extractLevel(sibling);
                  if (siblingLevel <= level) break;
                  this.setupRow(sibling);
                }
                sibling = sibling.nextSibling;
              }
              this.updating = false;
              Effect.Fade('busy-' + id);
            }.bind(this)
          }
        );
      },
      
      toggleBranch: function(row, img) {
        if (! this.updating) {
          if (this.isExpanded(row)) {
            this.hideBranch(row, img);
          } else {
            this.showBranch(row, img);
          }
        }
      }

    });
<% end -%>

<h1>Pages</h1>

<table id="site-map" class="index" cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th class="page">Page</th>
			<th class="status">Status</th>
			<th class="modify" colspan="2">Modify</th>
		</tr>
	</thead>
	<tbody>
<% if @homepage -%>
<%= render_node @homepage -%>
<% else -%>
	<tr>
		<td colspan="4" class="note">No Pages</td>
	</tr>
<% end -%>
	</tbody>
</table>
<script type="text/javascript">
// <![CDATA[
  new SiteMap('site-map');
// ]]>
</script>
<form action="<%= clear_cache_url %>" method="post">
  <p>
<% unless @homepage -%>
    <%= link_to image_tag('new-homepage', :alt => 'New Homepage'), homepage_new_url %>
<% end -%>
    <%= image_submit_tag 'clear-page-cache' %>
  </p>
</form>