/*
 * @description	This plugin overlays the specified string of text over the form element
 * @return {jQuery Object}
 * @param {Object} options
 * @type {jQuery Plugin Method}
 * @author Mike Cravey
 * @version 0.1	
 * (c)Copyright 2009, 2010 Mike Cravey
 * Licensed under the terms of the MIT license.
 */

;(function($) {
$.fn.overlay = function(options) {
  var opts = $.extend(true, {}, $.fn.overlay.defaults, options);

  return this.each(function() {
    var $this = $(this);

    // Support for the Metadata Plugin.
    var o = $.meta ? $.extend(true, {}, opts, $this.data()) : opts;
	// Determine support for the placeholder attribute and set it to a public variable
	o.placeholderSupport = $.fn.overlay.support(),
	// Set the text to the value of the attribute, if it exists
	o.overlay.txt = $this.attr('placeholder') ? $this.attr('placeholder') : o.overlay.txt;
	
	// If the browser support placehoder and has a placeholder attribute	
	if(o.placeholderSupport && $this.attr('placeholder')) {
		// Push the associated label off screen
		$('label[for=' + $this.attr('id') + ']').addClass('offScreen');
	} else {
		var $overlay;
		// If there is overlay text
		if (o.overlay.txt) {
			// I don't know, I'm not sure this if is necessary. May want to just have the else work here and no if
			if ($(o.overlay.txt).length) {
				$overlay = o.overlay.txt;
			} else {
				// Build a div with the text in it and attach to the parent of the input
				$overlay = $('<div />').text(o.overlay.txt).appendTo($this.parent());
			}
		} else {
			// Set the overlay to the associated label
			$overlay = $('label[for=' + $this.attr('id') + ']');
		}
		// Add the overlay classes and attributes and set the input to the data of the overlay for easy reference later
		$overlay.addClass(o.overlay.classes).attr(o.overlay.attrs).data('input', $this);
		// If there is a value for the input hide the overlay
		if (!$this.val() == '') {
			$overlay.hide();
		}
		$this
			// Set the overlay to the data of the input for easy reference later
			.data('overlay', $overlay)
			// On focus hide the overlay
			.focus(function(e){
				var $this = $(e.target), $overlay = $this.data('overlay');
				$overlay.hide();
			})
			// On blur, if the input is empty, show the overlay
			.blur(function(e){
				var $this = $(e.target), $overlay = $this.data('overlay');
				if ($this.val() == '') {
					$overlay.show();						
				}
			})
		;
		// If the overlay is clicked, trigger the input focus event (thus hiding the overlay)
		$overlay.click(function(e) {
			var $this = $(e.target), $input = $this.data('input');
			$input.focus();
		});
	}
  });

  // private function for debugging
  function debug($obj) {
    if (window.console && window.console.log) {
      window.console.log($obj);
    }
  }
};

$.fn.overlay.support = function() {
	// If Modernizr is present, check for placeholder support
	if (window.Modernizr) {
		return Modernizr.input.placeholder;
	// Otherwise try to create the attribute and return true or false
	} else {
	  var i = document.createElement('input');
	  return 'placeholder' in i;	
	}
};

// default options
$.fn.overlay.defaults = {
	placeholderSupport: false,
	overlay: {
		txt: 'text field',
		attrs: {
			id: 'overlay'
		},
		classes: 'overlayed'
	}
};

})(jQuery);