// ==UserScript==
// @name         Noah Turk - 12c Select the best video according to our criterion
// @namespace    https://www.mturkcrowd.com/members/aveline.7/
// @version      2.12
// @description  Probably does nothing.
// @author       aveline
// @icon         https://i.imgur.com/jsju8Wy.png
// @match        *://www.mturkcontent.com/*
// ==/UserScript==

// vidStart starts the videos at a specified time. 0.0 is the beginning, 1.0 is the end, 0.5 is the middle, and so on.
// vidRate changes the playback rate. 1.0 is normal speed, 2.0 is double, etc.
const settings = {
    vidStart: 0.0,
    vidRate: 1.6
};

const check = setInterval(() => {
    const crowdTemplate = (document.querySelector("crowd-form"));
    const submit = (crowdTemplate) ? document.querySelector("crowd-form > form > crowd-button") : document.querySelector("#finish-btn");
    const bgSelectors = ["crowd-form > form", "#mturk_form", "#Task"];
    const background = document.querySelector(bgSelectors.find((bg) => {
        if (document.querySelector(bg)) return document.querySelector(bg);
    }));

    const instructHeading = document.querySelector("#Intro");
    const instructTraining = document.querySelector("#training");
    const instructEles = [ instructHeading, instructTraining ];
    const imageAlignment = (instructHeading.innerHTML.includes('In each of the following task, we show you one video, and an image.'));
    const videos = document.querySelectorAll("video");
    const radios = (crowdTemplate) ? document.querySelectorAll("crowd-radio-button") : document.querySelectorAll('[type="radio"]');
    const checkBoxes = (crowdTemplate) ? document.querySelectorAll('[role="checkbox"]') : document.querySelectorAll('[type="checkbox"]');
    const visibleChecks = [...checkBoxes].filter((check) => !check.hasAttribute('hidden'));


    if (submit) {
        clearInterval(check);
        setTimeout(()=> {
        	toggleInstructions(instructEles);
        },500);

        videos.forEach(vid => {
            vid.loop = true;
            vid.muted = true;
            vid.defaultPlaybackRate = settings.vidRate;
            vid.load();
            vid.addEventListener('loadedmetadata', () => { vid.currentTime = vid.duration * settings.vidStart; });
            vid.play();
        });

        if (imageAlignment) {
            visibleChecks.forEach(check => {
                check.style.width = '2em';
                check.style.height = '2em';
            });
            visibleChecks[visibleChecks.length - 1].click();
        }

        if (!imageAlignment) {
            radios.forEach(rad => {
                rad.disabled = false;
            });
            visibleChecks.forEach(check => {
                check.disabled = false;
            });

            background.style.backgroundColor = 'red';
            setTimeout(() => {
                background.style.backgroundColor = 'green';
            },12000);
        }

        let question = 1;
        document.addEventListener('keydown', (e) => {
            if (imageAlignment) {
                question = 2;
            }

            const key = e.key;
            if (key.match(/[1-9]/)) {
                if (question === 1 && parseInt(key) <= radios.length) {
                    e.preventDefault();
                    radios[parseInt(key) - 1].click();
                    question++
                }
                else if (question === 2 && parseInt(key) <= visibleChecks.length) {
                    e.preventDefault();
                    visibleChecks[parseInt(key) - 1].click();
                }
            }
            if (key == '`' || key == "Enter") {
                e.preventDefault();
                submit.click();
            }
            if (key == 'r' || key == '0') {
                e.preventDefault();
                window.top.postMessage("ReturnHIT",'*');
            }
            if (key == '-') {
                e.preventDefault();
                toggleInstructions(instructEles);
            }
        });
    }
},250);

function toggleInstructions(instructEles) {
    const currentDisplay = instructEles[0].style.display;
    const newDisplay = (currentDisplay == '') ? 'none' : '';

    instructEles.forEach(ele => { ele.style.display = newDisplay });
}