/*

Prefilled Input Box Helper

Search forms are typically prefilled with text like "Search this site". When a
user selects the input box, the text disappears. Most implementations make the
text disappear even if the user actually types "Search this site" and refocuses
the text box. This one does not.

Usage:
HTML: <input value="Search this site" onfocus="setupPrefilledInput(this);">

Advanced usage:
CSS: span.prefilled-input-helper { color: gray; ... }

License:
2006 Lenny Domnitser, all rights waived. Go ahead and put it in your global.js.

*/

function setupPrefilledInput(input) {
  var span = input.parentNode.insertBefore(document.createElement('span'), input.nextSibling);
  span.appendChild(document.createTextNode(input.value));
  input.value = '';
  span.className = 'prefilled-input-helper';
  var style = getComputedStyle(input, '');
  span.style.fontFamily = style.fontFamily;
  span.style.fontSize = style.fontSize;
  span.style.lineHeight = style.lineHeight;
  span.style.marginLeft = '-' + style.width;
  span.style.visibility = 'hidden';
  input.onfocus = function() {
    span.style.visibility = 'hidden';
  }
  input.onblur = function() {
    if(input.value == '') {
      span.style.visibility = 'visible';
    }
  }
}