document.observe('dom:loaded', bindInput);

function bindInput () {
  $$('input.bind').each (function(e) {
    var b = labelFor(e).getStyles().color;

    labelFor(e).setStyle({ display: 'none', color: e.getStyles().color });
    e.setStyle({ textTransform: 'lowercase', color: b });

    if (!e.value || e.value == '')
      e.value = labelFor(e).innerHTML;

    e.observe ('focus', function(ev) {
      var c = labelFor(e).getStyles().color;
      if (e.value == labelFor(e).innerHTML) {
        labelFor(e).setStyle({ color: e.getStyles().color });
        e.setStyle({ textTransform: 'none', color: c });
        e.value = '';
      }
    });

    e.observe ('blur', function(ev) {
      var c = labelFor(e).getStyles().color;
      if (!e.value || e.value == '') {
        labelFor(e).setStyle({ color: e.getStyles().color });
        e.setStyle({ textTransform: 'lowercase', color: c });
        e.value = labelFor(e).innerHTML;
      }
    });

  });

  $$('input.morphling').each (function(e) {
    var b = labelFor(e).getStyles().color;

    labelFor(e).setStyle({ display: 'none', color: e.getStyles().color });
    e.setStyle({ textTransform: 'lowercase', color: b });

    if (!e.value || e.value == '')
    {
      e.value = labelFor(e).innerHTML;
      e.type = 'text';
    }

    e.observe ('focus', function(ev) {
      var c = labelFor(e).getStyles().color;
      if (e.type == 'text') {
        labelFor(e).setStyle({ color: e.getStyles().color });
        e.setStyle({ textTransform: 'none', color: c });
        e.value = (e.value == labelFor(e).innerHTML) ? '' : e.value;
        e.type = 'password';
      }
    });

    e.observe ('blur', function(ev) {
      var c = labelFor(e).getStyles().color;
      if (e.type == 'password') {
        if (!e.value || e.value == '') {
          labelFor(e).setStyle({ color: e.getStyles().color });
          e.setStyle({ textTransform: 'lowercase', color: c });
          e.value = labelFor(e).innerHTML;
          e.type = 'text';
        }
      }
    });
  });

}

function unbindInput () {
  $$('input.bind').each (function(e) {
    e.stopObserving('focus').stopObserving('blur');
    var c = labelFor(e).getStyles().color;
    labelFor(e).setStyle({ color: e.getStyles().color });
    e.setStyle({ textTransform: 'lowercase', color: c });
    e.value = labelFor(e).innerHTML;
  });

  $$('input.morphling').each (function(e) {
    e.stopObserving('focus').stopObserving('blur');
    var c = labelFor(e).getStyles().color;
    labelFor(e).setStyle({ color: e.getStyles().color });
    e.setStyle({ textTransform: 'lowercase', color: c });
    e.value = labelFor(e).innerHTML;
    e.type = 'text';
  });
}