/*
 * Plugin: jQuery fadeLabels v1.1 - http://www.lmenu.fr/labelsFX/
 * Author: Laurent Menu - http://www.lmenu.fr
 *
 * Description: Add a nice effect of slide or fadeIn/Out to your labels.
*/

(function(j) {

	j.fn.labelsFX = function(params) {
		var params = j.extend({
			durationHover: 200,
			durationOut: 200,
			fx: 'fade'
		}, params);
		
		this.each(function(i) {			
			current = j(this);
			
			var inputs = j('input[type!="submit"], input[type!="button"], input[type!="reset"], textarea, select');	
			var selectedInputs = 'input, textarea, select';
			
			// Get the input width for the label
			var inputWidth = current.parent().children(selectedInputs).innerWidth();
			
			// Set FX effects
			if(params.fx == 'slide') {
				var style = {
					'position' : 'relative',
					'width' : inputWidth
				};
				
				current.parent().css('position', 'relative');
				current.before('<div style="position: absolute; overflow: hidden;" class="labelContaint" id="labelContaint-' + i + '"></div>').appendTo('#labelContaint-' + i);
			}
			else {
				current.parent().css('position', 'relative');
				var style = {
					'position' : 'absolute',
					'display': 'block',
					'width' : inputWidth
				};
			}
			
			// Set label style
			current.css(style);	
			
			// Empty all inputs at page loading
			if(current.parent().children(selectedInputs).val() != '') {
				current.parent().children(selectedInputs).val('');
			}
			
			// Click event on the label
			current.bind('click', function() {
				var forAttr = j(this).attr('for');
				j('#' + forAttr).focus();
			});
			
			// Focus event on inputs
			inputs.focus(function() {
				var idAttr = j(this).attr('id');
				var label = j('label[for="' + idAttr + '"]');
				
				if(j(this).val() == '') {
					if(params.fx == 'slide') {
						var inputWidth = label.innerWidth();
						
						label.stop().animate({
							'left': -inputWidth
						}, params.durationHover);
					}
					else {
						label.stop().animate({
							'opacity': 0
						}, params.durationHover, function() {
							j(this).hide();
						});
					}
				}
			});
			
			// Blur event on inputs
			inputs.blur(function() {
				var idAttr = j(this).attr('id');
				var label = j('label[for="' + idAttr + '"]');
				
				if(j(this).val() == '') {
					if(params.fx == 'slide') {
						label.stop().animate({
							'left': 0
						}, params.durationHover);
					} 
					else {
						label.stop().show().animate({
							'opacity': 1
						}, params.durationOut);
					}
				}
			});
		});
		
		return this;
	};

})(jQuery);