(function($) {
    var settings = {
        show_delay: 200,
        hide_delay: 150
    }
    var timers = {
        show: {},
        hide: {}
    }
    var init = function (container, config) {
        $.extend(settings, config);
        settings.container = container;
        container.hover(
            function (ev) {
                clearTimer('hide');
            },
            function (ev) {
                clearTimer('show');
                timers.hide = setTimeout(
                    function () {
                        hideAll();
                    },
                    settings.hide_delay
                );
            }
        );
        container.children().hover(
            function (ev) {
                hoverin($(this));
            },
            function (ev) {
                hoverout($(this));
            }
        );
    }
    var hoverin = function (el) {
        clearTimer('show');
        if (settings.container.children('.over').length) {
            show(el);
        }
        else {
            timers.show = setTimeout(
                function() {
                    show(el)
                },
                settings.show_delay
            );
        }
    }

    var hoverout = function (el) {
        setTimeout(
            function () {
                hide(el);
            },
            settings.hide_delay
        );
    }

    var show = function (el) {
        hideAll();
        el.addClass('over');
    }

    var hide = function (el) {
        el.removeClass('over');
    }

    var hideAll = function () {
        $.each(settings.container.children('.over'), function (key, child) {
            hide($(child));
        })
    }

    var clearTimer = function (type) {
        if (timers[type]) {
            clearTimeout(timers[type]);
        }
    }


    $.fn.wysiwygmenu = function(config) {
        return this.each(function(key, value) {
            init($(this), config);
        });
    };
})(jQuery);