<html>
    <head>
        <title>JS example</title>
        <script type="text/javascript">
            FOO = {};           // minimalist namespace declaration.
            FOO._origList = {}; // "hash of lists" for the Perl hackers.
            FOO.sortList = function(listID) {
                
                var theList = document.getElementById(listID);
                if (!theList) {
                    throw "no such list: " + listID;
                }
                // let's assume it's all plain text.
                var items = theList.getElementsByTagName('li');
                var textList = [];
                for (var i=0; i < items.length; i++) {
                    textList[i] = items[i].firstChild.nodeValue; // YMMV.
                }
                // cache the original the first time only (deep copy).
                if (!FOO._origList[listID]) {
                    FOO._origList[listID] = [];
                    for (var i in textList) {
                        FOO._origList[listID][i] = textList[i];
                    }
                }
                // now set up the sorted list.
                textList.sort();
                FOO.setListFromArray(theList,textList);

            };
            FOO.unsortList = function(listID) {
                var theList = document.getElementById(listID);
                if (!theList) {
                    throw "no such list: " + listID;
                }
                // only bother if we were sorted previously.
                if (FOO._origList[listID]) {
                    FOO.setListFromArray(theList,FOO._origList[listID]);
                }
            };
            FOO.setListFromArray = function(theList,textArray) {
                // zero out the list
                while (theList.childNodes.length) {
                    theList.removeChild(theList.childNodes[0]);
                }
                // repopulate it with text
                for (var i=0; i < textArray.length; i++) {
                   var item = document.createElement('li');
                   var textNode = document.createTextNode(textArray[i]);
                   item.appendChild(textNode);
                   theList.appendChild(item); 
                }
            }
            

            // but really, REALLY you want to use a toolkit for this...
                
        </script>
    </head>
    <body>
        <h1>JS example</h1>
        <ol id="sortTarget">
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ol>
        <p>
            <a href="javascript:FOO.sortList('sortTarget');">sort alpha</a>
            <a href="javascript:FOO.unsortList('sortTarget');">undo</a>
        </p>
        <hr />
        <ol id="another">
            <li>Eins</li>
            <li>Zwei</li>
            <li>Drei</li>
        </ol>
        <p>
            <a href="javascript:FOO.sortList('another');">sort alpha</a>
            <a href="javascript:FOO.unsortList('another');">undo</a>
        </p>
    </body>
</html>