jQuery.fn.subpanel = function () {
	var panel = $(this[0]);
	var settings = arguments[0] || {};

	var closeLink = null;
	var openLink = null;
	var main = null;
	var loading = null;

	this.create = function () {
		// botón para abrir el panel
		openLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').click(this.open).appendTo(panel);
		var openSpan = $('<span></span>').addClass('ui-icon ui-icon-plusthick').appendTo(openLink);

		closeLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').css('display', 'none').click(this.close).appendTo(panel);
		var closeSpan = $('<span></span>').addClass('ui-icon ui-icon-minusthick').appendTo(closeLink);

		// panel principal
		main = $('<div></div>')
			.addClass('ui-widget')
			.addClass('ui-widget-content')
			.addClass('ui-corner-all')
			.width(settings.width || '400px')
			.css('display', 'none')
			.appendTo(panel);
	};

	this.close = function () {
		if (loading !== undefined && loading !== null) {
			loading.abort();
			settings.aborting();
		}

		$(this).hide();
		openLink.show();
		main.hide();
		main.html('');
	};

	this.open = function () {
		$(this).hide();
		closeLink.show();
		main.show();

		// si hay título, creamos el header
		if (settings.title !== undefined) {
			var header = $('<div></div>')
				.addClass('sp-header').addClass('ui-widget-header')
				.appendTo(main);

			var title = $('<span><span>')
				.html(settings.title)
				.appendTo(header);
		}

		// div que contendrá el html del panel
		var content = $('<div></div>')
			.appendTo(main);

		var imgdiv = $('<div></div>').css('text-align', 'center').css('padding-top', '10px').appendTo(content);
		var img = $('<img />').attr('src', '/Content/loader.gif').attr('alt', 'loading...').appendTo(imgdiv);

		// se invoca la acción con un GET para obtener el contenido del panel
		loading = $.ajax({
			url: settings.action,
			cache: false,
			success: function (data) {
				loading = null;

				// cuando se recibe el contenido del panel, lo agregamos al div contenedor
				content.html(data);

				// form dentro del cual se ejecutará el panel, y del que luego se hará el POST
				var form = $('form', content);

				form.submit(function (event) {
					// prevenimos que se ejecute el submit ya que lo haremos manualmente.
					event.preventDefault();

					var self = $(this);

					/* preguntamos si el formulario es validable y válido, con esto tenemos un problema 
					ya que no se están generando los validadores por un problema entre jquery.validate 
					y ajax */
					var valid = self.valid();
					if (valid === undefined || valid) {

						// tomamos la acción y serializamos el form
						var action = self.attr("action");
						var data = self.serialize();

						// ejecutamos el POST
						$.post(action, data, function (data) {
							// cuando termina de ejecutarse el POST, ejecutamos la acción configurada
							var r = settings.successful(data);

							// si esta acción no devuelve false, cerramos el panel
							if (r === undefined || r)
								closeLink.click();
						});
					}
				});

				$.validator.unobtrusive.parse(form);

				$('input:submit', form).each(function () { $(this).button(); });

				// y seteamos el foco en el primer input
				var nextInput = $("input:visible:first", form);
				nextInput.focus();
			},
			error: function (xhr, text) {
				loading = null;

				if (xhr.status !== 0) {
					content.html(xhr.responseText)
					.addClass('ui-state-error');
				}
				else {
					closeLink.click();
				}
			}
		});

		/*
		var buttons = $('<div></div>')
		.addClass('sp-buttons')
		.appendTo(form);

		var confirm = $('<input/>')
		.attr('type', 'submit')
		.attr('value', settings.confirmButton || 'Save')
		.button()
		.appendTo(buttons);

		var x = $('<a></a>')
		.html(settings.cancelButton || 'Cancel')
		.button()
		.click(function (e) {
		e.preventDefault();
		closeLink.click();
		settings.cancel();
		})
		.appendTo(buttons);
		*/
	};

	this.create();
}