/* 
Author: Marcel Scherzer
Copyright: April, 2009

ItemPicker component
Implement two multiple select boxes. Select items can be transferred between the 
two boxes by clicking the left and right buttons.

Usage:
Within the HTML place a <div> tag with an ID attribute which will be the container 
for our ItemPicker.

Create a new ItemPicker passing in the name of the formfield which is to be submitted as part
of the form. And the ID of the container which is to house the form. 

Because of some javascript weirdness we have to pass the instance of ItemPicker back into
the object using the init method. We need to do this so that the internal buttons reference
the correct object.

As part of the init we can also include html that is written above the left and right select
boxes.

To populate the box with javascript we can pass a two dimensional array to the addData method.
index 0=value,1=text that is shown in the option.

To prepopulate call addData(), select() and toDst() in sequence.
*/
var ItemPicker = function(name,container){
	this._init(name,container); /* Use private init. */
	return;
};
ItemPicker.prototype = {
	srcId:'',
	dstId:'',
	src:'',
	dst:'',
	name:'',
	class_odd:'row_odd',
	class_even:'row_even',
	init:function(instance,leftHead,rightHead){
		var btnA = dojo.byId('btnA_' + this.name);
		var btnB = dojo.byId('btnB_' + this.name);
		btnA.onclick = function(){instance.moveToRight()};
		btnB.onclick = function(){instance.moveToLeft()};
		this.src = dojo.byId(this.srcId);
		this.dst = dojo.byId(this.dstId);
		if(leftHead!=undefined) this._setHead('left',leftHead);
		if(rightHead!=undefined) this._setHead('right',rightHead);
		return;
	},
	addData:function(target,data){
		var select = this._getTarget(target);
		for(var i=0;i<data.length;i++){
			select.options[i] = new Option(data[i][1],data[i][0]);
		}
		this._sort(select);
		return;
	},
	select:function(target,data){
		var select = this._getTarget(target);
		select.focus(); /* Without this nothing happens in IE6. */ 
		var i = 0;
		while(i<data.length){
			for(var j=0;j<select.options.length;j++){
				if(select.options[j].value == data[i]) select.options[j].selected = true;
			}
			i++;
		}
		return;
	},
	selectAll:function(target){
		var select = this._getTarget(target);
		select.focus(); /* Without this nothing happens in IE6. */ 
		for(var i=0;i<select.options.length;i++){
			select.options[i].selected = true;
		}
		return;
	},
	empty:function(target){
		var select = this._getTarget(target);
		select.options.length = 0;
	},
	moveToLeft:function(){
		this._move(this.dst,this.src);
		this._sort(this.src);
		this._sort(this.dst);
		return;
	},
	moveToRight:function(){
		this._move(this.src,this.dst);
		this._sort(this.src);
		this._sort(this.dst);
		return;
	},
	getValue:function(){
		var select = this._getTarget('right');
		var value = '';
		for(var i=0;i<select.options.length;i++){
			value = value + select.options[i].value;
			if(i!=select.options.length-1) value = value + ',';
		}
		return value;
	},
	_setHead:function(target,value){
		if(target=='left'){
			var head = dojo.byId('srcHead_'+ this.name);
		}else{
			var head = dojo.byId('dstHead_'+ this.name);
		}
		head.innerHTML = value;
		return;
	},
	_move:function(source,target){
		var s_option = source.options;
		var t_option = target.options;
		var i = 0;
		while(i < s_option.length){
			 if(s_option[i].selected){
			 	t_option[t_option.length] = new Option(s_option[i].text,s_option[i].value);
				s_option[i] = null;
			 }else{
			 	i++
			 }
		}
		return;
	},
	_sort:function(select){/* Sort the items in a select box. */
		var option = select.options;
		var data = new Array();
		for(var i=0;i<option.length;i++){
			data[i] = new Object();
			data[i].text = option[i].text;
			data[i].value = option[i].value;
		}
		var sorted = cfkit_util.sort(data,'text');
		for(var i=0;i<sorted.length;i++){
			option[i] = new Option(sorted[i].text,sorted[i].value);
			/* Alternate row color */
			if(i % 2 != 0){
				option[i].className = this.class_odd;
			}else{
				option[i].className = this.class_even;
			}
		}
		return;
	},
	_init:function(name,container){
		this.name = name;
		this.srcId = 'src_' + name;
		this.dstId = 'dst_' + name;
		this._create(container);
		return;
	},
	 _create:function(container){
		var btnA = document.createElement("input");
		btnA.setAttribute('id','btnA_' + this.name);
		btnA.setAttribute('type','button');
		btnA.setAttribute('value','>>');
		btnA.className = 'btn_m';
		var btnB = document.createElement("input");
		btnB.setAttribute('id','btnB_' + this.name);
		btnB.setAttribute('type','button');
		btnB.setAttribute('value','<<');
		btnB.className = 'btn_m';
		var tbody = document.createElement("tbody");
		var table = document.createElement("table");
		table.appendChild(tbody);
		var tr = tbody.insertRow(tbody.rows.length);
		td = tr.insertCell(tr.cells.length);
		var srcHead = document.createElement("div");
		srcHead.setAttribute('id','srcHead_'+ this.name);
		td.appendChild(srcHead);
		td.appendChild(this._createSelectBox(this.srcId,''));
		td = tr.insertCell(tr.cells.length);
		td.appendChild(btnA);
		var br = document.createElement("br");
		td.appendChild(br);
		td.appendChild(btnB);
		td = tr.insertCell(tr.cells.length);
		var dstHead = document.createElement("div");
		dstHead.setAttribute('id','dstHead_'+ this.name);
		td.appendChild(dstHead);
		td.appendChild(this._createSelectBox(this.dstId,this.name));
		dojo.byId(container).appendChild(table);
		return;
	},
	_createSelectBox:function(id,name){
		var select = document.createElement('select');
		select.setAttribute('id',id);
		select.setAttribute('name',name);
		select.setAttribute('size','10');
		select.setAttribute('multiple','true');
		select.className = 'itemPicker';
		return select;
	},
	_getTarget:function(target){
		switch(target){
			case 'left':
			return this.src;
			break;
			case 'right':
			return this.dst;
			break;
			default:
			alert('Unknown target, allowed is left or right.');
		}
		return this.src;
	}
};