var formDesigner = Class.create({

		initialize:function(container, formID){
			this.instID = 'formDesigner.' + parseInt(Math.random()*1000000);
			this.container = container;
			this.elements = [];
			if (!formID){
				this.formID = 0;
				this.drawForm();
			}else{
				this.formID = formID;
				// load form elements:
				var RPCObj = new rpc;
				RPCObj.debug = true;
				RPCObj.createCall('perclubForm', this.drawForm.bind(this), this);	
				RPCObj.call('getForm', 'formID=' + formID);
			}
		},
	
		drawForm : function(req){
			this.drawControls();
			this.container.insert('<br style="clear:both;"/>');
			this.canvas = new Element('div',{className:'formDesignCanvas'});
			this.container.insert(this.canvas);
			if (req){
				var objects = req.responseJSON;
				// draw form
				$A(objects).each(
					(function(formObj){
						this.addField('', formObj);
					}).bind(this)
				)
			}
			this.container.insert('<br style="clear:both;"/>');
//			var button = new Element('button', {}).update('Formulier opslaan');
//			this.container.insert(button);
//			button.observe('click', this.saveElements.bind(this));
		},
		
		drawControls : function(){
			var controls = new Element('div', {className:'formDesignControls'});
			this.container.insert(controls);
			
			this.select = new Element('select');
			controls.insert(this.select);
			
			this.select.insert(new Element('option',{value:'text'}).update('Korte tekst-veld'));
			this.select.insert(new Element('option',{value:'textarea'}).update('Lange tekst-veld'));
			this.select.insert(new Element('option',{value:'email'}).update('Email-veld'));
			this.select.insert(new Element('option',{value:'postcode'}).update('Postcode-veld'));
			this.select.insert(new Element('option',{value:'numeric'}).update('Numeriek veld'));
			this.select.insert(new Element('option',{value:'select'}).update('Selectie-lijst'));
			this.select.insert(new Element('option',{value:'radios'}).update('Radio-buttons'));
			this.select.insert(new Element('option',{value:'checkboxes'}).update('Checkboxen'));
			
			var button = new Element('button').update('Toevoegen');
			controls.insert(button);
			button.observe('click', this.addField.bind(this));
		},
		
		addField : function(e, obj){
			if (!obj){
				var obj =  {
							title: '',
							isMandatory : 0,
							type : this.select.getValue() 
						};
			}
			var type = obj.type;
			var field = new formDesigner[type](this.canvas, obj, this);
			this.reloadFields();
		},
		
		reloadFields : function(){
			// reload form-elements:
			this.elements = [];
			$$('.formDesignerElement').each(
				(function(elem){
					this.elements.push(elem.elementObj);
				}).bind(this)
			)			
		},
		
		saveElements : function(callBack){
			if (!callBack){
				callBack = this.setSaved.bind(this)
			}
			this.reloadFields();

			var RPCObj = new rpc;
			RPCObj.debug = true;
			RPCObj.createCall('perclubForm', '', this);
			RPCObj.setMethod('saveFormDesign');
			RPCObj.addArgument('formID', this.formID);
			
			var i = 0;
			this.elements.each(
				(function(field){
					field.setArgs(RPCObj, i);
					i++;
				}).bind(this)
			)
			RPCObj.setCallback(callBack);
			RPCObj.call();
		},
		
		setSaved : function(req){
			this.formID = req.responseJSON.formID;
		}
		
		
	});