/*
---

script: UI/FadeOverText.js

description: extension for OverText to allow fade effects for the label (mask)

license: MIT-style license

authors:
- Quentin <quentin.t@gmail.com>

requires:
- more:1.2.5.1/OverText

provides: [FadeOverText]

...
*/

OverText = Class.refactor(OverText, {
	attach: function(){
		var val = null;
		if(val = this.element.get('placeholder')) {
			this.element.erase('placeholder');
		} else {
			val = this.options.textOverride || this.element.get('title') || this.element.get('alt');
		}
		if (!val) return;
		this.text = new Element(this.options.element, {
			'class': 'over_text_label',
			styles: {
				lineHeight: 'normal',
				position: 'absolute',
				cursor: 'text'
			},
			html: val,
			events: {
				click: this.hide.pass(this.options.element == 'label', this)
			}
		}).inject(this.element, 'after');
		if (this.options.element == 'label') {
			if (!this.element.get('id')) this.element.set('id', 'input_' + new Date().getTime());
			this.text.set('for', this.element.get('id'));
		}

		if (this.options.wrap) {
			this.textHolder = new Element('div', {
				styles: {
					lineHeight: 'normal',
					position: 'relative'
				},
				'class':'overTxtWrapper'
			}).adopt(this.text).inject(this.element, 'before');
		}

		this.element.addEvents({
			focus: this.focus,
			blur: this.assert,
			change: this.assert
		}).store('OverTextDiv', this.text);
		window.addEvent('resize', this.reposition.bind(this));
		this.assert(true);
		this.reposition();
	}
});

var FadeOverTextIE = new Class({
	
	Extends: OverText,
	
	updateVis: function(e){}
});

var FadeOverText = new Class({
	Extends: OverText,

	options: {
		fadeInOptions: {
			duration: 350
		},
		fadeOutOptions: {
			duration: 250
		},
		fadeOutOpacity: 1,
		fadeHideOptions: {
			duration: 50
		}
	},

	initialize: function(element, options) {
		this.parent(element, options);
		this.text.set('tween', this.options.fadeOutOptions);
		if (!Browser.Engine.trident) {
			this.element.addEvent('keyup', this.updateVis.bindWithEvent(this));
			this.element.addEvent('keydown', this.updateVis.bindWithEvent(this));
			// this.element.addEvents({
			// 	change: function(){
			// 		console.log('calling change handler', this.element.value);
			// 		this.updateVis.delay(200, this, [this.element.value]);
			// 	}.bindWithEvent(this)
			// });
		}
		this.updateVis();
	},
	updateVis: function(e) {
		this.fireEvent('inputChanged', [this.element.value]);
		if($type(e) != 'event' && !this.element.value) {
			this.text.set('tween', this.options.fadeOutOptions).show().fade(this.options.fadeOutOpacity);
			return;
		}
		var ev = e; //new Event(e);
		var self = this;
		if ($defined(ev) && ev.target.value === '') {
			if(ev.meta || (ev.key.length > 1)/*accounting for Mac OS 'cmd' key, the "why" is still to be researched...*/) {
				this.text.set('tween', this.options.fadeOutOptions).show().fade(this.options.fadeOutOpacity);
			}
		} else {
			this.text.set('tween', this.options.fadeHideOptions);
			this.text.get('tween').chain(function(){self.text.hide()});
			this.text.fade(0);
		}
	},
	hide: function(suppressFocus, force) {
		if(this.focusing) return;

		if (Browser.Engine.trident) return this.parent(suppressFocus, force);

		if (this.text) {
			if(this.element.value){
				this.text.set('tween', this.options.fadeHideOptions).fade(0);
			} else {
				this.text.set('tween', this.options.fadeOutOptions).fade(this.options.fadeOutOpacity);
			}
		}
		if (this.text && (this.text.isDisplayed() && (!this.element.get('disabled') || force))) {
			this.fireEvent('textHide', [this.text, this.element]);
			this.pollingPaused = true;
			if (!suppressFocus) {
				try {
					this.focusing = true;
					this.element.fireEvent('focus');
					this.element.focus();
					this.focusing = false;
				} catch (e) {} //IE barfs if you call focus on hidden elements
			}
		}
		return this;
	},
	show: function() {
		if (Browser.Engine.trident) return this.parent();
		if (this.text && this.element.value) {
			this.text.set('tween', this.options.fadeHideOptions).fade(0);
		} else if(this.text && !this.element.value) {
			this.text.set('tween', this.options.fadeInOptions).fade(1);		
		} 
		if (this.text && !this.text.isDisplayed()) {
			this.reposition();
			this.fireEvent('textShow', [this.text, this.element]);
			this.pollingPaused = false;
		}
		return this;
	}
});