var alpha = -90;
var deceleration = 0.01;
var initialSpeed = 2+Math.random()*3;
var currentSpeed = 0;
var counter = 0;
var interval = 10;

var drawsHighA = 0;
var drawsLowA = 0;
var roundsA = 0;

var animation;
// reset variable
var reset=0;

function initStaticA(ctx){
  var c = document.getElementById(ctx);
  var lottery = c.getContext("2d");
  drawArrowA(lottery,0);
  //drawBalls(lottery,1,1);
}

function initA(ctx){
  var c = document.getElementById(ctx);
  var lottery = c.getContext("2d");

    //document.getElementById("spinA").value="Start";
    //animation=setInterval(function(){drawArrowA(lottery,speed[2])}, interval);

  // disable button, such that wheel cannot be restarted while still rotating
  document.getElementById("spinA").disabled = true;


  var speed = [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);
  counter = 0;
  alpha = -90;


  if(reset == 0){
    randomBall = Math.round(Math.random()*15)
    // count number of rounds, high and low outcomes and feedback to oTree

    if(randomBall<4){
      drawsLowA+=1;
    } else {
      drawsHighA+=1;
    }
    roundsA+=1;

    document.getElementById("roundsA").setAttribute('value', roundsA);
    document.getElementById("draws_highA").setAttribute('value', drawsHighA);

    animation=setInterval(function(){drawArrowA(lottery,speed[randomBall]);}, interval);
  } else{
    animation=setInterval(function(){drawArrowA(lottery,0);}, interval);
    reset=0;
    document.getElementById("spinA").value = "Start";
    document.getElementById("textA").innerHTML = "<br><br>";
  }
    //interval=interval*1.5;
}
function drawArrowA(context, speed){


  var startX = 150;
  var startY = 150;
  var size = 70;


  // set initial speed
  if(counter==0){
    currentSpeed = speed;
  }

  startX = 150+size * Math.cos((alpha/180)*Math.PI);
  startY = 150+size * Math.sin((alpha/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(startX,startY);
  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();
  drawBallsA(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 triangleWidth = 7.5;
  var beta = Math.atan(triangleWidth/size) * 180/Math.PI;
  var gammaRigth = alpha-beta;
  var gammaLeft = alpha+beta;
  context.beginPath();
  context.moveTo(startX,startY);
  context.lineTo(150+size * Math.cos((gammaRigth/180)*Math.PI),150+ size * Math.sin((gammaRigth/180)*Math.PI));
  context.lineTo(150+ (size*1.1)* Math.cos((alpha/180)*Math.PI), 150+(size*1.1) * Math.sin((alpha/180)*Math.PI));
  context.lineTo(150+size * Math.cos((gammaLeft/180)*Math.PI),150+ size * Math.sin((gammaLeft/180)*Math.PI));
  context.closePath();
  context.stroke();

  alpha += currentSpeed;
  if(currentSpeed>0.0){
    currentSpeed -= deceleration;
  } else {
    currentSpeed = 0;
    clearInterval(animation);
    // enable button, such that wheel can be started again
    document.getElementById("spinA").disabled = false;
    if(counter!=0 && reset==0){ // set back to Reset
      document.getElementById("spinA").value = "Reset";
      reset=1;
      // Write text depending on what ball has been drawn
      if(randomBall<4){
        document.getElementById("textA").innerHTML = "<center>The arrow stopped on a <b style='color:cornflowerblue'>blue segment</b>. This happens 25 out of 100 times.</center>";
      } else{
        document.getElementById("textA").innerHTML = "<center>The arrow stopped on a <b style='color:crimson'>red segment</b>. This happens 75 out of 100 times.</center>";
      }
    }
  }
  counter += 1
  // reset alpha if it surpasses 360 degrees
  if(alpha>270){
    alpha=-90;
  }




}

function drawBallsA(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 angles = [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< angles.length; i++){
    angles[i]-=90+22.5*4;
  }

  var yCoord=[1];
  var xCoord=[1];

  for(var z=0; z<angles.length; z++) {
      yCoord[z] = 100*Math.sin(angles[z]*Math.PI / 180);
      xCoord[z] = 100*Math.cos(angles[z]*Math.PI / 180);
  }
  context.fillStyle="#3e4444";
  context.shadowBlur = 0;
  context.shadowColor = "black";
  for(var k=0; k < yCoord.length; k++){
    context.beginPath();
    if(k<4){
      context.fillStyle="cornflowerblue";
    } else{
      context.fillStyle="crimson";
    }
    context.arc(yCoord[k]+150,xCoord[k]+150,  15, 0, 2 * Math.PI,true);
    context.closePath();
    context.fill();
  }

  var position=10;
  //var currentBall = alpha
  var currentBall = Math.round(alpha/22.5+3.3);
  context.shadowBlur = 15;
  context.shadowColor = "#FFFFE0";
  context.globalAlpha = 0.2;
  for(var j=0; j<angles.length; j++){
      if(currentBall<4){
        context.fillStyle="#496dad";
      } else{
        context.fillStyle="#9c0e2b";
      }

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

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








}