// ==UserScript==
// @name         AO3: Fic's style
// @namespace    https://greasyfork.org/it/users/12632-schegge
// @version      1.0.2
// @description  Tweaks for the fic's style. You can change font, size, color, page's width...
// @author       Schegge
// @include      http*://archiveofourown.org*/works/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @grant        none
// @downloadURL none
// ==/UserScript==

(function($) {

    fontNameDefault = $("body").css("font-family");
//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//* OPTIONS *//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//

    var Options = {
        fontName: [fontNameDefault, "Georgia", "Garamond", "Book Antiqua", "Verdana", "Segoe UI"],
        fontSize: 100, //%
        fontColor: "#000",
        chapterWidth: 90, //% ( min = 10; max = 90 )
        showBackground: "no", //or "yes"
        backgroundColor: "#f6f6f6"
    };

//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//*//

    numChapters = $("#chapters > .chapter").length; // it counts how many chapters the fic has
    var chapters;
    if (numChapters) { // if the fic has several chapters, even if only one chapter is displayed
        chapters = $("#chapters > .chapter");
    } else { // if the fic is a one-shot
        chapters = $("#chapters");
    }
    
    var Variables = {
        fontName: function() {
            var fontName = localStorage.getItem("ficstyle_fontName");
            if (!fontName) {
                fontName = Options.fontName[0];
                localStorage.setItem("ficstyle_fontName", fontName);
            }
            return fontName;
        },      
        fontSize: function() {
            var fontSize = localStorage.getItem("ficstyle_fontSize");
            if (!fontSize) {
                fontSize = Options.fontSize;
                localStorage.setItem("ficstyle_fontSize", fontSize);
            }
            return fontSize;
        },        
        chapterWidth: function() {
            var chapterWidth = localStorage.getItem("ficstyle_chapterWidth");
            if (!chapterWidth) {
                chapterWidth = Options.chapterWidth;
                localStorage.setItem("ficstyle_chapterWidth", chapterWidth);
            }
            return chapterWidth;
        },        
        showBackground: function() {
            var showBackground = localStorage.getItem("ficstyle_showBackground");
            if(!showBackground) {
                showBackground = Options.showBackground;
                localStorage.setItem("ficstyle_showBackground", showBackground);
            }
            return showBackground;
        },        
        hide: function() {
            var hide = localStorage.getItem("ficstyle_hide");
            if (!hide) {
                hide = "no";
                localStorage.setItem("ficstyle_hide", hide);
            }
            return hide;
        },        
        background: function() {
            chapters.css({
                "background-color": Options.backgroundColor,
                "box-shadow": "inset 0 0 8px 0 rgba(0, 0, 0, .2)"                           
            });
            $(".chapter .preface[role='complementary']").css("border-top-width", "0"); // the chapter title
            $("#chapters .userstuff blockquote").css({
                "background-image": "linear-gradient(to right, rgba(0, 0, 0, .035), transparent)",
                "border-width": "0"
            });
        },
        noBackground: function() {
            chapters.css({
                "background-color": "transparent",
                "box-shadow": "none"
            });
            $(".chapter .preface[role='complementary']").css("border-top-width", "1px"); // the chapter title
            $("#chapters .userstuff blockquote").css({
                "background-image": "none",
                "border-width": "2px",
                "border-color": "rgba(0, 0, 0, .1)"
            });
        },
        changingCSS: function(a, b) { // a = "Variables" (user changes) or "Options" (default); b = "no" background or "yes"
            var chapterWidth, fontName, fontSize;
            if (a == "Variables") {
                chapterWidth = this.chapterWidth();
                fontName = this.fontName();
                fontSize = this.fontSize();
            } else { // a = "Options"       
                chapterWidth = Options.chapterWidth;
                fontName = Options.fontName[0];
                fontSize = Options.fontSize;
            }
            chapters.css({
                "width": chapterWidth + "%",
                "font-family": fontName,
                "font-size": fontSize + "%"
            });
            if (b == "no") {
                this.noBackground();
            } else { // b = "yes"
                this.background();
            }
        }
    };

    // here start the changes
    Variables.changingCSS("Variables", Variables.showBackground());
    chapters.css({
        "color": Options.fontColor,
        "margin": "auto",
        "text-align": "justify",
        "padding-top": "30px",
        "padding-bottom": "30px",
        "border-radius": "100% / 60px",
        "margin-bottom": "20px",
        "padding-right": "3%",
        "padding-left": "3%"
    });
    $(".chapter .preface").css("margin-bottom", "0");
    $(".chapter .preface[role='complementary']").css({"margin-top": "0", "padding-top": "0"}); // the chapter title
    $("#workskin .notes").css("font-size", ".91rem"); // so they don't change if font-size is increased/de.
    $("#workskin .summary").css("font-size", ".91rem"); // same    
    $("#chapters .userstuff p").each(function(){ if(!$(this).text().trim().length){$(this).remove();} }) // it removes empty paragraphs
    $("#chapters .userstuff br").after("<p>").remove(); // add a empty paragraph after a '<br>' in order to add spaces between the paragraphs, and remove <br>
    $("#chapters .userstuff p").css("margin", "0.6em auto");
    $("#chapters .userstuff blockquote").css({
        "font-family": "inherit",
        "padding-top": "1px",
        "padding-bottom": "1px",
        "margin": "0 .5em"
    });
    $(".userstuff hr").css({
        "width": "100%",
        "height": "1px",
        "border": "0",
        "background-image": "linear-gradient(to right, transparent, rgba(0, 0, 0, .2), transparent)"
    });
    $(".userstuff img").css({"max-width": "100%", "height": "auto"});

    // the options displayed on the page
    $options = $("<div>", {id: "options", css: {
        "position": "fixed",
        "bottom": "1.5%",
        "left": ".5%",
        "margin": "0",
        "padding": " 0 5px 5px 5px",
        "font-family": "Consolas, monospace",
        "font-size": "16px",
        "color": "#000",
        "text-shadow": "0 0 2px rgba(0, 0, 0, .3)",
        "z-index": "999"
    } })    
    .append( $("<div>", {html: "x", id: "show-hide", attr: {"title": "show/hide"}, css: {"color": "#900"} }) )
    .append( $("<div>", {html: "r", id: "reset-local-storage", attr: {"title": "reset"} }) )
    .append( $("<div>", {html: "b", id: "chapter-background", attr: {"title": "add/remove background"} }) )
    .append( $("<div>", {html: "▫", id: "chapter-width-minus", attr: {"title": "decrease width"} }) )
    .append( $("<div>", {html: "□", id: "chapter-width-plus", attr: {"title": "increase width"} }) )
    .append( $("<div>", {html: "-", id: "font-size-minus", attr: {"title": "decrease font size"} }) )
    .append( $("<div>", {html: "+", id: "font-size-plus", attr: {"title": "increase font size"} }) )
    .append( $("<div>", {html: "«", id: "font-name-minus", attr: {"title": "previous font"} }) )
    .append( $("<div>", {html: "»", id: "font-name-plus", attr: {"title": "next font"} }) );
    $("body").append($options);    
    $("#options > div").css({
        "margin": "5px 0 0 0",
        "padding": "0",
        "cursor": "pointer"
    });

    if(Variables.hide() == "no") {
        $("#options > div").css("display", "block");
    } else {
        $("#options > div:nth-child(n+2)").css("display", "none");
    }

    var childrenOrig = $("#chapters .userstuff").children(),
        children = childrenOrig,
        child,
        checkChildren = function() { // find which paragraph the user is reading when changes are made
            var i = 0;            
            children.each(function() {
                pTop = $(this).offset().top;
                pHeight = $(this).height();
                pMargin = parseFloat($(this).css("margin-top"));
                if( (pTop-pMargin) <= documentTop && (pTop+pHeight+pMargin) >= documentTop) { // the p. which is on the top of the window screen
                    child = i;
                }
                i++;
            });
        },
        checkPosition = function() { // find the position using the 'index' of the p.
            documentTop = $(document).scrollTop();
            child = undefined;
            checkChildren();
            if (child === undefined) {
                children = $("#chapters .chapter").children();
                checkChildren();
            }
        },
        returnBack = function() { // scroll to the p. found above
            if(child !== undefined) {
                var r = $(children[child]).offset().top;
                $(document).scrollTop(r);
            }
            if(children !== childrenOrig) {
                children = childrenOrig;
            }
        };

    // changes triggered by the user    
    $("#show-hide").click(function() {
        $("#options > div:nth-child(n+2)").slideToggle("300");
        if(localStorage.getItem("ficstyle_hide") == "no") {
            localStorage.setItem("ficstyle_hide", "yes");
        } else { localStorage.setItem("ficstyle_hide", "no"); }
    });

    $("#reset-local-storage").click(function() {
        checkPosition();
        localStorage.setItem("ficstyle_fontName", Options.fontName[0]);
        localStorage.setItem("ficstyle_fontSize", Options.fontSize);
        localStorage.setItem("ficstyle_chapterWidth", Options.chapterWidth);        
        localStorage.setItem("ficstyle_showBackground", Options.showBackground);
        Variables.changingCSS("Options", Options.showBackground);
        returnBack();
    });

    $("#chapter-background").click(function() {        
        checkPosition();
        if(localStorage.getItem("ficstyle_showBackground") == "no") {
            localStorage.setItem("ficstyle_showBackground", "yes");
            Variables.background();
        } else {
            localStorage.setItem("ficstyle_showBackground", "no");
            Variables.noBackground();
        }
        returnBack();
    });

    var curFont, curFontIncr;
    $("#font-name-minus").click(function() {
        checkPosition();
        curFont = localStorage.getItem("ficstyle_fontName");    
        for(var i = 0; i < Options.fontName.length; i++) {
            if(curFont == Options.fontName[i]) {
                var j = i - 1;
                if(j === -1) {
                    var u = Options.fontName.length - 1;
                    curFontIncr = Options.fontName[u];
                } else {
                    curFontIncr = Options.fontName[j];
                }
                $(chapters).css("font-family", curFontIncr);
                localStorage.setItem("ficstyle_fontName", curFontIncr);
            }
        }
        returnBack();
    });
    $("#font-name-plus").click(function() {
        checkPosition();
        curFont = localStorage.getItem("ficstyle_fontName");    
        for(var i = 0; i < Options.fontName.length; i++) {
            if(curFont == Options.fontName[i]) {
                var j = i + 1;
                if(j === Options.fontName.length) {                                        
                    curFontIncr = Options.fontName[0];
                } else {
                    curFontIncr = Options.fontName[j];
                }
                $(chapters).css("font-family", curFontIncr);
                localStorage.setItem("ficstyle_fontName", curFontIncr);
            }
        }
        returnBack();
    });

    var curSize;
    $("#font-size-minus").click(function() {
        checkPosition();
        curSize = parseFloat(localStorage.getItem("ficstyle_fontSize")) - 2.5;
        $(chapters).css("font-size", curSize+"%");
        localStorage.setItem("ficstyle_fontSize", curSize);
        returnBack();
    });
    $("#font-size-plus").click(function() { 
        checkPosition();       
        curSize = parseFloat(localStorage.getItem("ficstyle_fontSize")) + 2.5;
        $(chapters).css("font-size", curSize+"%");
        localStorage.setItem("ficstyle_fontSize", curSize);
        returnBack();
    });

    var curWidth;
    $("#chapter-width-minus").click(function() {
        checkPosition();
        curWidth = parseInt(localStorage.getItem("ficstyle_chapterWidth")) - 10;
        if(curWidth < 10) { curWidth = 10; }
        $(chapters).css("width", curWidth+"%");
        localStorage.setItem("ficstyle_chapterWidth", curWidth);
        returnBack();
    });
    $("#chapter-width-plus").click(function() {
        checkPosition();
        curWidth = parseInt(localStorage.getItem("ficstyle_chapterWidth")) + 10;
        if(curWidth > 90) { curWidth = 90; }
        $(chapters).css("width", curWidth+"%");
        localStorage.setItem("ficstyle_chapterWidth", curWidth);
        returnBack();
    });

})(window.jQuery);