var jsTabs = new Class({
	_handlers : [],
	_contents : [],

	_clicked : null,
	_choosed : null,

	initialize : function(handlers, contents) {
		if(handlers.length == contents.length) {
			this._handlers = handlers;
			this._contents = contents;

			this._handlers.each(function (el) {
				el.addEvent('click', this.showFromHandler.bindWithEvent(this));
			}, this);
		}
	},

	hideAll : function() {
		this._contents.each(function(el) {
			el.setStyle('display', 'none');
		});
		this._handlers.each(function(el) {
			el.setProperty('class', 'reposo');
		});
	},

	/**
	 * Muestra cierto tab
	 * En index puede indicarse tanto un índice numérico (inicio en 0) que
	 * directamente mostraría esa posición entre las opciones dada en el
	 * constructor o bien permite un id del tag HTML. Para el caso del id
	 * del tag HTML, con el parámetro where se indica si se tiene que
	 * buscar sobre los contenidos (false) o si tiene que buscarse sobre
	 * los tabs (true). La opción por defecto es false para buscar sobre 
	 * contenidos.
	 *
	 * @param index índice númerico o identificador del tag HTML
	 * @param where bool false en el caso de buscar sobre id de tags de contenidos, true para buscar sobre tabs
	 */
	show : function(index, where) {
		var cElegido = null;
		var hElegido = null;
		var searchIn = null;

		this._clicked = index;

		if(where)
			searchIn = this._handlers;
		else
			searchIn = this._contents;
		
		// Es un número -> índice
		if(index.match(/^\d+$/)) {
			cElegido = this._contents[index];
			hElegido = this._handlers[index];
		}
		// Es un nombre de tab
		else {
			this._choosed = null;

			$each(searchIn, function(el, i) {
				if(el.getProperty('id') == this._clicked) {
					this._choosed = i;
				}
			}, this);

			if(this._choosed != null) {
				cElegido = this._contents[this._choosed];
				hElegido = this._handlers[this._choosed];
			}
		}
		
		if(cElegido != null) {
			this.hideAll();
			this.setOn(hElegido, cElegido);
		}
	},

	showFromHandler : function (e) {
		
		this.show(e.target.getProperty('id'), true);
	},

	setOn : function (handler, content) {
		this.hideAll();
		content.setStyle('display', 'block');
		handler.setProperty('class', 'activo').blur();
	}
});