Add js lib "multiselect-two-sides" see #2515

app/Resources/public/assets/multiselect/.bower.json

@@ -0,0 +1,27 @@
+{
+  "name": "multiselect",
+  "version": "2.5.1",
+  "homepage": "https://github.com/crlcu/multiselect",
+  "authors": [
+    "Adrian Crisan <adrian.crisan88@gmail.com>"
+  ],
+  "description": "jQuery multiselect plugin with two sides",
+  "main": "dist/js/multiselect.min.js",
+  "keywords": [
+    "multiselect"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "jquery": ">= 1.7"
+  },
+  "_release": "2.5.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v2.5.1",
+    "commit": "b392a4e3233155703561880da8af177ea67cc408"
+  },
+  "_source": "https://github.com/crlcu/multiselect.git",
+  "_target": "^2.5.1",
+  "_originalSource": "multiselect-two-sides",
+  "_direct": true
+}

app/Resources/public/assets/multiselect/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+.htaccess
+.idea

app/Resources/public/assets/multiselect/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+<a name="2.5.1"></a>
+## [2.5.1](https://github.com/crlcu/multiselect/compare/v2.5.0...v2.5.1) (2018-04-27)
+
+
+### Features
+
+* now we can have different sort functions for left and right ([d5fc6a1](https://github.com/crlcu/multiselect/commit/d5fc6a1))
+
+
+
+<a name="2.5.0"></a>
+# [2.5.0](https://github.com/crlcu/multiselect/compare/v2.4.1...v2.5.0) (2018-02-06)
+
+
+### Features
+
+* now we can have different sort functions for left and right ([887ab4a](https://github.com/crlcu/multiselect/commit/887ab4a))

app/Resources/public/assets/multiselect/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Adrian Crisan (adrian.crisan88@gmail.com)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

app/Resources/public/assets/multiselect/README.md

@@ -0,0 +1,66 @@
+multiselect
+===========
+
+jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side.
+
+# [Demo](http://crlcu.github.com/multiselect/)
+
+## Requirements
+
+- jQuery 1.7 or higher
+
+## Quick start
+
+Several quick start options are available:
+
+- Clone the repo: `git clone https://github.com/crlcu/multiselect.git` or
+- Install with [Bower](http://bower.io): `bower install multiselect-two-sides`.
+
+### Usage example
+
+```html
+<div class="row">
+	<div class="col-xs-5">
+		<select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
+			<option value="1">Item 1</option>
+			<option value="3">Item 3</option>
+			<option value="2">Item 2</option>
+		</select>
+	</div>
+	
+	<div class="col-xs-2">
+		<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+		<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+		<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+		<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+	</div>
+	
+	<div class="col-xs-5">
+		<select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
+	</div>
+</div>
+```
+
+```javascript
+<script type="text/javascript" src="path/to/jquery.min.js"></script>
+<script type="text/javascript" src="path/to/multiselect.min.js"></script>
+
+<script type="text/javascript">
+jQuery(document).ready(function($) {
+	$('#multiselect').multiselect();
+});
+</script>
+```
+
+## Bugs and feature requests
+
+If your problem or idea is not [addressed](https://github.com/crlcu/multiselect/issues) yet, [please open a new issue](https://github.com/crlcu/multiselect/issues/new).
+
+## Versioning
+
+For transparency into release cycle and in striving to maintain backward compatibility, multiselect is maintained under [the Semantic Versioning guidelines](http://semver.org/).
+
+
+## License
+
+The multiselect plugin is open-sourced software licensed under the [the MIT license](https://github.com/crlcu/multiselect/blob/master/LICENSE).

app/Resources/public/assets/multiselect/bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "multiselect",
+  "version": "2.5.1",
+  "homepage": "https://github.com/crlcu/multiselect",
+  "authors": [
+    "Adrian Crisan <adrian.crisan88@gmail.com>"
+  ],
+  "description": "jQuery multiselect plugin with two sides",
+  "main": "dist/js/multiselect.min.js",
+  "keywords": [
+    "multiselect"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "jquery": ">= 1.7"
+  }
+}

app/Resources/public/assets/multiselect/css/style.css

@@ -0,0 +1,26 @@
+.github.ribbon {
+	position: fixed;
+	display: block;
+	top: 40px;
+	right: 0;
+	border: 0;
+	z-index: 1001;
+}
+
+.prettyprint {
+	padding: 10px!important;
+}
+
+#wrap {
+	padding-top: 70px;
+}
+
+#home h1 {
+	margin-bottom: 30px;
+}
+#demo,
+#examples,
+#support,
+#download {
+	padding-top: 40px;
+}

app/Resources/public/assets/multiselect/dist/js/multiselect.js

@@ -0,0 +1,813 @@
+/*
+ * @license
+ *
+ * Multiselect v2.5.0
+ * http://crlcu.github.io/multiselect/
+ *
+ * Copyright (c) 2016-2018 Adrian Crisan
+ * Licensed under the MIT license (https://github.com/crlcu/multiselect/blob/master/LICENSE)
+ */
+
+if (typeof jQuery === 'undefined') {
+    throw new Error('multiselect requires jQuery');
+}
+
+;(function ($) {
+    'use strict';
+
+    var version = $.fn.jquery.split(' ')[0].split('.');
+
+    if (version[0] < 2 && version[1] < 7) {
+        throw new Error('multiselect requires jQuery version 1.7 or higher');
+    }
+})(jQuery);
+
+;(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module depending on jQuery.
+        define(['jquery'], factory);
+    } else {
+        // No AMD. Register plugin with global jQuery object.
+        factory(jQuery);
+    }
+}(function ($) {
+    'use strict';
+
+    var Multiselect = (function($) {
+        /** Multiselect object constructor
+         *
+         *  @class Multiselect
+         *  @constructor
+        **/
+        function Multiselect( $select, settings ) {
+            var id = $select.prop('id');
+            this.$left = $select;
+            this.$right = $( settings.right ).length ? $( settings.right ) : $('#' + id + '_to');
+            this.actions = {
+                $leftAll:       $( settings.leftAll ).length ? $( settings.leftAll ) : $('#' + id + '_leftAll'),
+                $rightAll:      $( settings.rightAll ).length ? $( settings.rightAll ) : $('#' + id + '_rightAll'),
+                $leftSelected:  $( settings.leftSelected ).length ? $( settings.leftSelected ) : $('#' + id + '_leftSelected'),
+                $rightSelected: $( settings.rightSelected ).length ? $( settings.rightSelected ) : $('#' + id + '_rightSelected'),
+
+                $undo:          $( settings.undo ).length ? $( settings.undo ) : $('#' + id + '_undo'),
+                $redo:          $( settings.redo ).length ? $( settings.redo ) : $('#' + id + '_redo'),
+
+                $moveUp:        $( settings.moveUp ).length ? $( settings.moveUp ) : $('#' + id + '_move_up'),
+                $moveDown:      $( settings.moveDown ).length ? $( settings.moveDown ) : $('#' + id + '_move_down')
+            };
+
+            delete settings.leftAll;
+            delete settings.leftSelected;
+            delete settings.right;
+            delete settings.rightAll;
+            delete settings.rightSelected;
+            delete settings.undo;
+            delete settings.redo;
+            delete settings.moveUp;
+            delete settings.moveDown;
+
+            this.options = {
+                keepRenderingSort:  settings.keepRenderingSort,
+                submitAllLeft:      settings.submitAllLeft !== undefined ? settings.submitAllLeft : true,
+                submitAllRight:     settings.submitAllRight !== undefined ? settings.submitAllRight : true,
+                search:             settings.search,
+                ignoreDisabled:     settings.ignoreDisabled !== undefined ? settings.ignoreDisabled : false,
+                matchOptgroupBy:    settings.matchOptgroupBy !== undefined ? settings.matchOptgroupBy : 'label'
+            };
+
+            delete settings.keepRenderingSort, settings.submitAllLeft, settings.submitAllRight, settings.search, settings.ignoreDisabled, settings.matchOptgroupBy;
+
+            this.callbacks = settings;
+
+            if ( typeof this.callbacks.sort == 'function' ) {
+                var sort = this.callbacks.sort;
+
+                this.callbacks.sort = {
+                    left: sort,
+                    right: sort,
+                };
+            }
+
+            this.init();
+        }
+
+        Multiselect.prototype = {
+            init: function() {
+                var self = this;
+                self.undoStack = [];
+                self.redoStack = [];
+
+                if (self.options.keepRenderingSort) {
+                    self.skipInitSort = true;
+
+                    if (self.callbacks.sort !== false) {
+                        self.callbacks.sort = {
+                            left: function(a, b) {
+                                return $(a).data('position') > $(b).data('position') ? 1 : -1;
+                            },
+                            right: function(a, b) {
+                                return $(a).data('position') > $(b).data('position') ? 1 : -1;
+                            },
+                        };
+                    }
+
+                    self.$left.attachIndex();
+
+                    self.$right.each(function(i, select) {
+                        $(select).attachIndex();
+                    });
+                }
+
+                if ( typeof self.callbacks.startUp == 'function' ) {
+                    self.callbacks.startUp( self.$left, self.$right );
+                }
+
+                if ( !self.skipInitSort ) {
+                    if ( typeof self.callbacks.sort.left == 'function' ) {
+                        self.$left.mSort(self.callbacks.sort.left);
+                    }
+
+                    if ( typeof self.callbacks.sort.right == 'function' ) {
+                        self.$right.each(function(i, select) {
+                            $(select).mSort(self.callbacks.sort.right);
+                        });
+                    }
+                }
+
+                // Append left filter
+                if (self.options.search && self.options.search.left) {
+                    self.options.search.$left = $(self.options.search.left);
+                    self.$left.before(self.options.search.$left);
+                }
+
+                // Append right filter
+                if (self.options.search && self.options.search.right) {
+                    self.options.search.$right = $(self.options.search.right);
+                    self.$right.before($(self.options.search.$right));
+                }
+
+                // Initialize events
+                self.events();
+                if ( typeof self.callbacks.afterInit == 'function' ) {
+                    self.callbacks.afterInit();
+                }
+            },
+
+            events: function() {
+                var self = this;
+
+                // Attach event to left filter
+                if (self.options.search && self.options.search.$left) {
+                    self.options.search.$left.on('keyup', function(e) {
+                        if (self.callbacks.fireSearch(this.value)) {
+                            var $toShow = self.$left.find('option:search("' + this.value + '")').mShow();
+                            var $toHide = self.$left.find('option:not(:search("' + this.value + '"))').mHide();
+                            var $grpHide = self.$left.find('option').closest('optgroup').mHide();
+                            var $grpShow = self.$left.find('option:not(.hidden)').parent('optgroup').mShow();
+                        } else {
+                            self.$left.find('option, optgroup').mShow();
+                        }
+                    });
+                }
+
+                // Attach event to right filter
+                if (self.options.search && self.options.search.$right) {
+                    self.options.search.$right.on('keyup', function(e) {
+                        if (self.callbacks.fireSearch(this.value)) {
+                            var $toShow = self.$right.find('option:search("' + this.value + '")').mShow();
+                            var $toHide = self.$right.find('option:not(:search("' + this.value + '"))').mHide();
+                            var $grpHide = self.$right.find('option').closest('optgroup').mHide();
+                            var $grpShow = self.$right.find('option:not(.hidden)').parent('optgroup').mShow();
+                        } else {
+                            self.$right.find('option, optgroup').mShow();
+                        }
+                    });
+                }
+
+                // Select all the options from left and right side when submiting the parent form
+                self.$right.closest('form').on('submit', function(e) {
+                    if (self.options.search) {
+                        // Clear left search input
+                        if (self.options.search.$left) {
+                            self.options.search.$left.val('').trigger('keyup');
+                        }
+
+                        // Clear right search input
+                        if (self.options.search.$right) {
+                            self.options.search.$right.val('').trigger('keyup');
+                        }
+                    }
+
+                    self.$left.find('option').prop('selected', self.options.submitAllLeft);
+                    self.$right.find('option').prop('selected', self.options.submitAllRight);
+                });
+
+                // Attach event for double clicking on options from left side
+                self.$left.on('dblclick', 'option', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$left.find('option:selected');
+
+                    if ( $options.length ) {
+                        self.moveToRight($options, e);
+                    }
+                });
+
+                // Attach event for clicking on optgroup's from left side
+                self.$left.on('click', 'optgroup', function(e) {
+                    if ($(e.target).prop('tagName') == 'OPTGROUP') {
+                        $(this)
+                            .children()
+                            .prop('selected', true);
+                    }
+                });
+
+                // Attach event for pushing ENTER on options from left side
+                self.$left.on('keypress', function(e) {
+                    if (e.keyCode === 13) {
+                        e.preventDefault();
+
+                        var $options = self.$left.find('option:selected');
+
+                        if ( $options.length ) {
+                            self.moveToRight($options, e);
+                        }
+                    }
+                });
+
+                // Attach event for double clicking on options from right side
+                self.$right.on('dblclick', 'option', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$right.find('option:selected');
+
+                    if ( $options.length ) {
+                        self.moveToLeft($options, e);
+                    }
+                });
+
+                // Attach event for clicking on optgroup's from right side
+                self.$right.on('click', 'optgroup', function(e) {
+                    if ($(e.target).prop('tagName') == 'OPTGROUP') {
+                        $(this)
+                            .children()
+                            .prop('selected', true);
+                    }
+                });
+
+                // Attach event for pushing BACKSPACE or DEL on options from right side
+                self.$right.on('keydown', function(e) {
+                    if (e.keyCode === 8 || e.keyCode === 46) {
+                        e.preventDefault();
+
+                        var $options = self.$right.find('option:selected');
+
+                        if ( $options.length ) {
+                            self.moveToLeft($options, e);
+                        }
+                    }
+                });
+
+                // dblclick support for IE
+                if ( navigator.userAgent.match(/MSIE/i)  || navigator.userAgent.indexOf('Trident/') > 0 || navigator.userAgent.indexOf('Edge/') > 0) {
+                    self.$left.dblclick(function(e) {
+                        self.actions.$rightSelected.trigger('click');
+                    });
+
+                    self.$right.dblclick(function(e) {
+                        self.actions.$leftSelected.trigger('click');
+                    });
+                }
+
+                self.actions.$rightSelected.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$left.find('option:selected');
+
+                    if ( $options.length ) {
+                        self.moveToRight($options, e);
+                    }
+
+                    $(this).blur();
+                });
+
+                self.actions.$leftSelected.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$right.find('option:selected');
+
+                    if ( $options.length ) {
+                        self.moveToLeft($options, e);
+                    }
+
+                    $(this).blur();
+                });
+
+                self.actions.$rightAll.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$left.children(':not(span):not(.hidden)');
+
+                    if ( $options.length ) {
+                        self.moveToRight($options, e);
+                    }
+
+                    $(this).blur();
+                });
+
+                self.actions.$leftAll.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$right.children(':not(span):not(.hidden)');
+
+                    if ( $options.length ) {
+                        self.moveToLeft($options, e);
+                    }
+
+                    $(this).blur();
+                });
+
+                self.actions.$undo.on('click', function(e) {
+                    e.preventDefault();
+
+                    self.undo(e);
+                });
+
+                self.actions.$redo.on('click', function(e) {
+                    e.preventDefault();
+
+                    self.redo(e);
+                });
+
+                self.actions.$moveUp.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$right.find(':selected:not(span):not(.hidden)');
+
+                    if ( $options.length ) {
+                        self.moveUp($options, e);
+                    }
+
+                    $(this).blur();
+                });
+
+                self.actions.$moveDown.on('click', function(e) {
+                    e.preventDefault();
+
+                    var $options = self.$right.find(':selected:not(span):not(.hidden)');
+
+                    if ( $options.length ) {
+                        self.moveDown($options, e);
+                    }
+
+                    $(this).blur();
+                });
+            },
+
+            moveToRight: function( $options, event, silent, skipStack ) {
+                var self = this;
+
+                if ( typeof self.callbacks.moveToRight == 'function' ) {
+                    return self.callbacks.moveToRight( self, $options, event, silent, skipStack );
+                }
+
+                if ( typeof self.callbacks.beforeMoveToRight == 'function' && !silent ) {
+                    if ( !self.callbacks.beforeMoveToRight( self.$left, self.$right, $options ) ) {
+                        return false;
+                    }
+                }
+
+                self.moveFromAtoB(self.$left, self.$right, $options, event, silent, skipStack);
+
+                if ( !skipStack ) {
+                    self.undoStack.push(['right', $options ]);
+                    self.redoStack = [];
+                }
+
+                if ( typeof self.callbacks.sort.right == 'function' && !silent && !self.doNotSortRight ) {
+                    self.$right.mSort(self.callbacks.sort.right);
+                }
+
+                if ( typeof self.callbacks.afterMoveToRight == 'function' && !silent ) {
+                    self.callbacks.afterMoveToRight( self.$left, self.$right, $options );
+                }
+
+                return self;
+            },
+
+            moveToLeft: function( $options, event, silent, skipStack ) {
+                var self = this;
+
+                if ( typeof self.callbacks.moveToLeft == 'function' ) {
+                    return self.callbacks.moveToLeft( self, $options, event, silent, skipStack );
+                }
+
+                if ( typeof self.callbacks.beforeMoveToLeft == 'function' && !silent ) {
+                    if ( !self.callbacks.beforeMoveToLeft( self.$left, self.$right, $options ) ) {
+                        return false;
+                    }
+                }
+
+                self.moveFromAtoB(self.$right, self.$left, $options, event, silent, skipStack);
+
+                if ( !skipStack ) {
+                    self.undoStack.push(['left', $options ]);
+                    self.redoStack = [];
+                }
+
+                if ( typeof self.callbacks.sort.left == 'function' && !silent ) {
+                    self.$left.mSort(self.callbacks.sort.left);
+                }
+
+                if ( typeof self.callbacks.afterMoveToLeft == 'function' && !silent ) {
+                    self.callbacks.afterMoveToLeft( self.$left, self.$right, $options );
+                }
+
+                return self;
+            },
+
+            moveFromAtoB: function( $source, $destination, $options, event, silent, skipStack ) {
+                var self = this;
+
+                if ( typeof self.callbacks.moveFromAtoB == 'function' ) {
+                    return self.callbacks.moveFromAtoB(self, $source, $destination, $options, event, silent, skipStack);
+                }
+
+                $options.each(function(index, option) {
+                    var $option = $(option);
+
+                    if (self.options.ignoreDisabled && $option.is(':disabled')) {
+                        return true;
+                    }
+
+                    if ($option.is('optgroup') || $option.parent().is('optgroup')) {
+                        var $sourceGroup = $option.is('optgroup') ? $option : $option.parent();
+                        var optgroupSelector = 'optgroup[' + self.options.matchOptgroupBy + '="' + $sourceGroup.prop(self.options.matchOptgroupBy) + '"]';
+                        var $destinationGroup = $destination.find(optgroupSelector);
+
+                        if (!$destinationGroup.length) {
+                            $destinationGroup = $sourceGroup.clone(true);
+                            $destinationGroup.empty();
+
+                            $destination.move($destinationGroup);
+                        }
+
+                        if ($option.is('optgroup')) {
+                            $destinationGroup.move($option.find('option'));
+                        } else {
+                            $destinationGroup.move($option);
+                        }
+
+                        $sourceGroup.removeIfEmpty();
+                    } else {
+                        $destination.move($option);
+                    }
+                });
+
+                return self;
+            },
+
+            moveUp: function($options) {
+                var self = this;
+
+                if ( typeof self.callbacks.beforeMoveUp == 'function' ) {
+                    if ( !self.callbacks.beforeMoveUp( $options ) ) {
+                        return false;
+                    }
+                }
+
+                $options.first().prev().before($options);
+
+                if ( typeof self.callbacks.afterMoveUp == 'function' ) {
+                    self.callbacks.afterMoveUp( $options );
+                }
+            },
+
+            moveDown: function($options) {
+                var self = this;
+
+                if ( typeof self.callbacks.beforeMoveDown == 'function' ) {
+                    if ( !self.callbacks.beforeMoveDown( $options ) ) {
+                        return false;
+                    }
+                }
+
+                $options.last().next().after($options);
+
+                if ( typeof self.callbacks.afterMoveDown == 'function' ) {
+                    self.callbacks.afterMoveDown( $options );
+                }
+            },
+
+            undo: function(event) {
+                var self = this;
+                var last = self.undoStack.pop();
+
+                if ( last ) {
+                    self.redoStack.push(last);
+
+                    switch(last[0]) {
+                        case 'left':
+                            self.moveToRight(last[1], event, false, true);
+                            break;
+                        case 'right':
+                            self.moveToLeft(last[1], event, false, true);
+                            break;
+                    }
+                }
+            },
+
+            redo: function(event) {
+                var self = this;
+                var last = self.redoStack.pop();
+
+                if ( last ) {
+                    self.undoStack.push(last);
+
+                    switch(last[0]) {
+                        case 'left':
+                            self.moveToLeft(last[1], event, false, true);
+                            break;
+                        case 'right':
+                            self.moveToRight(last[1], event, false, true);
+                            break;
+                    }
+                }
+            }
+        }
+
+        return Multiselect;
+    })($);
+
+    $.multiselect = {
+        defaults: {
+            /** will be executed once - remove from $left all options that are already in $right
+             *
+             *  @method startUp
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+            **/
+            startUp: function( $left, $right ) {
+                $right.find('option').each(function(index, rightOption) {
+                    if ($(rightOption).parent().prop('tagName') == 'OPTGROUP') {
+                        var optgroupSelector = 'optgroup[label="' + $(rightOption).parent().attr('label') + '"]';
+                        $left.find(optgroupSelector + ' option[value="' + rightOption.value + '"]').each(function(index, leftOption) {
+                            leftOption.remove();
+                        });
+                        $left.find(optgroupSelector).removeIfEmpty();
+                    } else {
+                        var $option = $left.find('option[value="' + rightOption.value + '"]');
+                        $option.remove();
+                    }
+                });
+            },
+
+            /** will be executed after initialize plugin
+             *
+             *  @method afterInit
+             *
+             *  @default true
+             *  @return {boolean}
+             **/
+            afterInit: function(){ return true; },
+
+            /** will be executed each time before moving option[s] to right
+             *
+             *  IMPORTANT : this method must return boolean value
+             *      true    : continue to moveToRight method
+             *      false   : stop
+             *
+             *  @method beforeMoveToRight
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+             *
+             *  @default true
+             *  @return {boolean}
+            **/
+            beforeMoveToRight: function($left, $right, $options) { return true; },
+
+            /*  will be executed each time after moving option[s] to right
+             *
+             *  @method afterMoveToRight
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+            **/
+            afterMoveToRight: function($left, $right, $options) {},
+
+            /** will be executed each time before moving option[s] to left
+             *
+             *  IMPORTANT : this method must return boolean value
+             *      true    : continue to moveToRight method
+             *      false   : stop
+             *
+             *  @method beforeMoveToLeft
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+             *
+             *  @default true
+             *  @return {boolean}
+            **/
+            beforeMoveToLeft: function($left, $right, $options) { return true; },
+
+            /*  will be executed each time after moving option[s] to left
+             *
+             *  @method afterMoveToLeft
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+            **/
+            afterMoveToLeft: function($left, $right, $options) {},
+
+            /** will be executed each time before moving option[s] up
+             *
+             *  IMPORTANT : this method must return boolean value
+             *      true    : continue to moveUp method
+             *      false   : stop
+             *
+             *  @method beforeMoveUp
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+             *
+             *  @default true
+             *  @return {boolean}
+            **/
+            beforeMoveUp: function($options) { return true; },
+
+            /*  will be executed each time after moving option[s] up
+             *
+             *  @method afterMoveUp
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+            **/
+            afterMoveUp: function($options) {},
+
+            /** will be executed each time before moving option[s] down
+             *
+             *  IMPORTANT : this method must return boolean value
+             *      true    : continue to moveUp method
+             *      false   : stop
+             *
+             *  @method beforeMoveDown
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+             *
+             *  @default true
+             *  @return {boolean}
+            **/
+            beforeMoveDown: function($options) { return true; },
+
+            /*  will be executed each time after moving option[s] down
+             *
+             *  @method afterMoveUp
+             *  @attribute $left jQuery object
+             *  @attribute $right jQuery object
+             *  @attribute $options HTML object (the option[s] which was selected to be moved)
+            **/
+            afterMoveDown: function($options) {},
+
+            /** sort options by option text
+             *
+             *  @method sort
+             *  @attribute a HTML option
+             *  @attribute b HTML option
+             *
+             *  @return 1/-1
+            **/
+            sort: function(a, b) {
+                if (a.innerHTML == 'NA') {
+                    return 1;
+                } else if (b.innerHTML == 'NA') {
+                    return -1;
+                }
+
+                return (a.innerHTML > b.innerHTML) ? 1 : -1;
+            },
+
+            /*  will tell if the search can start
+             *
+             *  @method fireSearch
+             *  @attribute value String
+             *
+             *  @return {boolean}
+            **/
+            fireSearch: function(value) {
+                return value.length > 1;
+            }
+        }
+    };
+
+    var ua = window.navigator.userAgent;
+    var isIE = (ua.indexOf("MSIE ") + ua.indexOf("Trident/") + ua.indexOf("Edge/")) > -3;
+    var isSafari = ua.toLowerCase().indexOf("safari") > -1;
+    var isFirefox = ua.toLowerCase().indexOf("firefox") > -1;
+
+    $.fn.multiselect = function( options ) {
+        return this.each(function() {
+            var $this    = $(this),
+                data     = $this.data('crlcu.multiselect'),
+                settings = $.extend({}, $.multiselect.defaults, $this.data(), (typeof options === 'object' && options));
+
+            if (!data) {
+                $this.data('crlcu.multiselect', (data = new Multiselect($this, settings)));
+            }
+        });
+    };
+
+    // append options
+    // then set the selected attribute to false
+    $.fn.move = function( $options ) {
+        this
+            .append($options)
+            .find('option')
+            .prop('selected', false);
+
+        return this;
+    };
+
+    $.fn.removeIfEmpty = function() {
+        if (!this.children().length) {
+            this.remove();
+        }
+
+        return this;
+    };
+
+    $.fn.mShow = function() {
+        this.removeClass('hidden').show();
+
+        if (isIE || isSafari) {
+            this.each(function(index, option) {
+                // Remove <span> to make it compatible with IE
+                if($(option).parent().is('span')) {
+                    $(option).parent().replaceWith(option);
+                }
+
+                $(option).show();
+            });
+        }
+        if(isFirefox){
+            this.attr('disabled', false)
+        }
+
+        return this;
+    };
+
+    $.fn.mHide = function() {
+        this.addClass('hidden').hide();
+
+        if (isIE || isSafari) {
+            this.each(function(index, option) {
+                // Wrap with <span> to make it compatible with IE
+                if(!$(option).parent().is('span')) {
+                    $(option).wrap('<span>').hide();
+                }
+            });
+        }
+        if(isFirefox){
+            this.attr('disabled', true)
+        }
+        return this;
+    };
+
+    // sort options then reappend them to the select
+    $.fn.mSort = function(callback) {
+        this
+            .children()
+            .sort(callback)
+            .appendTo(this);
+
+        this
+            .find('optgroup')
+            .each(function(i, group) {
+                $(group).children()
+                    .sort(callback)
+                    .appendTo(group);
+            })
+
+        return this;
+    };
+
+    // attach index to children
+    $.fn.attachIndex = function() {
+        this.children().each(function(index, option) {
+            var $option = $(option);
+
+            if ($option.is('optgroup')) {
+                $option.children().each(function(i, children) {
+                    $(children).data('position', i);
+                });
+            }
+
+            $option.data('position', index);
+        });
+    };
+
+    $.expr[":"].search = function(elem, index, meta) {
+        var regex = new RegExp(meta[3], "i");
+
+        return $(elem).text().match(regex);
+    }
+}));
+

