jQuery.fn.textover = function(settings) {
	settings = jQuery.extend({
		text: "",
		color: "#ccc",
		top: "0px",
		left: "2px",
		heigth: undefined,
		width: undefined,
		font_size: undefined,
		font_family: undefined
		}, settings );

		return this.each(function() {
			//creating a label tag with the desired text
			var parent = jQuery("<div class='textover'></div>");
			var label = jQuery('<label>'+settings.text+'</label>');

			//getting the input textbox object and height
			var input = jQuery(this);
			if (settings.height != undefined) {
				var height = settings.height;
			}
			else {
				var height = input.height();
			}
			if (settings.width != undefined) {
				var width = settings.width;
			}
			else {
				var width = input.width();
			}
			
			//getting the current font-size of the textbox
			//used to vertically align the label-text
			//TODO: check if works with other unit and
			//not only in pixel font-size
			var fontSize = parseInt(input.css('font-size'));

			var marginTop = parseInt(input.css('margin-top'));
			var marginBottom = parseInt(input.css('margin-bottom'));

			var paddingTop = parseInt(input.css('padding-top'));
			var paddingBottom = parseInt(input.css('padding-bottom'));

			var borderTop = parseInt(input.css('border-top-width'));
			var borderBottom = parseInt(input.css('border-bottom-width'));

			var mediaMargin = (marginTop+marginBottom)/2;
			var mediaPadding = (paddingTop+paddingBottom)/2;
			var mediaBorder = (borderTop+borderBottom)/2;

			var halfHeight = ((height/2)*(-1))-mediaPadding-mediaBorder-mediaMargin;

			//var top = num_marginTop + num_paddingTop + ((input_height - num_fontsize ) / 2);
			if (settings.top.length <= 0) {
				settings.top = marginTop + paddingTop + borderTop;
			}

			if (settings.font_size != undefined) {
				var font_size = settings.font_size;
			}
			else {
				var font_size = input.css('font-size');
			}

			if (settings.font_family != undefined) {
				var font_family = settings.font_family;
			}
			else {
				var font_family = input.css('font-family');
			}

			//TODO: check this css applied to the parent 
			//container			
			parent.css({ "position": "relative", "float":"left" });
			label.css({ 
				"color": settings.color,
				"position": "absolute",
				"height" : height,
				"width" : width,
				"font-size": font_size,
				"font-family": font_family,
				"top": settings.top,
				"left": settings.left,
				"cursor": 'text' });
				
				//wrapping input textbox around parent div
				input.wrap(parent);

				//appending the label to the parent container
				//of the textbox
				jQuery(input).parent().append(label);

				//hide text function
				this.hide = function() {
					label.css({ "display": "none", textIndent: -10000 });
				}

				//show text function
				this.show = function() {
					if (input.val() == '') {
						label.css({ textIndent: 0, "display": "block" });
						}
				}

				// handlers
				input.focus(this.hide);
				input.blur(this.show);
				label.click(function(){ input.focus() });

				//check if input contains user data, if so
				//the label isn't showed
				if (input.val() != '') this.hide();

				//delayed check to avoid browser stored passwords
				jQuery(document).ready(function(){setTimeout( function(){if (input.val() != '') label.hide();}, 300)});
		});
}