formDesigner.checkboxes = Class.create(formDesigner.select, {
		initialize: function($super, container,obj, pob){
			$super(container,obj, pob);
			this.instID = 'formDesigner.checkboxes.' + parseInt(Math.random()*1000000);
			this.object_name = "checkboxes";
			this.object_type = "checkboxes";
//			this.draw();
		},
		
		draw : function(){
			this.drawTitle();
			this.exampleContainer = new Element('div', {className:'formDesignerCheckBoxes'});
			this.container.insert(this.exampleContainer);
//			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)
				)
			}
			
		},
		
		_addOption : function(newValue){
			var option = new Element('option', {value:newValue}).update(newValue);
			this.mSel.insert(option);
			this.reloadOptions();
			
		},
		
		reloadOptions :function(){
			// remove all options;
			this.exampleContainer.select('.formDesignerExampleRow').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));
					this.drawExample(srcValue);
				}).bind(this)
			)
		},
		
		drawExample : function(value){
			var row = new Element('div', {className:'formDesignerExampleRow'});
			this.exampleContainer.insert(row);
			
			this.example = new Element('input', {type:'checkbox', readonly:true, className:''});
			var titleDiv = new Element('label', {className:''}).update(value);
			row.insert(this.example);
			row.insert(titleDiv);
			
			//resize container;
			newHeight = 70 + (this.exampleContainer.select('.formDesignerExampleRow').length * 15); 
			this.container.setStyle('height:' + newHeight + 'px');
		}
	});