(function ($) {
    $.fn.pickled = function (settings) {
        var closePicker = false,
            escDataSave = "";
        settings = $.extend({
            'listsize': 7,
            'cssClass': 'pickles'
        }, settings);
        if (settings.pickles == undefined) {
            settings.pickles = [];
            var minutes = ['00'];
            for (var hour = 0; hour <= 21; hour++) {
                for (var i = 0; i < minutes.length; i++) {
                    var stringHour = "" + hour,
                        value = (stringHour.length == 1 ? '0' : '') + hour + ':' + minutes[i];
                    settings.pickles[settings.pickles.length] = value
                }
            }
        }
        this.each(function (i, elm) {
            initialize(elm)
        });

        function initialize(elm) {
            var pickerId = "pickles_picker_id_" + $('.picker_container select').length + '_' + (new Date().getTime());
            createPicker(pickerId);
            $(elm).focus(function (e) {
                showPicker(elm, pickerId)
            });
            $(elm).click(function (e) {
                showPicker(elm, pickerId)
            });
            $("#" + pickerId).bind("change", function () {
                chooseAndHide(elm, pickerId)
            });
            $(document).mousedown(function (e) {
                if (e.target != $("#" + pickerId) && e.target != $(elm) && e.target != $("#" + pickerId + "_container select")[0] && e.target.parentNode != $("#" + pickerId + "_container select")[0]) {
                    hidePicker(pickerId)
                }
            });
            $(elm).blur(function (e) {
                closePicker = true;
                setTimeout(function () {
                    if (closePicker) {
                        hidePicker(pickerId)
                    }
                }, 100)
            });
            $("#" + pickerId).focus(function (e) {
                closePicker = false
            });
            $(elm).keyup(function (e) {
                var size = $('#' + pickerId).find('option').length,
                    selected = $('#' + pickerId).val(),
                    direction = 'down';
                if (size != 0 && $("#" + pickerId).is(':visible')) {
                    if (e.keyCode == 38) {
                        direction = "up"
                    }
                    if (e.keyCode == 40 || e.keyCode == 38) {
                        if (selected == null) {
                            $('#' + pickerId).val($('#' + pickerId).find('option').first().val())
                        } else {
                            $('#' + pickerId).find('option').each(function (index, item) {
                                if ($(item).val() == selected) {
                                    if (direction == "down" && size > index) {
                                        $('#' + pickerId).val($($('#' + pickerId).find('option')[index + 1]).val())
                                    } else if (direction == "up" && index != 0) {
                                        $('#' + pickerId).val($($('#' + pickerId).find('option')[index - 1]).val())
                                    }
                                }
                            })
                        }
                    } else if (e.keyCode == 13) {
                        chooseAndHide(elm, pickerId)
                    } else if (e.keyCode == 27) {
                        hidePicker(pickerId)
                    }
                } else if ($("#" + pickerId).is(':hidden') && (e.keyCode == 40 || e.keyCode == 38)) {
                    showPicker(elm, pickerId)
                }
            })
        }
        function createPicker(pickerId) {
            if ($('#' + pickerId).length == 0) {
                var listHtml = ' <select size="' + settings.listsize + '" id="' + pickerId + '" class="' + settings.cssClass + '">';
                $(settings.pickles).each(function () {
                    listHtml += '<option value="' + this + '">' + this + '</option>'
                });
                listHtml += '</select>';
                $("body").append('<div id="' + pickerId + '_container" class="picker_container" style="position: absolute;"></div>');
                $("#" + pickerId + '_container').append(listHtml);
                $("#" + pickerId + '_container').hide()
            }
        }
        function showPicker(element, pickerId) {
            var topPosition = $(element).position().top + $(element).height() + 12;
            var leftPosition = $(element).position().left;
            var width = $(element).outerWidth();
            $('#' + pickerId + '_container').css({
                'left': leftPosition + 'px',
                'top': topPosition + 'px',
                'width': width
            });
            $('#' + pickerId + '_container').show()
        }
        function hidePicker(pickerId) {
            $("#" + pickerId + '_container').hide()
        }
        function chooseAndHide(elm, pickerId) {
            $(elm).val($("#" + pickerId).val());
            hidePicker(pickerId)
        }
        return this
    }
})(jQuery);