sense.ui.widget.Manager.register('InputHint');
sense.ui.widget.InputHint = Class.create(sense.ui.widget.Base, {
	// Properties
	value: '',
	className: 'uiInputHint',

	// Methods
	initialize: function($super, element, options) {
		// Call Parent Constructor
		$super(element, options);

		// Initialise properties from DOM
		if(this.element.readAttribute('title')) {
			this.value = this.element.readAttribute('title');
			this.element.writeAttribute('title','');
		}

		// Register Event Handlers
		this.element.observe('focus', this.focusHandler.bind(this));
		this.element.observe('click', this.clickHandler.bind(this));
		this.element.observe('blur', this.blurHandler.bind(this));

		this.form = $(this.element.form);
		if (this.form) {
			// If the form is submitted, and this field's value is still set to the default,
			// unset it so that the default value doesn't get processed by the back-end code.
			this.form.observe('submit', this.clickHandler.bind(this));
		}

		this.blurHandler();

		//Bind event handlers to always use correct context
		// this.setInputHintHandler = this.setInputHint.bind(this);
		// this.clearInputHintHandler = this.clearInputHint.bind(this);

		// this.setInputHint();
		// this.element.observe('focus', this.clearInputHintHandler);
		// this.element.observe('blur', this.setInputHintHandler);

		// var form = $(this.element.form);
		// if (form) form.observe('submit', this.clearInputHintHandler);
	},

	clickHandler: function(e) {
		// Need to do this as a click event, rather than a focus event due to
		// a possible FF bug. If we use focus and click the value text (rather 
		// than the input) and then programmatically alter the value text, then 
		// FF seems to cancel the event early, preventing any subsequent handlers 
		// from being called. (This is mainly for the benefit of DatePicker)
		if (this.element.getValue() == this.value) {
			this.element.setValue('');
		}
		this.element.removeClassName(this.className);
	},

	focusHandler: function(e) {
		// This is done seperately from the click handler so that we can unstyle 
		// the text for programmatic focuses as well as user-initiated ones.
		// (This is mainly for the benefit of DatePicker)
		this.element.removeClassName(this.className);
	},

	blurHandler: function(e) {
		if (this.element.getValue() == this.value || this.element.getValue() == '') {
			this.element.addClassName(this.className);
			this.element.setValue(this.value);
		}
	}
});