Apache Click Framework PickList control client JavaScript via PrototypeJS

/*
 * get a hook on the buttons (> or < or >> or <<) of a Click PickList control.
 * call in domloaded() passing the name of the PickList and a js callBack method to be envoked.
 * the callBack method should have one parameter to receive the clicked button element.
 * an additional attribute ('forid') is also set on the button element, 
 * which will contain the requested PickList name.
 *
 * DEMO:
 * The Java Click component...
public Form form = new Form("myForm");
public PickList myPicker = new PickList("myPicker", "My Picker");
@Override
public void onInit() {
    super.onInit();
    form.add(myPicker);
}
 * Now for the JavaScript...
function domloaded() {
    attachToPickListButtons("myForm_myPicker", demoCallBack);
}
function demoCallBack(el) {
	if (!(typeof(el.forid) == 'undefined')) {
		var id = el.forid;
		var directionClicked = el.value; // > or < or >> or <<
		var toSelected = null != directionClicked.match(">");
		var moveAll = null != (directionClicked.match(">>") || directionClicked.match("<<"))
		var plh = new pickListHelper(id);

		var toString = "id = '" + id + "'\n";
		toString += "directionClicked = '" + directionClicked + "'\n";
		toString += "toSelected = '" + toSelected + "'\n";
		toString += "moveAll = '" + moveAll + "'\n";
		toString += "SelectedList = '" + typeof(plh.getSelectedList()) + "'\n";
		toString += "UnSelectedList = '" + typeof(plh.getUnSelectedList()) + "'\n";
		toString += "HiddenList = '" + typeof(plh.getHiddenList()) + "'\n";
		alert(toString);

		if (!moveAll) {
            if (confirm("Just for fun, let's move ALL items to " + (toSelected ? "unselected" : "selected") + " \n(opposite direction you just chose).")) {
                plh.moveAll(!toSelected);
            }
        }
	}
}
*/
function attachToPickListButtons(id, fn) {
    $$("input[onclick^='pickListMove'][type='button']").each(function(field) {
        if (!(typeof(field.onclick) == 'undefined')) {
            var fieldOnclick = "" + field.onclick;
            if (null != fieldOnclick.toLowerCase().match(id.toLowerCase())) {
                Event.observe(field, 'click', function(event) {
                    var element = Event.element(event);
                    element.forid = id;
                    fn(element);
                });
            }
        }
    });
}
/*
 * a wrapper around a Click PickList control
 */
function pickListHelper(id) {
	var _selectedList = $(id);
	var _unselectedList = $(id+ "_unselected");
	var _hiddenList = $(id+ "_hidden");

	this.getSelectedList = function() {
		return _selectedList;
	}

	this.getUnSelectedList = function() {
		return _unselectedList;
	}

	this.getHiddenList = function() {
		return _hiddenList;
	}

	this.moveAll = function(toSelected) {
		// call pick list method from click control to do the heavy lifting
		var fromList = toSelected ? _unselectedList : _selectedList;
		var toList = toSelected ? _selectedList : _unselectedList;
		pickListMoveAll(fromList, toList, _hiddenList, toSelected);
	}
}