title: Jquery Isotope - sorting ASC DESC - strange behaviour
body: <p>I am using isotope to filter and sort elements by name, date or category, descending or ascending within a main container.</p>
  
  <p>I need to keep the first element in the top left hand corner so that it is unaffected by sorting.  I have managed to get this working except for when sorting by ascending / decending.  The first element is sorted and after a number of different sorting selections are made, gaps appear on the page.  When I look at the code where the gaps are, its the code for the first element being repeated in various different places on the page depending on how many selections of sorting are made.</p>
  
  <p>How do I get the first element to behave?  Below is my code.</p>
  
  <pre><code>            //isotope set up
              var $container = $('#container'),
                   filters = {};
                   $container.isotope({
                  itemSelector: '.element',
                  masonry: {
                      columnWidth: 260
                  },
                  getSortData: {
                      category: function($elem) {
                          if ($elem.is('.first_static')) {
                              return -1;
                          }
                          return $elem.attr('data-category');
                      },
                      date: function($elem) {
                          if ($elem.is('.first_static')) {
                              return -1;
                          }
                          return $elem.attr('data-expiry');
                      },
                      name: function($elem) {
                          if ($elem.is('.first_static')) {
                              return -1;
                          }
                          return $elem.find('.name').text();
                      },
                      first: function($elem) {
                          // sort by first_static first, then by original order
                          return ($elem.hasClass('first_static') ? -500 : 0) + $elem.index();
                      }
                  },
                  sortBy: 'first'
              });
  
                  //sort page elements
                  $('.sort a').click(function(e) {
                      var $this = $(this);
                      if ($this.hasClass('selected')) {
                          return false;
                      }
                      var $sortSet = $this.parents('.sort-set');
                      $sortSet.find('.selected').removeClass('selected');
                      $this.addClass('selected');
                      var sorts = {},
                              key = $sortSet.attr('data-option-key'),
                              value = $this.attr('data-option-value');
  
                      value = value === 'false' ? false : value;
                      sorts[ key ] = value;
  
  
              $container.isotope(sorts).isotope('reloadItems');
  
              return false;
          });
  </code></pre>
  
  <p>Im working on a JSFiddle (<a href="http://jsfiddle.net/AbUgj/30/" rel="nofollow">http://jsfiddle.net/AbUgj/30/</a>) to demonstrate what Im trying to do.  There should always be a blue box in the top left regardless of filter or sort.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h3&gt;Sorting&lt;/h3&gt;&lt;br /&gt;
                              &lt;div class="option-combo sort"&gt;
                                  &lt;ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortBy"&gt;
                                      &lt;li&gt;&lt;a href="#" data-option-value="name"&gt;Name&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#" data-option-value="category"&gt;Category&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#" data-option-value="date"&gt;Expiry Date&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div class="option-combo sort"&gt;
                                  &lt;ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortAscending"&gt;
                                      &lt;li&gt;&lt;a href="#" data-option-value="true" id="sortByCatAsc"&gt;Ascending&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#" data-option-value="false" id="sortByCatDesc"&gt;Descending&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/div&gt;
  </code></pre>