/*
 *  Copyright 2015 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/**
 * This class is a part of a group container to do layout stuff. Parts are not visible.
 */
Ext.define(
	"Ametys.ui.fluent.ribbon.GroupScalePart",
	{
		extend: "Ext.container.Container",
		alias: 'widget.ametys.ribbon-group-scale-part',

        /**
         * @property {String} topAlignedCls The CSS classname to set on the group part with a top-aligned layout (one, two or three buttons vertically align to the top)
         * @readonly
         * @private
         */
        topAlignedCls: 'a-fluent-group-part-top',
        
        /**
         * @property {String} middleAlignedCls The CSS classname to set on the group part with a middle-aligned layout (two buttons vertically allocated)
         * @readonly
         * @private
         */
        middleAlignedCls: 'a-fluent-group-part-middle',
        
		/**
		 * @cfg {String} layout Doesn't apply to ribbon element. The value HAS TO be the default value.
		 * @private
		 */
			
		/**
		 * @cfg {String} cls Doesn't apply to ribbon element. The value HAS TO be the default value.
		 * @private
		 */

		/**
		 * @cfg {Number} columns The number of colums for small elements. Default value is 1.
		 */
		
		/**
		 * @cfg {String} [align="top"] The vertical alignment of buttons. Can be top (3 small buttons) or middle (2 small buttons centered).
		 * @private
		 */
		align: 'top',
		
		defaults: {
			xtype: 'ametys.ribbon-toolbar',
            ui: 'ribbon-component'
		},

		
		constructor: function(config)
		{
            config = config || {};
            config.cls = Ext.Array.from(config.cls);
            
	        config.cls.push(config.align == 'middle' ? this.middleAlignedCls : this.topAlignedCls);
            
			config.layout = {
					type: 'table',
					columns: config.columns || 1
			}

			this.callParent([config]);
		}
	}
);