       @setState
         subject_sets: sets
 
+
+  initializeFirstPageArray: ->
+    # iterate over all first pages to display and build the view
+    first_pages_view = []
+    for page_json, index in @state.all_first_pages
+      first_pages_view.push <FirstPageThumbnail page_json={page_json} key={index} />
+    @setState
+      first_page_array: first_pages_view
+      first_pages_initialized: 1
+
+
+  updateFirstPageArray: ->
+    console.log("updating first page array")
+    selected_institution = $(".collection-institution select").val()
+    selected_playwright  = $(".collection-playwright select").val() 
+
+    # define the selection criteria to be used to filter first page objects
+    selection_criteria_options = [
+      {
+        "label": "selected_institution", 
+        "value": selected_institution, 
+        "key_in_first_page_json": "location"
+      }, 
+      {
+        "label": "selected_playwright", 
+        "value": selected_playwright,
+        "key_in_first_page_json": "written_by"
+      }
+    ]
+
+    # if either selected_institution or selected_playwright are == "",
+    # don't use them as selection criteria
+    selection_criteria = []
+    for selection_criterion in selection_criteria_options
+      if selection_criterion.value?
+        selection_criteria.push(selection_criterion)
+
+    console.log(selection_criteria)
+
+    # iterate over the first page array and retain only those elements that match
+    # the user-specified selection criteria
+    first_pages_to_display = []
+    for first_page in @state.all_first_pages
+      keep_page = 1
+      for selection_criterion in selection_criteria
+        console.log(first_page.meta_data[selection_criterion.key_in_first_page_json], selection_criterion.value)
+        if first_page.meta_data[selection_criterion.key_in_first_page_json] != selection_criterion.value
+          keep_page = 0
+          console.log("not keeping page")
+      if keep_page == 1
+        first_pages_to_display.push(first_page)
+
+    # iterate over the first pages to display and build the view
+    first_pages_view = []
+    for page_json, index in first_pages_to_display
+      first_pages_view.push <FirstPageThumbnail page_json={page_json} key={index} />
+    @setState
+      first_page_array: first_pages_view
+
+
   render: ->
     if ! @state.group?
       <div className="group-page">
         <h2>Loading...</h2>
       </div>
-
     else
-      firstPages = []
-      for page_json, index in @state.current_first_pages
-        firstPages.push <FirstPageThumbnail page_json={page_json} key={index} /> 
-
       <div className="collection-page-content">
         <div className="collection-title-container">
           <div className="collection-title">James Bundy Era</div>
         </div>
 
         <div className="collection-container">
-          <div className="collection-thumbnails">
-
-            {firstPages}
-
-          </div>
-
+          <div className="collection-thumbnails">{ @state.first_page_array }</div>
           <div className="collection-browse-controls-container">
             <div className="collection-browse-controls-content">
               <div className="collection-description">Praesent vitae lobortis, tempor vitae magna sed interdum nascetur. Eu eget facilisi urna laoreet, risus numquam bibendum, pellentesque odio dictum. Risus quam qui amet pellentesque nonummy, feugiat sodales lacus luctus.</div>

                <div className="collection-range-slider">Range slider goes here</div>
                
                <div className="custom-select collection-institution">
                  <select>
                    <option disabled selected value="">Select Institution</option>
                    <option value="0">Culinary Institute of America</option>
                  </select>
                </div>

                <div className="custom-select collection-playwright">
                  <select>
                    <option disabled selected value="">Select Playwright</option>
                    <option value="0">Bob Barker</option>
                  </select>
                </div>
              </div>
            </div>

GroupBrowser  = require('./group-browser')
GenericButton   = require('components/buttons/generic-button')
FirstPageThumbnail = require('./first-page-thumbnail')
SelectDropdown = require('./select-dropdown')
API           = require('../lib/api')

GroupPage = React.createClass
