import $ from "jquery"
import multiselect from "multiselect"

$('#my-select').multiSelect();

$('#my-select').multiSelect({
	afterInit: function(container){}	// Function to call after the multiSelect initilization.
	afterSelect: function(values){} 	// Function to call after one item is selected.
	afterDeselect: function(values){} 	// Function to call after one item is deselected.

	selectableHeader: null			// Text or HTML to display in the selectable header.
	selectionHeader: null			// Text or HTML to display in the selection header.
	selectableFooter: null			// Text or HTML to display in the selectable footer.
	selectionFooter: null 			// Text or HTML to display in the selection footer.

	selectableOptgroup: false		// Cick on optgroup will select all nested options when set to true.
	keepOrder: false 			// The selected items will be displayed in the same order than they are selected.
	dblClick: false 			// Replace the defautl click event to select items by the dblclick one.
	searchEngine: false			// Add an input text to search/filter elements

	cssClass: ""				// Add a custom CSS class to the multiselect container.
	disabledClass: 'disabled' 		// CSS class for disabled items.

	previewButton: function($button){}	// Add a preview button and call the function when clicked
	selectButton: true|function($button){}	// Add a select button and call the function when clicked. If set to true, the callback function is simply the select/deselect. If set to a function, it is called AFTER select/deselect. Note that the label itself is not clickable when the button is added
	selectAll: null				// CSS class for a select-all-html-tag that has been added into the DOM (with selectableFooter or selectableHeader for instance)
	deselectAll: null			// CSS class for a deselect-all-html-tag that has been added into the DOM (with selectableFooter or selectableHeader for instance)
	counterClass: null			// CSS class for two html tags that will contain the numbers of elements available in each list. They must be in the ms-container so they should be created using selectableFooter or selectableHeader)
	refreshClass: null			// CSS class for a tag that will reset the selection as it was when the page was first loaded
})