var repetitions=1
const captchaCheckbox = document.getElementById("continueButton")
captchaCheckbox.addEventListener("click",()=> {
    captchaCheckbox.style.visibility = "false"
    setTimeout(()=>{
        captchaCheckbox.style.visibility = "true"

        // show the solve box
        const solveBox = document.getElementById("solve-box")
        if (solveBox.style.display == "block") {
            solveBox.style.display = "none"
			captchaCheckbox.style.backgroundColor = "#653786"
        }
        else {
            solveBox.style.display = "block"
			captchaCheckbox.style.backgroundColor = "#000"
        }
    },Math.floor(Math.random()*200)+50)
})

function getImgPath() {
    const imgPaths = {
	/*
        1: "Baal",
        2: "Stik",
        3: "Raabaand",
        4: "Kitkat",
        5: "Krydsbesnoering",
        6: "Juniorkode",
        7: "Semafor",
	*/
	1: "Seebach",
	2: "Aarhus",
	3: "Kobenhavn",
	4: "Aalborg"
    }
    const imgTexts = {
	/*
        1: "pagodebål",
        2: "stik",
        3: "råbåndsknob",
        4: "Kitkat telte",
        5: "krydsbesnøringer",
        6: "juniorkode",
        7: "semafor",
	*/
	1: "en Rasmus Seebach sang",
	2: "Århus",
	3: "København",
	4: "Aalborg"
    }
    const countFalseImgs = {
	/*
        	1: 8,
		2: 11,
		3: 9,
		4: 15,
		5: 14,
		6: 46,
		7: 20,
	*/
		1: 9,
		2: 12,
		3: 12,
		4: 12
    }
    const countTrueImgs = {
	/*
    		1: 7,
		2: 6,
		3: 7,
		4: 7,
		5: 5,
		6: 36,
		7: 26,
	*/
		1: 6,
		2: 6,
		3: 6,
		4: 6
    }
    var imgRand = Math.floor(Math.random()*4+1)
    var imgPath = imgPaths[imgRand]
    var imgText = imgTexts[imgRand]
    return { 'path': imgPath, 'text': imgText, numFalse: countFalseImgs[imgRand], numTrue: countTrueImgs[imgRand] }
}

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
	const j = Math.floor(Math.random() * (i + 1));
	[array[i], array[j]] = [array[j], array[i]];
    }
}

function getImgs(numFalse, numTrue, numImgs) {
    const numSelectTrue = Math.floor(Math.random()*6+1)
    const numSelectFalse = numImgs - numSelectTrue
    var selectedTrue = Array.from({length: numTrue}, (x, i) => "Rigtig"+(i+1))
    var selectedFalse = Array.from({length: numFalse}, (x, i) => "Forkert"+(i+1))
    while (selectedTrue.length > numSelectTrue) {
        selectedTrue.splice(Math.floor(Math.random()*selectedTrue.length), 1)
    }

    while (selectedFalse.length > numSelectFalse) {
        selectedFalse.splice(Math.floor(Math.random()*selectedFalse.length), 1)
    }
    
    var selectedPaths = selectedTrue.concat(selectedFalse)
    shuffleArray(selectedPaths)

    return { 'selectedTrue': selectedTrue, 'selectedFalse': selectedFalse, 'selected': selectedPaths }
}

function getRandImg(path) {
   	const countFalse = {
   	    "pagodebål": 8,
   	    "stik": 11,
   	    "råbåndsknob": 9,
   	    "Kitkat telte": 15,
   	    "krydsbesnøringer": 14,
   	    "juniorkode": 46,
   	    "semafor": 20,
		"en Rasmus Seebach sang": 9,
		"Århus": 12,
		"København": 12,
		"Aalborg": 12,
	}
   	const countTrue = {
   	    "pagodebål": 7,
   	    "stik": 6,
   	    "råbåndsknob": 7,
   	    "Kitkat telte": 7,
   	    "krydsbesnøringer": 5,
   	    "juniorkode": 36,
   	    "semafor": 26,
	"en Rasmus Seebach sang": 6,
	"Århus": 6,
	"København": 6,
	"Aalborg": 6
	}
	const imagePaths = {
            "pagodebål": "Baal",
            "stik": "Stik",
            "råbåndsknob": "Raabaand",
            "Kitkat telte": "Kitkat",
            "krydsbesnøringer": "Krydsbesnoering",
            "juniorkode": "Juniorkode",
            "semafor": "Semafor",
	"en Rasmus Seebach sang": "Seebach",
	"Århus": "Aarhus",
	"København": "Kobenhavn",
	"Aalborg": "Aalborg"
        }
	var idx
	var type
	if (Math.floor(Math.random()*2)) {
		idx = Math.floor(Math.random()*countFalse[path]+1)
		type = "Forkert"
	} else {
		idx = Math.floor(Math.random()*countTrue[path]+1)
		type = "Rigtig"
	}
	
	return { 'name': type+idx, 'folder': imagePaths[path] }
}

