/* Enable element to store data (similar to jQuery). This functionality will be packaged
   into Prototype 1.6.1 so remove the code below when we upgrade.
 */

/* START OF "REMOVE WHEN PROTOTYPE 1.6.1 IS OUT" */
Element.Storage = {
 UID: 1
};

Element.addMethods({
  /**
  *  Element#getStorage(@element) -> Hash
  *  
  *  Returns the [[Hash]] object that stores custom metadata for this element.
  **/
  getStorage: function(element) {
   if (!(element = $(element))) return;

   var uid;
   if (element === window) {
     uid = 0;
   } else {
     if (typeof element._prototypeUID === "undefined")
       element._prototypeUID = [Element.Storage.UID++];
     uid = element._prototypeUID[0];
   }

   if (!Element.Storage[uid])
     Element.Storage[uid] = $H();

   return Element.Storage[uid];
  },

  /**
  *  Element#store(@element, key, value) -> Element
  *  
  *  Stores a key/value pair of custom metadata on the element.
  *  
  *  The metadata can later be retrieved with [[Element.retrieve]].
  **/
  store: function(element, key, value) {
   if (!(element = $(element))) return;

   if (arguments.length === 2) {
     // Assume we've been passed an object full of key/value pairs.
     element.getStorage().update(key);
   } else {
     element.getStorage().set(key, value);
   }

   return element;
  },

  /**
  *  Element#retrieve(@element, key[, defaultValue]) -> ?
  *  
  *  Retrieves custom metadata set on `element` with [[Element.store]].
  *  
  *  If the value is `undefined` and `defaultValue` is given, it will be
  *  stored on the element as its new value for that key, then returned.
  **/
  retrieve: function(element, key, defaultValue) {
   if (!(element = $(element))) return;
   var hash = Element.getStorage(element), value = hash.get(key);

   if (Object.isUndefined(value)) {
     hash.set(key, defaultValue);
     value = defaultValue;
   }

   return value;
  }
});

/* END OF "REMOVE WHEN PROTOTYPE 1.6.1 IS OUT" */

/* Methods which help add a prompt watermark to certain input fields.
   Based on implementation from Josh Goebel: http://pastie.org/109666
   Best feature is it clears the prompt content from the fields before
   submitting the form. To use:
   1) To fields which you want to have a watermark...
      * Add a class of 'watermark'
      * Add a title (this will be used as the content of the watermark)
   2) To ensure the watermarks are removed before the form is submitted
      add the following and onsubmit handler...
      
      <% form_for(@item, :id => 'edit_item', :html => { :onsubmit => "removeWatermarks();" }) do |f| %>
         ...
      <% end %>
*/

Event.observe(window,'load', function() {
  addWatermarks();
});

function addWatermarks() {
  $$('input.watermark').map(function(element) {
    element.setAttribute("autocomplete", "off");
    var form = element.up('form');
    if (form) {
      if (!form.clearOnFocusElements) {
        form.clearOnFocusElements = [];
      }
      form.clearOnFocusElements.push(new ClearOnFocus(element));
    }
    return form;
  })
  $$('textarea.watermark').map(function(element) {
    element.setAttribute("autocomplete", "off");
    var form = element.up('form');
    if (form) {
      if (!form.clearOnFocusElements) {
        form.clearOnFocusElements = [];
      }
      form.clearOnFocusElements.push(new ClearOnFocus(element));
    }
    return form;
  })

}

function removeWatermarks() {
  $$('form').map(function(form) {
    if (!form.clearOnFocusElements) {
      return;
    }
    form.clearOnFocusElements.each(function(field) {
      field.removeWatermark(field.element);
    })
  })
}

var ClearOnFocus = Class.create();
Object.extend(ClearOnFocus.prototype, {
  initialize: function(element) {
    this.element = element;
    element.observe('blur', this.onBlur.bind(this));
    element.observe('focus', this.onFocus.bind(this));
    this.removeWatermark.bind(this);
    this.addWatermark.bind(this);

    if ($F(element) == '') {
      this.addWatermark(element);
    }
  },
  removeWatermark: function(field) {
    if ($F(field) == field.title) {
      field.value = '';
      field.removeClassName('clear_on_focus');
    }
  },
  addWatermark: function(field) {
    if ($F(field) == '') {
      field.value = field.title;
      field.addClassName('clear_on_focus');
    }
  },
  onFocus: function(event) {
    this.removeWatermark(event.element());
  },
  onBlur: function(event) {
    this.addWatermark(event.element());
  }
})