docs/default.css
[roojs1] / docs / symbols / src / Roo_bootstrap_LayoutMasonry.js.html
index 8566bef..44c194d 100644 (file)
 
 </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.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} isFitWidth  - resize the width..
-     */   
-    </span><span class="jsdoc-var">isFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-comment">// options..
-    /**
-     * @cfg {Boolean} isOriginLeft = left align?
-     */   
-    </span><span class="jsdoc-var">isOriginLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
-    </span><span class="jsdoc-comment">/**
-     * @cfg {Boolean} isOriginTop = top align?
-     */   
-    </span><span class="jsdoc-var">isOriginTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</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 {Boolean} isResizingContainer = not sure if this is used..
+     * @cfg {Number} boxWidth  width of the columns
      */   
-    </span><span class="jsdoc-var">isResizingContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">boxWidth </span><span class="jsdoc-syntax">: 450,
+    
     </span><span class="jsdoc-comment">/**
-     * @cfg {Number} columnWidth  width of the columns 
+     * @cfg {Number} padWidth padding below box..
      */   
+    </span><span class="jsdoc-var">padWidth </span><span class="jsdoc-syntax">: 10, 
     
-    </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">: 0,
     </span><span class="jsdoc-comment">/**
-     * @cfg {Number} padHeight padding below box..
+     * @cfg {Number} gutter gutter width..
      */   
-    
-    </span><span class="jsdoc-var">padHeight </span><span class="jsdoc-syntax">: 10, 
+    </span><span class="jsdoc-var">gutter </span><span class="jsdoc-syntax">: 10, 
     
     </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-comment">// private?
-    </span><span class="jsdoc-var">gutter </span><span class="jsdoc-syntax">: 0,
-    
     </span><span class="jsdoc-var">containerWidth</span><span class="jsdoc-syntax">: 0,
-    </span><span class="jsdoc-var">initialColumnWidth </span><span class="jsdoc-syntax">: 0,
-    </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">colYs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// array.
-    </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">: 0,
-    </span><span class="jsdoc-var">padWidth</span><span class="jsdoc-syntax">: 10,
     
+    </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">: 0, </span><span class="jsdoc-comment">// array?
-    // element : null, // wrapped now this.el
-    </span><span class="jsdoc-var">_isLayoutInited </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, 
     
+    </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-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
         
@@ -93,7 +83,6 @@
             </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">_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.reloadItems</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-comment">/// was window resize... - let's see if this works..
+        
         </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-keyword">return</span><span class="jsdoc-syntax">;
         }
         
-        </span><span class="jsdoc-var">this.layout.defer</span><span class="jsdoc-syntax">(500,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
-    },
-    
-    </span><span class="jsdoc-var">reloadItems</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-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.masonry-brick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
         
-        </span><span class="jsdoc-var">this.bricks.each</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-comment">//Roo.log(b.getSize());
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">b.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">)) {
-                </span><span class="jsdoc-var">b.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">b.getSize</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.width</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-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bricks.elements.length</span><span class="jsdoc-syntax">);
-    },
+    </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-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</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">) {
             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;no change in with or X&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">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'layout'</span><span class="jsdoc-syntax">);
+    {   
         </span><span class="jsdoc-var">this._resetLayout</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-comment">//this._manageStamps();
-      
-        // don't animate first layout
+        
         </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-comment">// flag for initalized
         </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">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-comment">//var items = this._getItemsForLayout( this.items );
-        // original code supports filtering layout items.. we just ignore it..
+        </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-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">this._layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
-      
-        </span><span class="jsdoc-var">this._postLayout</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">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
-    {
-       </span><span class="jsdoc-comment">//this.fireEvent( 'layout', this, items );
     
-
-        </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.elements.length </span><span class="jsdoc-syntax">) {
-          </span><span class="jsdoc-comment">// no items, emit event with empty array
+    </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">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isHorizontal</span><span class="jsdoc-syntax">){
+            
+            </span><span class="jsdoc-keyword">if</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-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">(</span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">- 3, </span><span class="jsdoc-var">items.length</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.slice</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">items.length </span><span class="jsdoc-syntax">- 3);
+            
+        }
+        
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
-        </span><span class="jsdoc-var">items.each</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">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;layout item&quot;</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-comment">// get x/y object from method
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getItemLayoutPosition</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-comment">// enqueue
-            </span><span class="jsdoc-var">position.item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-var">position.isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// || item.isLayoutInstant; &lt;&lt; not set yet...
-            </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">position </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-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= 0;
+        
+        </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">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.intSize </span><span class="jsdoc-syntax">&gt; 3){
+                </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-var">box </span><span class="jsdoc-syntax">= [];
+                </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= 0;
+            }
+            
+            </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.intSize</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">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">items.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-var">box </span><span class="jsdoc-syntax">= [];
+                </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= 0;
+            }
+            
         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
