/*
---
description: This simple plugin provides HTML 5 placeholder attribute to all browsers.

license: MIT-style

authors:
- Alexey Gromov

requires:
  core/1.2.4: '*'

provides:
  Placeholder

...
*/
/*
Changed by Vincent Verbrugh/Greenlight Solutions (2011-11-02) to integrate with Avenue CMS
- added functionality to search for a alt tag to be copied to a placeholder tag
- function to change the text-color directly removed -> use css style class
- check if the browser supports the placeholder tag natively, if it does, only add the placeholder style class functionality
- fixed that the value input can be equal to the placeholder text 
*/

var Placeholder = new Class({
	Implements: [Options],
	options: {
		/**
		 * Elements to check
		 * (single element, elements collection or a string selector)
		 * @var {Element|Elements|String}
		 */
		 
		// VVV: added textarea, input[type=url], input[type=email] to default elements
		elements: 'input[type=text], textarea, input[type=email], input[type=url]',

		/**
		 * CSS class when value is empty
		 * @var {String}
		 */
		cssClass: 'placeholder-class'
	},

	/**
	 * Initialization
	 *
	 * @param {Object}
	 */
	initialize: function(options) {
		// Setting options
		this.setOptions(options);

		// Retrieving elements to check
		var elements;
		switch ($type(this.options.elements)) {
			case 'string':
				elements = $$(this.options.elements);
				break;
			case 'element':
				elements = [this.options.elements];
				break;
			default:
				elements = this.options.elements;
		}
		this.noPlaceholderSupport = !this.hasPlaceholderSupport();
		
		// Attaching events
		elements.each(function(el) {
			// VVV: if the input/textearea element has a alt tag, replace it by a placeholder tag
			if (el.get('alt') && !el.get('placeholder')) {
				el.set('placeholder', el.get('alt'));
			}
			
			var placeholderText = el.get('placeholder');
			if (placeholderText) {
				// Storing placeholder text
				if (this.noPlaceholderSupport) {
					el.store('avenue-placeholder-text', placeholderText);
				}
				// Bluring
				this.blur(el);

				// Events
				el.addEvents({
					focus: function() { this.focus(el); }.bind(this),
					blur: function() { this.blur(el); }.bind(this)
				});
				// Form submit, VVV: only if this.noPlaceholderSupport
				if (this.noPlaceholderSupport) {
					var form = el.getParent('form');
					if (form) {
						form.addEvent('submit', function() {
							if (el.retrieve('avenue-placeholder-active') == true) {
								el.set('value', '');
							}
						});
					}
				}
			}
		}.bind(this));
	},
	
	focus: function(el) {
		if (el.retrieve('avenue-placeholder-active') == true) {
			// VVV: if no native Placeholder Support, change the input value to the placeholder text
			// VVV: check if el.get('value') == el.retrieve('avenue-placeholder-text') to make sure the value hasn't been changed by another script
			if (this.noPlaceholderSupport && el.get('value') == el.retrieve('avenue-placeholder-text')) {
				el.set('value', '');
			}
			if (this.options.cssClass) {
				el.removeClass(this.options.cssClass);
			}
			el.store('avenue-placeholder-active', false);
		}
	},

	blur: function(el) {
		if (el.get('value') == "") {
			if (this.noPlaceholderSupport) {
				el.set('value', el.retrieve('avenue-placeholder-text'));
			}
			if (this.options.cssClass) {
				el.addClass(this.options.cssClass);
			}
			el.store('avenue-placeholder-active', true);
		}
	},
	
	hasPlaceholderSupport: function() {
		var input = document.createElement('input');
		return ('placeholder' in input);
	}

});