<div class="container">
        <div class="sixteen columns list" style="margin-top:100px; min-height: 350px;">
            <div id="filters">
            <div class="ui-group">
            <div class="button-group js-radio-button-group" data-filter-group="cat1">
            <?php //first check first category, then second, then third? count amount?
            $conn = mysqli_connect("localhost","root","","easesign_products");
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }
            $count_cat1=array_count_values($product_category1);//Counts the values in the array, returns associatve array
            arsort($count_cat1);//Sort it from highest to lowest
            $keys_cat1=array_keys($count_cat1);//Split the array so we can find the most occuring key

            $count_cat2=array_count_values($product_category2);//Counts the values in the array, returns associatve array
            arsort($count_cat2);//Sort it from highest to lowest
            $keys_cat2=array_keys($count_cat2);//Split the array so we can find the most occuring key

            $count_cat3=array_count_values($product_category3);//Counts the values in the array, returns associatve array
            arsort($count_cat3);//Sort it from highest to lowest
            $keys_cat3=array_keys($count_cat3);//Split the array so we can find the most occuring key

            $cat_amount1 = count($count_cat1);
            $cat_amount2 = count($count_cat2);
            $cat_amount3 = count($count_cat3);
            //echo $catamount;
            //cat1 cat2 and cat3 filtering
            $i=0;
            for($i;$i<$cat_amount1;$i++){
            $keys_cat1[$i] = preg_replace('/\s*/', '', $keys_cat1[$i]);
            ?>
              <button class="button" data-filter="<?php echo $keys_cat1[$i];?>"><?php echo $keys_cat1[$i];?></button>
            <?php
            }
            echo "</div></div><br/><div class=\"ui-group\"><div class=\"button-group js-radio-button-group\" data-filter-group=\"cat2\">";
            $i=0;
            for($i;$i<$cat_amount2;$i++){
            $keys_cat2[$i] = preg_replace('/\s*/', '', $keys_cat2[$i]);
            ?>
              <button class="button" data-filter="<?php echo $keys_cat2[$i];?>"><?php echo $keys_cat2[$i];?></button>
            <?php
            }
            echo "</div></div><br/><div class=\"ui-group\"><div class=\"button-group js-radio-button-group\" data-filter-group=\"cat2\">";
            $i=0;
            for($i;$i<$cat_amount3;$i++){
            $keys_cat3[$i] = preg_replace('/\s*/', '', $keys_cat3[$i]);
            ?>
              <button class="button" data-filter="<?php echo $keys_cat3[$i];?>"><?php echo $keys_cat3[$i];?></button>
            <?php
            }
            ?>
            </div></div>
            </div>
            <p><button id="shuffle">Shuffle</button></p>
        <div id="categories"><!--doesn't exist-->
            <?php
            $i=0;
            for($i;$i<$search_amount;$i++){
                // strip out all whitespace
                $product_category1[$i] = preg_replace('/\s*/', '', $product_category1[$i]);
                $product_category2[$i] = preg_replace('/\s*/', '', $product_category2[$i]);
                $product_category3[$i] = preg_replace('/\s*/', '', $product_category3[$i]);
                // convert the string to all lowercase
                $product_category1[$i] = strtolower($product_category1[$i]);
                $product_category2[$i] = strtolower($product_category2[$i]);
                $product_category3[$i] = strtolower($product_category3[$i]);
                //convert title to link
                $product_link = preg_replace('/[\s_]/', '-', $product_name[$i]);
            ?>
            <a class="item <?php echo $product_category1[$i]?> <?php echo $product_category2[$i]?> <?php echo $product_category3[$i]?>" href="http://localhost/easesign/p/<?php echo $product_link?>" title="<?php echo $product_name[$i]?>">
                <img src="http://localhost/easesign/images/<?php echo $product_image1[$i]?>.jpg"width="150px" height="150px"alt="<?php echo $product_name[$i]?>"/>
                <h6><?php echo $product_name[$i]?></h6>
                <span class="price">$<?php echo $product_price[$i]?></span>
                <i class="retail_price">Retail Value <del>$<?php echo $product_price[$i]+30;?></del></i>
                <br class="clear">
            </a>
            <?php
            }
            //from list id get category names (max of ?), order by newest, most popular
            ?>

        </div>
<script type="text/javascript">
$( function() {
  // init Isotope
  var $container = $('#categories').isotope({
    itemSelector: '.item'
  });

  // store filter for each group
  var filters = {};

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = '';
    for ( var prop in filters ) {
      filterValue += filters[ prop ];
    }
    // set filter for Isotope
    $container.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});

</script>