-      
-        </span><span class="jsdoc-var">this._processLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </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-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">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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2;
+        </span><span class="jsdoc-keyword">var </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-keyword">var </span><span class="jsdoc-var">queue </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-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= 0;
+        </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">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-var">item.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">item.el.show</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">item.el.hide</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">queue.length </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">- 1){
+                </span><span class="jsdoc-var">item.el.hide</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">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.intSize </span><span class="jsdoc-syntax">&gt; 3){
+                </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-var">box </span><span class="jsdoc-syntax">= [];
+                </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= 0;
+                </span><span class="jsdoc-var">maxX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</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">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">item.size</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-var">item.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-var">x </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">maxX </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">);
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">minX</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">item.el.hide</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">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.intSize</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-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">queue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">);
+        }
+        
+        </span><span class="jsdoc-var">this._processHorizontalLayoutQueue</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-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">_processLayoutQueue </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">_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">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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
-            </span><span class="jsdoc-var">obj.item.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">obj.item.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">obj.x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">obj.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">obj.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-comment">/**
-    * Any logic you want to do after each layout,
-    * i.e. size the container
-    */
-    </span><span class="jsdoc-var">_postLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
-    {
-        </span><span class="jsdoc-var">this.resizeContainer</span><span class="jsdoc-syntax">();
-    },
-    
-    </span><span class="jsdoc-var">resizeContainer </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.isResizingContainer </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">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-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerSize</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">this.boxesEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</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">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">b.size</span><span class="jsdoc-syntax">] + </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">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.square</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</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">] &gt;= </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">continue</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">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">_resetLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    </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-comment">//this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
-        </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-comment">//this.gutter = this.el.getWidth(); 
+        </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">pos.width </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.containerWidth</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">maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pos.bottom</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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">* 2;
+        
+        </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">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">b.size</span><span class="jsdoc-syntax">] + </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">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.square</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</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">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.gutter</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">this.measureColumns</span><span class="jsdoc-syntax">();
-
-        </span><span class="jsdoc-comment">// reset column Y
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">= [];
-        </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">--) {
-            </span><span class="jsdoc-var">this.colYs.push</span><span class="jsdoc-syntax">( 0 );
-        }
-    
-        </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= 0;
     },
-
-    </span><span class="jsdoc-var">measureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</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">this.getContainerWidth</span><span class="jsdoc-syntax">();
-      </span><span class="jsdoc-comment">// if columnWidth is 0, default to outerWidth of first item
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bricks.first</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">firstItem</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">this.columnWidth  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">firstItem.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">) ) {
-                </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= 1* (</span><span class="jsdoc-var">firstItem.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">firstItem.getWidth</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-string">'xs'</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">b.intSize </span><span class="jsdoc-syntax">= 1;
+            
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">== 0) {
+                </span><span class="jsdoc-var">b.size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">b.intSize </span><span class="jsdoc-syntax">= 2;
             }
-            </span><span class="jsdoc-comment">// columnWidth fall back to item of first element
-            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;set column width?&quot;</span><span class="jsdoc-syntax">);
-                        </span><span class="jsdoc-var">this.initialColumnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth  </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">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">b.size</span><span class="jsdoc-syntax">] + </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-comment">// if first elem has no width, default to size of container
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.square</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">b.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
+            }
             
-        </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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</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-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initialColumnWidth</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initialColumnWidth</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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-var">this.gutter
+        </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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] - </span><span class="jsdoc-var">this.gutter </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</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">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-comment">// column width is fixed at the top - however if container width get's smaller we should
-        // reduce it...
-        
-        // this bit calcs how man columns..
+            </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-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-keyword">var </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
-      
-        </span><span class="jsdoc-comment">// calculate columns
-        </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-var">this.gutter</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">containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">) / (</span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">// fix rounding errors, typically with gutters
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">columnWidth</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-var">this.measureColumns</span><span class="jsdoc-syntax">();
+    },
+    
+    </span><span class="jsdoc-var">measureColumns </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 overshoot is less than a pixel, round up, otherwise floor it
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'floor'</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">cols </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-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">this.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">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-comment">// padding positioning..
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalColWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalColWidth</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-comment">// so for 2 columns - we need 3 'pads'
+        </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">padNeeded </span><span class="jsdoc-syntax">= (1+</span><span class="jsdoc-var">this.cols</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">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-keyword">var </span><span class="jsdoc-var">padExtra </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padNeeded</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">this.cols</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.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">padExtra
-        </span><span class="jsdoc-comment">//this.padWidth = Math.floor(padavail /  ( this.cols));
+        </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">;
         
-        // adjust colum width so that padding is fixed??
+        </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">);
         
-        // we have 3 columns ... total = width * 3
-        // we have X left over... that should be used by 
+        </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.boxWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">avail</span><span class="jsdoc-syntax">;
         
-        //if (this.expandC) {
-            
-        //}
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xsWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</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.boxColWidth </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">xs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xsWidth</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">sm </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">xsWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">md </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.colWidth
+        </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.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.colWidth</span><span class="jsdoc-syntax">);
+        }
         
