var html = document.getElementById("html");
var reshoot = document.getElementById("reshoot");
var ball = document.getElementById("ball");
var root = document.documentElement;
var restartbuttonvisible = 1;
var cupsOut = [];

//function shootY(){
    //let top = window.getComputedStyle(ball).getPropertyValue("top");
    //ball.classList.remove("shootY");
    //ball.classList.add("shootX");
    //ball.style.top = top;
    //let onclick = "shootX('".concat(top.toString(), "')");
    //html.setAttribute("onclick", onclick);
//}

function shoot(event){
    //let top = valueY;
    //let topInt = parseInt(valueY);
    //let left = window.getComputedStyle(ball).getPropertyValue("left");
    //let leftInt = parseInt(left);
    //let newtop = topInt-325;
    //root.style.setProperty('--top', (topInt)+ "px");
    //root.style.setProperty('--top325', (newtop)+ "px");
    ball.classList.add("Shoot");


    switch (event.key)
    {
      case 'e':
      case 'E':
      root.style.setProperty('--top325', "-350"+ "px");
      ball.style.top = "-350px"
      ball.style.left = "-155px";
        removeCup("1");
        break;
      case 'r':
      case 'R':
        root.style.setProperty('--top325', "-350"+ "px");
        ball.style.top = "-350px"
        ball.style.left = "-50px";
        removeCup("2");
        break;
      case 't':
      case 'T':
        root.style.setProperty('--top325', "-350"+ "px");
        ball.style.top = "-350px"
        ball.style.left = "55px";
        removeCup("3");
        break;
      case 'z':
      case 'Z':
        root.style.setProperty('--top325', "-350"+ "px");
        ball.style.top = "-350px"
        ball.style.left = "160px";
        removeCup("4");
        break;
      case 'd':
      case 'D':
        root.style.setProperty('--top325', "-290"+ "px");
        ball.style.top = "-290px"
        ball.style.left = "-100px";
        removeCup("5");
        break;
      case 'f':
      case 'F':
        root.style.setProperty('--top325', "-290"+ "px");
        ball.style.top = "-290px"
        ball.style.left = "0px";
        removeCup("6");
        break;
      case 'g':
      case 'G':
        root.style.setProperty('--top325', "-290"+ "px");
        ball.style.top = "-290px"
        ball.style.left = "110px";
        removeCup("7");
        break;
      case 'c':
      case 'C':
        root.style.setProperty('--top325', "-220"+ "px");
        ball.style.top = "-220px"
        ball.style.left = "-50px";
        removeCup("8");
        break;
      case 'v':
      case 'V':
        root.style.setProperty('--top325', "-220"+ "px");
        ball.style.top = "-220px"
        ball.style.left = "55px";
        removeCup("9");
        break;
      case 'b':
      case 'B':
        root.style.setProperty('--top325', "-160"+ "px");
        ball.style.top = "-160px"
        ball.style.left = "0px";
        removeCup("10");
        break;
      default:
        break;
    }

    setTimeout(function(){
        if(cupsOut.length == 10 && restartbuttonvisible == 1){
            let restartBtn = document.createElement("BUTTON");
            restartBtn.innerHTML = "Restart";
            restartBtn.setAttribute("onclick","location.reload()");
            restartBtn.setAttribute("id","restart");
            document.body.appendChild(restartBtn);
            restartbuttonvisible = 2;
            ball.style.top = "0px";
            ball.style.left = "0px";
        }else{
          reshot();
            //let reshootBtn = document.createElement("BUTTON");
            //reshootBtn.innerHTML = "Reshoot";
            //reshootBtn.setAttribute("onclick","reshot()");
            //reshootBtn.setAttribute("id","reshoot");
            //document.body.appendChild(reshootBtn);
        }
    },1000);
}

//Cup entfernen bei Treffer
function removeCup(cup){
    let element = "cup".concat(cup);
    let alreadyExists = cupsOut.includes(cup);

    if(alreadyExists==false){
        cupsOut.push(cup);
    }
    setTimeout(function(){
 document.getElementById(element).classList.add("fadeAway");
},1000);
}


function reshot(){
    //document.getElementById("reshoot").remove();
    ball.classList.remove("Shoot");
    ball.style.top = "0px";
    ball.style.left = "0px";

    //root.style.setProperty('--top325', "0"+ "px");
    //setTimeout(function(){
    //    html.setAttribute("onclick", "shoot()");
    //},1000);
}



// Cup Positionen + Toleranz
//Cup 1: -20<topInt && topInt<20 && -125<leftInt && leftInt<-60
//Cup 2: -20<topInt && topInt<20 && -40<leftInt && leftInt<40
//Cup 3: -20<topInt && topInt<20 && 60<leftInt && leftInt<125
//Cup 4: 60<topInt && topInt<100 && -90<leftInt && leftInt<-25
//Cup 5: 60<topInt && topInt<100 && 15<leftInt && leftInt<80
//Cup 6: 140<topInt && topInt<180 && -45<leftInt && leftInt<45