app/Resources/public/assets/multiselect/examples/custom-sort.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-keep-rendering-sort">Keep rendering sort</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" id="customSort" class="form-control" size="8" multiple="multiple">
+                        <option value="1" data-position="1">Item 1</option>
+                        <option value="5" data-position="2">Item 5</option>
+                        <option value="2" data-position="3">Item 2</option>
+                        <option value="4" data-position="4">Item 4</option>
+                        <option value="3" data-position="5">Item 3</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="customSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="customSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="customSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="customSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <select name="to[]" id="customSort_to" class="form-control" size="8" multiple="multiple"></select>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;customSort&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;5&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;4&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;customSort_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;customSort_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;customSort_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;customSort_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;customSort_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#customSort&#39;).multiselect({
+        sort: {
+            left: function(a, b) {
+                return a.value > b.value ? 1 : -1;
+            },
+            right: function(a, b) {
+                return a.value > b.value ? -1 : 1;
+            }
+        }
+    });
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#customSort').multiselect({
+        sort: {
+            left: function(a, b) {
+                return a.value > b.value ? 1 : -1;
+            },
+            right: function(a, b) {
+                return a.value < b.value ? 1 : -1;
+            }
+        }
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/data-options.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="with-data-options">With <code>data</code> options</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1">
+                        <option value="1">Item 1</option>
+                        <option value="2">Item 5</option>
+                        <option value="2">Item 2</option>
+                        <option value="2">Item 4</option>
+                        <option value="3">Item 3</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <select name="to[]" id="multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; class=&quot;multiselect form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot; data-right=&quot;#multiselect_to_1&quot; data-right-all=&quot;#right_All_1&quot; data-right-selected=&quot;#right_Selected_1&quot; data-left-all=&quot;#left_All_1&quot; data-left-selected=&quot;#left_Selected_1&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;right_All_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;right_Selected_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;left_Selected_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;left_All_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multiselect_to_1&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;.multiselect&#39;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('.multiselect').multiselect();
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/javascript-options.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="with-javascript-options">With <code>javascript</code> options</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" class="js-multiselect form-control" size="8" multiple="multiple">
+                        <option value="1">Item 1</option>
+                        <option value="2">Item 5</option>
+                        <option value="2">Item 2</option>
+                        <option value="2">Item 4</option>
+                        <option value="3">Item 3</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <select name="to[]" id="js_multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; class=&quot;js-multiselect form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;js_right_All_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;js_right_Selected_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;js_left_Selected_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;js_left_All_1&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;js_multiselect_to_1&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;.js-multiselect&#39;).multiselect({
+        right: &#39;#js_multiselect_to_1&#39;,
+        rightAll: &#39;#js_right_All_1&#39;,
+        rightSelected: &#39;#js_right_Selected_1&#39;,
+        leftSelected: &#39;#js_left_Selected_1&#39;,
+        leftAll: &#39;#js_left_All_1&#39;
+    });
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('.js-multiselect').multiselect({
+        right: '#js_multiselect_to_1',
+        rightAll: '#js_right_All_1',
+        rightSelected: '#js_right_Selected_1',
+        leftSelected: '#js_left_Selected_1',
+        leftAll: '#js_left_All_1'
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/keep-rendering-sort.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-keep-rendering-sort">Keep rendering sort</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" id="keepRenderingSort" class="form-control" size="8" multiple="multiple">
+                        <option value="1" data-position="1">Item 1</option>
+                        <option value="2" data-position="2">Item 5</option>
+                        <option value="2" data-position="3">Item 2</option>
+                        <option value="2" data-position="4">Item 4</option>
+                        <option value="3" data-position="5">Item 3</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <select name="to[]" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple"></select>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;keepRenderingSort&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;keepRenderingSort_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;keepRenderingSort_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#keepRenderingSort&#39;).multiselect({
+        keepRenderingSort: true
+    });
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#keepRenderingSort').multiselect({
+        keepRenderingSort: true
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/move-up-down.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-zero-configuration">With move up/down buttons</h4>
+        
+        <div class="row">
+            <div class="col-sm-5">
+                <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
+                    <option value="1">Item 1</option>
+                    <option value="2">Item 2</option>
+                    <option value="3">Item 3</option>
+                    <option value="4">Item 4</option>
+                    <option value="5">Item 5</option>
+                </select>
+            </div>
+            
+            <div class="col-sm-2">
+                <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+            </div>
+            
+            <div class="col-sm-5">
+                <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
+
+                <div class="row">
+                    <div class="col-sm-6">
+                        <button type="button" id="multiselect_move_up" class="btn btn-block"><i class="glyphicon glyphicon-arrow-up"></i></button>
+                    </div>
+                    <div class="col-sm-6">
+                        <button type="button" id="multiselect_move_down" class="btn btn-block col-sm-6"><i class="glyphicon glyphicon-arrow-down"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-xs-12">
+                <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-sm-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;multiselect&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+            &lt;option value=&quot;4&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;5&quot;&gt;Item 5&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-sm-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-sm-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multiselect_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+
+        &lt;div class=&quot;row&quot;&gt;
+            &lt;div class=&quot;col-sm-6&quot;&gt;
+                &lt;button type=&quot;button&quot; id=&quot;multiselect_move_up&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-arrow-up&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+            &lt;/div&gt;
+            &lt;div class=&quot;col-sm-6&quot;&gt;
+                &lt;button type=&quot;button&quot; id=&quot;multiselect_move_down&quot; class=&quot;btn btn-block col-sm-6&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-arrow-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#multiselect&#39;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#multiselect').multiselect();
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/multiple-destinations.html

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-multiple-destinations">Multiple destinations</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">
+                        <option value="1">C++</option>
+                        <option value="2">C#</option>
+                        <option value="3">Haskell</option>
+                        <option value="4">Java</option>
+                        <option value="5">JavaScript</option>
+                        <option value="6">Lisp</option>
+                        <option value="7">Lua</option>
+                        <option value="8">MATLAB</option>
+                        <option value="9">NewLISP</option>
+                        <option value="10">PHP</option>
+                        <option value="11">Perl</option>
+                        <option value="12">SQL</option>
+                        <option value="13">Unix shell</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="multi_d_rightAll" class="btn btn-default btn-block" style="margin-top: 20px;"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="multi_d_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+
+                    <hr style="margin: 40px 0 60px;" />
+
+                    <button type="button" id="multi_d_rightAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="multi_d_leftAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <b>Known languages</b>
+                    <select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple">
+                        <option value="1">C++</option>
+                        <option value="2">C#</option>
+                    </select>
+
+                    <br/><hr/><br/>
+
+                    <b>I want to learn</b>
+                    <select name="to_2[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple">
+                        <option value="12">SQL</option>
+                        <option value="13">Unix shell</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;multi_d&quot; class=&quot;form-control&quot; size=&quot;26&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;C#&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Haskell&lt;/option&gt;
+            &lt;option value=&quot;4&quot;&gt;Java&lt;/option&gt;
+            &lt;option value=&quot;5&quot;&gt;JavaScript&lt;/option&gt;
+            &lt;option value=&quot;6&quot;&gt;Lisp&lt;/option&gt;
+            &lt;option value=&quot;7&quot;&gt;Lua&lt;/option&gt;
+            &lt;option value=&quot;8&quot;&gt;MATLAB&lt;/option&gt;
+            &lt;option value=&quot;9&quot;&gt;NewLISP&lt;/option&gt;
+            &lt;option value=&quot;10&quot;&gt;PHP&lt;/option&gt;
+            &lt;option value=&quot;11&quot;&gt;Perl&lt;/option&gt;
+            &lt;option value=&quot;12&quot;&gt;SQL&lt;/option&gt;
+            &lt;option value=&quot;13&quot;&gt;Unix shell&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_rightAll&quot; class=&quot;btn btn-default btn-block&quot; style=&quot;margin-top: 20px;&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_rightSelected&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_leftSelected&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_leftAll&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        
+        &lt;hr style=&quot;margin: 40px 0 60px;&quot; /&gt;
+        
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_rightAll_2&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_rightSelected_2&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_leftSelected_2&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multi_d_leftAll_2&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;b&gt;Known languages&lt;/b&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multi_d_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+        
+        &lt;br/&gt;&lt;hr/&gt;&lt;br/&gt;
+        
+        &lt;b&gt;I want to learn&lt;/b&gt;
+        &lt;select name=&quot;to_2[]&quot; id=&quot;multi_d_to_2&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#multi_d&#39;).multiselect({
+        right: &#39;#multi_d_to, #multi_d_to_2&#39;,
+        rightSelected: &#39;#multi_d_rightSelected, #multi_d_rightSelected_2&#39;,
+        leftSelected: &#39;#multi_d_leftSelected, #multi_d_leftSelected_2&#39;,
+        rightAll: &#39;#multi_d_rightAll, #multi_d_rightAll_2&#39;,
+        leftAll: &#39;#multi_d_leftAll, #multi_d_leftAll_2&#39;,
+
+        search: {
+            left: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;
+        },
+
+        moveToRight: function(Multiselect, $options, event, silent, skipStack) {
+            var button = $(event.currentTarget).attr(&#39;id&#39;);
+
+            if (button == &#39;multi_d_rightSelected&#39;) {
+                var $left_options = Multiselect.$left.find(&#39;&gt; option:selected&#39;);
+                Multiselect.$right.eq(0).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$right.eq(0).find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                }
+            } else if (button == &#39;multi_d_rightAll&#39;) {
+                var $left_options = Multiselect.$left.children(&#39;:visible&#39;);
+                Multiselect.$right.eq(0).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$right.eq(0).find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                }
+            } else if (button == &#39;multi_d_rightSelected_2&#39;) {
+                var $left_options = Multiselect.$left.find(&#39;&gt; option:selected&#39;);
+                Multiselect.$right.eq(1).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$right.eq(1).find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                }
+            } else if (button == &#39;multi_d_rightAll_2&#39;) {
+                var $left_options = Multiselect.$left.children(&#39;:visible&#39;);
+                Multiselect.$right.eq(1).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$right.eq(1).eq(1).find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                }
+            }
+        },
+
+        moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
+            var button = $(event.currentTarget).attr(&#39;id&#39;);
+
+            if (button == &#39;multi_d_leftSelected&#39;) {
+                var $right_options = Multiselect.$right.eq(0).find(&#39;&gt; option:selected&#39;);
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$left.find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == &#39;multi_d_leftAll&#39;) {
+                var $right_options = Multiselect.$right.eq(0).children(&#39;:visible&#39;);
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$left.find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == &#39;multi_d_leftSelected_2&#39;) {
+                var $right_options = Multiselect.$right.eq(1).find(&#39;&gt; option:selected&#39;);
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$left.find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == &#39;multi_d_leftAll_2&#39;) {
+                var $right_options = Multiselect.$right.eq(1).children(&#39;:visible&#39;);
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == &#39;function&#39; &amp;&amp; !silent ) {
+                    Multiselect.$left.find(&#39;&gt; option&#39;).sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            }
+        }
+    });
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#multi_d').multiselect({
+        right: '#multi_d_to, #multi_d_to_2',
+        rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2',
+        leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2',
+        rightAll: '#multi_d_rightAll, #multi_d_rightAll_2',
+        leftAll: '#multi_d_leftAll, #multi_d_leftAll_2',
+
+        search: {
+            left: '<input type="text" name="q" class="form-control" placeholder="Search..." />'
+        },
+
+        moveToRight: function(Multiselect, $options, event, silent, skipStack) {
+            var button = $(event.currentTarget).attr('id');
+
+            if (button == 'multi_d_rightSelected') {
+                var $left_options = Multiselect.$left.find('> option:selected');
+                Multiselect.$right.eq(0).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                }
+            } else if (button == 'multi_d_rightAll') {
+                var $left_options = Multiselect.$left.children(':visible');
+                Multiselect.$right.eq(0).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                }
+            } else if (button == 'multi_d_rightSelected_2') {
+                var $left_options = Multiselect.$left.find('> option:selected');
+                Multiselect.$right.eq(1).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                }
+            } else if (button == 'multi_d_rightAll_2') {
+                var $left_options = Multiselect.$left.children(':visible');
+                Multiselect.$right.eq(1).append($left_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                }
+            }
+        },
+
+        moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
+            var button = $(event.currentTarget).attr('id');
+
+            if (button == 'multi_d_leftSelected') {
+                var $right_options = Multiselect.$right.eq(0).find('> option:selected');
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == 'multi_d_leftAll') {
+                var $right_options = Multiselect.$right.eq(0).children(':visible');
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == 'multi_d_leftSelected_2') {
+                var $right_options = Multiselect.$right.eq(1).find('> option:selected');
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            } else if (button == 'multi_d_leftAll_2') {
+                var $right_options = Multiselect.$right.eq(1).children(':visible');
+                Multiselect.$left.append($right_options);
+
+                if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                    Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                }
+            }
+        }
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/multiple.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-multiple">First multiselect</h4>
+        
+        <div class="row">
+            <div class="col-sm-5">
+                <select name="from[]" id="multiselect1" class="form-control" size="8" multiple="multiple">
+                    <option value="1" data-position="1">Item 1</option>
+                    <option value="2" data-position="2">Item 5</option>
+                    <option value="2" data-position="3">Item 2</option>
+                    <option value="2" data-position="4">Item 4</option>
+                    <option value="3" data-position="5">Item 3</option>
+                </select>
+            </div>
+            
+            <div class="col-sm-2">
+                <button type="button" id="multiselect1_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                <button type="button" id="multiselect1_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                <button type="button" id="multiselect1_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                <button type="button" id="multiselect1_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+            </div>
+            
+            <div class="col-sm-5">
+                <select name="to[]" id="multiselect1_to" class="form-control" size="8" multiple="multiple"></select>
+            </div>
+        </div>
+
+        <h4>Second multiselect</h4>
+
+        <div class="row">
+            <div class="col-sm-5">
+                <select name="from[]" id="multiselect2" class="form-control" size="8" multiple="multiple">
+                    <option value="1" data-position="1">Item 1</option>
+                    <option value="2" data-position="2">Item 5</option>
+                    <option value="2" data-position="3">Item 2</option>
+                    <option value="2" data-position="4">Item 4</option>
+                    <option value="3" data-position="5">Item 3</option>
+                </select>
+            </div>
+            
+            <div class="col-sm-2">
+                <button type="button" id="multiselect2_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                <button type="button" id="multiselect2_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                <button type="button" id="multiselect2_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                <button type="button" id="multiselect2_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+            </div>
+            
+            <div class="col-sm-5">
+                <select name="to[]" id="multiselect2_to" class="form-control" size="8" multiple="multiple"></select>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-xs-12">
+                <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;h4&gt;First multiselect&lt;/h4&gt;
+
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;multiselect1&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect1_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect1_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect1_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect1_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multiselect1_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h4&gt;Second multiselect&lt;/h4&gt;
+
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;multiselect2&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect2_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect2_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect2_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect2_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multiselect2_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#multiselect1&#39;).multiselect();
+    $(&#39;#multiselect2&#39;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    // hack for iPhone 7.0.3 multiselects bug
+    if(navigator.userAgent.match(/iPhone/i)) {
+        $('select[multiple]').each(function(){
+            var select = $(this).on({
+                "focusout": function(){
+                    var values = select.val() || [];
+                    setTimeout(function(){
+                        select.val(values.length ? values : ['']).change();
+                    }, 1000);
+                }
+            });
+            var firstOption = '<option value="" disabled="disabled"';
+            firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
+            firstOption += '>Select ' + (select.attr('title') || 'Options') + '';
+            firstOption += '</option>';
+            select.prepend(firstOption);
+        });
+    }
+
+    $('#multiselect1').multiselect();
+    $('#multiselect2').multiselect();
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/optgroup.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">
+        <h4 id="demo-optgroup">With optgroup</h4>
+            
+        <div class="row">
+            <div class="col-sm-5">
+                <select name="from" id="optgroup" class="form-control" size="8" multiple="multiple">
+                    <optgroup label="Swedish Cars">
+                        <option value="volvo">Volvo</option>
+                        <option value="saab">Saab</option>
+                    </optgroup>
+                    <optgroup label="German Cars">
+                        <option value="mercedes">Mercedes</option>
+                        <option value="audi">Audi</option>
+                    </optgroup>
+                    <option value="1">C++</option>
+                </select>
+            </div>
+            
+            <div class="col-sm-2">
+                <button type="button" id="optgroup_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                <button type="button" id="optgroup_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                <button type="button" id="optgroup_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                <button type="button" id="optgroup_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+            </div>
+            
+            <div class="col-sm-5">
+                <select name="to" id="optgroup_to" class="form-control" size="8" multiple="multiple">
+                    <optgroup label="Swedish Cars">
+                        <option value="volvo">Volvo</option>
+                    </optgroup>
+                    <option value="1">C++</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-sm-5&quot;&gt;
+        &lt;select name=&quot;from&quot; id=&quot;optgroup&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;optgroup label=&quot;Swedish Cars&quot;&gt;
+                &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
+                &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
+            &lt;/optgroup&gt;
+            &lt;optgroup label=&quot;German Cars&quot;&gt;
+                &lt;option value=&quot;mercedes&quot;&gt;Mercedes&lt;/option&gt;
+                &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
+            &lt;/optgroup&gt;
+            &lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-sm-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;optgroup_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;optgroup_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;optgroup_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;optgroup_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-sm-5&quot;&gt;
+        &lt;select name=&quot;to&quot; id=&quot;optgroup_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&quot;#optgroup&quot;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $("#optgroup").multiselect({
+        search: {
+            left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+            right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+        },
+        fireSearch: function(value) {
+            return value.length > 3;
+        }
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/search.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-search">With search</h4>
+            
+            <div class="row">
+                <div class="col-sm-5">
+                    <select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
+                        <option value="1" data-position="1">Item 1</option>
+                        <option value="2" data-position="2">Item 5</option>
+                        <option value="2" data-position="3">Item 2</option>
+                        <option value="2" data-position="4">Item 4</option>
+                        <option value="3" data-position="5">Item 3</option>
+                    </select>
+                </div>
+                
+                <div class="col-sm-2">
+                    <button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                </div>
+                
+                <div class="col-sm-5">
+                    <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;search&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;search_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;search_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;search_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;search_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;search_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#search&#39;).multiselect({
+        search: {
+            left: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
+            right: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
+        },
+        fireSearch: function(value) {
+            return value.length &gt; 3;
+        }
+    });
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#search').multiselect({
+        search: {
+            left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+            right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+        },
+        fireSearch: function(value) {
+            return value.length > 3;
+        }
+    });
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/undo-redo.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-undo-redo">Undo / Redo</h4>
+            
+            <div class="row">
+                <div class="col-xs-5">
+                    <select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple">
+                        <option value="1">C++</option>
+                        <option value="2">C#</option>
+                        <option value="3">Haskell</option>
+                        <option value="4">Java</option>
+                        <option value="5">JavaScript</option>
+                        <option value="6">Lisp</option>
+                        <option value="7">Lua</option>
+                        <option value="8">MATLAB</option>
+                        <option value="9">NewLISP</option>
+                        <option value="10">PHP</option>
+                        <option value="11">Perl</option>
+                        <option value="12">SQL</option>
+                        <option value="13">Unix shell</option>
+                    </select>
+                </div>
+                
+                <div class="col-xs-2">
+                    <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>
+                    <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                    <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                    <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                    <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+                    <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button>
+                </div>
+                
+                <div class="col-xs-5">
+                    <select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;undo_redo&quot; class=&quot;form-control&quot; size=&quot;13&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;C++&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;C#&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Haskell&lt;/option&gt;
+            &lt;option value=&quot;4&quot;&gt;Java&lt;/option&gt;
+            &lt;option value=&quot;5&quot;&gt;JavaScript&lt;/option&gt;
+            &lt;option value=&quot;6&quot;&gt;Lisp&lt;/option&gt;
+            &lt;option value=&quot;7&quot;&gt;Lua&lt;/option&gt;
+            &lt;option value=&quot;8&quot;&gt;MATLAB&lt;/option&gt;
+            &lt;option value=&quot;9&quot;&gt;NewLISP&lt;/option&gt;
+            &lt;option value=&quot;10&quot;&gt;PHP&lt;/option&gt;
+            &lt;option value=&quot;11&quot;&gt;Perl&lt;/option&gt;
+            &lt;option value=&quot;12&quot;&gt;SQL&lt;/option&gt;
+            &lt;option value=&quot;13&quot;&gt;Unix shell&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_undo&quot; class=&quot;btn btn-primary btn-block&quot;&gt;undo&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_rightAll&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_rightSelected&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_leftSelected&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_leftAll&quot; class=&quot;btn btn-default btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;undo_redo_redo&quot; class=&quot;btn btn-warning btn-block&quot;&gt;redo&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;undo_redo_to&quot; class=&quot;form-control&quot; size=&quot;13&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#undo_redo&#39;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    $('#undo_redo').multiselect();
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/examples/zero-configuration.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+    
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With <code>search</code></a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
+                                <li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                                <li><a href="examples/multiple.html">Multiple instances</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">            
+        <h4 id="demo-zero-configuration">Zero configuration</h4>
+        
+        <div class="row">
+            <div class="col-sm-5">
+                <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
+                    <option value="1">Item 1</option>
+                    <option value="2">Item 5</option>
+                    <option value="2">Item 2</option>
+                    <option value="2">Item 4</option>
+                    <option value="3">Item 3</option>
+                </select>
+            </div>
+            
+            <div class="col-sm-2">
+                <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
+                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
+                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
+                <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
+            </div>
+            
+            <div class="col-sm-5">
+                <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-xs-12">
+                <h5>HTML</h5>
+<pre class="prettyprint linenums">
+&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;from[]&quot; id=&quot;multiselect&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;
+            &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 5&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
+            &lt;option value=&quot;2&quot;&gt;Item 4&lt;/option&gt;
+            &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_rightAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-forward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_rightSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_leftSelected&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+        &lt;button type=&quot;button&quot; id=&quot;multiselect_leftAll&quot; class=&quot;btn btn-block&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-backward&quot;&gt;&lt;/i&gt;&lt;/button&gt;
+    &lt;/div&gt;
+    
+    &lt;div class=&quot;col-xs-5&quot;&gt;
+        &lt;select name=&quot;to[]&quot; id=&quot;multiselect_to&quot; class=&quot;form-control&quot; size=&quot;8&quot; multiple=&quot;multiple&quot;&gt;&lt;/select&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+            <h5>JavaScript</h5>
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+jQuery(document).ready(function($) {
+    $(&#39;#multiselect&#39;).multiselect();
+});
+&lt;/script&gt;
+</pre>
+            </div>
+        </div>
+    </div>
+
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+
+    // hack for iPhone 7.0.3 multiselects bug
+    if(navigator.userAgent.match(/iPhone/i)) {
+        $('select[multiple]').each(function(){
+            var select = $(this).on({
+                "focusout": function(){
+                    var values = select.val() || [];
+                    setTimeout(function(){
+                        select.val(values.length ? values : ['']).change();
+                    }, 1000);
+                }
+            });
+            var firstOption = '<option value="" disabled="disabled"';
+            firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
+            firstOption += '>Select ' + (select.attr('title') || 'Options') + '';
+            firstOption += '</option>';
+            select.prepend(firstOption);
+        });
+    }
+
+    $('#multiselect').multiselect();
+});
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/gulpfile.js

