/**
 * jQuery.svitla.simpleDropdownMenu - Easy dropdown menu using jQuery.
 * Copyright (c) 2011 Ivan Kukobko - ivankukobko(at)svitla(dot)com
 * Dual licensed under MIT and GPL.
 * Date: 4/22/2011
 * @author Ivan Kukobko
 * @version 0.0.1
 *
 */

$.fn.simpleDropdownMenu = function() {

    var options = {
        containerSelector : '#nav_links',
        menuItemSelector : '.menu-item',
        subMenuSelector : '.sub-menu'
    };

    return this.each(function(){
        var $this       = $(this);
        var $menuItem   = $this.closest(options.menuItemSelector);
        var $subMenu    = $(options.subMenuSelector, $menuItem);

        // 17 is pretty experimental value
        var $offset = $this.width()/2 - $subMenu.outerWidth()/2 - 17;

        $subMenu.css({ 'left' : $offset});

        // menu should appear when hovering link
        $this.mouseenter(function(){
            $subMenu.stop(true, true).fadeIn();
//            $subMenu.stop(true, true).show();
        });

        // when mouse leaves popup menu --- it should hide
        $menuItem.mouseleave(function(){
            $subMenu.stop(true, true).fadeOut();
//            $subMenu.stop(true, true).hide();
        });
    });
};