$(function() {

    $('.masonry-177').masonry({

        columnWidth: 177,

        itemSelector: '.item-masonry'

    });

    function updateMasonry() {

        $('.masonry-177').data('masonry').layout();

    }

    var keywordsobj = {};

    $(".item-masonry").each(function(i, element) {

        $(element)

            .attr("data-keywords")

            .split(",")

            .forEach(function(kw) {

                var keyword = kw.replace(/(^\s+|\s+$)/g,''),

                    basekw = keyword.toLowerCase();

                if (!keywordsobj.hasOwnProperty(basekw)) {

                    keywordsobj[basekw] = {

                        keyword: keyword,

                        basekeyword: basekw,

                        count: 0,

                        items: $(),

                        enabled: true

                    };

                }

                kwobj = keywordsobj[basekw];

                kwobj.count++;

                kwobj.items.push(element);

            });

    });

    var keywordslist = [];

    for (var k in keywordsobj) {

        if (keywordsobj.hasOwnProperty(k)) {

            keywordslist.push(keywordsobj[k]);

        }

    }

    keywordslist.sort(function(a, b) {

        return b.count - a.count;

    });

    var filterlist = $(".filters");

    function updateKeywords() {

        var enabledItems = $();

        keywordslist.forEach(function(kw) {

            if (kw.enabled) {

                enabledItems = enabledItems.add(kw.items);

                kw.li.removeClass("disabled");

            } else {

                kw.li.addClass("disabled");

            }

        });

        $(".item-masonry").addClass("disabled");

        enabledItems.removeClass("disabled");

    }

    keywordslist.slice(0,100).forEach(function(kw) {

        var li = $('<li class="box-shadow-2">'),

            outera = $('<a class="display-keyword" href="#">'),

            innera = $('<a class="icon-action" href="#">');

        outera.text(kw.keyword + ' ');

        outera.append(innera);

        li.append(outera);

        kw.li = li;

        li.click(function() {

            if (kw.enabled) {

                keywordslist.forEach(function(k) {

                    k.enabled = false;

                });

                kw.enabled = true;

            } else {

                keywordslist.forEach(function(k) {

                    k.enabled = true;

                });

            }

            updateKeywords();

            return false;

        });

        innera.click(function() {

            kw.enabled = !kw.enabled;

            updateKeywords();

            return false;

        });

        filterlist.append(li);

    })

    $('.toggle-comment').click(function(e){

        e.preventDefault();

        $('.show-comment, .hide-comment').hide();

        if($('.mosaic').length){

            $('.mosaic').removeClass('mosaic').addClass('mosaic-comment');

            $('.hide-comment').show();

        }else{

            $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');

            $('.show-comment').show();

        }

        updateMasonry();

    });

});