Rule34Hentai Improved

Fixes stuff, adds like and favorite under images, highlights animated, makes the site more compact, etc.

As of 2020-10-30. See the latest version.

// ==UserScript==
// @name         Rule34Hentai Improved
// @namespace    http://tampermonkey.net/
// @author       Hentiedup
// @version      0.9.2.5
// @icon         https://i.imgur.com/Aea35p5.png
// @description  Fixes stuff, adds like and favorite under images, highlights animated, makes the site more compact, etc.
// @include      https://rule34hentai.net*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    /*============================================*/
    /*============================================*/
    /*=*|      The settings are now found      |*=*/
    /*=*|          on the actual site          |*=*/
    /*=*|      in the "My Profile" section     |*=*/
    /*============================================*/
    /*============================================*/



    /* Don't edit anything below */
    /*===========================*/
	/*       video/image       */
    var HighlightVideos = GM_getValue("HighlightVideos", true);
    var AutoplayVideos = GM_getValue("AutoplayVideos", true);;
    var StopHidingMyCursorOnVideo = GM_getValue("StopHidingMyCursorOnVideo", true);
    var DownsizeToFit = GM_getValue("DownsizeToFit", true);
    var DownsizeToFitLeaveSpaceInfo = GM_getValue("DownsizeToFitLeaveSpaceInfo", false);
    var NextPrevWithArrowKeys = GM_getValue("NextPrevWithArrowKeys", true);
    var AllowContextMenuOnImages = GM_getValue("AllowContextMenuOnImages", true);

	/*      Compact site       */
    var CompactSiteHeader = GM_getValue("CompactSiteHeader", "compacter");
    var HideHeaderOnPosts = GM_getValue("HideHeaderOnPosts", false);
    var HideEmptySections = GM_getValue("HideEmptySections", true);
    var HideLog = GM_getValue("HideLog", true);
    var HideImageVideoHeader = GM_getValue("HideImageVideoHeader", true);
    var RemoveSomeSneakyAds = GM_getValue("RemoveSomeSneakyAds", true);
    var RemovePremiumAds = GM_getValue("RemovePremiumAds", true);
    var CenterContent = GM_getValue("CenterContent", false);

    /*   Sidepanel   */
    var HideSidepanel = GM_getValue("HideSidepanel", "no");
    var HideNavigationInSidePanel = GM_getValue("HideNavigationInSidePanel", false);
    var HideFeaturedImgInSidePanel = GM_getValue("HideFeaturedImgInSidePanel", false);
    var HideNewsInSidePanel = GM_getValue("HideNewsInSidePanel", false);
    var HideCommentsInSidePanel = GM_getValue("HideCommentsInSidePanel", false);
    var HidePopularTagsInSidePanel = GM_getValue("HidePopularTagsInSidePanel", false);
    var HideTagsInSidePanel = GM_getValue("HideTagsInSidePanel", false);
    var HideLikesInSidePanel = GM_getValue("HideLikesInSidePanel", true);
    var HideFavByInSidePanel = GM_getValue("HideFavByInSidePanel", false);
    var HideReportInSidePanel = GM_getValue("HideReportInSidePanel", false);
    var HideImgControlInSidePanel = GM_getValue("HideImgControlInSidePanel", false);

	/*      like/favorite      */
    var EnableLikeFavoriteButtonsBelowImage = GM_getValue("EnableLikeFavoriteButtonsBelowImage", true);
    var LikeFavMASLocation = GM_getValue("LikeFavMASLocation", "under");

    /*       Block tags       */
    var BlockedTags = [];
    var BlockedTagsString = GM_getValue("BlockedTagsString", null);
    if(BlockedTagsString) { BlockedTags = JSON.parse(BlockedTagsString); }

    /*     Mark as seen     */
    var EnableMarkAsSeenSystem = GM_getValue("EnableMarkAsSeenSystem", true);
    var MarkSeenEffect = GM_getValue("MarkSeenEffect", "fade");
    var AutoMarkAsSeen = GM_getValue("AutoMarkAsSeen", true);
    var MarkedAsSeen = [];
    var MarkedAsSeenString = GM_getValue("MarkedAsSeenString", null);
    if(MarkedAsSeenString) { MarkedAsSeen = JSON.parse(MarkedAsSeenString); }

    var SortFixed = true;

    var banIcon = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ban" class="svg-inline--fa fa-ban fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"></path></svg>`;
    var eyeIcon = `<svg class="eyeIcon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>`;
    var eyeSlashIcon = `<svg class="eyeSlashIcon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>`;

    //Styles
    if(true) {
		addGlobalStyle(`
			a.shm-thumb-link > img {
				padding: 0;
			}
			a.tagit-close {
				display: inline;
				padding: 0;
			}
			.custom-button {
				cursor: pointer;
				width: 35px;
				padding: 3px;
				margin: 0;
				border-radius: 20px;
			}
			.custom-button:hover {
				background-color: rgba(255,255,255,.75);
			}
			.customButtonText {
				position: relative;
				top: -1px;
				width: auto;
				display: block;
				text-align: center;
			}
			.customButtonDiv {
				display: inline-block;
				margin: 0;
				padding: 0;
				width: auto;
				float: left;
			}
			.customButtonDiv:nth-of-type(1) { margin-right: 10px; }
			.customButtonDiv:nth-of-type(2) { margin-left: 10px; margin-right: 10px; }
			.customButtonDiv:nth-of-type(3) { margin-left: 10px; }

			#Uploadhead > .blockbody > .mini_upload > form > ul {
				width: 100%;
				margin: 0;
				resize: vertical;
			}

			#r34hi_settings label
			{
				display: block;
			}
			#r34hi_settings input[type="checkbox"]
			{
				transform: scale(1.2);
			}
			#r34hi_settings select
			{
				width: auto;
			}
			#r34hi_settings > .blockbody
			{
				padding-bottom: 30px;
			}
			#r34hi_settings h4
			{
				margin: 23px 0 15px 0;
			}
			#tag-block-save-button
			{
				display: none;
				margin-left: 5px;
			}

            #markedAsSeenCB
            {
                display: inline-block;
                width: 35px;
                height: 35px;
            }
			#markedAsSeenCB > svg
			{
				height: 35px;
				width: 35px;
				margin: 0;
				cursor: pointer;
			}
			svg.eyeSlashIcon
			{
				color: white;
			}
			svg.eyeIcon
			{
				color: #00c85f;
			}

			.blockTagButton
			{
				display: inline-block;
				width: 11px;
				height: 11px;
				vertical-align: middle;
				cursor: pointer;
			}
			.blockTagButton > svg
			{
				vertical-align: top;
				color: #ff5454;
			}
		`);

        if(EnableMarkAsSeenSystem && MarkedAsSeen.length > 0 && MarkSeenEffect != "nothing")
        {
            let MarkedAsSeenCSS = "";
            $("a.thumb[data-post-id]").each(function(){
                let curID = $(this).attr("data-post-id");
                if(MarkedAsSeen.includes(curID))
                    MarkedAsSeenCSS += "a.thumb[data-post-id='"+curID+"'], ";
            });
            MarkedAsSeenCSS = MarkedAsSeenCSS.substring(0, MarkedAsSeenCSS.length - 2);

            if(MarkSeenEffect == "fade")
                MarkedAsSeenCSS += " { opacity: 0.2; }";
            else if(MarkSeenEffect == "hide")
                MarkedAsSeenCSS += " { display: none; }";
            //alert(MarkedAsSeenCSS);
            addGlobalStyle(MarkedAsSeenCSS);
        }

        if(BlockedTags.length > 0)
        {
            let rules = '';
            for(let i = 0; i < BlockedTags.length; i++)
				rules += ('a.shm-thumb-link[data-tags~="'+BlockedTags[i]+'"]' + (i < BlockedTags.length-1 ? ',\n' : ''));
            rules += '\n{ display: none; }';
            //console.log(rules);
            addGlobalStyle(rules);
        }

		if(RemoveSomeSneakyAds)
			addGlobalStyle(`
				/*The site only uses iframes for ads, so might as well hide all of them*/
				iframe { display: none; }
				#header td:nth-of-type(1) center:nth-of-type(2) > div { display: none; }

				/*As far as I can tell the "Recommended" div is only for ads*/
				section[id="Recommended_for_youleft"] { display: none; }

				/*Hiding some links from the header that are pretty much just ads*/
				#header td ul > li a:not([href^="https://rule34hentai.net"]):not([href^="#"]) { display: none; }
                #header td ul > li img[src^="https://theporndude.com"] { display: none; }
			`);

		if(RemovePremiumAds)
			addGlobalStyle(`
				section[id=""] { display: none; }
			`);

        if(CenterContent)
            addGlobalStyle(`
				#fluid_video_wrapper_video-id, #main_image
				{
					display: block;
					margin: auto;
				}

				#Imagemain + section > .blockbody, #Videomain + section > .blockbody
				{
					width: 720px;
					display: block;
					margin: auto;
				}
			`);

        if(HideSidepanel == "all")
            addGlobalStyle(`
				body > nav { display: none; }
				body > article { margin-left: 16px; }
			`);
        if(HideNavigationInSidePanel)
            addGlobalStyle(`#Navigationleft { display: none; }`);
        if(HideFeaturedImgInSidePanel)
            addGlobalStyle(`#Featured_Imageleft { display: none; }`);
        if(HideNewsInSidePanel)
            addGlobalStyle(`#Newsleft { display: none; }`);
        if(HideCommentsInSidePanel)
            addGlobalStyle(`#commentlistrecent { display: none; }`);
        if(HidePopularTagsInSidePanel)
            addGlobalStyle(`#Popular_Tagsleft { display: none; }`);
        if(HideTagsInSidePanel)
            addGlobalStyle(`#Tagsleft { display: none; }`);
        if(HideFavByInSidePanel)
            addGlobalStyle(`#Favorited_Byleft { display: none; }`);
        if(HideReportInSidePanel)
            addGlobalStyle(`#Report_Imageleft { display: none; }`);
        if(HideImgControlInSidePanel)
            addGlobalStyle(`#Image_Controlsleft { display: none; }`);
		if(HideLikesInSidePanel)
			addGlobalStyle(`#Image_Scoreleft { display: none; }`);

		if(StopHidingMyCursorOnVideo)
			addGlobalStyle(`#video-id { cursor: auto !important; }`);

		if(HideImageVideoHeader)
			addGlobalStyle(`#Imagemain > h3, #Videomain > h3, #imagelist > h3 { display: none; }`);

        if(CompactSiteHeader == "compacter")
            addGlobalStyle(`
				#header { height: auto; }
				#header tr > td { text-align: left; }
				#header tr > td > center:nth-of-type(3) { width: calc(100% - 290px); }
				#header tr > td > center:nth-of-type(1),
				#header tr > td > center:nth-of-type(3)
				{ display: inline-block; }
				#header tr > td > center:nth-of-type(1)
				{
				vertical-align: top;
				padding: 0 10px 0 10px;
				}
				#header tr > td > center:nth-of-type(2) { display: none;  }
				#header tr > td > center:nth-of-type(3) > form { min-width: 300px; }
				#header tr > td > center:nth-of-type(3) > ul { margin-left: -270px; }

				#header tr > td section > h3,
				#header tr > td section > .blockbody { margin: 0; }
			`);

        //fix video not properly sizing when loaded in a non-active tab (chrome)
        addGlobalStyle(`#fluid_video_wrapper_video-id { width: auto !important; height: auto !important; }`);

		if(DownsizeToFit) {
			addGlobalStyle(`
				#fluid_video_wrapper_video-id, #main_image {
					max-height: calc(100vh - 37px` +
                           (HideHeaderOnPosts ? `` : (CompactSiteHeader == "no" ? ` - 350px` : (CompactSiteHeader == "compact" ? ` - 146px` : ` - 96px`))) +
                           (HideImageVideoHeader ? `` : ` - 41px`) +
                           (DownsizeToFitLeaveSpaceInfo ? ` - 235px` : (LikeFavMASLocation == "sidepanel" ? `` : `  - 85px`)) + `) !important; max-width: 100% !important;
				}

                #Image_Controlsleft form:not([action]):not([href]), #Image_Controlsleft form:not([action]):not([href]) + br { display: none; }
			`);
		}

		if(CompactSiteHeader != "no")
			addGlobalStyle(`
				header {margin: 0; padding: 0;}
				header p {display: none;}
				header ul.ui-widget {
					margin: 5px;
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					width: calc(100% - 100px);
				}
				header form > input[value=Search],
				header form > input[value=Search]:visited {
					vertical-align: middle;
					height: 36px;
					border-radius: 8px;
					background-color: #dec4a0;
					border-color: #725327;
					font-weight: 700;
					cursor: pointer;
				}
				header form > input[value=Search]:hover,
				header form > input[value=Search]:active {
					background-color: #dabc92;
				}
				#header h1 {font-size: 14px;}
				#header img.wp-image-67962 {
					height: 50px;
					width: auto;
				}
				#header img.wp-image-69454 {
					display: none;
				}
				#header td > center > ul {margin: 2px 0 0 0;}

				#Uploadhead > .blockbody > .mini_upload > small,
				#Uploadhead > .blockbody > .mini_upload > form > ul,
				#Uploadhead > .blockbody > .mini_upload > form > input[type=submit]
				{
					display: none;
				}

				#Loginhead > .blockbody {
					display: none;
				}
				#Loginhead > h3 {
					cursor: pointer;
				}
			`);

		if(HideLog)
			addGlobalStyle(`b#flash { display: none; }`);
    }

    if(HideHeaderOnPosts && window.location.href.includes("/post/view/"))
        addGlobalStyle(`
            header { display: none; }
        `);

    //sidepanel hiding for image-only
    if(HideSidepanel == "vid-img" && window.location.href.includes("/post/view/"))
    {
        addGlobalStyle(`
			body > nav { display: none; }
			body > article { margin-left: 16px; }
		`);
    }

    $(function() {
        //cleanup cloudflare GET string
        if(window.location.href.includes("?__cf"))
            window.history.replaceState( {} , $("title").html(), window.location.href.split("?__cf")[0]);

        if(RemoveSomeSneakyAds)
        {
            //nasty new full screen input blocking ad thingamajig that can't be removed with CSS rules
            //hopefully this is enough to remove it and keep it removed, if not, might need to do some sort of repeating check for it -.-
            $("body > footer~div:not([id]):not([class])").remove();
        }

        if(CompactSiteHeader != "no") {
            $("#Uploadhead #data0").change(function(){
                $("#Uploadhead > .blockbody > .mini_upload > small, #Uploadhead > .blockbody > .mini_upload > form > ul, #Uploadhead > .blockbody > .mini_upload > form > input[type=submit]").show(100);
            });

            $("#Loginhead > h3").click(function(){
                $(this).next(".blockbody").toggle(100);
            });
        }

		if(RemovePremiumAds)
		{
			$.each($("article > section"), function(i, v){
				//only hiding a section with this specific text, since I'm not sure if potential important site messages use this same section. This way if the message changes, it will not be hidden.
				if($(v).text().includes("ign up for a premium account"))
					$(v).hide();
			})
		}

        //options menu
        if(window.location.pathname == "/user")
        {
            if(EnableMarkAsSeenSystem)
                $("#Statsmain > .blockbody").append(`<br>Posts seen (R34HI): ` + MarkedAsSeen.length);

            let blockedTagsDisplay = BlockedTagsString.replace(/[\[\]\"\s]/g, "");
            blockedTagsDisplay = blockedTagsDisplay.replace(/,/g, ",\n");
            let textareaH = BlockedTags.length * 14 + 50;
            if(textareaH > 400)
                textareaH = 400;
            $("#Optionsmain").after(`<section id="r34hi_settings"><h3 data-toggle-sel="#Optionsmain">R34H Improved Settings</h3><div class="blockbody"><form action="#">` +
                                    `<h4>Video/Image</h4>` +
                                    `<label><input type="checkbox" name="HighlightVideos" `+(HighlightVideos ? "checked" : "")+`> Highlight videos</label>` +
                                    `<label><input type="checkbox" name="AutoplayVideos" `+(AutoplayVideos ? "checked" : "")+`> Autoplay videos</label>` +
                                    `<label><input type="checkbox" name="StopHidingMyCursorOnVideo" `+(StopHidingMyCursorOnVideo ? "checked" : "")+`> Show cursor on videos</label>` +
                                    `<label style="display: inline;"><input type="checkbox" name="DownsizeToFit" `+(DownsizeToFit ? "checked" : "")+`> Downsize images/videos to fit on screen</label> <a id="downsizeHelp" style="cursor: pointer; color: #8f8fff;">?</a>` +
                                    `<label><input type="checkbox" name="DownsizeToFitLeaveSpaceInfo" `+(DownsizeToFitLeaveSpaceInfo ? "checked" : "")+`> When Downsizing, leave space for info box below post</label>` +
                                    `<label><input type="checkbox" name="CenterContent" `+(CenterContent ? "checked" : "")+`> Center video/image and info-box below it</label>` +
                                    `<label><input type="checkbox" name="NextPrevWithArrowKeys" `+(NextPrevWithArrowKeys ? "checked" : "")+`> Go to next/previous image/video with left/right arrow</label>` +
                                    `<label><input type="checkbox" name="AllowContextMenuOnImages" `+(AllowContextMenuOnImages ? "checked" : "")+`> Allow context-menu/right-click on images</label>` +

                                    `<h4>Like/Favorite</h4>` +
                                    `<label><input type="checkbox" name="EnableLikeFavoriteButtonsBelowImage" `+(EnableLikeFavoriteButtonsBelowImage ? "checked" : "")+`> Enable like and favorite buttons</label>` +
                                    `<label> <select name="LikeFavMASLocation">` +
									`<option value="under">Under post</option>` +
									`<option value="sidepanel">Sidepanel Image Controls</option></select>  Like/Favorite/Mark as seen button location</label>` +

                                    `<h4>Marked as Seen</h4>` +
                                    `<label><input type="checkbox" name="EnableMarkAsSeenSystem" `+(EnableMarkAsSeenSystem ? "checked" : "")+`> Enable the Mark as seen system</label>` +
                                    `<label><input type="checkbox" name="AutoMarkAsSeen" `+(AutoMarkAsSeen ? "checked" : "")+`> Automatically mark posts as seen as you open them</label>` +
                                    `<label> <select name="MarkSeenEffect">` +
									`<option value="nothing">Display normally</option>` +
									`<option value="fade">Display faded</option>` +
									`<option value="hide">Hide</option></select>  What to do with posts marked as seen</label>` +

                                    `<h4>Compact Site</h4>` +
									`<label> <select name="CompactSiteHeader">` +
									`<option value="no">Normal</option>` +
									`<option value="compact">Compact</option>` +
									`<option value="compacter">More Compact</option></select>  Header</label>` +
                                    `<label><input type="checkbox" name="HideHeaderOnPosts" `+(HideHeaderOnPosts ? "checked" : "")+`> Hide the site header on post pages</label>` +
                                    `<label><input type="checkbox" name="HideEmptySections" `+(HideEmptySections ? "checked" : "")+`> Hide Empty site sections</label>` +
                                    `<label><input type="checkbox" name="HideLog" `+(HideLog ? "checked" : "")+`> Hide the yellow log</label>` +
                                    `<label><input type="checkbox" name="HideImageVideoHeader" `+(HideImageVideoHeader ? "checked" : "")+`> Hide the image/video header</label>` +
                                    `<label><input type="checkbox" name="RemoveSomeSneakyAds" `+(RemoveSomeSneakyAds ? "checked" : "")+`> Remove some sneaky ads</label>` +
									`<label><input type="checkbox" name="RemovePremiumAds" `+(RemovePremiumAds ? "checked" : "")+`> Remove ads for premium</label>` +

                                    `<h4>Sidepanel</h4>` +
                                    `<label> <select name="HideSidepanel">` +
									`<option value="no">Don't Hide</option>` +
									`<option value="all">Always Hide</option>` +
									`<option value="vid-img">Hide in img-video pages</option></select>  Hide the entire sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideNavigationInSidePanel" `+(HideNavigationInSidePanel ? "checked" : "")+`> Hide the Navigation section in the sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideFeaturedImgInSidePanel" `+(HideFeaturedImgInSidePanel ? "checked" : "")+`> Hide the Featured image section in the home page sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideNewsInSidePanel" `+(HideNewsInSidePanel ? "checked" : "")+`> Hide the News section in the homepage sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideCommentsInSidePanel" `+(HideCommentsInSidePanel ? "checked" : "")+`> Hide the Comments section in the homepage sidepanel</label>` +
                                    `<label><input type="checkbox" name="HidePopularTagsInSidePanel" `+(HidePopularTagsInSidePanel ? "checked" : "")+`> Hide the Popular tags section in the homepage sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideTagsInSidePanel" `+(HideTagsInSidePanel ? "checked" : "")+`> Hide the Tags section in the sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideLikesInSidePanel" `+(HideLikesInSidePanel ? "checked" : "")+`> Hide the Likes/Score section in the site sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideFavByInSidePanel" `+(HideFavByInSidePanel ? "checked" : "")+`> Hide the Favorited by section in the site sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideReportInSidePanel" `+(HideReportInSidePanel ? "checked" : "")+`> Hide the Report image section in the site sidepanel</label>` +
                                    `<label><input type="checkbox" name="HideImgControlInSidePanel" `+(HideImgControlInSidePanel ? "checked" : "")+`> Hide the Image controls section in the site sidepanel</label>` +

                                    `<h4>Blocked Tags<button id="tag-block-save-button">Save</button></h4>` +
                                    `<textarea name="BlockedTags" style="width: 350px; height: `+textareaH+`px;">`+blockedTagsDisplay+`</textarea><p>This is mainly for removing blocked tags from the list, but you can add them from here as well.<br>Just seperate tags with "," and use "_" in place of spaces.</p>` +
                                    `</form></div></section>`);

            $("#r34hi_settings select[name='HideSidepanel'] > option[value='"+HideSidepanel+"']").attr("selected", "selected");
			$("#r34hi_settings select[name='CompactSiteHeader'] > option[value='"+CompactSiteHeader+"']").attr("selected", "selected");
            $("#r34hi_settings select[name='MarkSeenEffect'] > option[value='"+MarkSeenEffect+"']").attr("selected", "selected");
            $("#r34hi_settings select[name='LikeFavMASLocation'] > option[value='"+LikeFavMASLocation+"']").attr("selected", "selected");

            $("#downsizeHelp").click(function(){
                alert(`The image/video is downsized to fit the screen if it's too large.\n
The downsizing is calculated so that the image/video + voting buttons (if at the bottom) are fully visible with the page scroll position at 0 (top of page).\n
Site header and image header sizing is taken into account.\n
"Hide empty site sections" and "Hide the yellow log" are assumed to be enabled. The downsizing does not take those into account.`);
            });

            $("#r34hi_settings input").change(function(){
                GM_setValue($(this).attr("name"), $(this).is(':checked'));
            });
            $("#r34hi_settings select").change(function(){
                GM_setValue($(this).attr("name"), $(this).val());
            });
            $("#r34hi_settings textarea").on("input", function(){
                if($(this).val() != blockedTagsDisplay)
                    $("#tag-block-save-button").show(200);
            });
            $("#tag-block-save-button").click(function(e){
                e.preventDefault();
                e.stopPropagation();

                let temp = $("textarea[name='BlockedTags']").val().replace(/\s/g, "");

                //remove , if used at the end
                if(temp[temp.length-1] == ",")
                    temp = temp.substr(0, temp.length-1);

                if(temp == "")
                    BlockedTags = [];
                else
                    BlockedTags = temp.split(",");
                BlockedTagsString = JSON.stringify(BlockedTags);
                GM_setValue("BlockedTagsString", BlockedTagsString);
                blockedTagsDisplay = $("textarea[name='BlockedTags']").val();
                $(this).hide(200);
            });
        }
        else
        {
            if(HighlightVideos)
                $("a.shm-thumb-link > img[title*='// webm'], a.shm-thumb-link > img[title*='// mp4'], a.shm-thumb-link > img[title*='// gif']").attr("style", "border: solid 2px #fb2ccc !important; box-shadow: 0 0 5px 1px red;");

            if(window.location.href.match(/^https:\/\/rule34hentai\.net\/post\/view\/\d+?(\?.*|\#.*|)$/g))
            {
                //Mark as seen
                if($("#Loginhead").length == 0 && EnableMarkAsSeenSystem)
                {
                    var imageID = $("[name='image_id']").prop("value");
                    if(!imageID)
                        alert("failed to get imageID");
                    let seen = MarkedAsSeen.includes(imageID);

                    let insertHTML = `<div class="customButtonDiv"><a id="markedAsSeenCB" class="custom-button" alt="`+(seen ? `seen` : `unseen`)+`" title="`+(seen ? `Mark as Unseen?` : `Mark as Seen?`)+`">`+(seen ? eyeIcon : eyeSlashIcon)+`</a> <span class="customButtonText">`+(seen ? `Seen` : `Unseen`)+`</span></div>`;

                    if(LikeFavMASLocation == "under")
                        $(".image_info").parent().parent().prepend(insertHTML);
                    else
                    {
                        $("#Image_Controlsleft > .blockbody > form:last").css("margin-bottom", "15px");
                        $("#Image_Controlsleft > .blockbody").append(insertHTML);
                        $("#Image_Controlsleft > .blockbody").css("padding-bottom", "70px");
                    }

                    $("#markedAsSeenCB").parent().click(function(){
                        MarkedAsSeenString = GM_getValue("MarkedAsSeenString", null);
                        if(MarkedAsSeenString) { MarkedAsSeen = JSON.parse(MarkedAsSeenString); }
                        seen = MarkedAsSeen.includes(imageID);

                        if(seen)
                        {
                            seen = false;
                            let index = MarkedAsSeen.indexOf(imageID);
                            while(index > -1)
                            {
                                MarkedAsSeen.splice(index, 1);
                                index = MarkedAsSeen.indexOf(imageID);
                            }
                        }
                        else
                        {
                            seen = true;
                            MarkedAsSeen.push(imageID);
                        }
                        $(this).html(`<a id="markedAsSeenCB" class="custom-button" alt="`+(seen ? `seen` : `unseen`)+`" title="`+(seen ? `Mark as Unseen?` : `Mark as Seen?`)+`">`+(seen ? eyeIcon : eyeSlashIcon)+`</a> <span class="customButtonText">`+(seen ? `Seen` : `Unseen`)+`</span>`);
                        MarkedAsSeenString = JSON.stringify(MarkedAsSeen);
                        GM_setValue("MarkedAsSeenString", MarkedAsSeenString);
                    });

                    var waitForFocus;
                    waitForFocus = setInterval(function(){
                        if(document.hasFocus())
                        {
                            if(AutoMarkAsSeen && !seen)
                            {
                                $("#markedAsSeenCB").parent().click();
                                //alert("auto marked");
                            }
                            clearInterval(waitForFocus);
                        }
                    }, 100);
                }

                //like favorite buttons
                if($("#Loginhead").length == 0 && EnableLikeFavoriteButtonsBelowImage)
                {
                    let insertHTML = `<div class="customButtonDiv"><img id="like-butt" class="custom-button" src="https://i.imgur.com/Kh1HzGr.png" alt="like" title="like">` +
                        `<img id="dislike-butt" class="custom-button" src="https://i.imgur.com/b4syBNK.png" alt="dislike" title="dislike"><span id="customLikeButtonText" class="customButtonText">` +
                        $("#Image_Scoreleft > .blockbody").text().trim().replace(/[^0-9]/g, "") +
                        `</span></div><div class="customButtonDiv"><img id="favorite-butt" class="custom-button` +
                        ($("#Image_Controlsleft form input[value='Un-Favorite']").length > 0 ? " unfavorite" : "") + `" src="` +
                        ($("#Image_Controlsleft form input[value='Un-Favorite']").length > 0 ? "https://i.imgur.com/wAB0t48.png" : "https://i.imgur.com/dTpBrIj.png") +
                        `" alt="` + ($("#Image_Controlsleft form input[value='Un-Favorite']").length > 0 ? "unfavorite" : "favorite") +
                        `" title="` + ($("#Image_Controlsleft form input[value='Un-Favorite']").length > 0 ? "unfavorite" : "favorite") +
                        `"><span id="customFavButtonText" class="customButtonText">` +
                        $("#Favorited_Byleft > .blockbody").text().split(":")[0].trim().replace(/[^0-9]/g, "") + `</span></div>`;

                    if(LikeFavMASLocation == "under")
                        $(".image_info").parent().parent().prepend(insertHTML);
                    else
                    {
                        $("#Image_Controlsleft > .blockbody > form[action='/change_favorite']").css("display", "none");
                        $("#Image_Controlsleft > .blockbody > form:last").css("margin-bottom", "15px");
                        $("#Image_Controlsleft > .blockbody").append(insertHTML);
                        $("#Image_Controlsleft > .blockbody").css("padding-bottom", "70px");
                    }

                    $("#like-butt").click(function() {
                        let auth = $("#Image_Scoreleft form input[value='Vote Up']").parent().find("input[name='auth_token']").prop("value");
                        let id = $("#Image_Scoreleft form input[value='Vote Up']").parent().find("input[name='image_id']").prop("value");
                        $("#customLikeButtonText").text("...");
                        $.post( "/numeric_score_vote", { auth_token: auth, image_id: id, vote: "up" }, function(data){
                            $("#customLikeButtonText").text($(data).find("#Image_Scoreleft > .blockbody").text().trim().replace(/[^0-9]/g, ""));
                        }).fail(function(){
                            $("#customLikeButtonText").text("error");
                        });
                    });
                    $("#dislike-butt").click(function() {
                        let auth = $("#Image_Scoreleft form input[value='Remove Vote']").parent().find("input[name='auth_token']").prop("value");
                        let id = $("#Image_Scoreleft form input[value='Remove Vote']").parent().find("input[name='image_id']").prop("value");
                        $("#customLikeButtonText").text("...");
                        $.post( "/numeric_score_vote", { auth_token: auth, image_id: id, vote: "down" }, function(data){
                            $("#customLikeButtonText").text($(data).find("#Image_Scoreleft > .blockbody").text().trim().replace(/[^0-9]/g, ""));
                        }).fail(function(){
                            $("#customLikeButtonText").text("error");
                        });
                    });
                    $("#favorite-butt").click(function() {
                        if($(this).hasClass("unfavorite"))
                        {
                            let auth = $("#Image_Controlsleft form input[value='Un-Favorite']").parent().find("input[name='auth_token']").prop("value");
                            let id = $("#Image_Controlsleft form input[value='Un-Favorite']").parent().find("input[name='image_id']").prop("value");
                            $("#customFavButtonText").text("...");
                            $.post( "/change_favorite", { auth_token: auth, image_id: id, favorite_action: "unset" }, function(data){
                                $("#customFavButtonText").text($(data).find("#Favorited_Byleft > .blockbody").text().split(":")[0].trim().replace(/[^0-9]/g, ""));
                                $("#favorite-butt").attr("src", "https://i.imgur.com/dTpBrIj.png");
                                $("#favorite-butt").attr("alt", "favorite");
                                $("#favorite-butt").attr("title", "favorite");
                                $("#Image_Controlsleft form input[value='Un-Favorite']").attr("value", "Favorite");
                                $("#Image_Controlsleft form input[name='favorite_action']").attr("value", "set");
                                $("#favorite-butt").removeClass("unfavorite");
                            }).fail(function(){
                                $("#customFavButtonText").text("error");
                            });
                        }
                        else
                        {
                            let auth = $("#Image_Controlsleft form input[value='Favorite']").parent().find("input[name='auth_token']").prop("value");
                            let id = $("#Image_Controlsleft form input[value='Favorite']").parent().find("input[name='image_id']").prop("value");
                            $("#customFavButtonText").text("...");
                            $.post( "/change_favorite", { auth_token: auth, image_id: id, favorite_action: "set" }, function(data){
                                $("#customFavButtonText").text($(data).find("#Favorited_Byleft > .blockbody").text().split(":")[0].trim().replace(/[^0-9]/g, ""));
                                $("#favorite-butt").attr("src", "https://i.imgur.com/wAB0t48.png");
                                $("#favorite-butt").attr("alt", "unfavorite");
                                $("#favorite-butt").attr("title", "unfavorite");
                                $("#Image_Controlsleft form input[value='Favorite']").attr("value", "Un-Favorite");
                                $("#Image_Controlsleft form input[name='favorite_action']").attr("value", "unset");
                                $("#favorite-butt").addClass("unfavorite");
                            }).fail(function(){
                                $("#customFavButtonText").text("error");
                            });
                        }
                    });
                }

                //arrow navigation
                if(NextPrevWithArrowKeys && window.location.href.includes("/post/view/")) {
                    $("body").keyup(function(event){
                        if($("textarea:focus, input[type=text]:focus").length == 0)
                        {
                            //console.log("keypress");
                            if(event.which == 39) {
                                //console.log("right");
                                $("#nextlink")[0].click();
                            }
                            else if(event.which == 37) {
                                //console.log("left");
                                $("#prevlink")[0].click();
                            }
                        }
                    });
                }

                if(AllowContextMenuOnImages)
                {
                    //looks like the site's own scripts add the events after the page loads, so we have to wait so this happens after that
                    setTimeout(function(){
                        $("#main_image").replaceWith($("#main_image").clone());
                    }, 500);
                }

                if(AutoplayVideos)
                {
                    let vid = $("#video-id");
                    if(vid.length > 0)
                    {
                        $("#video-id")[0].autoplay = true;
                        $("#video-id")[0].play();
                    }
                    let playInterv;
                    let elapsed = 0;
                    playInterv = setInterval(function(){
                        let target = $("#video-id_fluid_initial_play");
                        if(target.length > 0)
                        {
                            target.click();
                            target.hide();
                            console.log("play clicked");
                            clearInterval(playInterv);
                        }
                        else if(elapsed > 20000)
                            clearInterval(playInterv);
                        elapsed += 100;
                    }, 100);
                }
            }

            if(HideEmptySections) {
                $("article > section > .blockbody, nav > section > .blockbody").each(function(){
                    if($(this).find("*:visible").not("p:empty").length == 0)
                        $(this).parent().hide();
                });
            }

            //append tag blocking buttons
            if(true)
            {
                $("td.tag_name_cell").after(`<div class="blockTagButton" alt="block-tag" title="block tag">`+banIcon+`</div>`);
                $(".blockTagButton").click(function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    BlockTag($(this).prev().find(".tag_name").text());

                    let target = $(this);
                    target.css("cursor", "wait");
                    setTimeout(function(){ target.css("cursor", "pointer"); }, 1000);
                });
            }

            if(SortFixed)
            {
                if(window.location.href.match(/^https:\/\/rule34hentai\.net\/post\/list.*?\/1.*$/g)) //post list pages only
                {
                    let sortNew = $("#header ul > li .dropdown a[href*='order%3Did_desc']");
                    if(sortNew.length > 0)
                    {
                        let newHref = window.location.href;
                        newHref = newHref.replace(/(\s?|\%20)order\%3Dscore_(desc|asc)/, ""); //remove other (known)ordering tags
                        if(!newHref.includes("order%3Did_desc"))
                            newHref = newHref.split("/1")[0] + " order%3Did_desc/1";

                        sortNew.prop("href", newHref);
                    }
                    let sortTop = $("#header ul > li .dropdown a[href*='order%3Dscore_desc']");
                    if(sortTop.length > 0)
                    {
                        let newHref = window.location.href;
                        newHref = newHref.replace(/(\s?|\%20)order\%3Did_(desc|asc)/, ""); //remove other (known)ordering tags
                        if(!newHref.includes("order%3Dscore_desc"))
                            newHref = newHref.split("/1")[0] + " order%3Dscore_desc/1";

                        sortTop.prop("href", newHref);
                    }
                }
            }
        }
    });

    function BlockTag(tag)
    {
        tag = tag.toLowerCase();
        tag = tag.replace(/\s/g, "_");
        console.log("added to tag block list: " + tag);
        if(!tag || tag.length <= 0)
            return;

        if(!BlockedTags.includes(tag))
            BlockedTags.push(tag);
        else
            BlockedTags.splice(BlockedTags.indexOf(tag), 1);

        BlockedTagsString = JSON.stringify(BlockedTags);
        GM_setValue("BlockedTagsString", BlockedTagsString);
    }

    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
})();