@@ -0,0 +1,19 @@
+var gulp = require('gulp');
+
+// include plug-ins
+var rename = require('gulp-rename');  
+var stripDebug = require('gulp-strip-debug');
+var uglify = require('gulp-uglify');
+
+// JS concat, strip debugging and minify
+gulp.task('scripts', function() {
+    gulp.src(['dist/js/multiselect.js'])
+        .pipe(rename('multiselect.min.js'))
+        .pipe(stripDebug())
+        .pipe(uglify('multiselect.min.js', {
+            outSourceMap: true
+        }))
+        .pipe(gulp.dest('dist/js/'));
+});
+
+gulp.task('default', ['scripts']);  

app/Resources/public/assets/multiselect/index.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
+    <meta name="keywords" lang="en" content="jQuery multiselect plugin" />
+
+    <base href="http://crlcu.github.io/multiselect/" />
+
+    <title>jQuery multiselect plugin with two sides</title>
+    
+    <link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
+    <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+    <a href="https://github.com/crlcu/multiselect" class="github ribbon">
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
+    </a>
+    
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand scroll" href="#">Multiselect</a>
+                </div>
+                
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" class="scroll">Home</a></li>
+                        <li><a href="#documentation" class="scroll">Documentation</a></li>
+                        <li><a href="#browser-support" class="scroll">Browser Support</a></li>
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span  class="caret"></span ></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li><a href="examples/zero-configuration.html">Zero configuration</a></li>
+                                <li><a href="examples/data-options.html">With <code>data</code> options</a></li>
+                                <li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
+                                <li><a href="examples/search.html">With search</a></li>
+                                <li><a href="examples/keep-rendering-sort.html">Keep rendering sort</a></li>
+                                <li><a href="examples/undo-redo.html">Undo / Redo</a></li>
+                                <li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
+                                <li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
+                                <li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#download" class="scroll">Download</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div id="wrap" class="container">
+        <div id="home">
+            <div class="jumbotron">
+                <h1>Multiselect</h1>
+                <p>This is a small  <a href="http://jquery.com/" target="_blank">jQuery</a> plugin that helps you improve the
+                    <strong>user experience</strong> regarding the use of multiple cross selects.
+                </p>
+                <p>It is very <strong>easy to install</strong> and can be <strong>easily customized</strong> because it has <strong>callbacks</strong> for many events, such as :
+                    <div class="row">
+                        <div  class="col-xs-6">
+                            <ul>
+                                <li><a href="#beforeMoveToRight">beforeMoveToRight</a></li>
+                                <li><a href="#beforeMoveToLeft">beforeMoveToLeft</a></li>
+                            </ul>
+                        </div>
+                        
+                        <div  class="col-xs-6">
+                            <ul>
+                                <li><a href="#afterMoveToRight">afterMoveToRight</a></li>
+                                <li><a href="#afterMoveToLeft">afterMoveToLeft</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </p>
+                <p>It also has a <a href="#sort">sort</a> function that can be defined in order of your needs for each multiple select.</p>
+                <p>You can <strong>fully customize</strong> it via <strong>CSS</strong>, you can extend it and have as <strong>many multi selects</strong> as you want on the page.</p>
+    
+                <p><a href="#documentation" class="btn btn-primary btn-lg">Documentation</a></p>
+            </div>
+        </div>
+        
+        <div id="documentation">
+            <div class="page-header"><h3>Documentation</h3></div>
+            
+            <h4>Options:</h4>
+            
+            <table class="table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>type</th>
+                        <th>default</th>
+                        <th>description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>right</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_to</td>
+                        <td>The <code>select</code> where the options are moved to</td>
+                    </tr>
+                    <tr>
+                        <td>rightSelected</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_rightSelected</td>
+                        <td>The <code>button</code> that moves selected options from left to right</td>
+                    </tr>
+                    <tr>
+                        <td>rightAll</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_rightAll</td>
+                        <td>The <code>button</code> that moves all options from left to right</td>
+                    </tr>
+                    <tr>
+                        <td>leftSelected</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_leftSelected</td>
+                        <td>The <code>button</code> that moves selected options from right to left</td>
+                    </tr>
+                    <tr>
+                        <td>leftAll</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_leftAll</td>
+                        <td>The <code>button</code> that moves all options from right to left</td>
+                    </tr>
+                    <tr>
+                        <td>undo</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_undo</td>
+                        <td>The <code>button</code> that triggers the undo action</td>
+                    </tr>
+                    <tr>
+                        <td>redo</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_redo</td>
+                        <td>The <code>button</code> that triggers the redo action</td>
+                    </tr>
+                    <tr>
+                        <td>moveUp</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_move_up</td>
+                        <td>The <code>button</code> that move options from right side to the top</td>
+                    </tr>
+                    <tr>
+                        <td>moveDown</td>
+                        <td><code>string</code> jQuery selector</td>
+                        <td><code>multiselect_id</code>_move_down</td>
+                        <td>The <code>button</code> that move options from right side to the bottom</td>
+                    </tr>
+                    <tr>
+                        <td>startUp</td>
+                        <td><code>function</code> or <code>false</code></td>
+                        <td><code>remove</code> from left all options that are present in right</td>
+                        <td>Whatever you want to do with <code>$left</code> and <code>$right</code> elements when the <code>multiselect</code> plugin is initialised</td>
+                    </tr>
+                    <tr id="sort">
+                        <td>sort</td>
+                        <td><code>function</code> or <code>false</code></td>
+                        <td><code>sort</code> options alphabetically</td>
+                        <td>Will sort options when an action happend into right or left elements.</td>
+                    </tr>
+                    <tr id="beforeMoveToRight">
+                        <td>beforeMoveToRight</td>
+                        <td><code>function</code></td>
+                        <td>return <code>true</code></td>
+                        <td>
+                            Whatever you want to do with <code>$left</code>, <code>$right</code> and <code>$options</code> elements before they are moved to right.<br/><br/>
+
+                            <code>beforeMoveToRight: function($left, $right, $options) { ...; return Boolean; }</code>.<br/><br/>
+                            
+                            <ul>
+                                <li><code>$left</code> - jQuery element pointing to left side <code>select</code> element</li>
+                                <li><code>$right</code> - jQuery element pointing to right side <code>select</code> element</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+
+                            Keep in mind that this function must return a boolean value.<br/>
+                            <ul>
+                                <li><code>true</code> will let the action to be performed</li>
+                                <li><code>false</code> will stop the action</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="moveToRight">
+                        <td>moveToRight</td>
+                        <td><code>function</code></td>
+                        <td>return <code>this</code></td>
+                        <td>
+                            If you want to define your own <code>moveToRight</code> functionality you can do this by defining<br/><br/>
+
+                            <code>moveToRight: function(Multiselect, $options, event, silent, skipStack) { ... }</code><br/><br/>
+                            
+                            <ul>
+                                <li><code>Multiselect</code> - current instance of multiselect</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                                <li><code>event</code> - the event that initialised the action</li>
+                                <li><code>silent</code> - <code>boolean</code> that tells if you have to trigger <code>beforeMoveToRight</code> and <code>afterMoveToRight</code></li>
+                                <li><code>skipStack</code> - <code>boolean</code> that tells if you have to handle <code>undo/redo</code> stack</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="afterMoveToRight">
+                        <td>afterMoveToRight</td>
+                        <td><code>function</code></td>
+                        <td>no action</td>
+                        <td>
+                            Whatever you want to do with <code>$left</code>, <code>$right</code> and <code>$options</code> elements after they are moved to right.<br/><br/>
+
+                            <code>afterMoveToRight: function($left, $right, $options) { ...; }</code><br/><br/>
+
+                            <ul>
+                                <li><code>$left</code> - jQuery element pointing to left side <code>select</code> element</li>
+                                <li><code>$right</code> - jQuery element pointing to right side <code>select</code> element</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="beforeMoveToLeft">
+                        <td>beforeMoveToLeft</td>
+                        <td><code>function</code></td>
+                        <td>return <code>true</code></td>
+                        <td>
+                            Whatever you want to do with <code>$left</code>, <code>$right</code> and <code>$options</code> elements before they are moved to left.<br/><br/>
+
+                            <code>beforeMoveToLeft: function($left, $right, $options) { ...; return Boolean; }</code>.<br/><br/>
+                            
+                            <ul>
+                                <li><code>$left</code> - jQuery element pointing to left side <code>select</code> element</li>
+                                <li><code>$right</code> - jQuery element pointing to right side <code>select</code> element</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+
+                            Keep in mind that this function must return a boolean value.<br/>
+                            <ul>
+                                <li><code>true</code> will let the action to be performed</li>
+                                <li><code>false</code> will stop the action</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="moveToLeft">
+                        <td>moveToLeft</td>
+                        <td><code>function</code></td>
+                        <td>return <code>this</code></td>
+                        <td>
+                            If you want to define your own <code>moveToLeft</code> functionality you can do this by defining<br/><br/>
+
+                            <code>moveToLeft: function(Multiselect, $options, event, silent, skipStack) { ... }</code><br/><br/>
+                            
+                            <ul>
+                                <li><code>Multiselect</code> - current instance of multiselect</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                                <li><code>event</code> - the event that initialised the action</li>
+                                <li><code>silent</code> - <code>boolean</code> that tells if you have to trigger <code>beforeMoveToRight</code> and <code>afterMoveToRight</code></li>
+                                <li><code>skipStack</code> - <code>boolean</code> that tells if you have to handle <code>undo/redo</code> stack</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="afterMoveToLeft">
+                        <td>afterMoveToLeft</td>
+                        <td><code>function</code></td>
+                        <td>no action</td>
+                        <td>
+                            Whatever you want to do with <code>$left</code>, <code>$right</code> and <code>$options</code> elements after they are moved to right.<br/><br/>
+
+                            <code>afterMoveToLeft: function($left, $right, $options) { ...; }</code><br/><br/>
+
+                            <ul>
+                                <li><code>$left</code> - jQuery element pointing to left side <code>select</code> element</li>
+                                <li><code>$right</code> - jQuery element pointing to right side <code>select</code> element</li>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="beforeMoveUp">
+                        <td>beforeMoveUp</td>
+                        <td><code>function</code></td>
+                        <td>return <code>true</code></td>
+                        <td>
+                            Whatever you want to do with <code>$options</code> elements before they are moved up.<br/><br/>
+
+                            <code>beforeMoveUp: function( $options) { ...; return Boolean; }</code>.<br/><br/>
+                            
+                            <ul>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+
+                            Keep in mind that this function must return a boolean value.<br/>
+                            <ul>
+                                <li><code>true</code> will let the action to be performed</li>
+                                <li><code>false</code> will stop the action</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="afterMoveUp">
+                        <td>afterMoveUp</td>
+                        <td><code>function</code></td>
+                        <td>no action</td>
+                        <td>
+                            Whatever you want to do with <code>$options</code> elements after they are moved up.<br/><br/>
+
+                            <code>afterMoveUp: function($options) { ...; }</code><br/><br/>
+
+                            <ul>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="beforeMoveDown">
+                        <td>beforeMoveDown</td>
+                        <td><code>function</code></td>
+                        <td>return <code>true</code></td>
+                        <td>
+                            Whatever you want to do with <code>$options</code> elements before they are moved down.<br/><br/>
+
+                            <code>beforeMoveDown: function( $options) { ...; return Boolean; }</code>.<br/><br/>
+                            
+                            <ul>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+
+                            Keep in mind that this function must return a boolean value.<br/>
+                            <ul>
+                                <li><code>true</code> will let the action to be performed</li>
+                                <li><code>false</code> will stop the action</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr id="afterMoveDown">
+                        <td>afterMoveDown</td>
+                        <td><code>function</code></td>
+                        <td>no action</td>
+                        <td>
+                            Whatever you want to do with <code>$options</code> elements after they are moved down.<br/><br/>
+
+                            <code>afterMoveDown: function($options) { ...; }</code><br/><br/>
+
+                            <ul>
+                                <li><code>$options</code> - jQuery element containing all selected options</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>keepRenderingSort</td>
+                        <td><code>boolean</code></td>
+                        <td><code>false</code></td>
+                        <td>
+                            When you want to keep options sorted as they was rendered, <code>keepRenderingSort</code> must be <code>true</code>.<br/>
+                            When <code>keepRenderingSort</code> is <code>true</code>, <code>sort</code> function will be ignored.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>submitAllLeft</td>
+                        <td><code>boolean</code></td>
+                        <td><code>true</code></td>
+                        <td>
+                            When you don&rsquo;t want to send all options from the left side to server, <code>submitAllLeft</code> must be <code>false</code>.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>submitAllRight</td>
+                        <td><code>boolean</code></td>
+                        <td><code>true</code></td>
+                        <td>
+                            When you don&rsquo;t want to send all options from the right side to server, <code>submitAllRight</code> must be <code>false</code>.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>search</td>
+                        <td><code>Object</code></td>
+                        <td><code>null</code></td>
+                        <td>
+                            When you want to have search fields for <code>left</code> and <code>right</code> elements you can do this by providing following value:<br/>
+                            <pre class="prettyprint linenums">
+search: {
+    left: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
+    right: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
+}
+</pre>
+                            When you want to have search field only for <code>left</code> element you can do this by providing following value:<br/>
+                            <pre class="prettyprint linenums">
+search: {
+    left: &#39;&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot; /&gt;&#39;,
+}
+</pre>
+                        </td>
+                    </tr>
+                    <tr id="fireSearch">
+                        <td>fireSearch</td>
+                        <td><code>function</code></td>
+                        <td>return <code>true</code> if search length is great than 1</td>
+                        <td>
+                            Tell to multiselect when to start applying the search.<br/><br/>
+                            <code>fireSearch: function(value) { ...; return Boolean; }</code><br/><br/>
+
+                            <ul>
+                                <li><code>value</code> - String search entered by the user</li>
+                            </ul>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <div id="browser-support">
+            <div class="page-header"><h3>Browser Support</h3></div>
+            
+            <h4>The following browsers are supported:</h4>
+            
+            <ul>
+                <li>Internet Explorer 7+</li>
+                <li>Google Chrome</li>
+                <li>Mozilla Firefox</li>
+                <li>Safari</li>
+                <li>Opera</li>
+            </ul>
+        </div>
+        
+        <div id="download">
+            <div class="page-header"><h3>Download</h3></div>
+            
+            <div class="row">
+                <div class="col-xs-4">              
+                    <p><a class="btn btn-lg btn-primary" href="https://raw.github.com/crlcu/multiselect/master/dist/js/multiselect.js">Download multiselect.js</a></p>
+                </div>
+                
+                <div class="col-xs-4">              
+                    <p><a class="btn btn-lg btn-success" href="https://raw.github.com/crlcu/multiselect/master/dist/js/multiselect.min.js">Download multiselect.min.js</a></p>
+                </div>
+                
+                <div class="col-xs-4">              
+                    <p><a class="btn btn-lg btn-info" href="https://github.com/crlcu/multiselect/archive/master.zip">Download multiselect.zip</a></p>
+                </div>
+            </div>  
+        </div>
+    </div>
+    
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    
+    ga('create', 'UA-39934286-1', 'github.com');
+    ga('send', 'pageview');
+</script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    // make code pretty
+    window.prettyPrint && prettyPrint();
+    
+    if ( window.location.hash ) {
+        scrollTo(window.location.hash);
+    }
+    
+    $('.nav').on('click', 'a.scroll', function(e) {
+        scrollTo($(this).attr('href'));
+    });
+});
+
+function scrollTo( id ) {
+    if ( $(id).length ) {
+        $('html,body').animate({scrollTop: $(id).offset().top - 60},'slow');
+    }
+}
+</script>
+</body>
+</html>

