/**
 * 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	duration		The time it will take for the underline to fade in
 *
 *	@param	extend			Amount of pixels to extend on each side of the element.
 *							You can make this a positive or negative number.
 *
 *
 *  Example
 *  ------------
 *  <script language="JavaScript" type="text/javascript">
 *		$('.menuItem a').underline({
 *			width: 	  1,  			//default: 1
 *			distance: -1,			//default: 0
 *			color:	  '#526f83', 	//default: #000
 *	 		duration: 350, 			//default: 250
 *			extend:   0, 			//default: 2,
 *			});
 *	</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',
            duration: 250,
            extend: 2
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
            obj = $(this);

            obj.mouseover(function () {
                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,
                    'z-index': '100'
                });

                $('#underlineLine').css({ 'left': left - options.extend,
                    'top': top + objHeight - 5 + options.distance,
                    'width': objWidth + options.extend * 2
                })
								   .fadeIn(options.duration);

            })
			.mouseout(function () {
			    $('#underlineLine').css('display', 'none');
			    $('#underlineLine').remove();
			});
        });
    };
})(jQuery);