var selectBox = {
    init: function () {
        
        $('#searchRecipeForm select').change(function () {
            // param
            var itemSelect = $(this);
            selectBox.updateSelectedItem(itemSelect);
        });
        $('#searchRecipeForm select').each(function () {
            // param
            var itemSelect = $(this);
            var title = itemSelect.parent().prev().text();
            var itemList = itemSelect.find('option');
            slideSpeed = 150;
            
            // init
            itemSelect.addClass('hidden');
            //$('#searchRecipeForm .select select.hidden').css('left', '168px');
            itemSelect.after('<a class="selectBoxContainer" href="#"><span>'+title+'</span></a>');
            selectBox.updateSelectedItem(itemSelect);
            itemSelect.next().append('<ul></ul>');
            itemList.each(function () {
                // param
                var item = $(this);
                var itemValue = item.attr('value');
                var itemTitle = item.text();
                
                itemSelect.next().find('ul').append('<li><a href="#" rel="'+itemValue+'">'+itemTitle+'</a></li>');
                
            });
            
            itemSelect.next().click(function () {
                if(!itemSelect.hasClass('move')) {
                    if(!itemSelect.hasClass('deploy')) {
                        var link = $(this);
                        itemSelect.addClass('move').addClass('deploy');
                        link.find('ul').slideDown(slideSpeed, function () {
                            itemSelect.removeClass('move');
                        });
                    } else {
                        selectBox.closeSelectList(itemSelect);
                    }
                }
                return false;
            });
            
            itemSelect.next().find('li a').click(function () {
                if(!itemSelect.hasClass('move')) {
                    // param
                    var itemLink = $(this);
                    
                    selectBox.selectItem(itemSelect, itemLink);
                    
                    itemSelect.addClass('move').removeClass('deploy');
                    itemLink.parent().parent().slideUp(slideSpeed, function () {
                        itemSelect.removeClass('move');
                    });
                }
                return false;
            });
        });
    },
    updateSelectedItem: function (itemSelect) {
        var itemSelectTitle = itemSelect.find(':selected').text();
        itemSelect.next().find('span').text(itemSelectTitle);
    },
    selectItem: function (itemSelect, itemLink) {
        var itemLinkValue = itemLink.attr('rel');
        itemSelect.val(itemLinkValue);
        selectBox.updateSelectedItem(itemSelect);
    },
    closeSelectList: function (itemSelect) {
        if(!itemSelect.hasClass('move')) {
            itemSelect.addClass('move').removeClass('deploy');
            itemSelect.next().find('ul').slideUp(slideSpeed, function () {
                itemSelect.removeClass('move');
            });
        }
    }
}
$(document).ready(selectBox.init);