-    </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-comment">/* // container is parent if fit width
-        var container = this.isFitWidth ? this.element.parentNode : this.element;
-        // check that this.size and size are there
-        // IE8 triggers resize on body size change, so they might not be
-        
-        var size = getSize( container );  //FIXME
-        this.containerWidth = size &amp;&amp; size.innerWidth; //FIXME
-        */
-         
         </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">_getItemLayoutPosition </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-comment">// what is item?
-    </span><span class="jsdoc-syntax">{
-        </span><span class="jsdoc-comment">// we resize the item to our columnWidth..
-      
-        </span><span class="jsdoc-var">item.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">item.autoBoxAdjust  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</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">sz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item.getSize</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-comment">// how many columns does this brick span
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
-        
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ceil'</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-comment">// round if off by 1 pixel, otherwise use ceil
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">sz.width  </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">);
-        
-        </span><span class="jsdoc-comment">// normally this should be '1' as we dont' currently allow multi width columns..
-        
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getColGroup</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">// get the minimum Y value from the columns
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-string">'setHeight'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">minimumY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sz.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">]);
-        
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">colGroup.indexOf</span><span class="jsdoc-syntax">(  </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// broken on ie8..?? probably...
-         
-        // position the brick
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= {
-            </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">/2) + ((</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">)* </span><span class="jsdoc-var">shortColIndex</span><span class="jsdoc-syntax">),
-            </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight
-        </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">.intSize</span><span class="jsdoc-syntax">));
         
-        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">// apply setHeight to necessary columns
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sz.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-comment">//Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
+        </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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</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">var </span><span class="jsdoc-var">setSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colGroup.length</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">setSpan</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
-          </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">;
-        }
-      
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">position</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-comment">/**
-     * @param {Number} colSpan - number of columns the element spans
-     * @returns {Array} colGroup
-     */
-    </span><span class="jsdoc-var">_getColGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </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">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">&lt; 2 ) {
-          </span><span class="jsdoc-comment">// if brick spans only one column, use all the column Ys
-          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.colYs</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">){
+            
+            </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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</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">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= [];
-        </span><span class="jsdoc-comment">// how many different places could this brick fit horizontally
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupCount </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-comment">// for each group potential horizontal position
-        </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">groupCount</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
-          </span><span class="jsdoc-comment">// make an array of colY values for that one group
-          </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupColYs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colYs.slice</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
-          </span><span class="jsdoc-comment">// and get the max value of the array
-          </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">groupColYs </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">'sm'</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">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.el.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getHeight</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">() * 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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">] + </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">y
+            </span><span class="jsdoc-syntax">});
+            
         }
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">colGroup</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">'sm' </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">this.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] + </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">y </span><span class="jsdoc-syntax">+ ((</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.el.getHeight</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">() * 2))
+            });
+            
+        }
+        
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">;
+        
     },
-    </span><span class="jsdoc-comment">/*
-    _manageStamp : function( stamp )
+    
+    </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">)
     {
-        var stampSize =  stamp.getSize();
-        var offset = stamp.getBox();
-        // get the columns that this stamp affects
-        var firstX = this.isOriginLeft ? offset.x : offset.right;
-        var lastX = firstX + stampSize.width;
-        var firstCol = Math.floor( firstX / this.columnWidth );
-        firstCol = Math.max( 0, firstCol );
-        
-        var lastCol = Math.floor( lastX / this.columnWidth );
-        // lastCol should not go over if multiple of columnWidth #425
-        lastCol -= lastX % this.columnWidth ? 0 : 1;
-        lastCol = Math.min( this.cols - 1, lastCol );
-        
-        // set colYs to bottom of the stamp
-        var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
-            stampSize.height;
-            
-        for ( var i = firstCol; i &lt;= lastCol; i++ ) {
-          this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
-        }
+        </span><span class="jsdoc-keyword">var </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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">] + </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">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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">] + </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">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">_getContainerSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</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-var">this.maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {
-            </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxY
-        </span><span class="jsdoc-syntax">};
-      
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.isFitWidth </span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerFitWidth</span><span class="jsdoc-syntax">();
-        }
-      
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</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">.intSize</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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getWidth</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.boxColWidth</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'xs'</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">_getContainerFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</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">unusedCols </span><span class="jsdoc-syntax">= 0;
-        </span><span class="jsdoc-comment">// count unused columns
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-keyword">while </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.colYs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] !== 0 ) {
-            </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
-          }
-          </span><span class="jsdoc-var">unusedCols</span><span class="jsdoc-syntax">++;
-        }
-        </span><span class="jsdoc-comment">// fit container to columns that have been used
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter</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">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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getWidth</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">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">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.el.getWidth</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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.gutter
+        </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">needsResizeLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</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">previousWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">previousWidth </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">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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getWidth</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">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">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.el.getWidth</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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.gutter
+        </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">box</span><span class="jsdoc-syntax">[2]</span><span class="jsdoc-var">.el.getWidth</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">box</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.el.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.el.getHeight</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">;
+        
     }
+    
 });