// ==UserScript==
// @name         [TKR] Noah Turk - Select the best video/image
// @namespace    https://www.mturkcrowd.com/members/aveline.7/
// @version      3.1
// @description  Probably does nothing.
// @author       aveline
// @include      hit_set_id:3VHU2SWT4HF83RKTY4ZT9D1M1RMSP0
// @include      hit_set_id:3WA8G0RU3X9YRJXZVH1M7XARAC4UL9
// @include      hit_set_id:3RC2K8SGE5QAMVDTPVFTEC4N8G1XG6
// @include      hit_set_id:3YNFDCZ5R6RWZR8330MWFERW8C5RNH
// @include      hit_set_id:33FLRCV02QXEHC8F4FM9U3R1YMAROW
// @include      hit_set_id:3589VT1T3EZQQJ79I0SK7UUDKPEJNP
// @include      hit_set_id:3IBVVLBPPP2OLWCTFWEWGT05951JTN
// @include      hit_set_id:36KIZ77D4S4KT8OGYOQIQJ1IP6ZM2Y
// @include      hit_set_id:3Q9ARQ9ZBSB9EQKZ2O4N9T6AVKZM39
// @include      hit_set_id:3GV45MIM401AZJRSNVZWDUBPAGUMZ4
// @include      hit_set_id:38FWZZ3IMWWGCB2N3ACDC2RN9B6NYI
// @include      hit_set_id:3MNPSGWWPTSOI4CXN9UTOEJBJMCUPI
// @include      hit_set_id:3PP5EK5QU34OFJ0K7UH1KPEGJB4UNN
// @include      hit_set_id:354DQCRRILWIC65V6C6MSWS3TJISL2
// @include      hit_set_id:3OSG0B9IVOXWEXETF4EEB3KIBIQVI2
// ==/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.5,
    vidRate: 1.5
};

const check = setInterval(() => {
    const crowdTemplate = (document.querySelector("crowd-form"));
    const background1 = document.querySelector("crowd-form > form");
    const background2 = document.querySelector("#Task");
    const background3 = document.querySelector("#mturk_form");
    const backgrounds = [ background1, background2, background3 ];
    const submit = (crowdTemplate) ? document.querySelector("crowd-form > form > crowd-button") : document.querySelector("#finish-btn");
    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 imageReconstruction = (instructHeading.innerHTML.includes('Evaluating Image Reconstruction Preference'));
    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);

        toggleInstructions(instructEles);

        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();
        });

        // These had a million checkboxes, IIRC
        if (imageAlignment) {
            visibleChecks.forEach(check => {
                check.style.width = '2em';
                check.style.height = '2em';
            });
            visibleChecks[visibleChecks.length - 1].click();
        }

        // Should be anything with videos
        if (!imageAlignment && !imageReconstruction) {
            radios.forEach(rad => {
                rad.disabled = false;
            });
            visibleChecks.forEach(check => {
                check.disabled = false;
            });
        }
      
        if (imageReconstruction) {
            const images = document.querySelectorAll('img');
            images.forEach(image => {
                document.querySelector("#Task").style.width = '100%'
                image.style.width = '100%';
                //image.style.height = '100%';
            });
        }

        // The HITs all say to wait 10 seconds, but the timer is actually 12.
        colorBackground(backgrounds, 12);

        let question = 1;
        document.addEventListener('keydown', (e) => {
            // Question 1 is for radios.  Question 2 is for checkboxes.
            // Image Alignment HITs only had checkboxes, so we skip Q1.
            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();
                    // Image Reconstruction has no Question 2
                    if (!imageReconstruction) {
                        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();
                TKNR.hitReturn();
            }
            if (key == '-') {
                e.preventDefault();
                toggleInstructions(instructEles);
            }
        });
    }
},250);

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

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

function colorBackground(backgroundEles, timeInSeconds) {
    backgroundEles.forEach(ele => {
        if (ele) {
            ele.style.backgroundColor = 'red';
        }
    });
    setTimeout(() => {
        backgroundEles.forEach(ele => {
            if (ele) {
                ele.style.backgroundColor = 'green';
            }
        });
    },timeInSeconds * 1000);
}