function PopupNav(prefix) {
  this.prefix  = prefix;
  this.listEl  = $(this.prefix +'-list');

  this.attachOpeners = function() {
    var listItems = getElementsByClassName(this.listEl, this.prefix +'-item');

    for (var i = 0; i < listItems.length; i++) {
      listItems[i].oThis   = this;
      listItems[i].onclick = function() {
        new PopupNavResponse( this.cloneNode(true), this.oThis.prefix );
      }
    }
  }

  this.attachOpeners();
}

function PopupNavResponse(list, prefix) {
  this.prefix  = prefix;
  this.popupEl = $(this.prefix +'-response');
  this.list = list;

  this.open = function() {
    this.purge();
    this.popupEl.appendChild(this.list);
    this.popupEl.style.display = 'block';
    this.popupEl.obj = this;
    this.popupEl.onclick = this.close;
  }

  this.close = function() {
    this.obj.popupEl.style.display = 'none';
  }

  this.purge = function() {
    if ( this.popupEl.hasChildNodes() ) {
      var oldList = this.popupEl.firstChild;
      this.popupEl.removeChild(oldList);
    }
  }

  this.sanitizeList = function() {
    var items = this.list.getElementsByTagName('li');
    var colon = document.createTextNode(',');

    for (var i = 0; i < items.length - 1; i++) {
      items[i].appendChild( colon.cloneNode(true) );
    }
  }

  this.sanitizeList();
  this.open();
}