modal.js

var Modal = function (element, options) {
	this.is_open = false;
	this.element = $(element);
	this.options = options;

	if (typeof this.options == 'undefined') {
		this.options = {};
	}

	var modal = this;

	this.element.select('.modal-close').invoke('observe', 'click', (function (event) {
		event.stop();
		this.close();
	}).bind(this));

	Hotkeys.bind('esc', this.close.bind(this));
};

Modal.prototype.open = function () {
	if (this.is_open) {
		return;
	}

	this.element.show();
	this.getOverlay().show();

	if (typeof(this.options.onOpen) == 'function') {
		this.options.onOpen(this);
	}

	this.is_open = true;
};

Modal.prototype.close = function () {
	if (!this.is_open) {
		return;
	}
		
	if (typeof this.options.onBeforeClose == 'function') {
		if (!this.options.onBeforeClose(this)) {
			return false;
		}
	}

	this.element.hide();
	this.getOverlay().hide();

	if (typeof(this.options.onClose) == 'function') {
		this.options.onClose(this);
	}

	this.is_open = false;
};

Modal.prototype.getBody = function () {
	return this.element.down('.modal-body');
};

Modal.prototype.getOverlay = function () {
	return this.element.previous('.modal-backdrop');
};

Modal.prototype.getFooter = function () {
	return this.element.down('.modal-footer');
};

Modal.prototype.scrollBottom = function () {
	this.getBody().scrollTop = this.getBody().scrollHeight;
};

Modal.prototype.addTrigger = function (element) {
	element.on('click', (function (event) {
		event.stop();
		this.open();
	}).bind(this));
};

Modal.prototype.ajaxify = function (options) {
	var modal = this;

	if (typeof options == 'undefined') {
		options = {};
	}

	if (typeof options.onSuccess == 'undefined') {
		options.onSuccess = this.close.bind(this);
	}
	if (typeof options.onError == 'undefined') {
		options.onError = this.error.bind(this);
	}

	var form = this.element.down('form');
	if (!form) {
		return false;
	}

	form.on('submit', function (event) {
		event.stop();

		form.select('*[type="submit"]').invoke('disable');

		new Ajax.Request(form.action, {
			parameters: form.serialize(true),
			onSuccess: function (transport) {
				form.select('*[type="submit"]').invoke('enable');

				var response = transport.responseText.evalJSON();
				if (typeof response.ok != 'undefined' && response.ok == true) {
					return options.onSuccess(response);
				}

				if (typeof response.error != 'undefined') {
					return options.onError(response.error);
				}
			}
		});
	});	
};

Modal.prototype.error = function (error) {
	var container = this.getBody().down('.alert-error');
	if (container) {
		container.update();
	} else {
		var container = new Element('div', {className: 'alert alert-error'});
		this.getBody().insert({top: container});
	}

	if (error instanceof Array) {
		if (error.length == 1) {
			var message = error[0];
		} else {
			container.update((new Element('h4', {className: 'alert-heading'})).update('Ooops!'));

			var message = new Element('ul', {style: 'margin-bottom: 0'});
			for (var i = 0; i < error.length; i++) {
				message.insert((new Element('li')).update(error[i]));
			}
		}
	} else {
		var message = error;
	}

	container.show().insert(message);
};