@model IEnumerable<Guid>
<script type="text/javascript">
    $(document).ready(function () {
        $("form:first").submit(function () {
            select_all_ponentes();
        });

        $("#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 select_all_ponentes() {
        $("#@Html.ViewData.ModelMetadata.PropertyName option").each(function () {
            $(this).attr("selected", "selected");
        });
    }

	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());
	    });
	    select_all_ponentes();
	}
</script>
@Html.ListBox(string.Empty, Html.GetPonentes(Model), new { style = "vertical-align: top; min-width: 160px;" })
<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; min-width: 160px;", 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>