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

        $("#agregarPatrocinador").subpanel({ success: add_new_otro_patrocinador, url: '@Url.Action("Nuevo", "PatrocinadorApi")' });
        $("#add").click(select_otro_patrocinador);
        $("#remove").click(remove_otro_patrocinador);

        var width = $("#posiblesPatrocinadores").width();
        $("#@Html.ViewData.ModelMetadata.PropertyName").width(width);
    });

    function select_all_patrocinadores() {
        $("#@Html.ViewData.ModelMetadata.PropertyName option").each(function () {
            $(this).attr("selected", "selected");
        });
    }

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

	function select_otro_patrocinador(event) {
		event.preventDefault();
		var personas = $("#posiblesPatrocinadores");
		var current = $("option:selected", personas);
		add_otro_patrocinador(current);
	}

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

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

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

			// ordenamos los patrocinadores
			var options = $("option", posiblesPatrocinadores);

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

            posiblesPatrocinadores.empty().append(options);

            posiblesPatrocinadores.attr("value", current.val());
        });
        select_all_patrocinadores();
	}
</script>
@Html.ListBox(string.Empty, Html.GetPatrocinadores(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("posiblesPatrocinadores", Html.GetPatrocinadoresExcepto(Model), new { style = "vertical-align: top; min-width: 160px;", id = "posiblesPatrocinadores" })
	</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>
<!-- TODO: Hacer que el sub-panel funcione con controles HttpPostFile
	<div>
		<div id="agregarPatrocinador"></div>
	</div>
-->
</div>