(function ($) {

    $.fn.extend({
        autofgMenu: function () {
            return this.find('select.fgMenu').each(function () {
                var select = this;
                var menu = $('<a />');
                var menuItems = $('<div />');
                var selectID = $(select).attr('id');
                var selectText = '';

                if ($(select).val() != "") { selectText = $(select).find("option[value='" + $(select).val() + "']").html(); }
                else if ($(select).find("option[value='']").length > 0) { selectText = $(select).find("option[value='']").html(); }

                $(menu).attr('href', '#fg' + selectID)
                       .attr('class', 'fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all')
                       .append($('<span />')
                            .addClass("ui-icon ui-icon-triangle-1-s")
                        )
                       .append($('<span />').addClass('selectedText').html(selectText));

                $(menuItems).attr('id', 'fg' + selectID)
                            .addClass('hidden')
                            .css('z-index', '999')
                            .append(GetMenuItemsFromOptions(select));

                $(menu).insertAfter($(select));
                $(menuItems).insertAfter($(menu));
                $(select).hide();

                $(menu).menu({
                    content: $(menu).next().html(), // grab content from this page
                    showSpeed: 400,
                    positionOpts: {
                        posX: 'left',
                        posY: 'bottom',
                        offsetX: 0,
                        offsetY: 0,
                        directionH: 'right',
                        directionV: 'down',
                        detectH: true, // do horizontal collision detection  
                        detectV: false, // do vertical collision detection
                        linkToFront: false
                    },
                    maxHeight: 400,
                    onItemSelected: function (name, value) {
                        $(menu).find('.selectedText').html(name);
                        if ($(select).val() != value) {
                            $(select).val(value).trigger('change');
                        }
                    }
                });

                $(select).change(function () {
                    $(menu).find('.selectedText').html($(select).find("option[value='" + $(select).val() + "']").html());
                });
            });
        }
    });

    function GetMenuItemsFromOptions(select) {
        var ul = $('<ul />');
        $(select).find("option[value!='']").each(function () {
            var selectItem = this;
            $(ul).append(
                    $('<li />').append(
                        $('<a />').attr('href', '#')
                            .attr('value', $(selectItem).attr('value'))
                            .html($(selectItem).html())
                    )
                );
        });

        return ul;
    }

})(jQuery);


//<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>
//<div id="search-engines" class="hidden">
//<ul>
//	<li><a href="#">Apples</a></li>
//	<li><a href="#">Oranges</a></li>

//	<li><a href="#">Bananas</a></li>
//	<li><a href="#">Cheetos</a></li>
//</ul>
//</div>