// The overall architecture is assembled in 3 layers:
//
// 1) A "Transport" object ('HTMLHttpRequest') that makes a request to the server.
// 2) A "Threading" object ('RemoteFileLoader') that creates and allocates Transports
//    and provides an easy way of loading content into your existing page.
// 3) An "Interface" layer of code that captures clicks/submissions on the document.
//
// First, we create an example object for our document click handler.
var docClickLoader = new RemoteFileLoader('docClickLoader');

function toggleInto(src, destId, evt) {
 var dest = document.getElementById(destId);
  var ok = docClickLoader.loadInto(src.href || src.getAttribute('href'), destId);
  cancelEvent(evt);
  dest.style.display = 'block';
  dest.toggleState = 1;
};

addEvent(document, 'click', function(evt)
{
 evt = evt || window.event;
 // Only process left clicks.
 if (evt.which > 1 || evt.button > 1) return;
 var src = evt.target || evt.srcElement;
 if (src.nodeType && src.nodeType != 1) src = src.parentNode;
 // Loop up the DOM tree scanning all elements to find a matching one.
 while (src)
 {
  var srcName = (src.nodeName||src.tagName||'').toLowerCase();
  if (srcName == 'a' && src.className && src.className.match(/^(load|toggle)into-(.+)$/)) {
   if (RegExp.$1 == 'toggle') return toggleInto(src, RegExp.$2, evt);
  }
  src = src.parentNode;
 }
}, 1);