	$.fbuilder.controls[ 'fcontainer' ]=function(){};
	$.extend(
		true,
		$.fbuilder.controls[ 'fcontainer' ].prototype,
		$.fbuilder.controls[ 'ffields' ].prototype,
		{
			fields:[],
			columns:1,
			align:"top",
			rearrange:0,
			editItemEvents:function()
				{
					var evt=[
						{s:"#sColumns",e:"change", l:"columns"},
						{s:"#sRearrange",e:"click", l:"rearrange",f:function(el){return el.is(":checked");}},
						{s:"#sAlignTop",e:"click", l:"align",f:function(el){
							$('#sAlignBottom').removeClass('button-primary').addClass('button-secondary');
							$('#sAlignTop').removeClass('button-secondary').addClass('button-primary');
							return 'top';
						}},
						{s:"#sAlignBottom",e:"click", l:"align",f:function(el){
							$('#sAlignTop').removeClass('button-primary').addClass('button-secondary');
							$('#sAlignBottom').removeClass('button-secondary').addClass('button-primary');
							return 'bottom';
						}}
					];
					$.fbuilder.controls[ 'ffields' ].prototype.editItemEvents.call(this,evt);
				},
			showShortLabel:function(){ return ''; },
			showUserhelp:function(){ return ''; },
			showSpecialDataInstance: function()
				{
					var cStr = '';
					for( var i = 0, h = 12; i < h; i++ )
					{
						cStr += '<option value="'+(i+1)+'" '+( ( this.columns == (i+1) ) ? 'SELECTED' : '' )+'>'+(i+1)+' column'+( ( i ) ? 's' : '' )+'</option>';
					}
					return '<style>#sAlignTop{margin-left:20px;margin-right:5px;}#sAlignTop::before{content:"\\27D9";}#sAlignBottom::before{content:"\\22A5";}</style><div><label>Columns</label><select name="sColumns" id="sColumns">' + cStr + '</select> <a class="eq_btn button-secondary helpfbuilder video" href="https://www.youtube.com/embed/NSac2cAN8RE?list=PLY-AOoHciOKgZQsqWfkQlHJ21sm3qPF9X">&#9654; help?</a>'+
					'<button type="button" id="sAlignTop" class="'+( this.align == 'top' ? 'button-primary' :  'button-secondary' )+'" title="Align top" style="display:inline-block;"></button>'+
					'<button type="button" id="sAlignBottom" class="'+( this.align == 'bottom' ? 'button-primary' :  'button-secondary' )+'" title="Align bottom" style="display:inline-block;"></button>'+
					'<div class="clearer"><span class="uh">Shown in columns the fields into the container.</span></div></div>'+
					'<div><label><input name="sRearrange" id="sRearrange" type="checkbox" '+((this.rearrange) ? 'CHECKED' : '')+'> Rearrange</label> <span class="uh">Rearrange the fields in the container.</span></div>';
				},
			remove : function()
				{
					var fieldsIndex = this.fBuild.getFieldsIndex();
					for( var i = this.fields.length - 1, h = 0; i >= h; i-- )
					{
						this.fBuild.removeItem( fieldsIndex[this.fields[ i ]], false, false );
					}
				},
			duplicateItem: function( currentField, newField )
				{
					for( var i = 0, h = this.fields.length; i < h; i++ )
					{
						if( this.fields[ i ] == currentField )
						{
							this.fields.splice( i+1, 0, newField );
							return;
						}
					}
				},
			addItem: function( newField, afterField )
				{
					if( typeof afterField != 'undefined' )
					{
						for( var i = 0, h = this.fields.length; i < h; i++ )
						{
							if( this.fields[ i ] == afterField )
							{
								this.fields.splice( i+1, 0, newField );
								return;
							}
						}
					}
					this.fields.push( newField );
				},
			after_show:function()
				{
					var me  = this,
						e   = $( '#field' + me.form_identifier + '-' + me.index + ' .fieldscontainer' ),
						tmp = [],
						items = me.fBuild.getItems(),
						fieldsIndex = me.fBuild.getFieldsIndex();

					for( var i = 0, h = me.fields.length; i < h; i++ )
					{
						if( typeof fieldsIndex[ me.fields[ i ] ] != 'undefined' )
						{
							// Assign the parent
							items[ fieldsIndex[ me.fields[ i ] ] ][ 'parent' ] = me.name;

							var f 	= $( '.' + me.fields[ i ] );
							if( f.length )
							{
								f.detach().appendTo( e );
								tmp.push( me.fields[ i ] );
							}
						}
					}
					me.fields = tmp;

					e.sortable(
						{
							'connectWith': '.ui-sortable',
							'items': '.fields',
							'placeholder': 'ui-state-highlight',
							'tolerance': 'pointer',
							'update': function( event, ui )
									{
                                        if ('invalidItem' in me && me.invalidItem) { delete me.invalidItem; return; }
                                        var p = ui.item.parents('.fields');
										if( p.length && $(this ).parents( '.fields' ).attr( 'id' ) == p.attr( 'id' ) )
										{
											var index = ui.item.index(), field, old_index;
                                            if(ui.item.hasClass('cff-button-drag')) // It is  an new control
                                            {
                                                ui.item = $('.'+window['cff_form'].fBuild.addItem(ui.item.data('control'), -3).name);
                                            }

                                            // receive or or changing the ordering in the fieldscontainer
                                            field = /((fieldname)|(separator))\d+/.exec(ui.item.attr('class'))[0];

                                            old_index = $.inArray(field, me.fields);
                                            if(old_index != -1) me.fields.splice(old_index,1);

											me.fields.splice(index,0,field);
											$.fbuilder.reloadItems();
                                            $('.'+/((fieldname)|(separator))\d+/.exec(ui.item.attr('class'))[0]).trigger('click');
										}
										else
										{
											// remove
											var index = $.inArray( me.fBuild.getItems()[ ui.item.attr( 'id' ).replace( 'field-', '' ) ].name, me.fields );
											if( index != -1 ) me.fields.splice( index, 1 );
										}
									},
                            'receive': function (event, ui)
                                {
									// No page break allowed in containers. Cancel the move and alert the user.
                                    if (ui.item.is('.fPageBreak')) {
										me.invalidItem = true;
										if ( ui.item.hasClass('cff-button-drag') ) {
											ui.item.remove();
										} else {
											ui.sender.sortable('cancel');
										}
                                        me.alertInvalidChild();
                                    } else me.invalidItem = false;
                                }
						}
					);
				},
        columnsSticker: function()
            {
                var c = this.columns, s = '<div class="sticker" title="Format contained fields in columns">';
                for(var i = 0; i<c; i++)
                    s += '<i class="sticker-'+c+'"></i>';
                s += '</div>';
                return s;
            },
        acceptedChild: function (childType)
            {
                let accepted = childType !== 'fPageBreak';
                if (!accepted) this.alertInvalidChild();
                return accepted;
            },
        alertInvalidChild: function ()
            {
                alert('The container controls do not support page breaks controls inside them. Please add the page break control outside the containers.');
            }
	});