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

		var width = $("#posiblesPonentes").width();
		$("#@Html.ViewData.ModelMetadata.PropertyName").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 = $("#posiblesPonentes");
		var current = $("option:selected", personas);
		add_otro_ponente(current);
	}

	function add_otro_ponente(option) {
		var Ponentes = $("#@Html.ViewData.ModelMetadata.PropertyName");
		option.appendTo(Ponentes);
	}

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

		$("option:selected", $("#@Html.ViewData.ModelMetadata.PropertyName")).each(function () {
			var current = $(this);
			var posiblesPonentes = $("#posiblesPonentes");
			current.appendTo(posiblesPonentes);

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

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

			posiblesPonentes.empty().append(options);

			posiblesPonentes.attr("value", current.val());
		});
	}
</script>
@Html.ListBox(string.Empty, Html.GetPonentes(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("posiblesPonentes", Html.GetPonentesExcepto(Model), new { style = "vertical-align: top;", id = "posiblesPonentes" })
	</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="agregarPonente"></div>
	</div>
</div>