 
             that.height(imageHeight).hide()
 
-    resizeGrid: (items) =>
+    addListItems: (items) =>
         self = @
-        tallestColumn = 0
-        columnHeights = []
+        @grid.empty()
+        items.appendTo(@grid).hide 0, ->
+            self.positionListItems items
 
-        i = 0
-        until i is self.imagesPerRow 
-            columnHeights.push 0
-            i = i + 1
-        
-        $.each items, (key, value) ->
-            that = $ value
-            columnNum = that.data 'column'
-            height = that.outerHeight true
+    positionListItems: (items) =>
+        self = @
 
-            columnHeights[columnNum] += height
+        # add height to grid holder to accomodate images
+        _resizeHolder = (items) ->
+            tallestColumn = 0
+            columnHeights = []
 
-        $.each columnHeights, (key, value) ->
-            if value > tallestColumn
-                tallestColumn = value
-                tallestColumn
+            i = 0
+            until i is self.imagesPerRow 
+                columnHeights.push 0
+                i = i + 1
+            
+            $.each items, (key, value) ->
+                that = $ value
+                columnNum = that.data 'column'
+                height = that.outerHeight true
 
-        self.grid.css 'height': tallestColumn + 40
+                columnHeights[columnNum] += height
 
-    positionListItems: =>
-        self = @
-        items = self.grid.find '.drm-grid-item'
+            $.each columnHeights, (key, value) ->
+                if value > tallestColumn
+                    tallestColumn = value
+                    tallestColumn
+
+            self.grid.css 'height': tallestColumn + 40
+
+        # need to keep track of column length so that any one column doesn't get too long
 
         $.each items, (key, value) ->
             that = $ value

        self = @
        self.grid = $ ".#{self.gridClass}"
        self.gridNav = $ '.drm-grid-nav'
        self.items = self.grid.find '.drm-grid-item'

        $(window).load ->
            self.positionListItems()
            self.addFilterButtons()

        if self.flex 
            $(window).resize ->
                self.positionListItems()
                self.resizeCurtain()

        $(window).load self.resizeCurtain

                that.css
                    'top': 0
                    'left': 0
                    'position': 'relative'

            that.show()

        _resizeHolder items

    filterListItems: (filter) =>
        # filter images by tag
        filter = if window.location.hash then filter else 'all'
        window.location.hash = filter

        if filter in @tags or filter is 'all'
            filteredItems = if filter is 'all' then @items else @items.has "ul.caption-tags li:containsNC(#{filter})"
            @addListItems filteredItems
        else
            $('<p></p>',
                text: 'no items match').appendTo @grid
        

new DrmFlexibleGrid()