// enable button, such that wheel can be started again
document.getElementById("spinA").disabled = false;var alphaB = -90;
var decelerationB = 0.01;
var initialSpeedB = 2+Math.random()*3;
var currentSpeedB = 0;
var counterB = 0;
var intervalB = 10;

var drawsHighB = 0;
var drawsLowB = 0;
var roundsB = 0;

var animationB;
// reset variable
var resetB=0;

function initStaticB(ctx){
  var cB = document.getElementById(ctx);
  var lotteryB = cB.getContext("2d");
  drawArrowB(lotteryB,0);

  //drawBalls(lottery,1,1);
}
function initB(ctx){
  // disable button, such that wheel cannot be restarted while still rotating
  document.getElementById("spinB").disabled = true;
  var cB = document.getElementById(ctx);
  var lotteryB = cB.getContext("2d");
  var speedB = [3.82,3.89,3.94,3.99,4.04,4.11,4.17,4.22,4.27,4.32,
               4.37,4.42,4.48,4.53,4.58,4.62]
    //setTimeout(function(){requestAnimationFrame(drawArrow(lottery);}, 10);
  counterB = 0;
  alphaB = -90;
  if(resetB == 0){
    randomBallB = Math.round(Math.random()*15)
    // count number of roundsB, high and low outcomes and feedback to oTree
    if(randomBallB<8){
      drawsLowB+=1;
    } else {
      drawsHighB+=1;
    }
    roundsB+=1;

    document.getElementById("roundsB").setAttribute('value', roundsB);
    document.getElementById("draws_highB").setAttribute('value', drawsHighB);

    animationB = setInterval(function(){drawArrowB(lotteryB,speedB[randomBallB]);}, intervalB);
    //intervalB=intervalB*1.5;
  } else{
    animationB=setInterval(function(){drawArrowB(lotteryB,0);}, intervalB);
    resetB=0;
    document.getElementById("spinB").value="Start";
    document.getElementById("textB").innerHTML = "<br><br>";
  }
}
function drawArrowB(context, speed){
  var startXB = 150;
  var startYB = 150;
  var sizeB = 70;

  // set initial speed
  if(counterB==0){
    currentSpeedB = speed;
  }

  startXB = 150+sizeB * Math.cos((alphaB/180)*Math.PI);
  startYB = 150+sizeB * Math.sin((alphaB/180)*Math.PI);
  ///////// draw the arrow
  // drawing the arrows "body"
  context.fillStyle="black";
  context.shadowBlur = 5;
  context.shadowColor = "black";
  context.beginPath();
  context.clearRect(0,0,500,500);
  context.moveTo(150,150);
  context.lineTo(startXB,startYB);
  context.lineTo(150,150);
  context.lineWidth = 12;
  context.closePath();
  context.stroke();
  // drawing the arrows starting point
  context.beginPath();
  context.arc(150,150,  10, 0, 2 * Math.PI,true);
  context.closePath();
  context.fill();
  drawBallsB(context,1,1);
  // drawing the arrows triangular head
  /// 1. move to outer point of arrow's body
  /// 2. move to right side of the head
  /// 3. move to top
  var triangleWidthB = 7.5;
  var betaB = Math.atan(triangleWidthB/sizeB) * 180/Math.PI;
  var gammaRigthB = alphaB-betaB;
  var gammaLeftB = alphaB+betaB;
  context.beginPath();
  context.moveTo(startXB,startYB);
  context.lineTo(150+sizeB * Math.cos((gammaRigthB/180)*Math.PI),150+ sizeB * Math.sin((gammaRigthB/180)*Math.PI));
  context.lineTo(150+ (sizeB*1.1)* Math.cos((alphaB/180)*Math.PI), 150+(sizeB*1.1) * Math.sin((alphaB/180)*Math.PI));
  context.lineTo(150+sizeB * Math.cos((gammaLeftB/180)*Math.PI),150+ sizeB * Math.sin((gammaLeftB/180)*Math.PI));
  context.closePath();
  context.stroke();

  alphaB += currentSpeedB;
  if(currentSpeedB>0.0){
    currentSpeedB -= decelerationB;
  } else {
    currentSpeedB = 0;
    clearInterval(animationB);
    // enable button, such that wheel can be started again
    document.getElementById("spinB").disabled = false;
    if(counterB!=0 && resetB==0){ // set back to Reset
      document.getElementById("spinB").value = "Reset";
      resetB=1;
      // Write text depending on what ball has been drawn
      if(randomBallB<8){
        document.getElementById("textB").innerHTML = "<center>The arrow stopped on a <b style='color:mediumseagreen'>green segment</b>. This happens 50 out of 100 times.</center>";
      } else{
        document.getElementById("textB").innerHTML = "<center>The arrow stopped on a <b style='color:orange'>yellow segment</b>. This happens 50 out of 100 times.</center>";
      }
    }
  }
  counterB += 1
  // reset alphaB if it surpasses 360 degrees
  if(alphaB>270){
    alphaB=-90;
  }




}

function drawBallsB(context, col1, col2){
  context.lineWidth = 0;
  // ANGLES are the 16 different angles for the balls of the "urn".
  // each angle is used for placing one ball in a circular fashion
  var anglesB = [348.75,326.25,303.75,281.25,
              258.75,236.25,213.75,191.25,
              168.75,146.25,123.75,101.25,
              78.75,56.25,33.75,11.25];

  for(var i=0; i< anglesB.length; i++){
    anglesB[i]-=90+22.5*4;
  }

  var yCoordB=[1];
  var xCoordB=[1];

  for(var z=0; z<anglesB.length; z++) {
      yCoordB[z] = 100*Math.sin(anglesB[z]*Math.PI / 180);
      xCoordB[z] = 100*Math.cos(anglesB[z]*Math.PI / 180);
  }
  context.fillStyle="#3e4444";
  context.shadowBlur = 0;
  context.shadowColor = "black";
  for(var k=0; k < yCoordB.length; k++){
    context.beginPath();
    if(k<8){
      context.fillStyle="mediumseagreen";
    } else{
      context.fillStyle="orange";
    }
    context.arc(yCoordB[k]+150,xCoordB[k]+150,  15, 0, 2 * Math.PI,true);
    context.closePath();
    context.fill();
  }

  var positionB=10;
  //var currentBall = alphaB
  var currentBallB = Math.round(alphaB/22.5+3.3);
  context.shadowBlur = 15;
  context.shadowColor = "#FFFFE0";
  context.globalalpha = 0.2;
  for(var j=0; j<anglesB.length; j++){
      if(currentBallB<8){
        context.fillStyle="#277349";
      } else{
        context.fillStyle="#ff6a0d";
      }

      context.beginPath();
      context.arc(yCoordB[currentBallB]+150,xCoordB[currentBallB]+150,  15, 0, 2 * Math.PI,true);
      context.closePath();
      context.fill();
      context.fillStyle="black";

  }
  context.shadowColor = "black";
  context.shadowBlur = 0;
  context.globalalpha = 1;








}