// a field with placeholder="foo" must be added to this array
var placeholderFields = [];
function registerPlaceholder(fieldId) {
  placeholderFields.push(fieldId);
}

var PlaceholderController = Class.create({
  
  initialize:function()
  {
    // are we in a browser with good HTML5? if so, we don't need this JS
    if (this.naitivePlaceholdersAvailable())
      return;
    
    // init all placeholder fields
    placeholderFields.each(function(fieldId) {
      var inputEl = $(fieldId);
      if (inputEl) {
        inputEl.observe('focus', this.fieldDidFocus.bind(this));
        inputEl.observe('blur', this.fieldDidBlur.bind(this));

        if (inputEl.value == '') {
          inputEl.value = inputEl.getAttribute('placeholder');
          inputEl.setStyle({color: '#aaa'});
          
          if (inputEl.getAttribute('type') == 'password') {
            if (!Prototype.Browser.IE) {
              inputEl.setAttribute('type', 'text');
              inputEl.placeholderOriginalType = 'password';
            } else {
              // internet explorer cannot change the type of an element
              // so we must create a new element and ditch the old one
              inputEl = this.changeInputTypeInIE(inputEl, 'text');
              inputEl.placeholderOriginalType = 'password';
            }
          }
        }
      }
    }.bind(this));
  },
  
  naitivePlaceholdersAvailable:function()
  {
    return ('placeholder' in document.createElement('input'));
  },
  
  fieldDidFocus:function(focusEvent)
  {
    var inputEl = focusEvent.element();
    if (inputEl.value == inputEl.getAttribute('placeholder')) {
      inputEl.value = '';
      inputEl.setStyle({color: ''});
      
      if (inputEl.placeholderOriginalType == 'password') {
        if (!Prototype.Browser.IE) {
          inputEl.setAttribute('type', inputEl.placeholderOriginalType);
        } else {
            // internet explorer cannot change the type of an element
            // so we must create a new element and ditch the old one
            inputEl = this.changeInputTypeInIE(inputEl, inputEl.placeholderOriginalType);
            inputEl.focus();
          }
      }
    }
  },
  
  fieldDidBlur:function(blurEvent)
  {
    var inputEl = blurEvent.element();
    if (inputEl.value == '') {
      inputEl.value = inputEl.getAttribute('placeholder');
      inputEl.setStyle({color: '#aaa'});
      
      if (inputEl.getAttribute('type') == 'password') {
        if (!Prototype.Browser.IE) {
          inputEl.setAttribute('type', 'text');
          inputEl.placeholderOriginalType = 'password';
        } else {
          // internet explorer cannot change the type of an element
          // so we must create a new element and ditch the old one
          inputEl = this.changeInputTypeInIE(inputEl, 'text');
          inputEl.placeholderOriginalType = 'password';
        }
      }
    }
  },
  
  changeInputTypeInIE:function(inputEl, newType) {
      var newInputEl = new Element('input', {'type': newType});
      newInputEl.value = inputEl.value;
      newInputEl.setAttribute('style', inputEl.getAttribute('style'));
      newInputEl.setAttribute('placeholder', inputEl.getAttribute('placeholder'));
      newInputEl.setAttribute('name', inputEl.getAttribute('name'));
      newInputEl.setAttribute('id', inputEl.getAttribute('id'));
      newInputEl.setAttribute('title', inputEl.getAttribute('title'));
      newInputEl.setAttribute('validate', inputEl.getAttribute('validate'));
      
      newInputEl.observe('focus', this.fieldDidFocus.bind(this));
      newInputEl.observe('blur', this.fieldDidBlur.bind(this));
      
      inputEl.parentNode.insertBefore(newInputEl, inputEl);
      inputEl.remove();
      
      return newInputEl;
  }
});

var placeholderController = false;
document.observe('dom:loaded', function() {
  placeholderController = new PlaceholderController();
});