function verifyCaptcha() {
	const solveBox = document.getElementById("solve-box")
	const imageText = document.getElementById("solve-title-text").innerText
	const imagePaths = {
        "pagodebål": "Baal",
        "stik": "Stik",
        "råbåndsknob": "Raabaand",
        "Kitkat telte": "Kitkat",
        "krydsbesnøringer": "Krydsbesnoering",
        "juniorkode": "Juniorkode",
        "semafor": "Semafor",
	"Århus": "Aarhus",
	"København": "Kobenhavn",
	"Aalborg": "Aalborg"
    }
	var imgContainers = document.getElementsByClassName("solve-image-container")
	for (let i=0; i<imgContainers.length; i++) {
		imgSrcStrings = imgContainers[i].children[0].src.split("/")
		imgFolder = imgSrcStrings[4]
		imgName = imgSrcStrings[5]
		if (imgFolder == imagePaths[imageText] && imgName.startsWith("Rigtig")) {
			return false
		}
	}
	return true
}

// fill up the solve-image-container
let imgPath = getImgPath()
let imgs = getImgs(imgPath.numFalse, imgPath.numTrue, 9)
const imageCount = 15
const solveImageContainer = document.getElementById("solve-image-main-container")
const solveTitleText = document.getElementById("solve-title-text")
for (let i=0; i<3; i++) {
    for (let j=0; j<3; j++) {
        const imageContainer = document.createElement("div")
        imageContainer.classList.add("solve-image-container")
	solveTitleText.innerText = imgPath.text

        const image = document.createElement("img")
        image.setAttribute("src",`/?path=images/${imgPath.path}/${imgs.selected[((i*3)+j)]}.png`)
        image.classList.add("solve-image")
        image.addEventListener("click",()=>{
            refreshImage(image)
        })
        imageContainer.appendChild(image)
        solveImageContainer.appendChild(imageContainer)
    }
}

// image on click will refresh new image
const refreshImage = (image) => {
    image.classList.add("fade-out") //fade out animation
    image.style.pointerEvents = "none"; //make it unclickable
    setTimeout(()=>{
	newImg = getRandImg(document.getElementById("solve-title-text").innerText)	
        image.setAttribute("src","")
        image.setAttribute("src",`/?path=images/${newImg.folder}/${newImg.name}.png`)
        image.classList.remove("fade-out")
        image.style.pointerEvents = "auto"; //make it clickable again
    	document.getElementById("solve-image-error-msg").style.display = "none"
    },1000)
}

// show try again when verify is click
document.getElementById("verify").addEventListener("click",()=> {
	let correct = verifyCaptcha()
	if (correct) {
	    if (repetitions > 2) {
		    window.open("https://medlem.dds.dk/event/id/69810/register", '_blank');
	    } else {
	        repetitions++
		    refreshButton.click()
	    }
	} else {
    	document.getElementById("solve-image-error-msg").style.display = "block"
	}
})

// refresh everything when refresh is clicked
const refreshButton = document.getElementById("refresh")
refreshButton.addEventListener("click",()=>{
    imgPath = getImgPath()
    imgs = getImgs(imgPath.numFalse, imgPath.numTrue, 9)
    refreshButton.style.pointerEvents = "none"
    solveImageContainer.classList.add("fade-out")
    solveTitleText.innerText = ""
    document.getElementById("solve-image-error-msg").style.display = "none"
    setTimeout(()=> {
        solveImageContainer.classList.remove("fade-out")
	solveTitleText.innerText = imgPath.text
        solveImageContainer.innerHTML = ""
        for (let i=0; i<3; i++) {
            for (let j=0; j<3; j++) {
                const imageContainer = document.createElement("div")
                imageContainer.classList.add("solve-image-container")
       
                const image = document.createElement("img")
        	image.setAttribute("src",`/?path=images/${imgPath.path}/${imgs.selected[((i*3)+j)]}.png`)
                image.classList.add("solve-image")
                image.addEventListener("click",()=>{
                    refreshImage(image)
                })
                
                imageContainer.appendChild(image)
                solveImageContainer.appendChild(imageContainer)
            }
        }
        refreshButton.style.pointerEvents = "auto"
    },1000)
   
})

/*
// toggle information
document.getElementById("information").addEventListener("click",() =>{
    const information = document.getElementById("information-text")
    if (information.style.display == "block") {
        information.style.display = "none"
    }
    else {
        information.style.display = "block"
    }
})
*/