app/Resources/public/assets/multiselect/lib/google-code-prettify/prettify.css

@@ -0,0 +1,30 @@
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .linenums .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+} 
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 18px;
+  text-shadow: 0 1px 0 #fff;
+}

app/Resources/public/assets/multiselect/lib/jasmine-html.js

@@ -0,0 +1,188 @@
+jasmine.TrivialReporter = function(doc) {
+  this.document = doc || document;
+  this.suiteDivs = {};
+  this.logRunningSpecs = false;
+};
+
+jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) {
+  var el = document.createElement(type);
+
+  for (var i = 2; i < arguments.length; i++) {
+    var child = arguments[i];
+
+    if (typeof child === 'string') {
+      el.appendChild(document.createTextNode(child));
+    } else {
+      if (child) { el.appendChild(child); }
+    }
+  }
+
+  for (var attr in attrs) {
+    if (attr == "className") {
+      el[attr] = attrs[attr];
+    } else {
+      el.setAttribute(attr, attrs[attr]);
+    }
+  }
+
+  return el;
+};
+
+jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
+  var showPassed, showSkipped;
+
+  this.outerDiv = this.createDom('div', { className: 'jasmine_reporter' },
+      this.createDom('div', { className: 'banner' },
+        this.createDom('div', { className: 'logo' },
+            this.createDom('a', { href: 'http://pivotal.github.com/jasmine/', target: "_blank" }, "Jasmine"),
+            this.createDom('span', { className: 'version' }, runner.env.versionString())),
+        this.createDom('div', { className: 'options' },
+            "Show ",
+            showPassed = this.createDom('input', { id: "__jasmine_TrivialReporter_showPassed__", type: 'checkbox' }),
+            this.createDom('label', { "for": "__jasmine_TrivialReporter_showPassed__" }, " passed "),
+            showSkipped = this.createDom('input', { id: "__jasmine_TrivialReporter_showSkipped__", type: 'checkbox' }),
+            this.createDom('label', { "for": "__jasmine_TrivialReporter_showSkipped__" }, " skipped")
+            )
+          ),
+
+      this.runnerDiv = this.createDom('div', { className: 'runner running' },
+          this.createDom('a', { className: 'run_spec', href: '?' }, "run all"),
+          this.runnerMessageSpan = this.createDom('span', {}, "Running..."),
+          this.finishedAtSpan = this.createDom('span', { className: 'finished-at' }, ""))
+      );
+
+  this.document.body.appendChild(this.outerDiv);
+
+  var suites = runner.suites();
+  for (var i = 0; i < suites.length; i++) {
+    var suite = suites[i];
+    var suiteDiv = this.createDom('div', { className: 'suite' },
+        this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"),
+        this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description));
+    this.suiteDivs[suite.id] = suiteDiv;
+    var parentDiv = this.outerDiv;
+    if (suite.parentSuite) {
+      parentDiv = this.suiteDivs[suite.parentSuite.id];
+    }
+    parentDiv.appendChild(suiteDiv);
+  }
+
+  this.startedAt = new Date();
+
+  var self = this;
+  showPassed.onclick = function(evt) {
+    if (showPassed.checked) {
+      self.outerDiv.className += ' show-passed';
+    } else {
+      self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, '');
+    }
+  };
+
+  showSkipped.onclick = function(evt) {
+    if (showSkipped.checked) {
+      self.outerDiv.className += ' show-skipped';
+    } else {
+      self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, '');
+    }
+  };
+};
+
+jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) {
+  var results = runner.results();
+  var className = (results.failedCount > 0) ? "runner failed" : "runner passed";
+  this.runnerDiv.setAttribute("class", className);
+  //do it twice for IE
+  this.runnerDiv.setAttribute("className", className);
+  var specs = runner.specs();
+  var specCount = 0;
+  for (var i = 0; i < specs.length; i++) {
+    if (this.specFilter(specs[i])) {
+      specCount++;
+    }
+  }
+  var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s");
+  message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s";
+  this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild);
+
+  this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString()));
+};
+
+jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) {
+  var results = suite.results();
+  var status = results.passed() ? 'passed' : 'failed';
+  if (results.totalCount == 0) { // todo: change this to check results.skipped
+    status = 'skipped';
+  }
+  this.suiteDivs[suite.id].className += " " + status;
+};
+
+jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) {
+  if (this.logRunningSpecs) {
+    this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...');
+  }
+};
+
+jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) {
+  var results = spec.results();
+  var status = results.passed() ? 'passed' : 'failed';
+  if (results.skipped) {
+    status = 'skipped';
+  }
+  var specDiv = this.createDom('div', { className: 'spec '  + status },
+      this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"),
+      this.createDom('a', {
+        className: 'description',
+        href: '?spec=' + encodeURIComponent(spec.getFullName()),
+        title: spec.getFullName()
+      }, spec.description));
+
+
+  var resultItems = results.getItems();
+  var messagesDiv = this.createDom('div', { className: 'messages' });
+  for (var i = 0; i < resultItems.length; i++) {
+    var result = resultItems[i];
+
+    if (result.type == 'log') {
+      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString()));
+    } else if (result.type == 'expect' && result.passed && !result.passed()) {
+      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
+
+      if (result.trace.stack) {
+        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
+      }
+    }
+  }
+
+  if (messagesDiv.childNodes.length > 0) {
+    specDiv.appendChild(messagesDiv);
+  }
+
+  this.suiteDivs[spec.suite.id].appendChild(specDiv);
+};
+
+jasmine.TrivialReporter.prototype.log = function() {
+  var console = jasmine.getGlobal().console;
+  if (console && console.log) {
+    if (console.log.apply) {
+      console.log.apply(console, arguments);
+    } else {
+      console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
+    }
+  }
+};
+
+jasmine.TrivialReporter.prototype.getLocation = function() {
+  return this.document.location;
+};
+
+jasmine.TrivialReporter.prototype.specFilter = function(spec) {
+  var paramMap = {};
+  var params = this.getLocation().search.substring(1).split('&');
+  for (var i = 0; i < params.length; i++) {
+    var p = params[i].split('=');
+    paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
+  }
+
+  if (!paramMap["spec"]) return true;
+  return spec.getFullName().indexOf(paramMap["spec"]) == 0;
+};

