/**
 * jQuery.underline Add a underline to any element
 *
 * @author Malachany jerry(at)malachany(dot)com
 * @version 1.0
 *
 *  Permission is hereby granted, free of charge, to any person obtaining a copy
 *	of this software and associated documentation files (the "Software"), to deal
 *	in the Software without restriction, including without limitation the rights
 *	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *	copies of the Software, and to permit persons to whom the Software is
 *	furnished to do so, subject to the following conditions:
 *	
 *	The above copyright notice and this permission notice shall be included in
 *	all copies or substantial portions of the Software.
 *	
 *	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 *	THE SOFTWARE.
 *
 * 
 *  @param  width			This is the thickness of the underline
 *
 *	@param	distance		Distance from the element
 *
 *	@param	color			The color you want the line to be
 *
 *	@param	durationOn		The time it will take for the underline to fade in
 *
 *	@param	durationOn		The time it will take for the underline to fade out
 *
 *	@param	extend			Amount of pixels to extend on each side of the element.
 *							You can make this a positive or negative number.
 *
 *	@param	linkOn			MouseEvent to use to fadeIn the underline
 *							i.e. (hover, mouseout, mouseover, click, dblclick)
 *
 *	@param	linkOff			MouseEvent to use to remove the underline
 *							i.e. (hover, mouseout, mouseover, click, dblclick)
 *
 *
 *  Example
 *  ------------
 *  <script language="JavaScript" type="text/javascript">
 *		$('.menuItem a').underline({
 *			width: 	  	 1,  			//default: 1
 *			distance: 	 -1,			//default: 0
 *			color:	  	 '#526f83', 	//default: #000
 *	 		durationOn:  350, 			//default: 250
 *			durationOff: 350, 			//default: 250
 *			extend:   	 0, 			//default: 2,
 *			linkOn: 	 'mouseover',	//default: 'mouseover'
 *			linkOff: 	 'mouseout'		//default: 'mouseout'
 *			});
 *	</script>
 *
 * 	<style type="text/css">
 *		ul {
 *			list-style: none;
 *		}
 *		li {
 *			position: relative;
 *			float: left;
 *		}
 *	</style>
 *
 *  <div id="header">
 *		<ul id="menu">
 *			<li class="menuItem"><a href="/">HOME</a></li>
 *			<li class="menuItem"><a href="/">GALLERY</a></li>
 *			<li class="menuItem"><a href="/">ABOUT</a></li>
 *			<li class="menuItem"><a href="/">CONTACT</a></li>
 *		</ul>
 *	</div>
 *
 */
 
(function($){$.fn.underline=function(options){var defaults={width:1,distance:0,color:'#000',durationOn:250,durationOff:250,extend:2,linkOn:'mouseover',linkOff:'mouseout'};var options=$.extend(defaults,options);return this.each(function(){obj=$(this);var linkOn=options.linkOn;var linkOff=options.linkOff;obj.bind(linkOn,function(){$('#underlineLine').remove();var position=$(this).offset();var top=position.top;var left=position.left;var objWidth=$(this).width();var objHeight=$(this).height();$('body').append('<div id="underlineLine"></div>');$('#underlineLine').css({'position':'absolute','display':'none','height':options.width+'px','background-color':options.color,});$('#underlineLine').css({'left':left-options.extend,'top':top+objHeight+options.distance,'width':objWidth+options.extend*2}).fadeIn(options.durationOn)});obj.bind(linkOff,function(){$('#underlineLine').fadeOut(options.durationOff)})})}})(jQuery);