formDesigner.select = Class.create(formDesigner.element, {
		initialize: function($super, container,obj, pob){
			$super(container,obj, pob);
			this.instID = 'formDesigner.select.' + parseInt(Math.random()*1000000);
			this.object_name = "select";
			this.object_type = "select";
			this.container.addClassName('formDesignerHighElement');
			this.draw();
		},
		
		draw : function(){
			this.drawTitle();
			this.drawExample();
			this.drawRemoveLink();
			this.container.insert('<br style="clear:both;"/>');
			this.drawMandatory();
			this.drawMultiSelect();

			if (this.data.values){
				var values = this.data.values.split('!@!@');
				values.each(
					(function(val){
						this._addOption(val);		
					}).bind(this)
				)
			}
			
		},
		
		drawMandatory : function(){
			var mand = new Element('div', {className:'formDesignerLabel'});
			mand.insert(new Element('label', {'for':this.instID+'_label'}).update(""));
			this.container.insert(mand);
		},

		drawMultiSelect : function(){
			var container = new Element('div', {className:'formDesignerMultiSelect'});
			this.container.insert(container);
			
//			this.mSel = new Element('select', {multiple:true});
			this.mSel = new Element('select');
			this.mSel.setAttribute('multiple','multiple'); 
			container.insert(this.mSel);
			
			this.buttonContainer = new Element('div', {className:'formDesignerSelectButtons'});
			container.insert(this.buttonContainer);
			
			var addBtn = new Element('button').update(" + ");
			this.buttonContainer.insert(addBtn);
			addBtn.observe('click', this.askOption.bind(this));
			var removeBtn = new Element('button').update(" - ");
			this.buttonContainer.insert(removeBtn);
			removeBtn.observe('click', this.askRemoveOption.bind(this));
		},
		
		askOption : function(){
			if (this.container.select('.formDesignerAskOption').length > 0) return;
			this.askRow = new Element('div', {className:'formDesignerAskOption'});
			this.container.insert(this.askRow);
			
			this.askRow.insert("<span>Vul de een waarde in (max.32 karakters):</span>");
			this.newOptionInput = new Element('input', {type:'text', maxlen:32});
			this.askRow.insert(this.newOptionInput);
			var button = new Element('button').update("Toevoegen");
			this.askRow.insert(button);
			button.observe('click', this.addOption.bind(this));
			this.newOptionInput.focus();
		},
		
		askRemoveOption : function(){
			// gather options:
			this.mSel.select('option').each(
				function(elem){
					if (elem.selected) return elem.remove();
				}
			)
			this.reloadOptions();
		},
		
		addOption: function(){
			var enteredValue = this.newOptionInput.getValue();
			this._addOption(enteredValue);
			this.askRow.remove();
		},
		
		_addOption : function(newValue){
			var option = new Element('option', {value:newValue}).update(newValue);
			this.mSel.insert(option);
			this.reloadOptions();
		},
		
		reloadOptions :function(){
			// remove all options;
			this.example.select('option').each(
				function(elem){
					elem.remove();
				}
			)
			this.mSel.select('option').each(
				(function(srcOpt){
					var srcValue = srcOpt.value;
					this.example.insert(new Element('option', {value:srcValue}).update(srcValue));
				}).bind(this)
			)
		},
		
		drawExample : function(){
			this.example = new Element('select', {readonly:true});
			var titleDiv = new Element('div', {className:'formDesignerExampleSelect', size:20}).insert(this.example);
			this.container.insert(titleDiv);
		},

		setArgs : function($super, RPCObj, i){
			$super(RPCObj, i);
			// add options:
			var arg = '';
			this.mSel.select('option').each(
				function(elem){
					arg += elem.value+"!@!@";
				}
			)
			if (arg){
				arg = arg.substring(0, (arg.length - 4) );
				RPCObj.addArgument(this.instID, arg);
			}
		}

	});