<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" type="text/javascript">
 <binding id="ul">
  <implementation>
   <constructor><![CDATA[

    // get a static list to all the children of the list
    var itemsNodeList = this.childNodes;
    var items = new Array(itemsNodeList.length);
    for (var i = 0; i < itemsNodeList.length; ++i) {
      items[i] = itemsNodeList[i];
    }
    this.items = items;

    this.split();

   ]]></constructor>
   <method name="split">
    <body><![CDATA[

     // clear out the children of the split element
     var split = document.getAnonymousNodes(this)[0];
     while (split.firstChild)
       split.removeChild(split.firstChild);

     // create the containers
     var checked = document.createElementNS('', 'checked');
     var unchecked = document.createElementNS('', 'unchecked');
     split.appendChild(checked);
     split.appendChild(unchecked);

     // sort the children into the containers
     for (var i in this.items) {
       var item = this.items[i];
       if (item.nodeType == Node.ELEMENT_NODE) {
         if (item.firstChild.checked) {
           checked.appendChild(item);
         } else {
           unchecked.appendChild(item);
         }
       }
     }

    ]]></body>
   </method>
  </implementation>
  <content>
   <split xmlns=""/>
   <children/>
  </content>
  <resources>
   <stylesheet src="data:text/css,
    split, checked, unchecked { display: block; }
    checked > li, unchecked > li { list-style: none; }
    checked, unchecked { padding: 0.25em 1em 0.25em 1em; margin: 1em; border: solid; }
    checked:before, unchecked:before {
      display: block; border-bottom: solid; margin: 0 -1em 0.25em; padding: 0 0.75em;
      font-weight: bold;
    }
    checked:before { content: 'Checked'; }
    unchecked:before { content: 'Unchecked'; }
   "/>
  </resources>
 </binding>
</bindings>
