//######################################
//######################################
//###								 ###
//###		   DragBox 0.1			 ###
//###								 ###
//######################################
//######################################

//De Constructor
function dragbox(fieldname,size,width){
	//Properties
	this.fieldname = fieldname;
	
	if(size == undefined) this.select_size  = "10";
	else this.select_size  = size;
	
	if(width == undefined) this.select_width = "200";
	else this.select_width = width;
	
	this.buttontoleft_text = "<=";
	this.buttontoright_text = "=>";
	
	this.alt_left = "<=";
	this.alt_right = "=>";
	
	this.data_left = null;
	this.data_right = null;
	
	this.image_left = '';
	this.image_right = '';
	
	this.type = 'button';
	
	//Methods
	this.show = showdragbox;
	this.addstandarddata = addstandarddata;
}

//Functie die zorgt dat het formelement getoont wordt
function showdragbox(){
	document.writeln('<table class="dragbox_table">');
	document.writeln('<tr>');

	//linker selectbox
	document.writeln('<td><select id="select_left_'+this.fieldname+'" size="'+this.select_size+'" class="dragbox_select" style="width:'+this.select_width+'px" onfocus="deselectall(\'right\', \''+this.fieldname+'\')" multiple="multiple"></td>');
	
	if(this.type == 'button') {
		//Schuifknoppen
		document.writeln('<td valign="middle"><input type="button" class="dragbox_button" value="'+this.buttontoright_text+'" onclick="move(\'right\', \''+this.fieldname+'\')"><br><br><input type="button" class="dragbox_button" value="'+this.buttontoleft_text+'"  onclick="move(\'left\', \''+this.fieldname+'\')"></td>');
	}
	else if(this.type == 'image') {
		//Schuif afbeeldingen
		document.writeln('<td valign="middle"><img src="'+this.image_right+'" alt="'+this.alt_right+'" title="'+this.alt_right+'" class="dragbox_image" onclick="move(\'right\', \''+this.fieldname+'\')" /><br /><img src="'+this.image_left+'" alt="'+this.alt_left+'" title="'+this.alt_left+'" class="dragbox_image" onclick="move(\'left\', \''+this.fieldname+'\')" /></td>');	
	}
	
	//rechter selectbox
	document.writeln('<td><select id="select_right_'+this.fieldname+'" size="'+this.select_size+'" class="dragbox_select" style="width:'+this.select_width+'px"  onfocus="deselectall(\'left\', \''+this.fieldname+'\')" multiple="multiple"></td>');
	
	document.writeln('</tr>');
	document.writeln('</table>');
	document.writeln('<input type="hidden" name="'+this.fieldname+'_left[]" id="leftfield_'+this.fieldname+'">');
	document.writeln('<input type="hidden" name="'+this.fieldname+'_right[]" id="rightfield_'+this.fieldname+'">');
	
	this.addstandarddata();
}

//Functie die de standaard data in de fields laad
function addstandarddata(){
	//eerst dingen in linker veld laden
	for(i=0;i<this.data_left.length;i++){
		document.getElementById('select_left_'+this.fieldname).options[i] = new Option(this.data_left[i][0], this.data_left[i][1]);
	}
	
	//eerst dingen in rechter veld laden
	for(i=0;i<this.data_right.length;i++){
		document.getElementById('select_right_'+this.fieldname).options[i] = new Option(this.data_right[i][0], this.data_right[i][1]);
	}
	
	updatehiddenfields(this.fieldname);
}

function move(to, fieldname){
	if(to == "right"){
		while(document.getElementById('select_left_'+fieldname).selectedIndex >= 0){
			document.getElementById('select_right_'+fieldname).options[document.getElementById('select_right_'+fieldname).options.length] = new Option(document.getElementById('select_left_'+fieldname).options[document.getElementById('select_left_'+fieldname).selectedIndex].text, document.getElementById('select_left_'+fieldname).options[document.getElementById('select_left_'+fieldname).selectedIndex].value);
			document.getElementById('select_left_'+fieldname).options[document.getElementById('select_left_'+fieldname).selectedIndex] = null;
		}
	}
	else if(to == "left"){
		while(document.getElementById('select_right_'+fieldname).selectedIndex >= 0){
			document.getElementById('select_left_'+fieldname).options[document.getElementById('select_left_'+fieldname).options.length] = new Option(document.getElementById('select_right_'+fieldname).options[document.getElementById('select_right_'+fieldname).selectedIndex].text, document.getElementById('select_right_'+fieldname).options[document.getElementById('select_right_'+fieldname).selectedIndex].value);
			document.getElementById('select_right_'+fieldname).options[document.getElementById('select_right_'+fieldname).selectedIndex] = null;
		}
	}
	updatehiddenfields(fieldname);
}

//Functie om alle select items te deselecteren
function deselectall(which, fieldname){
	for(var i = 0;i < document.getElementById('select_'+which+'_'+fieldname).length;i++){
		document.getElementById('select_'+which+'_'+fieldname).options[i].selected = false;
	}
}

//Functie om hidden fields te laten updaten
function updatehiddenfields(fieldname){
	var selectleft = new Array();
	var selectright = new Array();
	
	//Eerste gegevens links er in gooien
	for(i=0;i<document.getElementById('select_left_'+fieldname).options.length;i++){
		selectleft[i] = document.getElementById('select_left_'+fieldname).options[i].value;
	}
	document.getElementById('leftfield_'+fieldname).value = selectleft;
	
	
	//En dan rechts
	for(i=0;i<document.getElementById('select_right_'+fieldname).options.length;i++){
		selectright[i] = document.getElementById('select_right_'+fieldname).options[i].value;
	}
	document.getElementById('rightfield_'+fieldname).value = selectright;
}