(function ($) {
    $.fn.listselect = function (options) {
        var defaults = {
            size: 10,
            maxselect: 0,
            listTitle: "All",
            selectedTitle: "Selected"
        }

        var options = $.extend(defaults, options);

        return this.each(function () {
            var listContainer = $("<div style=\"margin-right: 5px; float: left; width: 200px;\"></div>");
            if (options.listTitle && options.listTitle != '') listContainer.append("<strong>" + options.listTitle + "</strong>");

            var selectedContainer = $("<div style=\"float: left; width: 200px;\"></div>");
            if (options.selectedTitle && options.selectedTitle != '') selectedContainer.append("<strong>" + options.selectedTitle + "</strong>");

            var selected = $(this);
            selected.removeClass("listselect");
            listContainer.insertBefore(selected);
            selectedContainer.insertAfter(listContainer);
            selected.remove();

            var list = $("<select></select>");
            var selectedValues = null;
            if (selected.attr("selected")) {
                selectedValues = selected.attr("selected").split(",");
            }

            var fieldname = selected.attr('name');
            selected.attr('name', '');
            selected.attr('id', '');
            selected.css("width", "100%");
            list.css("width", "100%");

            list.html(selected.html());
            selected.html('');

            selected.attr('size', options.size);
            list.attr('size', options.size);

            listContainer.append(list);
            selectedContainer.append(selected);

            list.bind("click", function () {
                var hiddenObj = $("<input type=\"hidden\" name=\"" + fieldname + "[]\" id=\"listselect_" + fieldname + "_" + $(this).val() + "\" value=\"" + $(this).val() + "\" />");
                var selectedObj = $(this).find("option[value='" + $(this).val() + "']");

                selectedObj.remove();
                selected.append(selectedObj);
                hiddenObj.insertAfter(selected);

                selected.val('');
                list.val('');
            });

            selected.bind("click", function () {
                var hiddenObj = $("#listselect_" + fieldname + "_" + $(this).val());
                var selectedObj = $(this).find("option[value='" + $(this).val() + "']");
                selectedObj.remove();
                list.append(selectedObj);
                hiddenObj.remove();

                selected.val('');
                list.val('');
            });

            if (selectedValues != null && selectedValues.length > 0) {
                for (var i = 0; i < selectedValues.length; i++) {
                    var hiddenObj = $("<input type=\"hidden\" name=\"" + fieldname + "[]\" id=\"listselect_" + fieldname + "_" + selectedValues[i] + "\" value=\"" + selectedValues[i] + "\" />");
                    var selectedObj = list.find("option[value='" + selectedValues[i] + "']");
                    selectedObj.remove();
                    selected.append(selectedObj);
                    hiddenObj.insertAfter(selected);
                }
            }

            selected.val('');
            list.val('');

        });
    };
})(jQuery);