/**
 * 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);
			
			//Mouse Events
			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);