(function( $ ) {
    "use strict";

// TODO: Reset filters.
// TODO: figure out a better way to handle the UI.
// TODO: Handle multi-select of elements.
// TODO: Handle active, hover states.
// TODO: Handle display of information.
    var filters = function() {
        var $grid = $('.content').isotope({ "itemSelector": ".item" });
        // store filter for each group
        var filters = {};
        var $filters = $('.button-group');
        var $show_filters = $('.show-filters');

        $show_filters.on( 'click', function() {
            $('aside.filters').toggleClass('hide');
        });

        $filters.on( 'click', 'button', function() {
            var $this = $(this);
            console.log($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 = concatValues( filters );
            console.log(filterValue);
            $grid.isotope({ filter: filterValue });
        });
    };
    // flatten object by concatting values
    var concatValues = function(obj) {
        var value = '';
        for ( var prop in obj ) {
            value += obj[ prop ];
        }
        return value;
    };
    var polish = function() {
        $('.social a').hover(
            function() {
                $(this).children('span').animate({width: '100% '}, 200);
            },
            function() {
                $(this).children('span').animate({width: '0'}, 200);
            }
        );
    };
    $(document).ready(function() {
        //filters();
        //polish();
    });
})( jQuery );