/**
 * 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,});
            
                $('#underlineLine').css({'left' : left-options.extend,
                                         'top'  : top+objHeight+options.distance,
                                         'width': objWidth+options.extend*2 })
                                   .fadeIn(options.duration);

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