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-state-default ui-corner-all').click(this.open).appendTo(panel);

		var openSpan = $('<span></span>').addClass('ui-icon ui-icon-plusthick').html('open').appendTo(openLink);

		//boton para cerrar el panel
		closeLink = $('<a></a>')
			.addClass('ajax-button ui-state-default ui-corner-tr ui-corner-tl')
			.css('display', 'none')
			.click(this.close).appendTo(panel);
		var closeSpan = $('<span></span>').addClass('ui-icon ui-icon-minusthick').html('close').appendTo(closeLink);

		var body = $('body');

		// panel principal
		main = $('<div></div>')
		//			.addClass('ui-accordion')
			.addClass('sp-main ui-widget-content ui-corner-bottom')
			.width(settings.width || '400px')
			.css('display', 'none')
			.css('padding', '5px 5px 5px 5px')
			.appendTo(body);

		panel.show();

		if (settings.created != undefined)
			settings.created();
	};

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

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

		if (settings.closed != undefined)
			settings.closed();

	};

	this.open = function () {
		var o = openLink.offset();
		var top = o.top + openLink.outerHeight();
		var left = o.left;

		//main.offset({ top: top, left: left });
		main.css('top', top);
		main.css('left', left);

		$(this).hide();
		closeLink.show();
		main.show();

		// 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);
		if (settings.imageLoding !== undefined) {
			var img = $('<img />').attr('src', settings.imageLoding).attr('alt', 'loading...').appendTo(imgdiv);
		}

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

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

				// buscamos el form que contiene el panel
				var form = $('form', content);

				/*
				if ($('h3', content).length == 0)
				form.before('<h3><h3>');
				$('h3', content).each(function() {
				$(this).addClass('ui-accordion-header ui-helper-reset ui-state-active');
				});

				// Agregamos un div que va a contener el form
				var body = $('<div></div>');
				body.addClass('ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active');
				form.wrap(body);
				*/

				// modificamos el evento submit
				form.submit(dopost);

				if ($.validator != undefined)
					$.validator.unobtrusive.parse(form);

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

				// y seteamos el foco en el primer input
				var nextInput = $("input:visible:first", form);
				nextInput.focus();

				if (settings.loaded != undefined)
					settings.loaded();
			},
			error: function (xhr, text) {
				loading = null;

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

	function dopost(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
		var valid = true;
		if (self.valid !== undefined)
			valid = self.valid();

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

			if (typeof (console) != 'undefined' && console && console.log)
				console.log(data);

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

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