(function($) {
    "use strict";
    function Lensy(element, options) {
        this.$select = $(element);
        this.configure(options);
        this.build();
        this.bindEvents();
    }
    Lensy.prototype = {
        configure: function(options) {
            this.settings = $.extend({}, $.fn.lensy.defaults, options);
        },
        build: function() {
            this.$filter = $('<input>')
                .attr('type', 'text')
                .addClass(this.settings.filterClass);
            this.$filterWrap = $('<div>')
                .addClass(this.settings.filterWrapClass)
                .append(this.$filter);
            this.$container = $('<ul>')
                .addClass(this.settings.containerClass);
            this.$closeButton = $('<a>')
                .text(this.settings.closeButtonText)
                .addClass(this.settings.closeButtonClass);
            this.$widget = $('<ul>')
                .addClass(this.settings.widgetClass)
                .insertAfter(this.$select);
            this.$modal = $('<div>')
                .addClass(this.settings.modalClass)
                .append(this.$filterWrap)
                .append(this.$container)
                .append(this.$closeButton)
                .appendTo('body')
                .hide();
            this.$select.hide();
        },
        show: function() {
            this.$modal.show();
            this.$filter.focus();
        },
        hide: function() {
            this.$modal.hide();
        },
        createItem: function($option) {
            var value = $option.val();
            var text = $option.text();
            return $('<li>')
                .addClass(this.settings.itemClass)
                .attr('data-original-value', value)
                .attr('data-original-text', text)
                .data('$option', $option)
                .html(this.settings.itemFn(value, text, $option));
        },
        createWidgetItem: function($item) {
            var value = $item.attr('data-original-value');
            var text = $item.attr('data-original-text');
            var $option = $item.data('$option');
            return $('<li>')
                .addClass(this.settings.itemClass)
                .html((this.settings.widgetItemFn || this.settings.itemFn)(value, text, $option));
        },
        filter: function() {
            var self = this;
            this.$container.find('[data-original-value]').each(function() {
                var $item = $(this);
                var value = $item.attr('data-original-value');
                var text = $item.attr('data-original-text');
                if (self.settings.filterFn(self.$filter.val(), value, text, $item)) {
                    $item.show();
                } else {
                    $item.hide();
                }
            });
        },
        update: function() {
            var self = this;
            var values = this.$select.val() || [];
            this.$widget.empty();
            this.$container.find('[data-original-value]').each(function() {
                var $item = $(this);
                var value = $item.attr('data-original-value');
                if (values.indexOf(value) == -1) {
                    $item.removeClass(self.settings.itemActiveClass);
                } else {
                    $item.addClass(self.settings.itemActiveClass);
                    var $widgetItem = self.createWidgetItem($item);
                    self.$widget.append($widgetItem);
                }
            });
        },
        bindEvents: function() {
            var self = this;
            this.$widget.click($.proxy(this.show, this));
            this.$closeButton.click($.proxy(this.hide, this));
            // $item in $container gets clicked on
            var itemSelected = function() {
                var $item = $(this);
                var value = $item.attr('data-original-value');
                var values = self.$select.val() || [];
                if (values.indexOf(value) == -1) {
                    self.$select.val(values.concat(value));
                } else {
                    self.$select.val($.grep(values, function(v) { return v != value; }));
                }
                self.$select.trigger('change');
            };
            // $container is populated with $items
            this.$select.find('option').each(function() {
                var $option = $(this);
                var $item = self.createItem($option);
                $item.on('click', itemSelected);
                self.$container.append($item);
            });
            this.$select.on('change', $.proxy(this.update, this));
            this.update();
            this.$filter.on('change keyup', $.proxy(this.filter, this));
        }
    };
    $.fn.lensy = function(options) {
        return this.each(function() {
            if (!$.data(this, 'lensy')) {
                $.data(this, 'lensy', new Lensy(this, options));
            }
        });
    };
    $.fn.lensy.defaults = {
        // escape action: close / clean filter
        containerClass: 'lensy-container',
        closeButtonText: 'Close',
        closeButtonClass: 'lensy-button',
        modalClass: 'lensy-modal',
        filterClass: 'lensy-filter',
        filterWrapClass: 'lensy-filter-wrap',
        widgetClass: 'lensy-widget',
        itemClass: 'lensy-item',
        itemActiveClass: 'active',
        itemFn: function(value, text) { return $('<span>').text(text); },
        widgetItemFn: undefined,
        filterFn: function(filterString, value, text) { return text.toLowerCase().indexOf(filterString.toLowerCase()) != -1; }
    };
})(jQuery);