/**
 * jQuery Placeholder Plugin
 * 
 * Plugin to implement input placeholder feature when the browser doesn't support it. 
 */ 
(function ($) {

	$.fn.placeholder = function() {
		var c = "placeholder"; // placeholder css class
		// if browser supports placeholder attribute, use native events to show/hide placeholder
		var input = document.createElement("input");
		var hasNativeSupport = (typeof input[c] !== 'undefined');

		// extra check for Opera: Opera 11 supports placeholder only for input, and you cannot style it yet, even with a class you can't.
		// http://my.opera.com/ODIN/blog/2010/12/17/new-html5-features-in-opera-11
		// http://dev.opera.com/forums/topic/841252?t=1296553904&page=1#comment8072202
		// this is fixed for version 11.50
		if (typeof $.browser.opera !== 'undefined') {
			hasNativeSupport = ($.browser.version >= '11.50');	
		}

		// ensure not sending placeholder value when placeholder is not supported
		if (!hasNativeSupport) {
			$('form').submit(function() {
				var $this = $(this); // form

				// empty input value if is the same as the placeholder attribute
				$this.find('input[placeholder], textarea[placeholder]').each(function () {
					var e = $(this);
					if (e.val() === e.attr('placeholder')) {
						e.val('');
					}
				});
			});
		}

		return this.each(function () {

			var e = $(this), d = e.attr("placeholder"), ispassword = e.attr('type') === "password";

			// on focus
			var placeholderOnFocus = function () {
				if(e.hasClass(c)) {
					if(!hasNativeSupport) {
						e.val('');
					}
					e.removeClass(c);
				}
			};

			// on blur
			var placeholderOnBlur = function (event) {
				// if there is no initial value
				// or initial value is equal to placeholder, init the placeholder
				if(!e.val() || e.val() === d) {
					if(!hasNativeSupport) {
						if(!ispassword) {
							e.addClass(c).val(d);
						}
						else {
							showInput(pwdummy);
							hideInput(e);
						}
					}
					else {
						e.addClass(c);
					}
				}
			};

			// hides password input
			var hideInput = function(e) {
				e.css({position: 'absolute', left: '-9999em'});
			};

			// shows dummy text input
			var showInput = function(e) {
				return e.removeAttr('style');
			};

			// placeholder for text and textarea
			if(!ispassword || hasNativeSupport) {
				e.bind('focus.placeholder', placeholderOnFocus);
			}

			// placeholder for password
			else {
				var inputCssClass = (e[0].className) ? ' ' + e[0].className : '';
			
				// create input
				var pwdummy = $('<input type="text" class="' + c + inputCssClass + '" value="' + d + '" />');
				
				// insert the input before the password input so we can focus using tab key
				e.before(pwdummy);
				
				// Dummy text input focus event
				pwdummy.bind('focus.placeholder', function () {
					showInput(e).focus();
					hideInput(pwdummy);
				});
			}
			
			// bind blur event and trigger on load
			e.bind('blur.placeholder', placeholderOnBlur)
			.trigger('blur.placeholder');
		
		});
	
	};
	
	// init the plugin
	$(function () {
		var placeholderElements = $('input[placeholder], textarea[placeholder]');
		
		// if there are placeholder elements and the browser don't support them
		if((placeholderElements.length) && (document.createElement('input').placeholder === undefined)) {
			// init placeholder plugin
			placeholderElements.placeholder();
		}
    });

})(jQuery);