formDesigner.element = Class.create({
		initialize: function(container,obj, pob){
			this.instID = 'formDesigner.element.' + parseInt(Math.random()*1000000);
			this.container = container;
			this.data = obj;
			this.pob = pob;
			// create a container
			this.container = new Element('div', {className:'formDesignerElement'});
			container.insert(this.container);
			this.container.elementObj = this;
		},
		
		draw : function(){
			this.drawTitle();
			this.drawExample();
			this.drawRemoveLink();
			this.container.insert('<br style="clear:both;"/>');
			this.drawMandatory();
			this.container.insert('<br style="clear:both;"/>');
		},
		
		drawTitle : function(){
			if (this.data.title) {
				var titleValue = this.data.title;
			}else{
				var titleValue = 'Vul titel in';
			}
				
			this.title = new Element('input', {type:'text', value:titleValue});
			var titleDiv = new Element('div', {className:'formDesignerTitle'}).insert(this.title);
			this.container.insert(titleDiv);
			this.title.observe('focus', function(e){
				if ( e.element().getValue() == 'Vul titel in') e.element().value = ''; 
			});
		},
		
		drawExample : function(){
			var example = new Element('input', {type:'text', readonly:true, value: this.object_name});
			var titleDiv = new Element('div', {className:'formDesignerExample'}).insert(example);
			this.container.insert(titleDiv);
		},

		drawRemoveLink : function(){
			var remove = new Element('span', {className:'formDesignerRemoveLink'}).update('[verwijderen]');
			this.container.insert(remove);
			remove.observe('click', (function(){
				this.container.remove();
				this.pob.reloadFields();
			}).bind(this) );
		},
		
		drawMandatory : function(){
			var mand = new Element('div', {className:'formDesignerLabel'});
			this.container.insert(mand);
			this.mandatory = new Element('input', {type:'checkbox', className:'', id:this.instID+'_label'});
			mand.insert(this.mandatory);
			if (this.data.isMandatory == '1')  this.mandatory.checked = true;
			mand.insert(new Element('label', {'for':this.instID+'_label'}).update("Verplicht veld"));
		},
		
		getTitle : function(){
			return '<![CDATA[' + encodeURIComponent(this.title.getValue()) + " ]]>";
		},
		
		getMandatory : function(){
			if (this.mandatory){
				if (this.mandatory.getValue() == 'on') return 1;
				return 0;
			}
			return 0;
		},
		
		setArgs : function(RPCObj, i){
			RPCObj.addArgument('field'+i, this.instID+"!@!@"+this.object_type+"!@!@"+this.getTitle()+"!@!@"+this.getMandatory());
		}
		
	});