<!-- Template Staff -->
<a class="info" href="https://www.sliderrevolution.com/">by Balazs Viertl</a>

<div class="degree"></div>
<div id="up">UP</div>
<div id="down">DOWN</div>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="anim">Animate Toogle</div>
<div id="cssGradient"></div>
<canvas id="myCanvas" width="600" height="400"></canvas>

/* 
Template Stuff
*/
html {
  background: #323436;
  color: #f1f1f1;
  font-family: Sans-Serif;
  text-align: center;
  padding: 25px;
}
.info {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 5px;
  color: #f1c40f !important;
  text-decoration: none;
}
.info:hover {
  filter: brightness(120%);
}

#myCanvas {
  display: inline-block;
  width: 400px;
  height: 220px;
  box-shadow: 0px 0px 30px 30px rgba(0, 0, 0, 0.2);
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
}

#up,
#down,
#left,
#right,
#anim{
  border-radius: 5px;
  padding: 5px 10px;
  background: #565758;
  display: inline-block;
  margin-right: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

#up:hover,
#down:hover,
#left:hover,
#right:hover,
#anim:hover,
#mchanger:hover{
  filter: brightness(110%);
}
#label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: capitalize;
  line-height: 24px;
  padding: 0 15px 0 15px;
  background: #00ceab;
  border-radius: 14px;
  position: absolute;
  margin-top: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
.boxinfo {
  color: rgba(255, 255, 255, 0.5);
  font-size: 120px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
}

//Define Color Stops
var colorstops = [
    { color: "rgba(130,0,159,1)", pos: 0 },
    { color: "rgba(93,52,175,1)", pos: 50 },
    { color: "rgba(0,206,171,1)", pos: 100 }
  ],
  gradientAngle = 0,
  state = true;

// Gather Elements
var animate = false,
  canvas = document.getElementById("myCanvas"),
  cssbox = document.getElementById("cssGradient"),
  ctx = canvas.getContext("2d");

var newLMX = canvas.width/2,
    newLMY = canvas.height/2;

// Animate Gradients
function animateGradients() {
  drawGradients(gradientAngle);
  gradientAngle++;
  gradientAngle = gradientAngle > 360 ? 0 : gradientAngle;
  if (animate)
    requestAnimationFrame(function () {
      animateGradients();
    });
}

//Draw Gradients
function drawGradients(deg) {
  var points = test(canvas.width, canvas.height, deg);
  var grd = ctx.createLinearGradient(
    points.bx,
    points.by,
    points.tx,
    points.ty
  );

  // Draw Box
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  var comma = false,
    csscol = "linear-gradient(" + deg + "deg, ";
  for (var i in colorstops) {
    grd.addColorStop(colorstops[i].pos / 100, colorstops[i].color);
    csscol +=
      (comma ? "," : "") + colorstops[i].color + " " + colorstops[i].pos + "%";
    comma = true;
  }
  csscol += ")";
  cssbox.style.background = csscol;
  /*cssbox.innerHTML =
    '<div id="label">Currently in: ' + sectorCount + '</div>';*/
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.stroke();
  
  //Main Line
  ctx.beginPath();
  ctx.lineWidth = "1";
  ctx.strokeStyle = "#e6e6e6";
	ctx.moveTo(points.bx, points.by);
	ctx.lineTo(points.tx, points.ty);
	ctx.stroke();
  
  //Midpoint
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(newLMX-2, newLMY-2, 4, 4);
}

drawGradients(gradientAngle);

function test(w, h, deg){
  var angInRad = -1 * ((deg * Math.PI) / 180),
      mh = newLMY, mw = newLMX, 
      kx = 0, ky = 0, jx = 0, jy = 0,
      p1x = 0, p1y = 0, p2x = 0, p2y = 0,
      showKX = false, showJX = false, showKY = false, showJY = false;
  
  var cA4 = 270+(Math.atan((mh)/(mw))*180/Math.PI),
      cA5 = cA4 - 180;
  
  kx = (mw - Math.tan(angInRad) * mh); //red
  ky = (mh + ((w-mw)/Math.tan(angInRad)));
  jx = (mw + Math.tan(angInRad) * (h-mh)); //green
  jy = (mh - (mw/Math.tan(angInRad)));
  
  if(0<=kx && kx<=w){
    showKX = true;
  }
  if(0<=ky && ky<=h){
    showKY = true;
  }
  if(0<=jx && jx<=w){
    showJX = true;
  }
  if(0<=jy && jy<=h){
    showJY = true;
  }
  
  if(showKX == true && showJX == true){
    p1x = kx;
    p1y = 0;
    p2x = jx;
    p2y = h;
  }
  
  if(showKY == true && showJY == true){
    p1x = w;
    p1y = ky;
    p2x = 0;
    p2y = jy;
  }
  
  if(showKX == true && showKY == true){
    p1x = kx;
    p1y = 0;
    p2x = w;
    p2y = ky;
  }
    
  if(showKY == true && showJX == true){
    p1x = w;
    p1y = ky;
    p2x = jx;
    p2y = h;
  }
  
  if(showJX == true && showJY == true){
    p1x = jx;
    p1y = h;
    p2x = 0;
    p2y = jy;
  }
  
  if(showKX == true && showJY == true){
    p1x = kx;
    p1y = 0;
    p2x = 0;
    p2y = jy;
   }
  
  var calc = Math.round(cA4), calc2 = Math.round(cA5);
  if(deg == calc || deg == calc2){ //switch is pressed
    if(state == true){
      state = false;
    }
    else{
      state = true;
    }
  }
  
  if(state == true){
    return { tx: p1x, ty: p1y, bx: p2x, by: p2y };
  }
  else{
    return { tx: p2x, ty: p2y, bx: p1x, by: p1y };
  }
  
}

// Navigation
var up = document.getElementById("up"),
  down = document.getElementById("down"),
  anim = document.getElementById("anim"),
  mchange = document.getElementById("mchanger");

anim.onclick = function () {
  animate = animate === true ? false : true;
  animateGradients();
};

right.onclick = function () {
  newLMX += 15;
  drawGradients(gradientAngle);
};

down.onclick = function () {
  newLMY += 15;
  drawGradients(gradientAngle);
};

left.onclick = function () {
  newLMX -= 15;
  drawGradients(gradientAngle);
};

up.onclick = function () {
  newLMY -= 15;
  drawGradients(gradientAngle);
};