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

<div class="degree"></div>
<div id="up">+1 Degree</div>
<div id="down">-1 Degree</div>
<div id="anim">Animate Toogle</div>
<div</div>
<div></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,
#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,
#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,
  sectorCount = "0°";

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

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

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

  // 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(canvas.width/2, canvas.height/2);
	ctx.stroke();
  
  //Secondary Line
  ctx.beginPath();
  ctx.lineWidth = "1";
  ctx.strokeStyle = "#000000";
	ctx.moveTo(points.tx, points.ty);
	ctx.lineTo(canvas.width/2, canvas.height/2);
	ctx.stroke();
}

drawGradients(gradientAngle);

//Calculate Linear Gradient Angle and Cut Points
function linearGradient_a(w, h, deg) {
  var caseAngle1 = Math.round((Math.atan(w / h) * 180) / Math.PI),
      caseAngle2 = Math.round(180 - caseAngle1),
      caseAngle3 = Math.round(180 + caseAngle1),
      caseAngle4 = Math.round(360 - caseAngle1);
			  
  var bx = tx = wh = w/2,
		  hh = h/2,
      ty = h,    
      by = 0,
      angInRad = (deg * Math.PI) / 180,    
      count1;
      
  if (deg == caseAngle1) {   tx = 0;bx = w;} else 
    if (deg == caseAngle2) {   tx = 0;ty = 0;bx = w;by = h;} else
      if (deg == caseAngle3) {   tx = w;ty = 0;bx = 0;by = h;} else
        if (deg == caseAngle4) {   tx = w;ty = h;bx = 0;by = 0;} else
			{
				var mtan = Math.tan(angInRad);

				if (0 < deg && deg < caseAngle1) {    
					count1 = (mtan * h) / 2;
					tx = wh - count1;    
					bx = wh + count1;
          sectorCount = "Sector 1";
				} 
				else if (caseAngle1 < deg && deg < caseAngle2) {    
					count1 = wh / mtan;
					tx = 0;
					ty = hh + count1;
					bx = w;
					by = hh - count1;
          sectorCount = "Sector 2";
				} else if (caseAngle2 < deg && deg < caseAngle3) {    
					count1 = (mtan * h) / 2;
					tx = wh + count1;
					ty = 0;
					bx = wh - count1;
					by = h;
          sectorCount = "Sector 3";
				} else if (caseAngle3 < deg && deg < caseAngle4) {    
					count1 = wh / mtan;
					tx = w;
					ty = hh - count1;
					bx = 0;
					by = hh + count1;
          sectorCount = "Sector 4";
				} else if (caseAngle4 < deg && deg < 361) {
					count1 = (mtan * h) / 2;
					tx = wh - count1;
					ty = h;
					bx = wh + count1;
					by = 0;
          sectorCount = "Sector 5";
				}
			}
  return { tx: tx, ty: ty, bx: bx, by: by };
}


// 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();
};

up.onclick = function () {
  gradientAngle++;
  gradientAngle = gradientAngle > 360 ? 0 : gradientAngle;
  drawGradients(gradientAngle);
};

down.onclick = function () {
  gradientAngle--;
  gradientAngle = gradientAngle < 0 ? 360 : gradientAngle;
  drawGradients(gradientAngle);
};