@model IEnumerable<Guid>
<script type="text/javascript">
	$(document).ready(function () {
		$("#agregarOtroPonente").subpanel({ success: add_new_otro_ponente, url: '/PersonaApi/Nueva' });
		$("#add").click(select_otro_ponente);
		$("#remove").click(remove_otro_ponente);

		var width = $("#posiblesOtrosPonentes").width();
		$("#OtrosPonentes").width(width);
	});

	function add_new_otro_ponente(data) {
		if (data.Succeful) {
			var opcion = $("<option></option>").attr("value", data.Id).attr("selected", "selected").html(data.Nombre);
			add_otro_ponente(opcion);
		}
		else {
			alert(data.Message);
			return false;
		}
	}

	function select_otro_ponente(event) {
		event.preventDefault();
		var personas = $("#posiblesOtrosPonentes");
		var current = $("option:selected", personas);
		add_otro_ponente(current);
	}

	function add_otro_ponente(option) {
		var OtrosPonentes = $("#OtrosPonentes");
		option.appendTo(OtrosPonentes);
	}

	function remove_otro_ponente(event) {
		event.preventDefault();

		$("option:selected", $("#OtrosPonentes")).each(function () {
			var current = $(this);
			var posiblesOtrosPonentes = $("#posiblesOtrosPonentes");
			current.appendTo(posiblesOtrosPonentes);

			// ordenamos los ponentes
			var options = $("option", posiblesOtrosPonentes);

			options.sort(function (a, b) {
				if (a.text > b.text) return 1;
				else if (a.text < b.text) return -1;
				else return 0
			});

			posiblesOtrosPonentes.empty().append(options);

			posiblesOtrosPonentes.attr("value", current.val());
		});
	}
</script>
@Html.ListBox(string.Empty, Html.GetOtrosPonentes(Model), new { style = "vertical-align: top;" })
<div style="display: inline-block">
	<div>
		<a class="ajax-button ui-state-default ui-corner-all" id="add"><span class="ui-icon ui-icon-triangle-1-w"></span></a>
		@Html.DropDownList("posiblesOtrosPonentes", Html.GetOtrosPonentesExcepto(Model), new { style = "vertical-align: top;", id = "posiblesOtrosPonentes" })
	</div>
	<div>
		<a class="ajax-button ui-state-default ui-corner-all" id="remove"><span class="ui-icon ui-icon-triangle-1-e"></span></a>
	</div>
	<div>
		<div id="agregarOtroPonente"></div>
	</div>
</div>