Empuzzler

// ==UserScript==
// @name        Puzzling.SE Empuzzler
// @namespace   https://greasyfork.org/users/5615-doppelgreener
// @description Hide answers and comments on Puzzling.SE questions until you want to see them.
// @grant       none
// @include     http://puzzling.stackexchange.com/questions/*
// @version     0.2
// ==/UserScript==

// Changelog:
// 0.3      Cleaned up :-)
// 0.2      Show Everything button added.
// 0.1      First version, with show comments/answers buttons only.
(function() {

    var main = function() {

        var identifiers,
            styles,
            commentsButton,
            answersButton,
            showAllButton;

        identifiers = {
            'comments': 'show-comments',
            'answers': 'show-answers'
        };

        styles = {
            'hide-comments': [
                'body:not(.' + identifiers.comments + ') #question .comments            { display: none; }',
                'body:not(.' + identifiers.comments + ') #question .comments-link       { display: none; }',
                'body:not(.' + identifiers.comments + ') #question .comments-link ~ *   { display: none; }',
                'body:not(.' + identifiers.comments + ') #question .bounty-link         { display: none; }',
                'body.' + identifiers.comments + ' .' + identifiers.comments + '        { display: none; }'  // hide the button(s)
            ],
            'hide-answers': [
                'body:not(.' + identifiers.answers + ') #answers                        { display: none; }',
                'body.' + identifiers.answers + ' .' + identifiers.answers + '          { display: none; }'  // hide the button(s)
            ],
            'empuzzler-misc': [
                '#empuzzler-revealers button { margin: 0.5em 0.5em 0.5em 0; padding: 0.5em; }',
                '#empuzzler-revealers input { margin: 0.5em 0.5em 0.5em 0; }',
                '#empuzzler-revealers p { margin: 0.5em; }',
            ]
        };

        // Creates a button with chosen type, text and affecting certain classes
        function makeButton(buttonType, buttonText, classesToAdd) {
            return (
                'submit' === buttonType
                    ? $('<input/>').attr('type', 'submit').val(buttonText)
                    : $('<button/>').text(buttonText)
                ).addClass(classesToAdd)
                .on('click', function() {
                    $('body').addClass(classesToAdd);
                });
        }

        // Create the 3 "show x" buttons
        commentsButton = makeButton('button', 'Show comments on question', identifiers.comments);
        answersButton = makeButton('button', 'Show answers', identifiers.answers);
        showAllButton = makeButton('submit', 'Show everything!', identifiers.comments + ' ' + identifiers.answers);

        // Create a container for the buttons and insert it after the question
        $('<div/>')
            .attr('id', 'empuzzler-revealers')
            .append(
                commentsButton,
                answersButton,
                '<p class="' + identifiers.comments + ' ' + identifiers.answers + '">or</p>',
                showAllButton
            ).insertAfter('#question');

        // Add the CSS to the page
        for (var i in styles) {
            if (styles.hasOwnProperty(i)) {
                el = document.createElement('style');
                el.id = 'empuzzler-styles';
                el.type = 'text/css';
                el.textContent = styles[i].join("\n");
                (document.head || document.documentElement).appendChild(el);
            }
        }

    };

    // Add the JS to the page
    var el = document.createElement('script');
    el.type = 'text/javascript';
    el.id = 'empuzzler-script'
    el.textContent = '(' + main.toString() + ')();';
    document.body.appendChild(el);

})();