;(function($) {
	$.fn.msp = function(options) {
		var opts = $.extend({}, $.fn.msp.defaults, options);
		if (this.length == 1)
			return new $.Msp(this, opts);
		return this.each(function() {
			return new $.Msp(this, opts);
		});
	}
	$.fn.msp.defaults = {
		maxSelected: 0
	};

	$.Msp = function(container, opts) {
		container = $(container).data("msp", this);
		if (container.length == 0)
			return null;
		this.val = function(value) {
			if (value == undefined) {
				var ret = [];
				for (var i = 0, l = selectedOptions.length; i < l; i++)
					ret[ret.length] = selectedOptions[i].value;
				return ret;
			}
			selectedOptions.length = 0;
			value = $.makeArray(value);
			for (var i = 0, l = value.length; i < l; i++)
				value[i] = parseInt(value[i], 10);
			for (var i = 0, l = options.length; i < l; i++) {
				var found = false;
				for (var j = 0, lj = value.length; j < lj; j++)
					if (options[i].value == value[j]) {
						found = true;
						break;
					}
				var option = options[i];
				if (found)
					selectedOptions[selectedOptions.length] = option;
				$(option.element).toggleClass("msp_selected", found);
			}
			_update();
			_render();
			if (options.length > selectedOptions.length)
				cmd.show();
		};
		this.text = function() {
			var ret = [];
			for (var i = 0, l = selectedOptions.length; i < l; i++)
				ret[ret.length] = selectedOptions[i].text;
			return ret;
		};
		this.empty = function() {
			for (var i = 0, l = selectedOptions.length; i < l; i++)
				$(selectedOptions[i].element).removeClass("msp_selected");
			selectedOptions.length = 0;
			cmd.show();
			_render();
		};
		//
		var self = this;
		var select = container.find("select").css("visibility", "visible").hide().blur(function() {
			$(this).hide();
			if ((opts.maxSelected == 0 || opts.maxSelected > selectedOptions.length) && options.length > selectedOptions.length && selectOptions.length > 1)
				cmd.show().focus();
		}).change(function() {
			var selectedIndex = this.selectedIndex;
			if (selectedIndex == 0)
				return;
			var value = parseInt(this.options[selectedIndex].value, 10);
			_add(value, selectedIndex);
			_render();
			select.blur();
		});
		var tabIndex = select.attr("tabIndex");
		var selectOptions = select.attr("options");
		var options = [];
		for (var i = 0, l = selectOptions.length; i < l; i++) {
			var opt = selectOptions[i];
			var level = parseInt(opt.getAttribute("level"));
			var option = options[options.length] = { element: opt, value: parseInt(opt.value, 10), text: opt.text, level: level };
			opt.value = options.length - 1;
			if (level)
				opt.text = " " + (i < length - 1 && level == parseInt(selectOptions[i + 1].getAttribute("level")) ? "\u2524" : "\u2518") + " " + opt.text;
		}
		var firstOption = document.createElement("option");
		firstOption.text = "בחר...";
		try {
			select.get(0).add(firstOption, selectOptions[0]);
		}
		catch (ex) {
			select.get(0).add(firstOption, 0);
		}
		select.attr("selectedIndex", 0);
		var cmd = $("<a" + (tabIndex ? " tabindex=\"" + tabIndex + "\"" : "") + "/>")
			.attr("href", "")
			.addClass("add")
			.html("הוסף [+]")
			.prependTo(container)
			.bind("click", function(event) {
				event.preventDefault();
				cmd.hide();
				$(select).attr("selectedIndex", 0).show().focus();
			});
		var caption = $("<span/>").addClass("msp_caption").prependTo(container);
		var selectedOptions = [];
		var input = container.find("input[type=\"hidden\"]");
		if (input.val()) {
			var values = input.val().split(",");
			for (var i = 0, l = values.length; i < l; i++)
				values[i] = parseInt(values[i], 10);
			for (var i = 0, l = options.length; i < l; i++) {
				var found = false;
				for (var j = 0, lj = values.length; j < lj; j++)
					if (options[i].value == values[j]) {
						found = true;
						break;
					}
				if (found) {
					var option = options[i];
					$(option.element).addClass("msp_selected");
					selectedOptions[selectedOptions.length] = option;
				}
			}
		}
		if (selectedOptions.length)
			_render();
		_update();
		//
		function _add(index, selectedIndex) {
			var option = options[index];
			for (var i = 0; i < selectedOptions.length; i++)
				if (option.value == selectedOptions[i].value)
					return;
			selectedOptions[selectedOptions.length] = option;
			$(selectOptions[selectedIndex]).addClass("msp_selected");
			_update();
		}
		function _remove(index) {
			$(selectedOptions[index].element).removeClass("msp_selected");
			selectedOptions.splice(index, 1);
			_update();
			if (options.length > selectedOptions.length)
				cmd.show();
		}
		function _update() {
			input.val(self.val().join(","));
		}
		function _render() {
			caption.empty();
			for (var i = 0; i < selectedOptions.length; i++) {
				var opt = selectedOptions[i];
				$("<a/>")
					.attr("href", "")
					.attr("tabindex", tabIndex)
					.html(opt.text)
					.appendTo($("<span/>").html(i == 0 ? "" : ", ").appendTo(caption))
					.click(function(event) {
						event.preventDefault();
						_remove($(this).parent().parent().children().index($(this).parent()));
						_render();
					});
			}
			if (selectedOptions.length)
				caption.append(" &nbsp; ");
		}
	};
})(jQuery);