app/Resources/public/assets/multiselect/lib/jasmine-jquery-1.1.2.js

@@ -0,0 +1,203 @@
+var readFixtures = function() {
+  return jasmine.getFixtures().proxyCallTo_('read', arguments);
+};
+
+var loadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('load', arguments);
+};
+
+var setFixtures = function(html) {
+  jasmine.getFixtures().set(html);
+}
+
+var sandbox = function(attributes) {
+  return jasmine.getFixtures().sandbox(attributes);
+};
+
+jasmine.getFixtures = function() {
+  return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures();
+};
+
+jasmine.Fixtures = function() {
+  this.containerId = 'jasmine-fixtures';
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.set = function(html) {
+  this.cleanUp();
+  this.createContainer_(html);
+};
+
+jasmine.Fixtures.prototype.load = function() {
+  this.cleanUp();
+  this.createContainer_(this.read.apply(this, arguments));
+};
+
+jasmine.Fixtures.prototype.read = function() {
+  var htmlChunks = [];
+
+  var fixtureUrls = arguments;
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]));
+  }
+
+  return htmlChunks.join('');
+};
+
+jasmine.Fixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.cleanUp = function() {
+  $('#' + this.containerId).remove();
+};
+
+jasmine.Fixtures.prototype.sandbox = function(attributes) {
+  var attributesToSet = attributes || {};
+  return $('<div id="sandbox" />').attr(attributesToSet);
+};
+
+jasmine.Fixtures.prototype.createContainer_ = function(html) {
+  var container = $('<div id="' + this.containerId + '" />');
+  container.html(html);
+  $('body').append(container);
+};
+
+jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {  
+  if (typeof this.fixturesCache_[url] == 'undefined') {
+    this.loadFixtureIntoCache_(url);
+  }
+  return this.fixturesCache_[url];
+};
+
+jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(url) {
+  var self = this;
+  $.ajax({
+    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
+    cache: false,
+    dataType: 'html',
+    url: url,
+    success: function(data) {
+      self.fixturesCache_[url] = data;
+    }
+  });
+};
+
+jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments);
+};
+
+
+jasmine.JQuery = function() {};
+
+jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
+  return $('<div/>').append(html).html();
+};
+
+jasmine.JQuery.elementToString = function(element) {
+  return $('<div />').append(element.clone()).html();
+};
+
+jasmine.JQuery.matchersClass = {};
+
+
+(function(){
+  var jQueryMatchers = {
+    toHaveClass: function(className) {
+      return this.actual.hasClass(className);
+    },
+
+    toBeVisible: function() {
+      return this.actual.is(':visible');
+    },
+
+    toBeHidden: function() {
+      return this.actual.is(':hidden');
+    },
+
+    toBeSelected: function() {
+      return this.actual.is(':selected');
+    },
+
+    toBeChecked: function() {
+      return this.actual.is(':checked');
+    },
+
+    toBeEmpty: function() {
+      return this.actual.is(':empty');
+    },
+
+    toExist: function() {
+      return this.actual.size() > 0;
+    },
+
+    toHaveAttr: function(attributeName, expectedAttributeValue) {
+      return hasProperty(this.actual.attr(attributeName), expectedAttributeValue);
+    },
+
+    toHaveId: function(id) {
+      return this.actual.attr('id') == id;
+    },
+
+    toHaveHtml: function(html) {
+      return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html);
+    },
+
+    toHaveText: function(text) {
+      return this.actual.text() == text;
+    },
+
+    toHaveValue: function(value) {
+      return this.actual.val() == value;
+    },
+
+    toHaveData: function(key, expectedValue) {
+      return hasProperty(this.actual.data(key), expectedValue);
+    },
+
+    toBe: function(selector) {
+      return this.actual.is(selector);
+    },
+
+    toContain: function(selector) {
+      return this.actual.find(selector).size() > 0;
+    }
+  };
+
+  var hasProperty = function(actualValue, expectedValue) {
+    if (expectedValue === undefined) {
+      return actualValue !== undefined;
+    }
+    return actualValue == expectedValue;
+  };
+
+  var bindMatcher = function(methodName) {
+    var builtInMatcher = jasmine.Matchers.prototype[methodName];
+
+    jasmine.JQuery.matchersClass[methodName] = function() {
+      if (this.actual instanceof jQuery) {
+        var result = jQueryMatchers[methodName].apply(this, arguments);
+        this.actual = jasmine.JQuery.elementToString(this.actual);
+        return result;
+      }
+
+      if (builtInMatcher) {
+        return builtInMatcher.apply(this, arguments);
+      }
+
+      return false;
+    };
+  };
+
+  for(var methodName in jQueryMatchers) {
+    bindMatcher(methodName);
+  }
+})();
+
+beforeEach(function() {
+  this.addMatchers(jasmine.JQuery.matchersClass);
+});
+
+afterEach(function() {
+  jasmine.getFixtures().cleanUp();
+});

app/Resources/public/assets/multiselect/lib/jasmine.css

@@ -0,0 +1,166 @@
+body {
+  font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+}
+
+
+.jasmine_reporter a:visited, .jasmine_reporter a {
+  color: #303; 
+}
+
+.jasmine_reporter a:hover, .jasmine_reporter a:active {
+  color: blue; 
+}
+
+.run_spec {
+  float:right;
+  padding-right: 5px;
+  font-size: .8em;
+  text-decoration: none;
+}
+
+.jasmine_reporter {
+  margin: 0 5px;
+}
+
+.banner {
+  color: #303;
+  background-color: #fef;
+  padding: 5px;
+}
+
+.logo {
+  float: left;
+  font-size: 1.1em;
+  padding-left: 5px;
+}
+
+.logo .version {
+  font-size: .6em;
+  padding-left: 1em;
+}
+
+.runner.running {
+  background-color: yellow;
+}
+
+
+.options {
+  text-align: right;
+  font-size: .8em;
+}
+
+
+
+
+.suite {
+  border: 1px outset gray;
+  margin: 5px 0;
+  padding-left: 1em;
+}
+
+.suite .suite {
+  margin: 5px; 
+}
+
+.suite.passed {
+  background-color: #dfd;
+}
+
+.suite.failed {
+  background-color: #fdd;
+}
+
+.spec {
+  margin: 5px;
+  padding-left: 1em;
+  clear: both;
+}
+
+.spec.failed, .spec.passed, .spec.skipped {
+  padding-bottom: 5px;
+  border: 1px solid gray;
+}
+
+.spec.failed {
+  background-color: #fbb;
+  border-color: red;
+}
+
+.spec.passed {
+  background-color: #bfb;
+  border-color: green;
+}
+
+.spec.skipped {
+  background-color: #bbb;
+}
+
+.messages {
+  border-left: 1px dashed gray;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.passed {
+  background-color: #cfc;
+  display: none;
+}
+
+.failed {
+  background-color: #fbb;
+}
+
+.skipped {
+  color: #777;
+  background-color: #eee;
+  display: none;
+}
+
+
+/*.resultMessage {*/
+  /*white-space: pre;*/
+/*}*/
+
+.resultMessage span.result {
+  display: block;
+  line-height: 2em;
+  color: black;
+}
+
+.resultMessage .mismatch {
+  color: black;
+}
+
+.stackTrace {
+  white-space: pre;
+  font-size: .8em;
+  margin-left: 10px;
+  max-height: 5em;
+  overflow: auto;
+  border: 1px inset red;
+  padding: 1em;
+  background: #eef;
+}
+
+.finished-at {
+  padding-left: 1em;
+  font-size: .6em;
+}
+
+.show-passed .passed,
+.show-skipped .skipped {
+  display: block;
+}
+
+
+#jasmine_content {
+  position:fixed;
+  right: 100%;
+}
+
+.runner {
+  border: 1px solid gray;
+  display: block;
+  margin: 5px 0;
+  padding: 2px 0 2px 10px;
+}

app/Resources/public/assets/multiselect/lib/jquery.simulate.js

