// ==UserScript==
// @name        4chan slider solver
// @namespace   slider
// @match       https://boards.4channel.org/*
// @match       https://boards.4chan.org/*
// @grant       none
// @version     1.0
// @author      Anon
// ==/UserScript==

'use strict';

// Calculates "disorder" of the image. "Disorder" is the percentage of black pixels that have a
// non-black pixel below them. Minimizing this seems to be good enough metric for solcing the slider.
function calculateDisorder(imgdata) {
    const a = imgdata.data;
    const stride = imgdata.width * 4;
    const len = a.length - stride;

    let res=0;
    let total = 0;
    for (let i = 0; i < len; i += 4) {
        if (a[i]!=a[i+stride]) res += 1;
        if (a[i]==0) total += 1;
    }
    return res / (total==0 ? 1 : total);
}

// returns ImageData from captcha's background image, foreground image, and offset (ranging from 0 to -50)
function calcOffset(img, bg) {
    const h=img.height, w=img.width;
    const th=34;
    const pw=16;
    const scale = th/h;

    const canvas = document.createElement('canvas');
    canvas.height = w * scale + pw*2;
    canvas.width = 48;

    const ctx = canvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    ctx.fillStyle = 'rgb(238,238,238)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.scale(-scale,scale);
    ctx.rotate(90*Math.PI/180);

    const draw = (off) => {
        const offset = (bg.width - img.width) / 2 + off;
        ctx.translate( offset, 0);
        ctx.drawImage( bg, -bg.width / 2, -bg.height / 2, bg.width, bg.height );
        ctx.translate( -offset, 0);
        ctx.drawImage( img, -w / 2, -h / 2, w, h );
    };

    // if off is not specified and background image is present, try to figure out
    // the best offset automatically; select the offset that has smallest value of
    // calculateDisorder for the resulting image
    let bestDisorder = 999;
    let bestOff = 0;

    for (let off = 0; off > -50; --off) {
        draw(off);

        const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const disorder = calculateDisorder(imgdata);

        if (disorder < bestDisorder) {
            bestDisorder = disorder;
            bestOff = off;
        }
    }

    return bestOff;
}

function imageFromUri(uri) {
    let u = uri;
    if (u.startsWith('url("')) u = u.substr(5, u.length-7);
    if (!u.startsWith('data:')) return null;

    const img = new Image();
    img.src = u;
    return img;
}


function findSliderPos(urifg, uribg) {
    const fg = imageFromUri(urifg);
    if (!fg) return 1;
    const bg = imageFromUri(uribg);
    return bg !== null ? calcOffset(fg, bg) : 1;
}

let lastSlider = null;
const observer = new MutationObserver(() => {
    const resp = document.getElementById('t-resp');
    if (!resp) return;

    const bg = document.getElementById('t-bg');
    if (!bg) return;

    const fg = document.getElementById('t-fg');
    if (!fg) return;

    const slider=document.getElementById('t-slider');
    if (!slider || lastSlider == slider) return;

    const off = findSliderPos(
        fg.style.backgroundImage ?? '',
        bg.style.backgroundImage ?? '',
    );
    if (off == 1) return;
    lastSlider = slider;

    slider.value = -off * 2;
    bg.style.backgroundPositionX = `${off}px`;
});

observer.observe(document.body, { attributes: true, childList: true, subtree: true });