var DescriptiveInput = Class.create({
  
  initialize: function(input_id, description) {
		this.description = description;
		this.descriptionStyle = 'input_description'
		this.id = input_id;

		$(this.id).observe('focus', 	this.onFocus.bind(this));
		$(this.id).observe('blur', 		this.onBlur.bind(this));
		$(this.id).observe('change', 	this.onChange.bind(this));
		$(this.id).observe('keydown', this.onChange.bind(this));

    $(this.id).addClassName(DescriptiveInput.identifyingClassName);

    this.changed = !($(this.id).value == description || $(this.id).value == '');
    if (!this.changed) {
      $(this.id).addClassName(this.descriptionStyle);
      $(this.id).value = this.description;
    }
    
    DescriptiveInput.registry.push(this);
	},
	
	element: function() {
    return $(this.id);
	},

	onFocus: function(event) {
		input = event.element();
		if (!this.changed) {
			input.value = '';
			input.removeClassName(this.descriptionStyle);
		}
	},
	onBlur: function(event) {
		input = event.element();
		if (!this.changed) {
			input.value = this.description;
			input.addClassName(this.descriptionStyle);
		}
	},
	onChange: function(event) {
		input = event.element();
		if (input.value != '')
			this.changed = true;
		else
			this.changed = false;	
	}
});

DescriptiveInput.identifyingClassName = 'desc_input_id';

DescriptiveInput.clearAllForSubmit = function () {
  DescriptiveInput.each(function(dinput) { if (!dinput.changed) dinput.element().clear(); });
}

DescriptiveInput.each = function(func) {
  DescriptiveInput.registry.each(function(el) { func(el); });
}

DescriptiveInput.registry = new Array();