@@ -0,0 +1,331 @@
+ /*!
+ * jQuery Simulate v@VERSION - simulate browser mouse and keyboard events
+ * https://github.com/jquery/jquery-simulate
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Date: @DATE
+ */
+
+;(function( $, undefined ) {
+
+var rkeyEvent = /^key/,
+    rmouseEvent = /^(?:mouse|contextmenu)|click/;
+
+$.fn.simulate = function( type, options ) {
+    return this.each(function() {
+        new $.simulate( this, type, options );
+    });
+};
+
+$.simulate = function( elem, type, options ) {
+    var method = $.camelCase( "simulate-" + type );
+
+    this.target = elem;
+    this.options = options;
+
+    if ( this[ method ] ) {
+        this[ method ]();
+    } else {
+        this.simulateEvent( elem, type, options );
+    }
+};
+
+$.extend( $.simulate, {
+
+    keyCode: {
+        BACKSPACE: 8,
+        COMMA: 188,
+        DELETE: 46,
+        DOWN: 40,
+        END: 35,
+        ENTER: 13,
+        ESCAPE: 27,
+        HOME: 36,
+        LEFT: 37,
+        NUMPAD_ADD: 107,
+        NUMPAD_DECIMAL: 110,
+        NUMPAD_DIVIDE: 111,
+        NUMPAD_ENTER: 108,
+        NUMPAD_MULTIPLY: 106,
+        NUMPAD_SUBTRACT: 109,
+        PAGE_DOWN: 34,
+        PAGE_UP: 33,
+        PERIOD: 190,
+        RIGHT: 39,
+        SPACE: 32,
+        TAB: 9,
+        UP: 38
+    },
+
+    buttonCode: {
+        LEFT: 0,
+        MIDDLE: 1,
+        RIGHT: 2
+    }
+});
+
+$.extend( $.simulate.prototype, {
+
+    simulateEvent: function( elem, type, options ) {
+        var event = this.createEvent( type, options );
+        this.dispatchEvent( elem, type, event, options );
+    },
+
+    createEvent: function( type, options ) {
+        if ( rkeyEvent.test( type ) ) {
+            return this.keyEvent( type, options );
+        }
+
+        if ( rmouseEvent.test( type ) ) {
+            return this.mouseEvent( type, options );
+        }
+    },
+
+    mouseEvent: function( type, options ) {
+        var event, eventDoc, doc, body;
+        options = $.extend({
+            bubbles: true,
+            cancelable: (type !== "mousemove"),
+            view: window,
+            detail: 0,
+            screenX: 0,
+            screenY: 0,
+            clientX: 1,
+            clientY: 1,
+            ctrlKey: false,
+            altKey: false,
+            shiftKey: false,
+            metaKey: false,
+            button: 0,
+            relatedTarget: undefined
+        }, options );
+
+        if ( document.createEvent ) {
+            event = document.createEvent( "MouseEvents" );
+            event.initMouseEvent( type, options.bubbles, options.cancelable,
+                options.view, options.detail,
+                options.screenX, options.screenY, options.clientX, options.clientY,
+                options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
+                options.button, options.relatedTarget || document.body.parentNode );
+
+            // IE 9+ creates events with pageX and pageY set to 0.
+            // Trying to modify the properties throws an error,
+            // so we define getters to return the correct values.
+            if ( event.pageX === 0 && event.pageY === 0 && Object.defineProperty ) {
+                eventDoc = event.relatedTarget.ownerDocument || document;
+                doc = eventDoc.documentElement;
+                body = eventDoc.body;
+
+                Object.defineProperty( event, "pageX", {
+                    get: function() {
+                        return options.clientX +
+                            ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
+                            ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+                    }
+                });
+                Object.defineProperty( event, "pageY", {
+                    get: function() {
+                        return options.clientY +
+                            ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
+                            ( doc && doc.clientTop || body && body.clientTop || 0 );
+                    }
+                });
+            }
+        } else if ( document.createEventObject ) {
+            event = document.createEventObject();
+            $.extend( event, options );
+            // standards event.button uses constants defined here: http://msdn.microsoft.com/en-us/library/ie/ff974877(v=vs.85).aspx
+            // old IE event.button uses constants defined here: http://msdn.microsoft.com/en-us/library/ie/ms533544(v=vs.85).aspx
+            // so we actually need to map the standard back to oldIE
+            event.button = {
+                0: 1,
+                1: 4,
+                2: 2
+            }[ event.button ] || ( event.button === -1 ? 0 : event.button );
+        }
+
+        return event;
+    },
+
+    keyEvent: function( type, options ) {
+        var event;
+        options = $.extend({
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            ctrlKey: false,
+            altKey: false,
+            shiftKey: false,
+            metaKey: false,
+            keyCode: 0,
+            charCode: undefined
+        }, options );
+
+        if ( document.createEvent ) {
+            try {
+                event = document.createEvent( "KeyEvents" );
+                event.initKeyEvent( type, options.bubbles, options.cancelable, options.view,
+                    options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
+                    options.keyCode, options.charCode );
+            // initKeyEvent throws an exception in WebKit
+            // see: http://stackoverflow.com/questions/6406784/initkeyevent-keypress-only-works-in-firefox-need-a-cross-browser-solution
+            // and also https://bugs.webkit.org/show_bug.cgi?id=13368
+            // fall back to a generic event until we decide to implement initKeyboardEvent
+            } catch( err ) {
+                event = document.createEvent( "Events" );
+                event.initEvent( type, options.bubbles, options.cancelable );
+                $.extend( event, {
+                    view: options.view,
+                    ctrlKey: options.ctrlKey,
+                    altKey: options.altKey,
+                    shiftKey: options.shiftKey,
+                    metaKey: options.metaKey,
+                    keyCode: options.keyCode,
+                    charCode: options.charCode
+                });
+            }
+        } else if ( document.createEventObject ) {
+            event = document.createEventObject();
+            $.extend( event, options );
+        }
+
+        if ( !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) || (({}).toString.call( window.opera ) === "[object Opera]") ) {
+            event.keyCode = (options.charCode > 0) ? options.charCode : options.keyCode;
+            event.charCode = undefined;
+        }
+
+        return event;
+    },
+
+    dispatchEvent: function( elem, type, event ) {
+        if ( elem.dispatchEvent ) {
+            elem.dispatchEvent( event );
+        } else if ( type === "click" && elem.click && elem.nodeName.toLowerCase() === "input" ) {
+            elem.click();
+        } else if ( elem.fireEvent ) {
+            elem.fireEvent( "on" + type, event );
+        }
+    },
+
+    simulateFocus: function() {
+        var focusinEvent,
+            triggered = false,
+            element = $( this.target );
+
+        function trigger() {
+            triggered = true;
+        }
+
+        element.bind( "focus", trigger );
+        element[ 0 ].focus();
+
+        if ( !triggered ) {
+            focusinEvent = $.Event( "focusin" );
+            focusinEvent.preventDefault();
+            element.trigger( focusinEvent );
+            element.triggerHandler( "focus" );
+        }
+        element.unbind( "focus", trigger );
+    },
+
+    simulateBlur: function() {
+        var focusoutEvent,
+            triggered = false,
+            element = $( this.target );
+
+        function trigger() {
+            triggered = true;
+        }
+
+        element.bind( "blur", trigger );
+        element[ 0 ].blur();
+
+        // blur events are async in IE
+        setTimeout(function() {
+            // IE won't let the blur occur if the window is inactive
+            if ( element[ 0 ].ownerDocument.activeElement === element[ 0 ] ) {
+                element[ 0 ].ownerDocument.body.focus();
+            }
+
+            // Firefox won't trigger events if the window is inactive
+            // IE doesn't trigger events if we had to manually focus the body
+            if ( !triggered ) {
+                focusoutEvent = $.Event( "focusout" );
+                focusoutEvent.preventDefault();
+                element.trigger( focusoutEvent );
+                element.triggerHandler( "blur" );
+            }
+            element.unbind( "blur", trigger );
+        }, 1 );
+    }
+});
+
+
+
+/** complex events **/
+
+function findCenter( elem ) {
+    var offset,
+        document = $( elem.ownerDocument );
+    elem = $( elem );
+    offset = elem.offset();
+
+    return {
+        x: offset.left + elem.outerWidth() / 2 - document.scrollLeft(),
+        y: offset.top + elem.outerHeight() / 2 - document.scrollTop()
+    };
+}
+
+function findCorner( elem ) {
+    var offset,
+        document = $( elem.ownerDocument );
+    elem = $( elem );
+    offset = elem.offset();
+
+    return {
+        x: offset.left - document.scrollLeft(),
+        y: offset.top - document.scrollTop()
+    };
+}
+
+$.extend( $.simulate.prototype, {
+    simulateDrag: function() {
+        var i = 0,
+            target = this.target,
+            eventDoc = target.ownerDocument,
+            options = this.options,
+            center = options.handle === "corner" ? findCorner( target ) : findCenter( target ),
+            x = Math.floor( center.x ),
+            y = Math.floor( center.y ),
+            coord = { clientX: x, clientY: y },
+            dx = options.dx || ( options.x !== undefined ? options.x - x : 0 ),
+            dy = options.dy || ( options.y !== undefined ? options.y - y : 0 ),
+            moves = options.moves || 3;
+
+        this.simulateEvent( target, "mousedown", coord );
+
+        for ( ; i < moves ; i++ ) {
+            x += dx / moves;
+            y += dy / moves;
+
+            coord = {
+                clientX: Math.round( x ),
+                clientY: Math.round( y )
+            };
+
+            this.simulateEvent( eventDoc, "mousemove", coord );
+        }
+
+        if ( $.contains( eventDoc, target ) ) {
+            this.simulateEvent( target, "mouseup", coord );
+            this.simulateEvent( target, "click", coord );
+        } else {
+            this.simulateEvent( eventDoc, "mouseup", coord );
+        }
+    }
+});
+
+})( jQuery );

app/Resources/public/assets/multiselect/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "multiselect-two-sides",
+  "version": "2.5.1",
+  "description": "jQuery multiselect plugin with two sides",
+  "main": "dist/js/multiselect.min.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "release": "standard-version"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crlcu/multiselect.git"
+  },
+  "keywords": [
+    "multiselect"
+  ],
+  "author": "Adrian Crisan <adrian.crisan88@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/crlcu/multiselect/issues"
+  },
+  "homepage": "https://github.com/crlcu/multiselect#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-strip-debug": "^1.1.0",
+    "gulp-uglify": "^2.0.0",
+    "jasmine": "^2.5.3",
+    "standard-version": "^4.3.0"
+  },
+  "dependencies": {
+    "jquery": ">=1.7"
+  }
+}

app/Resources/public/assets/multiselect/spec/data-options.spec.js

@@ -0,0 +1,107 @@
+describe("data options", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1">'+
+            '            <option value="1">Item 1</option>'+
+            '            <option value="2">Item 5</option>'+
+            '            <option value="2">Item 2</option>'+
+            '            <option value="2">Item 4</option>'+
+            '            <option value="3">Item 3</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('.multiselect').multiselect();
+        $multiselect_to = $('#multiselect_to_1');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.hasClass('multiselect')).toBe(true);
+        expect($multiselect.find('option').length).toBe(5);
+
+        expect($multiselect_to.attr('id')).toBe('multiselect_to_1');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#right_All_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(5);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#right_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(4);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#right_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(3);
+        expect($multiselect_to.find('option').length).toBe(2);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#right_All_1').trigger('click');
+
+        // Click move all to left
+        $('#left_All_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(5);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#right_All_1').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#left_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(4);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#right_All_1').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#left_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(2);
+        expect($multiselect_to.find('option').length).toBe(3);
+    });
+});

app/Resources/public/assets/multiselect/spec/javascript-options.spec.js

@@ -0,0 +1,113 @@
+describe("javascript options", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" class="js-multiselect form-control" size="8" multiple="multiple">'+
+            '            <option value="1">Item 1</option>'+
+            '            <option value="2">Item 5</option>'+
+            '            <option value="2">Item 2</option>'+
+            '            <option value="2">Item 4</option>'+
+            '            <option value="3">Item 3</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="js_multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('.js-multiselect').multiselect({
+            right: '#js_multiselect_to_1',
+            rightAll: '#js_right_All_1',
+            rightSelected: '#js_right_Selected_1',
+            leftSelected: '#js_left_Selected_1',
+            leftAll: '#js_left_All_1'
+        });
+        $multiselect_to = $('#js_multiselect_to_1');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.hasClass('js-multiselect')).toBe(true);
+        expect($multiselect.find('option').length).toBe(5);
+
+        expect($multiselect_to.attr('id')).toBe('js_multiselect_to_1');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#js_right_All_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(5);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#js_right_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(4);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#js_right_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(3);
+        expect($multiselect_to.find('option').length).toBe(2);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#js_right_All_1').trigger('click');
+
+        // Click move all to left
+        $('#js_left_All_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(5);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#js_right_All_1').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#js_left_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(4);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#js_right_All_1').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#js_left_Selected_1').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(2);
+        expect($multiselect_to.find('option').length).toBe(3);
+    });
+});

app/Resources/public/assets/multiselect/spec/keep-rendering-sort.spec.js

@@ -0,0 +1,128 @@
+describe("keep rendering sort", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" id="keepRenderingSort" class="form-control" size="8" multiple="multiple">'+
+            '            <option value="1">Item 1</option>'+
+            '            <option value="2">Item 5</option>'+
+            '            <option value="2">Item 2</option>'+
+            '            <option value="2">Item 4</option>'+
+            '            <option value="3">Item 3</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('#keepRenderingSort').multiselect({
+            keepRenderingSort: true
+        });
+        $multiselect_to = $('#keepRenderingSort_to');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.attr('id')).toBe('keepRenderingSort');
+        expect($multiselect.find('option').length).toBe(5);
+
+        expect($multiselect_to.attr('id')).toBe('keepRenderingSort_to');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#keepRenderingSort_rightAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(5);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#keepRenderingSort_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(4);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#keepRenderingSort_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(3);
+        expect($multiselect_to.find('option').length).toBe(2);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#keepRenderingSort_rightAll').trigger('click');
+
+        // Click move all to left
+        $('#keepRenderingSort_leftAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(5);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#keepRenderingSort_rightAll').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#keepRenderingSort_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(4);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#keepRenderingSort_rightAll').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#keepRenderingSort_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(2);
+        expect($multiselect_to.find('option').length).toBe(3);
+    });
+
+    it("options in the left are displayed in the way they were rendered", function() {
+        expect($multiselect.find('option:eq(0)').text()).toBe('Item 1');
+        expect($multiselect.find('option:eq(1)').text()).toBe('Item 5');
+        expect($multiselect.find('option:eq(2)').text()).toBe('Item 2');
+        expect($multiselect.find('option:eq(3)').text()).toBe('Item 4');
+        expect($multiselect.find('option:eq(4)').text()).toBe('Item 3');
+    });
+
+    it("options in the right are displayed in the way they were rendered", function() {
+        // Click move all to right
+        $('#keepRenderingSort_rightAll').trigger('click');
+
+        expect($multiselect_to.find('option:eq(0)').text()).toBe('Item 1');
+        expect($multiselect_to.find('option:eq(1)').text()).toBe('Item 5');
+        expect($multiselect_to.find('option:eq(2)').text()).toBe('Item 2');
+        expect($multiselect_to.find('option:eq(3)').text()).toBe('Item 4');
+        expect($multiselect_to.find('option:eq(4)').text()).toBe('Item 3');
+    });
+});

app/Resources/public/assets/multiselect/spec/multiple-destinations.spec.js

