Kato-GIF-Hider Fluid Userscript and Userstyle

userscript.js

kgh = {};

kgh.InitKatoGifHide = function(){
        // trigger message collapse when image is clicked
        $(".page-org").delegate('.preview-image','click',function(e) {
        e.preventDefault();
        $(e.target).closest('.message').find('.icon-collapse-alt').trigger('click');
    });
}

kgh.SetFlyoutEvents = function () {
        // hide all items of category clicked in flyout
        $(".kgh-hide").on('click',function(e) {
        e.preventDefault();

        var closeMessage = null;

        switch($(e.target).data("hide")) {
                case "images":
                        closeMessage = $('.preview-image').closest('.message');
                        break;
                case "video":
                        closeMessage = $('.preview-video').closest('.message');
                        break;
                case "text":
                        closeMessage = $('.message:not(:has(.preview-image, .preview-video))');
                        break;
                case "all":
                        closeMessage = $('.message');
                        break;
        }

        closeMessage.find('.icon-collapse-alt').trigger('click');

    });

}
$(function(){
  $("body").append('<div class="kgh-flyout"><div class="kgh-icons"><div class="kgh-hit"><span class="kgh-tab"></span></div><a href="#hide" data-hide="images" class="kgh-hide"><i class="kgh-icon icon-collapse-alt"></i>Images</a><a href="#hide" data-hide="video" class="kgh-hide"><i class="kgh-icon icon-collapse-alt"></i>Video</a><a href="#hide" data-hide="text" class="kgh-hide"><i class="kgh-icon icon-collapse-alt"></i>Text</a><a href="#hide" data-hide="all" class="kgh-hide"><i class="kgh-icon icon-collapse-alt"></i>All</a></div></div>');
  kgh.InitKatoGifHide();
  kgh.SetFlyoutEvents();
});

userscript.png

userstyle.css

.kgh-flyout {
        position: absolute;
        top: 0;
        left: 0;
}

.kgh-icons {
        position: relative;
        float: left;
        right: 0;
        margin-left: -100%;
        -webkit-transition: margin-left .25s;
        padding: .5em 0;
        background: #e5e5e5;
        border: 1px solid #ddd;
        border-radius: 0 0 4px 0;
}

.kgh-icons:hover {
        margin-left: 0;
}

.kgh-hide {
        float: left;
        clear: both;
        white-space: nowrap;
        color: #999;
        padding: 0 .75em 0 .5em;
}

.kgh-hide:hover {
        color: #2d2d2d;
}

.kgh-icon {
        padding-right: .5em;
}

.kgh-flyout a:hover .kgh-icon {
        text-decoration: none;
}

.kgh-hit {
        position: absolute;
        top: 0;
        right: -1.5em;
        width: 1.5em;
        height: 7em;
}

.kgh-tab {
        position: absolute;
        top: .75em;
        left: 0;
        width: .5em;
        -webkit-transition: width .25s;
        height: 2em;
        background: #e5e5e5;
        border: 1px solid #ddd;
        border-radius: 0 4px 4px 0;
}

.kgh-icons:hover .kgh-tab {
        width: 0;
        border: none;
}

userstyle.png