/*
Creates a simple drop shadow behind some text. It just duplicates the desired text element and places a copy underneath it, with a darker text color, and slightly offset.
*/

jQuery.fn.dropShadow = function(options)
{
	var settings = {
		textColor	 : '#fff',
    	shadowColor	 : '#808080',
        offsetLeft	 : 1,
        offsetBottom : 1
    }

    if(options) {
        jQuery.extend(settings, options);
    };

    // IE 6 doesn't sent the position of the shadow correctly... box model issue?
    if ( ($.browser.msie && $.browser.version > 6) || !$.browser.msie )
    {
    	/*
    	TODO - try to poll the text size and see if it changes, then resize the shadow accordingly
		this.parent().append('<span id="textResize" style="display: none;">x</span>');
		startSize = $("#textResize").height();
		*/

    	this.each(function(){
			ele = $(this);
			position = ele.position();
			width = ele.width(); // need to set the width of the new element so it lines up

			shadow = ele.clone().insertAfter( $(ele) );

			shadow.css({
				top: position.top + settings.offsetLeft,
				left: position.left + settings.offsetBottom,
				color: settings.shadowColor,
				position: 'absolute',
				'z-index': 1,
				width: width
			});

			ele.css({
				color: settings.textColor,
				position: 'relative',
				'z-index': 999
			});
		});
    }
}

/*
USAGE

$('.callOutStyled p').dropShadow({shadowColor: '#ababab'});

TAKES

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

CREATES

<p style="color: rgb(255, 255, 255); position: relative; z-index: 999;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><p style="top: 40px; left: 25px; color: rgb(171, 171, 171); position: absolute; z-index: 1; width: 185px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>