Fix #5654 - roojspacker - get it working as a doc tool...
[roojs1] / docs.old / symbols / src / Roo_bootstrap_LayoutMasonry.js.html
diff --git a/docs.old/symbols/src/Roo_bootstrap_LayoutMasonry.js.html b/docs.old/symbols/src/Roo_bootstrap_LayoutMasonry.js.html
new file mode 100644 (file)
index 0000000..8621e50
--- /dev/null
@@ -0,0 +1,1333 @@
+<html><head><title>../roojs1/Roo/bootstrap/LayoutMasonry.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
+ *
+ * This is based on 
+ * http://masonry.desandro.com
+ *
+ * The idea is to render all the bricks based on vertical width...
+ *
+ * The original code extends 'outlayer' - we might need to use that....
+ * 
+ */
+
+
+/**
+ * @class Roo.bootstrap.LayoutMasonry
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Layout Masonry class
+ * 
+ * @constructor
+ * Create a new Element
+ * @param {Object} config The config object
+ */
+
+</span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    
+    </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">= [];
+    
+    </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+    
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">// raw events
+        /**
+         * @event layout
+         * Fire after layout the items
+         * @param {Roo.bootstrap.LayoutMasonry} this
+         * @param {Roo.EventObject} e
+         */
+        </span><span class="jsdoc-string">&quot;layout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+    
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} isLayoutInstant = no animation?
+     */   
+    </span><span class="jsdoc-var">isLayoutInstant </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// needed?
+   
+    /**
+     * @cfg {Number} boxWidth  width of the columns
+     */   
+    </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">: 450,
+    
+      </span><span class="jsdoc-comment">/**
+     * @cfg {Number} boxHeight  - 0 for square, or fix it at a certian height
+     */   
+    </span><span class="jsdoc-var">boxHeight </span><span class="jsdoc-syntax">: 0,
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Number} padWidth padding below box..
+     */   
+    </span><span class="jsdoc-var">padWidth </span><span class="jsdoc-syntax">: 10, 
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Number} gutter gutter width..
+     */   
+    </span><span class="jsdoc-var">gutter </span><span class="jsdoc-syntax">: 10,
+    
+     </span><span class="jsdoc-comment">/**
+     * @cfg {Number} maxCols maximum number of columns
+     */   
+    
+    </span><span class="jsdoc-var">maxCols</span><span class="jsdoc-syntax">: 0,
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} isAutoInitial defalut true
+     */   
+    </span><span class="jsdoc-var">isAutoInitial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, 
+    
+    </span><span class="jsdoc-var">containerWidth</span><span class="jsdoc-syntax">: 0,
+    
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} isHorizontal defalut false
+     */   
+    </span><span class="jsdoc-var">isHorizontal </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, 
+
+    </span><span class="jsdoc-var">currentSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    
+    </span><span class="jsdoc-var">bricks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//CompositeElement
+    
+    </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">: 1,
+    
+    </span><span class="jsdoc-var">_isLayoutInited </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    
+</span><span class="jsdoc-comment">//    isAlternative : false, // only use for vertical layout...
+    
+    /**
+     * @cfg {Number} alternativePadWidth padding below box..
+     */   
+    </span><span class="jsdoc-var">alternativePadWidth </span><span class="jsdoc-syntax">: 50,
+    
+    </span><span class="jsdoc-var">selectedBrick </span><span class="jsdoc-syntax">: [],
+    
+    </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry.superclass.getAutoCreate.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.tag</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'blog-masonary-wrapper ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: {
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mas-boxes masonary'
+            </span><span class="jsdoc-syntax">}
+        };
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">getChildContainer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( )
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.boxesEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.mas-boxes'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
+    },
+    
+    
+    </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hook children rendered'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'childrenrendered'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+                </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'children rendered'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">_this.initial</span><span class="jsdoc-syntax">();
+            } ,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+    
+    </span><span class="jsdoc-var">initial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.selectedBrick </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); 
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-comment">//this.layout.defer(500,this);
+        
+    </span><span class="jsdoc-syntax">},
+    
+    </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(
+                </span><span class="jsdoc-var">this.currentSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.width </span><span class="jsdoc-syntax">&amp;&amp; 
+                </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.x </span><span class="jsdoc-syntax">&amp;&amp; 
+                </span><span class="jsdoc-var">this.currentSize.height </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.height </span><span class="jsdoc-syntax">&amp;&amp; 
+                </span><span class="jsdoc-var">this.currentSize.y </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.y 
+        </span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;no change in with or X or Y&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
+        
+    },
+    
+    </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {   
+        </span><span class="jsdoc-var">this._resetLayout</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">: !</span><span class="jsdoc-var">this._isLayoutInited</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this.layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
+      
+        </span><span class="jsdoc-var">this._isLayoutInited </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'layout'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+    },
+    
+    </span><span class="jsdoc-var">_resetLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isHorizontal</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.horizontalMeasureColumns</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.verticalMeasureColumns</span><span class="jsdoc-syntax">();
+        
+    },
+    
+    </span><span class="jsdoc-var">verticalMeasureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
+        
+</span><span class="jsdoc-comment">//        if(Roo.lib.Dom.getViewWidth() &lt; 768 &amp;&amp; this.isAlternative){
+//            this.colWidth = Math.floor(this.containerWidth * 0.8);
+//            return;
+//        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.boxWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.boxWidth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth
+        </span><span class="jsdoc-syntax">}
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">boxWidth</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">cols</span><span class="jsdoc-syntax">, 1 );
+        
+        </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.maxCols </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.maxCols </span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalBoxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">avail </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalBoxWidth</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">avail </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2)) / 3);
+        </span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.boxHeight </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-var">this.boxHeight  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.unitWidth</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">horizontalMeasureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.boxWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">boxWidth</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2)) / 3);
+        
+        </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">boxWidth</span><span class="jsdoc-syntax">);
+        
+    },
+    
+    </span><span class="jsdoc-var">getContainerWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">;  </span><span class="jsdoc-comment">//maybe use getComputedWidth
+    </span><span class="jsdoc-syntax">},
+    
+    </span><span class="jsdoc-var">layoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bricks</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">([], </span><span class="jsdoc-var">this.bricks</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isHorizontal</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this._horizontalLayoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+</span><span class="jsdoc-comment">//        if(Roo.lib.Dom.getViewWidth() &lt; 768 &amp;&amp; this.isAlternative){
+//            this._verticalAlternativeLayoutItems( items , isInstant );
+//            return;
+//        }
+        
+        </span><span class="jsdoc-var">this._verticalLayoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
+        
+    },
+    
+    </span><span class="jsdoc-var">_verticalLayoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">standard </span><span class="jsdoc-syntax">= [
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            
+            [</span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'tall'</span><span class="jsdoc-syntax">]
+            
+        ];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">boxes </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.size</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-comment">// these layouts take up a full box,
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-left' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-right' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'wide' </span><span class="jsdoc-syntax">:
+                    
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+                    }
+                    
+                    </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">]);
+                    
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                    
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'sm' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'tall' </span><span class="jsdoc-syntax">:
+                    
+                    </span><span class="jsdoc-var">box.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
+                    
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                    
+            }
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">filterPattern </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">)
+        {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pattern </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.slice</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= [];
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pattern</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">format.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i.size</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">standard</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+                
+                </span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">== 1){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">- 1);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+                
+            </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pattern</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.slice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, 4);
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">boxes</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length </span><span class="jsdoc-syntax">== 1){
+                </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, 4);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">this._processVerticalLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
+        
+    },
+    
+</span><span class="jsdoc-comment">//    _verticalAlternativeLayoutItems : function( items , isInstant )
+//    {
+//        if ( !items || !items.length ) {
+//            return;
+//        }
+//
+//        this._processVerticalAlternativeLayoutQueue( items, isInstant );
+//        
+//    },
+    
+    </span><span class="jsdoc-var">_horizontalLayoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">&lt; 3) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">items.reverse</span><span class="jsdoc-syntax">();
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">eItems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.slice</span><span class="jsdoc-syntax">(0, 3);
+        
+        </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.slice</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">items.length</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">standard </span><span class="jsdoc-syntax">= [
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">],
+            
+            [</span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">],
+            [</span><span class="jsdoc-string">'wide'</span><span class="jsdoc-syntax">],
+            
+            [</span><span class="jsdoc-string">'wide-thin'</span><span class="jsdoc-syntax">]
+        ];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">boxes </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.size</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-left' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-right' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'tall' </span><span class="jsdoc-syntax">:
+                    
+                    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                        </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+                    }
+                    
+                    </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">]);
+                    
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                    
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'sm' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'wide' </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'wide-thin' </span><span class="jsdoc-syntax">:
+                    
+                    </span><span class="jsdoc-var">box.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
+                    
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                    
+            }
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">boxes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= [];
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">filterPattern </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">)
+        {
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pattern </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.slice</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= [];
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pattern</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">format.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i.size</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">standard</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-var">String</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">)){
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+                
+                </span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">match </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">== 1){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">match</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">length </span><span class="jsdoc-syntax">- 1);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+                
+            </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pattern</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">box </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">box.slice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, 4);
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">boxes</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length </span><span class="jsdoc-syntax">== 1){
+                </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">filterPattern</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, 4);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prune </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.x</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.right </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* 3 - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2 - </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">hit_end </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">hit_end</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">){
+                
+                    </span><span class="jsdoc-var">b.el.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">b.el.hide</span><span class="jsdoc-syntax">();
+
+                }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">= 0;
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">b.el.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">b.el.show</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mx</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">);
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">){
+                
+                    </span><span class="jsdoc-var">b.el.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">b.el.hide</span><span class="jsdoc-syntax">();
+                    
+                }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-var">hit_end </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+                
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">prune.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-var">this._processHorizontalLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">prune</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
+    },
+    
+    </span><span class="jsdoc-comment">/** Sets position of item in DOM
+    * @param {Element} item
+    * @param {Number} x - horizontal position
+    * @param {Number} y - vertical position
+    * @param {Boolean} isInstant - disables transitions
+    */
+    </span><span class="jsdoc-var">_processVerticalLayoutQueue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.x</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.y</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">pos.y</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">b.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-left' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-right'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 1) + (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 2)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 1) + (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 2)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+                }
+                
+                </span><span class="jsdoc-var">b.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-comment">// iframe?
+                </span><span class="jsdoc-var">b.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'iframe'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] &lt; </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">]){
+                    </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+                }
+                
+                </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+                
+            }
+            
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">];
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= [];
+            
+            </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">1 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVerticalOneBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">2 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVerticalTwoBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">3 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVerticalThreeBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">4 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVerticalFourBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">b.el.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.el.getSize</span><span class="jsdoc-syntax">();
+                
+                </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sz.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">);
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mY </span><span class="jsdoc-syntax">= 0;
+        
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">mY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxY</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
+        }
+        
+        </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mY </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">pos.y</span><span class="jsdoc-syntax">);
+        
+    },
+    
+</span><span class="jsdoc-comment">//    _processVerticalAlternativeLayoutQueue : function( items, isInstant )
+//    {
+//        var pos = this.el.getBox(true);
+//        var x = pos.x;
+//        var y = pos.y;
+//        var maxX = pos.right;
+//        
+//        var maxHeight = 0;
+//        
+//        Roo.each(items, function(item, k){
+//            
+//            var c = k % 2;
+//            
+//            item.el.position('absolute');
+//                
+//            var width = Math.floor(this.colWidth + item.el.getPadding('lr'));
+//
+//            item.el.setWidth(width);
+//
+//            var height = Math.floor(this.colWidth * item.y / item.x + item.el.getPadding('tb'));
+//
+//            item.el.setHeight(height);
+//            
+//            if(c == 0){
+//                item.el.setXY([x, y], isInstant ? false : true);
+//            } else {
+//                item.el.setXY([maxX - width, y], isInstant ? false : true);
+//            }
+//            
+//            y = y + height + this.alternativePadWidth;
+//            
+//            maxHeight = maxHeight + height + this.alternativePadWidth;
+//            
+//        }, this);
+//        
+//        this.el.setHeight(maxHeight);
+//        
+//    },
+    
+    </span><span class="jsdoc-var">_processHorizontalLayoutQueue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.x</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.y</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.right</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">this._processHorizontalEndItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">);
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* 3 - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2 - </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">b.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+                
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-left' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-right'</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 1) + (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 2)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                    </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 1) + (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 2)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+                }
+                
+                </span><span class="jsdoc-var">b.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= [];
+            
+            </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.length</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">1 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHorizontalOneBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">2 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHorizontalTwoBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">3 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHorizontalThreeBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-syntax">4 :
+                    </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHorizontalFourBoxColPositions</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            
+            </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">){
+                
+                </span><span class="jsdoc-var">b.el.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                
+                </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">kk</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">);
+                
+            }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+    },
+    
+    </span><span class="jsdoc-var">_processHorizontalEndItem </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 0) ? </span><span class="jsdoc-string">'sm' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 0) ? 2 : 1;
+            </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 0) ? 2 : 1;
+            
+            </span><span class="jsdoc-var">b.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">));
+                
+            </span><span class="jsdoc-var">b.el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 1)) + </span><span class="jsdoc-var">b.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
+            
+            </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">);
+            
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">positions </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-var">positions.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* 2 - </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-var">positions.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+        
+        </span><span class="jsdoc-var">positions.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* 3 - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">eItems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">b.el.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">positions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        
+    },
+    
+    </span><span class="jsdoc-var">getVerticalOneBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rand </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.random</span><span class="jsdoc-syntax">() * ((4 - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x</span><span class="jsdoc-syntax">)));
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-left'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">rand </span><span class="jsdoc-syntax">= 0;
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-right'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">rand </span><span class="jsdoc-syntax">= 1;
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">rand</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">getVerticalTwoBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ ((</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.random</span><span class="jsdoc-syntax">() * </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">))
+            });
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * (3 - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ ((</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.random</span><span class="jsdoc-syntax">() * </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">))
+        });
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getVerticalThreeBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ ((</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.y </span><span class="jsdoc-syntax">- 1))
+            });
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.y </span><span class="jsdoc-syntax">- 1)
+        });
+            
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getVerticalFourBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+            });
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+            });
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1,
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitHeightunitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+        });
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2,
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getHorizontalOneBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-left'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 2),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'md-right'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 2),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+            });
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rand </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Math.random</span><span class="jsdoc-syntax">() * (4 - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">));
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">rand
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getHorizontalTwoBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * (3 - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.y</span><span class="jsdoc-syntax">)
+            });
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getHorizontalThreeBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+            });
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+            });
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+            });
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+            
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-var">getHorizontalFourBoxColPositions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">maxX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">minY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= [];
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.size </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+            </span><span class="jsdoc-syntax">});
+            
+            </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[3]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[3]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+                </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 1
+            });
+            
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+            
+        }
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY
+        </span><span class="jsdoc-syntax">});
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+        
+        </span><span class="jsdoc-var">pos.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1) - </span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[3]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[3]</span><span class="jsdoc-var">.x </span><span class="jsdoc-syntax">- 1),
+            </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">minY </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.unitWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">) * 2
+        });
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
+    },
+    
+    </span><span class="jsdoc-comment">/**
+    * remove a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to remove
+    */
+    </span><span class="jsdoc-var">removeBrick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">brick_id</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">brick_id</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt;</span><span class="jsdoc-var">this.bricks.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bricks</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">brick_id</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">this.bricks.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">,1);
+                </span><span class="jsdoc-var">this.el.dom.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">brick_id</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">this.initial</span><span class="jsdoc-syntax">();
+            }
+        }
+    },
+    
+    </span><span class="jsdoc-comment">/**
+    * adds a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    </span><span class="jsdoc-var">addBrick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.bootstrap.MasonryBrick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//this.register(cn);
+        </span><span class="jsdoc-var">cn.parentId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">cn.onRender</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+    * register a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    
+    </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">brick</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.bricks.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">brick</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">brick.masonryId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-comment">/**
+    * clear all the Masonry Brick
+    */
+    </span><span class="jsdoc-var">clearAll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-comment">//this.getChildContainer().dom.innerHTML = &quot;&quot;;
+        </span><span class="jsdoc-var">this.el.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+    },
+    
+    </span><span class="jsdoc-var">getSelected </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.selectedBrick</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.selectedBrick</span><span class="jsdoc-syntax">;
+    }
+});
+
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonry</span><span class="jsdoc-syntax">, {
+    
+    </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: {},
+     </span><span class="jsdoc-comment">/**
+    * register a Masonry Layout
+    * @param {Roo.bootstrap.LayoutMasonry} the masonry layout to add
+    */
+    
+    </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">layout.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
+    },
+    </span><span class="jsdoc-comment">/**
+    * fetch a  Masonry Layout based on the masonry layout ID
+    * @param {string} the masonry layout to add
+    * @returns {Roo.bootstrap.LayoutMasonry} the masonry layout
+    */
+    
+    </span><span class="jsdoc-var">get</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout_id</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">layout_id</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">layout_id</span><span class="jsdoc-syntax">] ;
+    }
+    
+    
+    
+});
+
+
+ </span></code></body></html>
\ No newline at end of file