var fields = new Array();

function addListener(event, obj, func) {
  try {
    obj.addEventListener(event, func, false);
  } catch(e) {//ie only
    obj.attachEvent("on" + event, func);
  }
}

function removeListener(event, obj, func) {
  try {
    obj.removeEventListener(event, func, false);
  } catch(e) {//ie only
    obj.detachEvent("on" + event, func);
  }
}

function getNodeEvent(evt) {
  var node;

  if (evt.target) {
    node = evt.target;
  } else {//ie only
    node = evt.srcElement;
  }
  

  return node;
}

function init() {
  var allDds = document.getElementsByTagName('dd');
  var n = 0;
   
  for (var i = 0; i < allDds.length; i++) {  
    var node = allDds[i];
    if (/\bString\b/.test(node.className)) {
      fields[n++] = node;
      node.title = "Edit this value";
    }
  }

  for (var field in fields) {
    addListener('click', fields[field], edit);
  }
}

function edit(evt) {

  var node = getNodeEvent(evt);

  // in Safari, when you click on the text, the node variable references
  // a #text node ( fixed by Thomas Rabaix )
  if(node.nodeType == 3) {
    node = node.parentNode;
  }
  node.title = "";


  //create and set up the edit box
  var input = document.createElement('input');
  input.type = 'text';
  input.className = 'edit';
  input.value = node.innerHTML;
  addListener('keypress', input, save);

  //add the edit box and remove the text node
  node.appendChild(input);
  node.removeChild(node.childNodes[0]);
  removeListener('click', node, edit);
}

function save(evt) {
  if (evt.keyCode == 13) {
    var input = getNodeEvent(evt);

    //create the view text node
    var viewer = document.createTextNode(input.value);

    //add the text node and remove the edit box
    var node = input.parentNode;
    node.appendChild(viewer);
    node.removeChild(node.childNodes[0]);
    addListener('click', node, edit);

    node.title = "Edit this value";

    //-- this is where we'd do our AJAX calls
  }
}

addListener('load', window, init);