 
             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

            that.siblings('button').removeClass 'active'
            that.addClass 'active'

    capitalize: (str) ->
        str.toLowerCase().replace /^.|\s\S/g, (a) ->
            a.toUpperCase()

    addFilterButtons: =>
        self = @
        tags = []
        tagListItems = self.grid.find 'ul.caption-tags li'

        $.each tagListItems, (key, value) ->
            tag = $(value).text()
            tags.push self.capitalize tag
            $.unique tags

        $.each tags, (key, value) ->
            tagButton = $ '<button></button>',
                class: 'drm-grid-filter'
                text: value
                'data-filter': value.toLowerCase()
            tagButton.appendTo self.gridNav

        self.gridNav.find('.drm-grid-filter').first().addClass 'active'

        self = @
        self.grid = $ ".#{self.gridClass}"
        self.gridNav = $ '.drm-grid-nav'
        self.items = self.grid.find('.drm-grid-item').hide()
        hash = window.location.hash

        $(window).load ->
            self.tags = self.getTags()
            filter = if hash then hash.replace /^#/, '' else null
            self.addFilterButtons self.tags
            self.filterListItems filter

            if filter
                activeButton = $("button.drm-grid-filter[data-filter=#{filter}]")
                activeButton.siblings('button').removeClass 'active'
                activeButton.addClass 'active'

        if self.flex
            $(window).resize ->
                items = self.grid.find '.drm-grid-item'
                self.positionListItems items
                self.resizeCurtain()

        $(window).load self.resizeCurtain
