Two Lists

//******************************************************************************
// Función nativa de Javascript que se ha modificado por otra.
// Elimina un (o mas) elemento(s) de un array:
Array.prototype.remove = function(from, to) {
	var rest = this.slice((to || from) + 1 || this.length);
	this.length = from < 0 ? this.length + from : from;
	return this.push.apply(this, rest);
};
//******************************************************************************
 
/*
 * 		Clase Two_lists
 * 
 * 		Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
 * 		que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
 * 		Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
 * 		También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
 * 		que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
 * 		click también se moverá de SELECT.
 * 
 * 		Para instanciar la clase, hay que pasar cuatro parámetros :
 * 		* El primer SELECT
 * 		* El segundo SELECT
 * 		* El INPUT que mueve del primer SELECT al segundo
 * 		* El INPUT que mueve del segundo SELECT al primero
 * 
 * 		La clase posee cuatro funciones a parte de la constructora:
 * 		* moveOptionToSelect2 (option)
 * 			Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
 * 			los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
 * 			option del HTML.
 * 		* moveOptionToSelect1 (option)
 * 			Idem anterior, pero en el otro sentido.
 * 		* updateSelect1 ()
 * 			Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
 * 			Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
 * 		* updateSelect2 ()
 * 			Idem anteior, pero en el segundo SELECT.
 * 
 */
 
var Two_lists = new Class({
	Implements: [Options],
 
	select1 : 	null,
	select2 : 	null,
	asignar :	null,
	liberar :	null,
	options1 : 	new Array(),		// Array interno con los datos de los OPTIONs del primer SELECT
	options2 : 	new Array(),		// Array interno con los datos de los OPTIONs del segundo SELECT
 
	options: {},
 
	//***********************************
	// INITIALIZE
	//	Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los
	//	dos INPUTs que interactuarán en la clase.
	//***********************************
	initialize: function(select1, select2, asignar, liberar){
 
		// guarda el objeto implícito para dentro de las funciones
		var self = this;
 
		this.select1 = select1;
		this.select2 = select2;
		this.asignar = asignar;
		this.liberar = liberar;
 
		//generar el array con todos los options del select1
		this.select1.getElements('option').each( function(option) {
			self.options1.push({
				'id' : option.get('value'),
				'name' : option.get('html'),
				'state' : true
			});
		});
 
		//generar el array con todos los options del select2
		this.select2.getElements('option').each( function(option) {
			self.options2.push({
				'id' : option.get('value'),
				'name' : option.get('html'),
				'state' : true
			});
		});
 
		//crea el evento de asignar para el botón
		this.asignar.addEvent ('click', function () {
			var options_selected = self.select1.getElements('option').filter( function(option){
				return option.get('selected');
			});
 
			options_selected.each ( function (option) {
				self.moveOptionToSelect2(option);
			});
			self.updateSelect2();
		});
 
		//crea el evento de liberar para el botón
		this.liberar.addEvent ('click', function () {
			var options_selected = self.select2.getElements('option').filter( function(option){
				return option.get('selected');
			});
 
			options_selected.each ( function (option) {
				self.moveOptionToSelect1(option);
			});
			self.updateSelect1();
		});
 
		//crea el evento de asignar para el doble click en el option
		this.select1.addEvent ('dblclick', function () {
			self.asignar.fireEvent('click');
		});
 
		//crea el evento de asignar para el doble click en el option
		this.select2.addEvent ('dblclick', function () {
			self.liberar.fireEvent('click');
		});
 
	},   
 
	//***********************************
	// MOVE OPTION TO SELECT2
	//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
	//***********************************
	moveOptionToSelect2 : function( option ) {
 
		// guarda el objeto implícito para dentro de las funciones
		var self = this;
 
		// calcula la posición donde se encuentra el option en el array de options del select original
		var position;
		this.options1.each( function(item, index) {
			if (item.id == option.get('value')) {
				position = index;
			}
		});
 
		// hace el intercambio en los arrays
		this.options2.push(this.options1[position]);
		this.options1.remove(position);
 
		// borra el option del select original
		option.destroy();
 
	},
 
	//***********************************
	// MOVE OPTION TO SELECT1
	//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML
	//***********************************
	moveOptionToSelect1 : function( option ) {
 
		// guarda el objeto implícito para dentro de las funciones
		var self = this;
 
		// calcula la posición donde se encuentra el option en el array de options del select original
		var position;
		this.options2.each ( function(item, index) {
			if (item.id == option.get('value')) {
				position = index;
			}
		});
 
		// hace el intercambio en los arrays
		this.options1.push(this.options2[position]);
		this.options2.remove(position);
 
		// borra el option del select original
		option.destroy();
 
	},		
 
	//***********************************
	// UPDATE SELECT1
	//	Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
	//***********************************
	updateSelect1 : function() {
 
		// guarda el objeto implícito para dentro de las funciones
		var self = this;
 
		// borra los options del select de destino, y lo regera según el array
		this.select1.empty();
 
		this.options1.each ( function(item) {
			if (item.state) {
				op = new Element('option', {
					'id': 'dominio-' + item.id,
					'value': item.id,
					'html': item.name
				});
				op.inject(self.select1);
			}
		});
 
	},
 
	//***********************************
	// UPDATE TO SELECT2
	//	Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.
	//***********************************
	updateSelect2 : function() {
 
		// guarda el objeto implícito para dentro de las funciones
		var self = this;
 
		// borra los options del select de destino, y lo regera según el array
		this.select2.empty();
 
		this.options2.each ( function(item) {
			op = new Element('option', {
			    'id': 'dominio-'+item.id,
			    'value': item.id,
			    'html': item.name
			});
			op.inject(self.select2);
		});
 
	}
});