foreman_discovery 1.0.0.rc1

data/test/foreman_app/vendor/assets/javascripts/jquery.jnotify.js

@@ -0,0 +1,209 @@
+/*!
+ * jNotify jQuery Plug-in
+ *
+ * Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Date: 2010-09-30
+ * Rev:  1.1.00
+ */
+;(function($){
+	$.jnotify = function (m, o, d){
+		return new jNotify(m, o, d);
+	};
+
+	// set the version of the plug-in
+	$.jnotify.version = "1.1.00";
+
+	var $jnotify, queue = [], count = 0, playing = false, paused = false, queuedId, queuedNote,
+		// define default settings
+		defaults = {
+			// define core settings
+			  type: ""                                  // if a type is specified, then an additional class of classNotification + type is created for each notification
+			, delay: 2000                               // the default time to show each notification (in milliseconds)
+			, sticky: false                             // determines if the message should be considered "sticky" (user must manually close notification)
+			, closeLabel: "×"                     // the HTML to use for the "Close" link
+			, showClose: true                           // determines if the "Close" link should be shown if notification is also sticky
+			, fadeSpeed: 1000                           // the speed to fade messages out (in milliseconds)
+			, slideSpeed: 250                           // the speed used to slide messages out (in milliseconds)
+
+			// define the class statements
+			, classContainer: "jnotify-container"       // className to use for the outer most container--this is where all the notifications appear
+			, classNotification: "jnotify-notification" // className of the individual notification containers
+			, classBackground: "jnotify-background"     // className of the background layer for each notification container
+			, classClose: "jnotify-close"               // className to use for the "Close" link
+			, classMessage: "jnotify-message"           // className to use for the actual notification text container--this is where the message is actually written
+
+			// event handlers
+			, init: null                                // callback that occurs when the main jnotify container is created
+			, create: null                              // callback that occurs when when the note is created (occurs just before appearing in DOM)
+			, beforeRemove: null                        // callback that occurs when before the notification starts to fade away
+			, remove: null                              // callback that occurs when notification is removed
+			, transition: null                          // allows you to overwrite how the transitions between messages are handled
+			                                            // receives the following arguments:
+			                                            //   container - jQuery object containing the notification
+			                                            //   message   - jQuery object of the actual message
+			                                            //   count     - the number of items left in queue
+			                                            //   callback  - a function you must execute once your transition has executed
+			                                            //   options   - the options used for this jnotify instance
+		};
+
+	// override the defaults
+	$.jnotify.setup = function (o){
+		defaults = $.extend({}, defaults, o) ;
+	};
+
+	$.jnotify.play = function (f, d){
+		if( playing && (f !== true ) || (queue.length == 0) ) return;
+		playing = true;
+
+		// get first note
+		var note = queue.shift();
+		queuedNote = note;
+
+		// determine delay to use
+		var delay = (arguments.length >= 2) ? parseInt(d, 10) : note.options.delay;
+
+		// run delay before removing message
+		queuedId = setTimeout(function(){
+			// clear timeout id
+			queuedId = 0;
+			note.remove(function (){
+				// makr that the queue is empty
+				if( queue.length == 0 ) playing = false;
+				// force playing the next item in queue
+				else if( !paused ) $.jnotify.play(true);
+			});
+		}, delay);
+	};
+
+	$.jnotify.pause = function(){
+		clearTimeout(queuedId);
+		// push the item back into the queue
+		if( queuedId ) queue.unshift(queuedNote);
+		// mark that we're playing (so it doesn't automatically start playing)
+		paused = playing = true;
+  }
+
+	$.jnotify.resume = function(){
+		// mark that we're no longer pause
+		paused = false;
+
+		// resume playing
+		$.jnotify.play(true, 0);
+  }
+
+
+	function jNotify(message, options){
+		// a reference to the jNotify object
+		var self = this, TO = typeof options;
+
+		if( TO == "number" ){
+			options = $.extend({}, defaults, {delay: options});
+		} else if( TO == "boolean" ){
+			options = $.extend({}, defaults, {sticky: true}) ;
+		} else if( TO == "string" ){
+			options = $.extend({}, defaults, {type: options, delay: ((arguments.length > 2) && (typeof arguments[2] == "number")) ? arguments[2] : defaults.delay, sticky: ((arguments.length > 2) && (typeof arguments[2] == "boolean")) ? arguments[2] : defaults.sticky}) ;
+		} else {
+			options = $.extend({}, defaults, options);
+		}
+
+		// store the options
+		this.options = options;
+
+		// if the container doesn't exist, create it
+		if( !$jnotify ){
+			// we want to use one single container, so always use the default container class
+			$jnotify = $('<div class="' + defaults.classContainer + '" />').appendTo("body");
+			if( $.isFunction(options.init) ) options.init.apply(self, [$jnotify]);
+		}
+
+		// create the notification
+		function create(message){
+			var html = '<div class="' + options.classNotification + (options.type.length ? (" " + options.classNotification + "-" + options.type) : "") + '">'
+			         + '<div class="' + options.classBackground + '"></div>'
+			         + (options.sticky && options.showClose ? ('<a class="' + options.classClose + '">' + options.closeLabel + '</a>') : '')
+			         + '<div class="' + options.classMessage + '">'
+			         + '<div>' + message + '</div>'
+			         + '</div></div>';
+
+			// increase the counter tracking the notification instances
+			count++;
+
+			// create the note
+			var $note = $(html);
+
+			if( options.sticky ){
+				// add click handler to remove the sticky notification
+				$note.find("a." + options.classClose).bind("click.jnotify", function (){
+					self.remove();
+				});
+			}
+
+			// run callback
+			if( $.isFunction(options.create) ) options.create.apply(self, [$note]);
+
+			// return the new note
+			return $note.appendTo($jnotify);
+		}
+
+		// remove the notification
+		this.remove = function (callback){
+			var $msg = $note.find("." + options.classMessage), $parent = $msg.parent();
+			// remove message from counter
+			var index = count--;
+
+			// run callback
+			if( $.isFunction(options.beforeRemove) ) options.beforeRemove.apply(self, [$msg]);
+
+			// cleans up notification
+			function finished(){
+				// remove the parent container
+				$parent.remove();
+
+				// if there's a callback, run it
+				if( $.isFunction(callback) ) callback.apply(self, [$msg]);
+				if( $.isFunction(options.remove) ) options.remove.apply(self, [$msg]);
+			}
+
+			// check if a custom transition has been specified
+			if( $.isFunction(options.transition) ) options.transition.apply(self, [$parent, $msg, index, finished, options]);
+			else {
+				$msg.fadeTo(options.fadeSpeed, 0.01, function (){
+					// if last item, just remove
+					if( index <= 1 ) finished();
+					// slide the parent closed
+					else $parent.slideUp(options.slideSpeed, finished);
+				});
+
+				// if the last notification, fade out the container
+				if( count <= 0 ) $parent.fadeOut(options.fadeSpeed);
+			}
+		}
+
+		// create the note
+		var $note = create(message);
+
+		// if not a sticky, add to show queue
+		if( !options.sticky ){
+			// add the message to the queue
+			queue.push(this);
+			// play queue
+			$.jnotify.play();
+		}
+
+		return this;
+	};
+
+})(jQuery);