@@ -0,0 +1,300 @@
+describe("multiple destinations", function() {
+    var $multiselect,
+        $multiselect_to,
+        $multiselect_to_2;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">'+
+            '            <option value="1">C++</option>'+
+            '            <option value="2">C#</option>'+
+            '            <option value="3">Haskell</option>'+
+            '            <option value="4">Java</option>'+
+            '            <option value="5">JavaScript</option>'+
+            '            <option value="6">Lisp</option>'+
+            '            <option value="7">Lua</option>'+
+            '            <option value="8">MATLAB</option>'+
+            '            <option value="9">NewLISP</option>'+
+            '            <option value="10">PHP</option>'+
+            '            <option value="11">Perl</option>'+
+            '            <option value="12">SQL</option>'+
+            '            <option value="13">Unix shell</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="multi_d_rightAll" class="btn btn-default btn-block" style="margin-top: 20px;"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="multi_d_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '        '+
+            '        <hr style="margin: 40px 0 60px;" />'+
+            '        '+
+            '        <button type="button" id="multi_d_rightAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="multi_d_leftAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <b>Known languages</b>'+
+            '        <select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple"></select>'+
+            '        '+
+            '        <br/><hr/><br/>'+
+            '        '+
+            '        <b>I want to learn</b>'+
+            '        <select name="to_2[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('#multi_d').multiselect({
+            right: '#multi_d_to, #multi_d_to_2',
+            rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2',
+            leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2',
+            rightAll: '#multi_d_rightAll, #multi_d_rightAll_2',
+            leftAll: '#multi_d_leftAll, #multi_d_leftAll_2',
+     
+            search: {
+                left: '<input type="text" name="q" class="form-control" placeholder="Search..." />'
+            },
+     
+            moveToRight: function(Multiselect, $options, event, silent, skipStack) {
+                var button = $(event.currentTarget).attr('id');
+     
+                if (button == 'multi_d_rightSelected') {
+                    var $left_options = Multiselect.$left.find('> option:selected');
+                    Multiselect.$right.eq(0).append($left_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                    }
+                } else if (button == 'multi_d_rightAll') {
+                    var $left_options = Multiselect.$left.children(':visible');
+                    Multiselect.$right.eq(0).append($left_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
+                    }
+                } else if (button == 'multi_d_rightSelected_2') {
+                    var $left_options = Multiselect.$left.find('> option:selected');
+                    Multiselect.$right.eq(1).append($left_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                    }
+                } else if (button == 'multi_d_rightAll_2') {
+                    var $left_options = Multiselect.$left.children(':visible');
+                    Multiselect.$right.eq(1).append($left_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
+                    }
+                }
+            },
+     
+            moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
+                var button = $(event.currentTarget).attr('id');
+     
+                if (button == 'multi_d_leftSelected') {
+                    var $right_options = Multiselect.$right.eq(0).find('> option:selected');
+                    Multiselect.$left.append($right_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                    }
+                } else if (button == 'multi_d_leftAll') {
+                    var $right_options = Multiselect.$right.eq(0).children(':visible');
+                    Multiselect.$left.append($right_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                    }
+                } else if (button == 'multi_d_leftSelected_2') {
+                    var $right_options = Multiselect.$right.eq(1).find('> option:selected');
+                    Multiselect.$left.append($right_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                    }
+                } else if (button == 'multi_d_leftAll_2') {
+                    var $right_options = Multiselect.$right.eq(1).children(':visible');
+                    Multiselect.$left.append($right_options);
+     
+                    if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
+                        Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
+                    }
+                }
+            }
+        });
+        $multiselect_to = $('#multi_d_to');
+        $multiselect_to_2 = $('#multi_d_to_2');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.attr('id')).toBe('multi_d');
+        expect($multiselect.find('option').length).toBe(13);
+
+        expect($multiselect_to.attr('id')).toBe('multi_d_to');
+        expect($multiselect_to.find('option').length).toBe(0);
+
+        expect($multiselect_to_2.attr('id')).toBe('multi_d_to_2');
+        expect($multiselect_to_2.find('option').length).toBe(0);
+    });
+
+    it("move all to right 1", function() {
+        // Click move all to right
+        $('#multi_d_rightAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(13);
+    });
+
+    it("move one to right 1", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right 1", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to.find('option').length).toBe(6);
+    });
+
+    it("move all to left 1", function() {
+        // Click move all to right
+        $('#multi_d_rightAll').trigger('click');
+
+        // Click move all to left
+        $('#multi_d_leftAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left 1", function() {
+        // Click move all to right
+        $('#multi_d_rightAll').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(12);
+    });
+
+    it("move all selected to left 1", function() {
+        // Click move all to right
+        $('#multi_d_rightAll').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(6);
+        expect($multiselect_to.find('option').length).toBe(7);
+    });
+
+
+
+
+
+    it("move all to right 2", function() {
+        // Click move all to right
+        $('#multi_d_rightAll_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to_2.find('option').length).toBe(13);
+    });
+
+    it("move one to right 2", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to_2.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right 2", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to_2.find('option').length).toBe(6);
+    });
+
+    it("move all to left 2", function() {
+        // Click move all to right
+        $('#multi_d_rightAll_2').trigger('click');
+
+        // Click move all to left
+        $('#multi_d_leftAll_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to_2.find('option').length).toBe(0);
+    });
+
+    it("move one to left 2", function() {
+        // Click move all to right
+        $('#multi_d_rightAll_2').trigger('click');
+
+        $multiselect_to_2.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_leftSelected_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to_2.find('option').length).toBe(12);
+    });
+
+    it("move all selected to left 2", function() {
+        // Click move all to right
+        $('#multi_d_rightAll_2').trigger('click');
+
+        $multiselect_to_2.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_leftSelected_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(6);
+        expect($multiselect_to_2.find('option').length).toBe(7);
+    });
+
+    it("move one to right 1 and one to right 2", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+        expect($multiselect_to_2.find('option').length).toBe(0);
+
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multi_d_rightSelected_2').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(11);
+        expect($multiselect_to.find('option').length).toBe(1);
+        expect($multiselect_to_2.find('option').length).toBe(1);
+    });
+});

app/Resources/public/assets/multiselect/spec/search.spec.js

@@ -0,0 +1,142 @@
+describe("with search", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" id="search" class="form-control" size="8" multiple="multiple">'+
+            '            <option value="1">Item 1</option>'+
+            '            <option value="2">Item 5</option>'+
+            '            <option value="2">Item 2</option>'+
+            '            <option value="2">Item 4</option>'+
+            '            <option value="3">Item 3</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('#search').multiselect({
+            search: {
+                left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+                right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
+            },
+            fireSearch: function(value) {
+                return value.length > 3;
+            }
+        });
+        $multiselect_to = $('#search_to');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.attr('id')).toBe('search');
+        expect($multiselect.find('option').length).toBe(5);
+
+        expect($multiselect_to.attr('id')).toBe('search_to');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#search_rightAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(5);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#search_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(4);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#search_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(3);
+        expect($multiselect_to.find('option').length).toBe(2);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#search_rightAll').trigger('click');
+
+        // Click move all to left
+        $('#search_leftAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(5);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#search_rightAll').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#search_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(4);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#search_rightAll').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#search_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(2);
+        expect($multiselect_to.find('option').length).toBe(3);
+    });
+
+    it("search on the left side", function() {
+        // Search for "Item 1"
+        $('#search').prev('[name="q"]').val('Item 1').trigger('keyup');
+
+        expect($multiselect.find('option:visible').length).toBe(1);
+
+        // Search for "Item"
+        $('#search').prev('[name="q"]').val('Item').trigger('keyup');
+
+        expect($multiselect.find('option:visible').length).toBe(5);
+    });
+
+    it("search on the right side", function() {
+        // Click move all to right
+        $('#search_rightAll').trigger('click');
+
+        // Search for "Item 1"
+        $('#search_to').prev('[name="q"]').val('Item 1').trigger('keyup');
+
+        expect($multiselect_to.find('option:visible').length).toBe(1);
+
+        // Search for "Item"
+        $('#search_to').prev('[name="q"]').val('Item').trigger('keyup');
+
+        expect($multiselect_to.find('option:visible').length).toBe(5);
+    });
+});

app/Resources/public/assets/multiselect/spec/undo-redo.spec.js