data/test/foreman_app/vendor/assets/javascripts/jquery.multi-select.js

@@ -0,0 +1,503 @@
+/*
+* MultiSelect v0.9.3
+* Copyright (c) 2012 Louis Cuny
+*
+* This program is free software. It comes without any warranty, to
+* the extent permitted by applicable law. You can redistribute it
+* and/or modify it under the terms of the Do What The Fuck You Want
+* To Public License, Version 2, as published by Sam Hocevar. See
+* http://sam.zoy.org/wtfpl/COPYING for more details.
+*/
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* MULTISELECT CLASS DEFINITION
+  * ====================== */
+
+  var MultiSelect = function (element, options) {
+    this.options =  options;
+    this.$element = $(element);
+    this.$container = $('<div id="ms-'+this.$element.attr('id')+'" class="ms-container"></div>');
+    this.$selectableContainer = $('<div class="ms-selectable"></div>');
+    this.$selectionContainer = $('<div class="ms-selection"></div>');
+    this.$selectableUl = $('<ul class="ms-list"></ul>');
+    this.$selectionUl = $('<ul class="ms-list"></ul>');
+    this.scrollTo = 0;
+  }
+
+  MultiSelect.prototype = {
+    constructor: MultiSelect,
+
+    init: function(){
+      var that = this,
+          ms = this.$element;
+
+      if (ms.next('.ms-container').length == 0){
+        ms.css({ position: 'absolute', left: '-9999px' });
+        ms.attr('id', ms.attr('id') ? ms.attr('id') : 'ms-'+Math.ceil(Math.random()*1000));
+
+
+
+        var optgroupLabel = null,
+            optgroupId = null,
+            optgroupCpt = 0,
+            scroll = 0,
+            optgroupContainerTemplate = '<li class="ms-optgroup-container"></li>',
+            optgroupUlTemplate = '<ul class="ms-optgroup"></ul>',
+            optgroupLiTemplate = '<li class="ms-optgroup-label"><span></span></li>';
+
+        ms.find('optgroup, option').each(function(){
+          if ($(this).is('optgroup')){
+            optgroupLabel = '<span>'+$(this).attr('label')+'</span>';
+            optgroupId = 'ms-'+ms.attr('id')+'-optgroup-'+optgroupCpt;
+
+            var optgroup = $(this),
+                optgroupSelectable = $(optgroupContainerTemplate),
+                optgroupSelection = $(optgroupContainerTemplate),
+                optgroupSelectionLi = $(optgroupLiTemplate),
+                optgroupSelectableLi = $(optgroupLiTemplate);
+
+            if (that.options.selectableOptgroup){
+              optgroupSelectableLi.on('click', function(){
+                var values = optgroup.children(':not(:selected)').map(function(){ return $(this).val() }).get();
+                that.select(values);
+              });
+
+              optgroupSelectionLi.on('click', function(){
+                var values = optgroup.children(':selected').map(function(){ return $(this).val() }).get();
+                that.deselect(values);
+              });
+            }
+
+            optgroupSelectableLi.html(optgroupLabel);
+
+            optgroupSelectable.attr('id', optgroupId+'-selectable')
+              .append($(optgroupUlTemplate)
+                .append(optgroupSelectableLi));
+
+            that.$selectableUl.append(optgroupSelectable);
+
+            optgroupSelectionLi.html(optgroupLabel);
+
+            optgroupSelection.attr('id', optgroupId+'-selection')
+              .append($(optgroupUlTemplate)
+                .append(optgroupSelectionLi));
+
+            that.$selectionUl.append(optgroupSelection);
+
+            optgroupCpt++;
+
+          } else {
+
+            var attributes = "";
+
+            for (var cpt = 0; cpt < this.attributes.length; cpt++){
+              var attr = this.attributes[cpt];
+
+              if(that.isDomNode(attr.name)){
+                attributes += attr.name+'="'+attr.value+'" ';
+              }
+            }
+            var selectableLi = $('<li '+attributes+'><span>'+$(this).text()+'</span></li>'),
+                selectedLi = selectableLi.clone();
+
+            var value = $(this).val(),
+                msId = that.sanitize(value);
+
+            selectableLi
+              .data('ms-value', value)
+              .addClass('ms-elem-selectable')
+              .attr('id', msId+'-selectable');
+
+            selectedLi
+              .data('ms-value', value)
+              .addClass('ms-elem-selection')
+              .attr('id', msId+'-selection')
+              .hide();
+
+            that.$selectionUl.find('.ms-optgroup-label').hide();
+
+            if ($(this).prop('disabled') || ms.prop('disabled')){
+              if (this.selected) {
+                selectedLi.prop('disabled', true);
+                selectedLi.addClass(that.options.disabledClass);
+              } else {
+                selectableLi.prop('disabled', true);
+                selectableLi.addClass(that.options.disabledClass);
+              }
+            }
+
+            if (optgroupId){
+              that.$selectableUl.children('#'+optgroupId+'-selectable').find('ul').first().append(selectableLi);
+              that.$selectionUl.children('#'+optgroupId+'-selection').find('ul').first().append(selectedLi);
+            } else {
+              that.$selectableUl.append(selectableLi);
+              that.$selectionUl.append(selectedLi);
+            }
+          }
+        });
+
+        if (that.options.selectableHeader)
+          that.$selectableContainer.append(that.options.selectableHeader.clone());
+        that.$selectableContainer.append(that.$selectableUl);
+        if (that.options.selectableFooter)
+          that.$selectableContainer.append(that.options.selectableFooter);
+
+        if (that.options.selectionHeader)
+          that.$selectionContainer.append(that.options.selectionHeader.clone());
+        that.$selectionContainer.append(that.$selectionUl);
+        if (that.options.selectionFooter)
+          that.$selectionContainer.append(that.options.selectionFooter);
+
+        that.$container.append(that.$selectableContainer);
+        that.$container.append(that.$selectionContainer);
+        ms.after(that.$container);
+        that.$selectableUl.on('mouseenter', '.ms-elem-selectable', function(){
+          $('li', that.$container).removeClass('ms-hover');
+          $(this).addClass('ms-hover');
+        }).on('mouseleave', function(){
+          $('li', that.$container).removeClass('ms-hover');
+        });
+
+        if(that.options.dblClick) {
+          that.$selectableUl.on('dblclick', '.ms-elem-selectable', function(){
+            that.select($(this).data('ms-value'));
+          });
+          that.$selectionUl.on('dblclick', '.ms-elem-selection', function(){
+            that.deselect($(this).data('ms-value'));
+          });
+        } else {
+          that.$selectableUl.on('click', '.ms-elem-selectable', function(){
+            that.select($(this).data('ms-value'));
+          });
+          that.$selectionUl.on('click', '.ms-elem-selection', function(){
+            that.deselect($(this).data('ms-value'));
+          });
+        }
+
+
+        that.$selectionUl.on('mouseenter', '.ms-elem-selection', function(){
+          $('li', that.$selectionUl).removeClass('ms-hover');
+          $(this).addClass('ms-hover');
+        }).on('mouseleave', function(){
+          $('li', that.$selectionUl).removeClass('ms-hover');
+        });
+
+        that.$selectableUl.on('focusin', function(){
+          $(this).addClass('ms-focus');
+          that.$selectionUl.focusout();
+        }).on('focusout', function(){
+          $(this).removeClass('ms-focus');
+          $('li', that.$container).removeClass('ms-hover');
+        });
+
+        that.$selectionUl.on('focusin', function(){
+          $(this).addClass('ms-focus');
+        }).on('focusout', function(){
+          $(this).removeClass('ms-focus');
+          $('li', that.$container).removeClass('ms-hover');
+        });
+
+        ms.on('focusin', function(){
+          ms.focusout();
+          that.$selectableUl.focusin();
+        }).on('focusout', function(){
+          that.$selectableUl.removeClass('ms-focus');
+          that.$selectionUl.removeClass('ms-focus');
+        });
+
+        ms.onKeyDown = function(e, keyContainer){
+          var ul = that.$container.find('.'+keyContainer).find('.ms-list'),
+              lis = ul.find('li:visible:not(.ms-optgroup-label, .ms-optgroup-container)'),
+              lisNumber = lis.length,
+              liFocused = ul.find('li.ms-hover'),
+              liFocusedIndex = liFocused.length > 0 ? lis.index(liFocused) : -1,
+              ulHeight = ul.innerHeight(),
+              liHeight = lis.first().outerHeight(true),
+              numberOfLisDisplayed = Math.floor(ulHeight / liHeight);
+
+          if (e.keyCode == 32){ // space
+            if (liFocused.length >0){
+              var method = keyContainer == 'ms-selectable' ? 'select' : 'deselect';
+              if (keyContainer == 'ms-selectable'){
+                that.select(liFocused.data('ms-value'));
+              } else {
+                that.deselect(liFocused.data('ms-value'));
+              }
+              lis.removeClass('ms-hover');
+              that.scrollTo = 0;
+              ul.scrollTop(that.scrollTo);
+            }
+          } else if (e.keyCode == 40){ // Down
+            if (lis.length > 0){
+              var nextLiIndex = liFocusedIndex+1,
+                  nextLi = (lisNumber != nextLiIndex) ? lis.eq(nextLiIndex) : lis.first(),
+                  ulPosition = ul.position().top,
+                  nextLiPosition = nextLi.position().top;
+
+              lis.removeClass('ms-hover');
+              nextLi.addClass('ms-hover');
+
+              if (lisNumber == nextLiIndex){
+                that.scrollTo = 0;
+              } else if (nextLiPosition >= (ulPosition + (numberOfLisDisplayed * liHeight))){
+                that.scrollTo += liHeight;
+              }
+              ul.scrollTop(that.scrollTo);
+            }
+          } else if (e.keyCode == 38){ // Up
+            if (lis.length > 0){
+              var prevLiIndex = Math.max(liFocusedIndex-1, -1),
+                  prevLi = lis.eq(prevLiIndex),
+                  ulPosition = ul.position().top,
+                  prevLiPosition = prevLi.position().top;
+
+              lis.removeClass('ms-hover');
+              prevLi.addClass('ms-hover');
+              if (prevLiPosition <= ulPosition){
+                that.scrollTo -= liHeight;
+              } else if (prevLiIndex < 0){
+                that.scrollTo = (lisNumber - numberOfLisDisplayed) * liHeight;
+              }
+              ul.scrollTop(that.scrollTo);
+            }
+          } else if (e.keyCode == 37 || e.keyCode == 39){
+            if (that.$selectableUl.hasClass('ms-focus')){
+              that.$selectableUl.focusout();
+              that.$selectionUl.focusin();
+            } else {
+              that.$selectableUl.focusin();
+              that.$selectionUl.focusout();
+            }
+          }
+        }
+
+        ms.on('keydown', function(e){
+          if (ms.is(':focus')){
+            var keyContainer = that.$selectableUl.hasClass('ms-focus') ? 'ms-selectable' : 'ms-selection';
+            ms.onKeyDown(e, keyContainer);
+          }
+        });
+      }
+
+      var selectedValues = ms.find('option:selected').map(function(){ return $(this).val() }).get();
+      that.select(selectedValues, 'init')
+
+      if (typeof that.options.afterInit == 'function') {
+        that.options.afterInit.call(this, this.$container);
+      }
+    },
+
+    'refresh' : function() {
+      $("#ms-"+this.$element.attr("id")).remove();
+      this.init(this.options);
+    },
+
+    'select' : function(value, method){
+      if (typeof value == 'string')
+        value = [value]
+      var that = this,
+          ms = this.$element,
+          msIds = $.map(value, function(val, index){ return(that.sanitize(val)) }),
+          selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'),
+          selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection'),
+          options = ms.find('option').filter(function(index){ return($.inArray(this.value, value) > -1) });
+
+      if (selectables.length > 0){
+        selectables.addClass('ms-selected').hide();
+        selections.addClass('ms-selected').show();
+        options.prop('selected', true);
+
+        var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container');
+        if (selectableOptgroups.length > 0){
+          selectableOptgroups.each(function(){
+            var selectablesLi = $(this).find('.ms-elem-selectable');
+            if (selectablesLi.length == selectablesLi.filter('.ms-selected').length){
+              $(this).find('.ms-optgroup-label').hide();
+            }
+          });
+
+          var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container');
+          selectionOptgroups.each(function(){
+            var selectionsLi = $(this).find('.ms-elem-selection');
+            if (selectionsLi.filter('.ms-selected').length > 0){
+              $(this).find('.ms-optgroup-label').show();
+            }
+          });
+        }
+        if (method != 'init'){
+          that.$selectionUl.focusout();
+          that.$selectableUl.focusin();
+          ms.trigger('change');
+          if (typeof that.options.afterSelect == 'function') {
+            that.options.afterSelect.call(this, value);
+          }
+        }
+      }
+    },
+
+    'deselect' : function(value){
+      if (typeof value == 'string')
+        value = [value]
+      var that = this,
+          ms = this.$element,
+          msIds = $.map(value, function(val, index){ return(that.sanitize(val)) }),
+          selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'),
+          selections = this.$selectionUl.find('#' + msIds.join('-selection, #')+'-selection').filter('.ms-selected'),
+          options = ms.find('option').filter(function(index){ return($.inArray(this.value, value) > -1) });
+
+      if (selections.length > 0){
+        selectables.removeClass('ms-selected').show();
+        selections.removeClass('ms-selected').hide();
+        options.prop('selected', false);
+
+        var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container');
+        if (selectableOptgroups.length > 0){
+          selectableOptgroups.each(function(){
+            var selectablesLi = $(this).find('.ms-elem-selectable');
+            if (selectablesLi.filter(':not(.ms-selected)').length > 0){
+              $(this).find('.ms-optgroup-label').show();
+            }
+          });
+
+          var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container');
+          selectionOptgroups.each(function(){
+            var selectionsLi = $(this).find('.ms-elem-selection');
+            if (selectionsLi.filter('.ms-selected').length == 0){
+              $(this).find('.ms-optgroup-label').hide();
+            }
+          });
+        }
+        this.$selectableUl.focusout();
+        this.$selectionUl.focusin();
+        ms.trigger('change');
+        if (typeof that.options.afterDeselect == 'function') {
+          that.options.afterDeselect.call(this, value);
+        }
+      }
+    },
+
+    'select_all' : function(){
+      var ms = this.$element;
+
+      ms.find('option').prop('selected', true);
+      this.$selectableUl.find('.ms-elem-selectable').addClass('ms-selected').hide();
+      this.$selectionUl.find('.ms-optgroup-label').show();
+      this.$selectableUl.find('.ms-optgroup-label').hide();
+      this.$selectionUl.find('.ms-elem-selection').addClass('ms-selected').show();
+      this.$selectionUl.focusin();
+      this.$selectableUl.focusout();
+      ms.trigger('change');
+    },
+
+    'deselect_all' : function(){
+      var ms = this.$element;
+
+      ms.find('option').prop('selected', false);
+      this.$selectableUl.find('.ms-elem-selectable').removeClass('ms-selected').show();
+      this.$selectionUl.find('.ms-optgroup-label').hide();
+      this.$selectableUl.find('.ms-optgroup-label').show();
+      this.$selectionUl.find('.ms-elem-selection').removeClass('ms-selected').hide();
+      this.$selectableUl.focusin();
+      this.$selectionUl.focusout();
+      ms.trigger('change');
+    },
+
+    isDomNode: function (attr){
+      return (
+        attr &&
+        typeof attr === "object" &&
+        typeof attr.nodeType === "number" &&
+        typeof attr.nodeName === "string"
+      );
+    },
+
+    sanitize: function(value){
+      return(value.replace(/[^A-Za-z0-9]*/gi, '_'));
+    }
+  }
+
+  /* MULTISELECT PLUGIN DEFINITION
+   * ======================= */
+
+  $.fn.multiSelect = function () {
+    var option = arguments[0],
+        args = arguments;
+
+    return this.each(function () {
+      var $this = $(this),
+          data = $this.data('multiselect'),
+          options = $.extend({}, $.fn.multiSelect.defaults, $this.data(), typeof option == 'object' && option);
+
+      if (!data) $this.data('multiselect', (data = new MultiSelect(this, options)))
+
+      if (typeof option == 'string'){
+        data[option](args[1])
+      } else {
+        data.init();
+      }
+    })
+  }
+
+  $.fn.multiSelect.defaults = {
+    selectableOptgroup: false,
+    disabledClass : 'disabled',
+    dblClick : false
+  };
+
+  $.fn.multiSelect.Constructor = MultiSelect
+
+}(window.jQuery);
+
+$(function(){
+  $('select[multiple]').multiSelect({
+    disabledClass : 'disabled disabled_item',
+    selectableHeader: $("<div class='ms-header'>All items <input placeholder='Filter' class='ms-filter' type='text'><a href='#' title='Select All' class='ms-select-all pull-right icon-plus icon-white'></a></div>"),
+    selectionHeader: $("<div class='ms-header'>Selected items<a href='#' title='Deselect All' class='ms-deselect-all pull-right icon-minus icon-white'></a></div>")
+  });
+});
+$(document).on('click', '.ms-select-all', function () {
+  $(this).closest('.controls').find('select[multiple]').multiSelect('select_all');
+  return false;
+});
+$(document).on('click', '.ms-deselect-all', function () {
+  $(this).closest('.controls').find('select[multiple]').multiSelect('deselect_all');
+  return false;
+});
+
+$(document).on('keyup', '.ms-filter', function() {
+  ms_filter(this);
+});
+
+$(function(){
+  $('select[multiple]').each(function(i,item){
+    var mismatches = $(item).attr('data-mismatches');
+    if (!(mismatches == null || mismatches == 'undefined')) {
+      var missing_ids = $.parseJSON(mismatches);
+      $.each(missing_ids, function(index,missing_id){
+        opt_id = (missing_id +"").replace(/[^A-Za-z0-9]*/gi, '_')+'-selectable';
+        $('#ms-'+$(item).attr('id')).find('#'+opt_id).addClass('delete').tooltip({title: "Select this since it belongs to a host", placement: "left"});
+      })
+    }
+  })
+});
+$.extend($.expr[':'], {
+  'containsi': function(elem, i, match)
+  {
+    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+  }
+});
+function ms_filter(item){
+  var term = $(item).val().trim();
+  var selectable =   $(item).closest('.ms-selectable').find('.ms-elem-selectable');
+
+  if (term.length > 0) {
+    selectable.addClass('hide');
+    selectable.find('span:containsi('+term+')').parent('li').removeClass('hide');
+  } else {
+    selectable.removeClass('hide');
+  }
+}