@@ -0,0 +1,193 @@
+describe("undo redo", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple">'+
+            '            <option value="1">C++</option>'+
+            '            <option value="2">C#</option>'+
+            '            <option value="3">Haskell</option>'+
+            '            <option value="4">Java</option>'+
+            '            <option value="5">JavaScript</option>'+
+            '            <option value="6">Lisp</option>'+
+            '            <option value="7">Lua</option>'+
+            '            <option value="8">MATLAB</option>'+
+            '            <option value="9">NewLISP</option>'+
+            '            <option value="10">PHP</option>'+
+            '            <option value="11">Perl</option>'+
+            '            <option value="12">SQL</option>'+
+            '            <option value="13">Unix shell</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>'+
+            '        <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '        <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+    
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('#undo_redo').multiselect();
+        $multiselect_to = $('#undo_redo_to');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.attr('id')).toBe('undo_redo');
+        expect($multiselect.find('option').length).toBe(13);
+
+        expect($multiselect_to.attr('id')).toBe('undo_redo_to');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#undo_redo_rightAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+        expect($multiselect_to.find('option').length).toBe(13);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to.find('option').length).toBe(6);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#undo_redo_rightAll').trigger('click');
+
+        // Click move all to left
+        $('#undo_redo_leftAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#undo_redo_rightAll').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(12);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#undo_redo_rightAll').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(6);
+        expect($multiselect_to.find('option').length).toBe(7);
+    });
+
+    it("move one to right then undo", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+
+        // Click undo
+        $('#undo_redo_undo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move one to right then undo then redo", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+
+        // Click undo
+        $('#undo_redo_undo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+
+        // Click redo
+        $('#undo_redo_redo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(12);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right then undo", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to.find('option').length).toBe(6);
+
+        // Click undo
+        $('#undo_redo_undo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all selected to right then undo then redo", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#undo_redo_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to.find('option').length).toBe(6);
+
+        // Click undo
+        $('#undo_redo_undo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(13);
+        expect($multiselect_to.find('option').length).toBe(0);
+
+        // Click redo
+        $('#undo_redo_redo').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(7);
+        expect($multiselect_to.find('option').length).toBe(6);
+    });
+});

app/Resources/public/assets/multiselect/spec/zero-configuration.spec.js

@@ -0,0 +1,115 @@
+if (typeof window === 'undefined') {
+    var jsdom = require("jsdom");
+    global.document = jsdom.jsdom();
+    global.window = global.document.defaultView;
+    var navigator = {userAgent: "node-js", platform: "Linux i686"};
+    global.window.navigator = global.navigator = navigator;
+    navigator.platform = "Linux i686";
+    global.jQuery = global.$ = require("jquery");
+}
+
+describe("zero configuration", function() {
+    var $multiselect,
+        $multiselect_to;
+
+    beforeEach(function() {
+        var html = '<div class="row">'+
+            '    <div class="col-xs-5">'+
+            '        <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">'+
+            '            <option value="1">Item 1</option>'+
+            '            <option value="2">Item 5</option>'+
+            '            <option value="2">Item 2</option>'+
+            '            <option value="2">Item 4</option>'+
+            '            <option value="3">Item 3</option>'+
+            '        </select>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-2">'+
+            '        <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+
+            '        <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+
+            '        <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+
+            '        <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+
+            '    </div>'+
+            '    '+
+            '    <div class="col-xs-5">'+
+            '        <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>'+
+            '    </div>'+
+            '</div>';
+
+        jasmine.getFixtures().set(html);
+        
+        $multiselect = $('#multiselect').multiselect();
+        $multiselect_to = $('#multiselect_to');
+    });
+
+    it("multiselect is instantiated and contains options", function() {
+        expect($multiselect.attr('id')).toBe('multiselect');
+        expect($multiselect.find('option').length).toBe(5);
+
+        expect($multiselect_to.attr('id')).toBe('multiselect_to');
+        expect($multiselect_to.find('option').length).toBe(0);
+    });
+
+    it("move all to right", function() {
+        // Click move all to right
+        $('#multiselect_rightAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(0);
+    });
+
+    it("move one to right", function() {
+        $multiselect.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multiselect_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(4);
+        expect($multiselect_to.find('option').length).toBe(1);
+    });
+
+    it("move all selected to right", function() {
+        $multiselect.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multiselect_rightSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(3);
+        expect($multiselect_to.find('option').length).toBe(2);
+    });
+
+    it("move all to left", function() {
+        // Click move all to right
+        $('#multiselect_rightAll').trigger('click');
+
+        // Click move all to left
+        $('#multiselect_leftAll').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(5);
+    });
+
+    it("move one to left", function() {
+        // Click move all to right
+        $('#multiselect_rightAll').trigger('click');
+
+        $multiselect_to.find('option:eq(0)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multiselect_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(1);
+        expect($multiselect_to.find('option').length).toBe(4);
+    });
+
+    it("move all selected to left", function() {
+        // Click move all to right
+        $('#multiselect_rightAll').trigger('click');
+
+        $multiselect_to.find('option:nth-child(2n)').attr('selected', true);
+
+        // Click move selected to right
+        $('#multiselect_leftSelected').trigger('click');
+
+        expect($multiselect.find('option').length).toBe(2);
+        expect($multiselect_to.find('option').length).toBe(3);
+    });
+});

app/Resources/public/assets/multiselect/tests.html

@@ -0,0 +1,36 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Jasmine Test Runner</title>
+    <link rel="stylesheet" type="text/css" href="lib/jasmine.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="lib/jasmine.js"></script>
+    <script type="text/javascript" src="lib/jasmine-html.js"></script>
+    <script type="text/javascript" src="lib/jasmine-jquery-1.1.2.js"></script>
+    <script type="text/javascript" src="lib/jquery.simulate.js"></script>
+
+    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+    <script type="text/javascript" src="dist/js/multiselect.min.js"></script>
+
+    <!-- include spec files here... -->
+    <script type="text/javascript" src="spec/zero-configuration.spec.js"></script>
+    <script type="text/javascript" src="spec/data-options.spec.js"></script>
+    <script type="text/javascript" src="spec/javascript-options.spec.js"></script>
+    <script type="text/javascript" src="spec/search.spec.js"></script>
+    <script type="text/javascript" src="spec/keep-rendering-sort.spec.js"></script>
+    <script type="text/javascript" src="spec/undo-redo.spec.js"></script>
+    <script type="text/javascript" src="spec/multiple-destinations.spec.js"></script>
+</head>
+<body>
+
+<script type="text/javascript">
+    jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
+    jasmine.getEnv().execute();
+</script>
+
+</body>
+</html>

bower.json

@@ -34,7 +34,9 @@
     "js-cookie": "2.1.*",
     "flag-icon-css": "*",
     "jquery.easy-pie-chart": "^2.1.6",
-    "jqueryui-touch-punch": "*"
+    "jqueryui-touch-punch": "*",
+    "multiselect-two-sides": "*"
+
   },
   "resolutions": {
     "jquery": "2.1.4"

main/admin/course_edit.php

@@ -229,7 +229,7 @@ if (!empty($coursesInSession) && $allowEditSessionCoaches) {
             }
         }
 
-        $groupName = 'session_coaches['.$sessionId.']';
+        $groupName = 'session_coaches_'.$sessionId;
         $platformTeacherId = 'platform_teachers_by_session_'.$sessionId;
         $coachId = 'coaches_by_session_'.$sessionId;
         $platformTeacherName = 'platform_teachers_by_session';
@@ -397,17 +397,21 @@ if ($form->validate()) {
 
     // Updating teachers
     if ($addTeacherToSessionCourses) {
-        // Updating session coaches
-        $sessionCoaches = $course['session_coaches'];
-        if (!empty($sessionCoaches)) {
-            foreach ($sessionCoaches as $sessionId => $teacherInfo) {
-                $coachesToSubscribe = $teacherInfo['coaches_by_session'];
-                SessionManager::updateCoaches(
-                    $sessionId,
-                    $courseId,
-                    $coachesToSubscribe,
-                    true
-                );
+        foreach ($coursesInSession as $session) {
+            $sessionId = $session['id'];
+            // Updating session coaches
+            $sessionCoaches = isset($course['session_coaches_'.$sessionId]) ? $course['session_coaches_'.$sessionId] : [];
+
+            if (!empty($sessionCoaches)) {
+                foreach ($sessionCoaches as $teacherInfo) {
+                    $coachesToSubscribe = isset($teacherInfo['coaches_by_session']) ? $teacherInfo['coaches_by_session'] : [];
+                    SessionManager::updateCoaches(
+                        $sessionId,
+                        $courseId,
+                        $coachesToSubscribe,
+                        true
+                    );
+                }
             }
         }
 
@@ -422,18 +426,18 @@ if ($form->validate()) {
         // Normal behaviour
         CourseManager::updateTeachers($courseInfo, $teachers, true, false);
 
-        // Updating session coaches
-        $sessionCoaches = isset($course['session_coaches']) ? $course['session_coaches'] : [];
-        if (!empty($sessionCoaches)) {
-            foreach ($sessionCoaches as $sessionId => $coachesToSubscribe) {
-                if (!empty($coachesToSubscribe)) {
-                    SessionManager::updateCoaches(
-                        $sessionId,
-                        $courseId,
-                        $coachesToSubscribe,
-                        true
-                    );
-                }
+        foreach ($coursesInSession as $session) {
+            $sessionId = $session['id'];
+            // Updating session coaches
+            $sessionCoaches = isset($course['session_coaches_'.$sessionId]) ? $course['session_coaches_'.$sessionId] : [];
+
+            if (!empty($sessionCoaches)) {
+                SessionManager::updateCoaches(
+                    $sessionId,
+                    $courseId,
+                    $sessionCoaches,
+                    true
+                );
             }
         }
     }

main/inc/lib/pear/HTML/QuickForm/advmultiselect.php

@@ -74,7 +74,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_jsPrefix;
+    public $_jsPrefix;
 
     /**
      * Postfix function name in javascript move selections
@@ -83,7 +83,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_jsPostfix;
+    public $_jsPostfix;
 
     /**
      * Associative array of the multi select container attributes
@@ -92,7 +92,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_tableAttributes;
+    public $_tableAttributes;
 
     /**
      * Associative array of the add button attributes
@@ -101,7 +101,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_addButtonAttributes;
+    public $_addButtonAttributes;
 
     /**
      * Associative array of the remove button attributes
@@ -110,7 +110,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_removeButtonAttributes;
+    public $_removeButtonAttributes;
 
     /**
      * Associative array of the select all button attributes
@@ -119,7 +119,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      1.1.0
      */
-    var $_allButtonAttributes;
+    public $_allButtonAttributes;
 
     /**
      * Associative array of the select none button attributes
@@ -128,7 +128,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      1.1.0
      */
-    var $_noneButtonAttributes;
+    public $_noneButtonAttributes;
 
     /**
      * Associative array of the toggle selection button attributes
@@ -137,7 +137,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      1.1.0
      */
-    var $_toggleButtonAttributes;
+    public $_toggleButtonAttributes;
 
     /**
      * Associative array of the move up button attributes
@@ -146,7 +146,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.5.0
      */
-    var $_upButtonAttributes;
+    public $_upButtonAttributes;
 
     /**
      * Associative array of the move up button attributes
@@ -155,7 +155,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.5.0
      */
-    var $_downButtonAttributes;
+    public $_downButtonAttributes;
 
     /**
      * Associative array of the move top button attributes
@@ -164,7 +164,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      1.5.0
      */
-    var $_topButtonAttributes;
+    public $_topButtonAttributes;
 
     /**
      * Associative array of the move bottom button attributes
@@ -173,7 +173,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      1.5.0
      */
-    var $_bottomButtonAttributes;
+    public $_bottomButtonAttributes;
 
     /**
      * Defines if both list (unselected, selected) will have their elements be
@@ -187,7 +187,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access private
      * @since  0.5.0
      */
-    var $_sort;
+    public $_sort;
 
     /**
      * Associative array of the unselected item box attributes
@@ -196,7 +196,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_attributesUnselected;
+    public $_attributesUnselected;
 
     /**
      * Associative array of the selected item box attributes
@@ -205,7 +205,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_attributesSelected;
+    public $_attributesSelected;
 
     /**
      * Associative array of the internal hidden box attributes
@@ -214,8 +214,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_attributesHidden;
-
+    public $_attributesHidden;
     public $selectAllCheckBox = false;
 
     /**
@@ -225,7 +224,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_elementTemplate;
+    public $_elementTemplate;
 
     /**
      * Default Element stylesheet string
@@ -234,15 +233,11 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @access     private
      * @since      0.4.0
      */
-    var $_elementCSS = '';
+    public $_elementCSS = '';
 
     /**
      * Class constructor
      *
-     * Class constructors :
-     * Zend Engine 1 uses HTML_QuickForm_advmultiselect, while
-     * Zend Engine 2 uses __construct
-     *
      * @param string  $elementName  Dual Select name attribute
      * @param mixed   $elementLabel Label(s) for the select boxes
      * @param mixed   $options      Data to be used to populate options
@@ -319,6 +314,9 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
         $this->_jsPrefix  = 'QFAMS.';
         $this->_jsPostfix = 'moveSelection';
 
+        $this->_jsPrefix  = '';
+        $this->_jsPostfix = '';
+
         // set select boxes sort order (none by default)
         if (!isset($sort)) {
             $sort = false;
@@ -381,7 +379,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom1.png
      *             Custom example 1: screenshot
      */
-    function setButtonAttributes($button, $attributes = null)
+    public function setButtonAttributes($button, $attributes = null)
     {
         if (!is_string($button)) {
             return PEAR::throwError('Argument 1 of HTML_QuickForm_advmultiselect::' .
@@ -515,7 +513,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      * @return     string
      * @since      version 0.4.0 (2005-06-25)
      */
-    function setElementTemplate($html = null, $js = true)
+    public function setElementTemplate($html = null, $js = true)
     {
         $oldTemplate = $this->_elementTemplate;
 
@@ -587,10 +585,10 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
         $tabs = $this->_getTabs();
         $tab = $this->_getTab();
 
-        $selectId       = $this->getName();
-        $selectName     = $this->getName() . '[]';
-        $selectNameFrom = $this->getName() . '-f[]';
-        $selectNameTo   = $this->getName() . '-t[]';
+        $selectId = $this->getName();
+        $selectName = $this->getName().'[]';
+        $selectNameFrom = $this->getName().'-f[]';
+        $selectNameTo = $this->getName().'[]';
         $selected_count = 0;
 
         // placeholder {unselected} existence determines if we will render
@@ -645,13 +643,16 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
 
             // build the select all button with all its attributes
             $jsName     = $this->_jsPrefix . $this->_jsPostfix;
+            $jsName = '';
             $attributes = array('onclick' => $jsName ."('". $selectId ."', 1);");
+            $attributes = [];
             $this->_allButtonAttributes = array_merge($this->_allButtonAttributes, $attributes);
             $attrStrAll = $this->_getAttrString($this->_allButtonAttributes);
             $strHtmlAll = "<input$attrStrAll />". PHP_EOL;
 
             // build the select none button with all its attributes
             $attributes = array('onclick' => $jsName ."('". $selectId ."', 0);");
+            $attributes = [];
             $this->_noneButtonAttributes
                 = array_merge($this->_noneButtonAttributes, $attributes);
             $attrStrNone = $this->_getAttrString($this->_noneButtonAttributes);
@@ -660,6 +661,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
             // build the toggle selection button with all its attributes
             $attributes = array('onclick' => $jsName .
                 "('". $selectId ."', 2);");
+            $attributes = [];
             $this->_toggleButtonAttributes = array_merge($this->_toggleButtonAttributes, $attributes);
             $attrStrToggle = $this->_getAttrString($this->_toggleButtonAttributes);
             $strHtmlToggle = "<input$attrStrToggle />". PHP_EOL;
@@ -675,31 +677,21 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
             // ... or a dual multi-select
             $this->_jsPostfix = 'moveSelection';
             $jsName           = $this->_jsPrefix . $this->_jsPostfix;
+            $jsName = '';
 
             // set name of Select From Box
             $this->_attributesUnselected
-                = array('id' => $selectId . '-f',
+                = array('id' => $selectId . '',
                 'name' => $selectNameFrom,
-                'ondblclick' => $jsName .
-                    "('{$selectId}', ".
-                    "this.form.elements['" . $selectNameFrom . "'], " .
-                    "this.form.elements['" . $selectNameTo . "'], " .
-                    "this.form.elements['" . $selectName . "'], " .
-                    "'add', '{$this->_sort}')");
+               );
             $this->_attributesUnselected
                 = array_merge($this->_attributes, $this->_attributesUnselected);
             $attrUnselected = $this->_getAttrString($this->_attributesUnselected);
 
             // set name of Select To Box
             $this->_attributesSelected
-                = array('id' => $selectId . '-t',
-                'name' => $selectNameTo,
-                'ondblclick' => $jsName .
-                    "('{$selectId}', " .
-                    "this.form.elements['" . $selectNameFrom . "'], " .
-                    "this.form.elements['" . $selectNameTo . "'], ".
-                    "this.form.elements['" . $selectName . "'], " .
-                    "'remove', '{$this->_sort}')");
+                = array('id' => $selectId . '_to',
+                'name' => $selectNameTo);
             $this->_attributesSelected
                 = array_merge($this->_attributes, $this->_attributesSelected);
             $attrSelected = $this->_getAttrString($this->_attributesSelected);
@@ -761,7 +753,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
             $unselected_count = count($arrHtmlUnselected);
 
             if ($unselected_count == 0) {
-                $this->_attributesUnselected['disabled'] = 'disabled';
+                //$this->_attributesUnselected['disabled'] = 'disabled';
                 $this->_attributesUnselected
                     = array_merge($this->_attributes, $this->_attributesUnselected);
                 $attrUnselected = $this->_getAttrString($this->_attributesUnselected);
@@ -775,16 +767,16 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                         . $data['text'] . '</option>' . PHP_EOL;
                 }
             } else {
-                $strHtmlUnselected .= '<option value="">&nbsp;</option>';
+                //$strHtmlUnselected .= '<option value="">&nbsp;</option>';
             }
             $strHtmlUnselected .= '</select>';
 
-            $strHtmlUnselected = '<input placeholder="'.get_lang('Search').'" id="'.$selectId.'-f-filter" type="text" class="form-control search-query select_class_filter"><br />'.$strHtmlUnselected;
+            //$strHtmlUnselected = '<input placeholder="'.get_lang('Search').'" id="'.$selectId.'-f-filter" type="text" class="form-control search-query select_class_filter"><br />'.$strHtmlUnselected;
             // The 'selected' multi-select which appears on the right
             $selected_count = count($arrHtmlSelected);
 
             if ($selected_count == 0) {
-                $this->_attributesSelected['disabled'] = 'disabled';
+               // $this->_attributesSelected['disabled'] = 'disabled';
                 $this->_attributesSelected
                     = array_merge($this->_attributes, $this->_attributesSelected);
                 $attrSelected = $this->_getAttrString($this->_attributesSelected);
@@ -807,14 +799,14 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                         . $text . '</option>';
                 }
             } else {
-                $strHtmlSelected .= '<option value="">&nbsp;</option>';
+               // $strHtmlSelected .= '<option value="">&nbsp;</option>';
             }
             $strHtmlSelected .= '</select>';
 
-            $strHtmlSelected = '<input placeholder="'.get_lang('Search').'" id="'.$selectId.'-t-filter" type="text" class="form-control search-query select_class_filter"><br />'.$strHtmlSelected;
+            //$strHtmlSelected = '<input placeholder="'.get_lang('Search').'" id="'.$selectId.'-t-filter" type="text" class="form-control search-query select_class_filter"><br />'.$strHtmlSelected;
 
             // The 'hidden' multi-select
-            $strHtmlHidden = "<select$attrHidden>". PHP_EOL;
+            /*$strHtmlHidden = "<select$attrHidden>". PHP_EOL;
             if (count($arrHtmlHidden) > 0) {
                 foreach ($arrHtmlHidden as $data) {
                     $attribute  = null;
@@ -831,35 +823,24 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                         . $text . '</option>' . PHP_EOL;
                 }
             }
-            $strHtmlHidden .= '</select>';
+            $strHtmlHidden .= '</select>';*/
+            $strHtmlHidden = '';
 
-            // build the remove button with all its attributes
-            $attributes
-                = array('onclick' => $jsName .
-                "('{$selectId}', " .
-                "this.form.elements['" . $selectNameFrom . "'], " .
-                "this.form.elements['" . $selectNameTo . "'], " .
-                "this.form.elements['" . $selectName . "'], " .
-                "'remove', '{$this->_sort}'); return false;");
+
+            $attributes = array('id' => $selectId.'_leftSelected');
             $this->_removeButtonAttributes
                 = array_merge($this->_removeButtonAttributes, $attributes);
             $attrStrRemove = $this->_getAttrString($this->_removeButtonAttributes);
             $strHtmlRemove = "<button $attrStrRemove  /> <em class='fa fa-arrow-left'></em></button>";
 
             // build the add button with all its attributes
-            $attributes
-                = array('onclick' => $jsName .
-                "('{$selectId}', " .
-                "this.form.elements['" . $selectNameFrom . "'], " .
-                "this.form.elements['" . $selectNameTo . "'], " .
-                "this.form.elements['" . $selectName . "'], " .
-                "'add', '{$this->_sort}'); return false;");
+            $attributes = array('id' => $selectId.'_rightSelected');
             $this->_addButtonAttributes = array_merge($this->_addButtonAttributes, $attributes);
             $attrStrAdd = $this->_getAttrString($this->_addButtonAttributes);
             $strHtmlAdd = "<button $attrStrAdd  /> <em class='fa fa-arrow-right'></em></button><br /><br />";
 
             // build the select all button with all its attributes
-            $attributes
+            /*$attributes
                 = array('onclick' => $jsName .
                 "('{$selectId}', " .
                 "this.form.elements['" . $selectNameFrom . "'], " .
@@ -868,16 +849,18 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "'all', '{$this->_sort}'); return false;");
             $this->_allButtonAttributes = array_merge($this->_allButtonAttributes, $attributes);
             $attrStrAll = $this->_getAttrString($this->_allButtonAttributes);
-            $strHtmlAll = "<input$attrStrAll />". PHP_EOL;
+            $strHtmlAll = "<input$attrStrAll />". PHP_EOL;*/
+            $strHtmlAll = '';
 
             // build the select none button with all its attributes
-            $attributes
+            /*$attributes
                 = array('onclick' => $jsName .
                 "('{$selectId}', " .
                 "this.form.elements['" . $selectNameFrom . "'], " .
                 "this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "'], " .
-                "'none', '{$this->_sort}'); return false;");
+                "'none', '{$this->_sort}'); return false;");*/
+            $attributes = [];
             $this->_noneButtonAttributes
                 = array_merge($this->_noneButtonAttributes, $attributes);
             $attrStrNone = $this->_getAttrString($this->_noneButtonAttributes);
@@ -891,6 +874,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "'], " .
                 "'toggle', '{$this->_sort}'); return false;");
+            $attributes = [];
             $this->_toggleButtonAttributes
                 = array_merge($this->_toggleButtonAttributes, $attributes);
             $attrStrToggle = $this->_getAttrString($this->_toggleButtonAttributes);
@@ -902,6 +886,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "(this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "']); " .
                 "return false;");
+            $attributes = [];
             $this->_upButtonAttributes
                 = array_merge($this->_upButtonAttributes, $attributes);
             $attrStrUp     = $this->_getAttrString($this->_upButtonAttributes);
@@ -913,6 +898,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "(this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "']); " .
                 "return false;");
+            $attributes = [];
             $this->_downButtonAttributes
                 = array_merge($this->_downButtonAttributes, $attributes);
             $attrStrDown     = $this->_getAttrString($this->_downButtonAttributes);
@@ -924,6 +910,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "(this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "']); " .
                 "return false;");
+            $attributes = [];
             $this->_topButtonAttributes
                 = array_merge($this->_topButtonAttributes, $attributes);
             $attrStrTop     = $this->_getAttrString($this->_topButtonAttributes);
@@ -935,6 +922,7 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
                 "(this.form.elements['" . $selectNameTo . "'], " .
                 "this.form.elements['" . $selectName . "']); " .
                 "return false;");
+            $attributes = [];
             $this->_bottomButtonAttributes
                 = array_merge($this->_bottomButtonAttributes, $attributes);
             $attrStrBottom     = $this->_getAttrString($this->_bottomButtonAttributes);
@@ -1045,18 +1033,25 @@ class HTML_QuickForm_advmultiselect extends HTML_QuickForm_select
      */
     function getElementJs($raw = true, $min = true)
     {
-        $js = api_get_path(LIBRARY_PATH).'javascript'.DIRECTORY_SEPARATOR.'pear'.DIRECTORY_SEPARATOR;
-        $js .= 'qfamsHandler.js';
-
-        if (file_exists($js)) {
-            $js = file_get_contents($js);
-        } else {
-            $js = '';
-        }
+        $name = $this->getName();
+        $js = api_get_asset('multiselect/dist/js/multiselect.js');
+        $search =
+            '<input type="text" name="q" class="form-control" placeholder="'.addslashes(get_lang('Search')).'" /><br />';
+
+        $js .= '<script>
+                $(document).ready(function() {
+                    $(\'#'.$name.'\').multiselect({
+                        search: {
+                            left: \''.$search.'\',
+                            right: \''.$search.'\'
+                        },
+                        fireSearch: function(value) {
+                            return value.length > 2;
+                        }
+                    });
+                });
+                </script>'.PHP_EOL;
 
-        if ($raw !== true) {
-            $js = '<script>'.PHP_EOL.$js.PHP_EOL.'</script>'.PHP_EOL;
-        }
 
         return $js;
     }