function radians(degree) {
  return (180+degree)*(Math.PI/180)
}


class ProgressArc {
  constructor(parent_selector, size, title){
    this.parent = parent_selector
    this.w = size
    this.h = size
    this.config = {
      'title':title,
      'x': this.w/2,
      'y': this.h/2,
      'thickness':this.h/40,
      'radius':this.h*3/7,
      'bg':"#d6d6d6",
      'fg': "blue",
      'depth':50,
    }
    this.canvas = document.createElement('canvas')
    this.canvas.width = this.w
    this.canvas.height = this.h
    var p = document.querySelector(this.parent)
    this.canvas.id = p.id+"-canvas"
    p.appendChild(this.canvas)
    this.createContext()
  }

  createContext() {
    var ctx = this.canvas.getContext('2d')
    ctx.clearRect(0,0,this.w,this.h)
    ctx.lineWidth=this.config.thickness;
    // ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
    ctx.beginPath()
    ctx.strokeStyle = this.config.bg
    ctx.arc(this.config.x, this.config.y, this.config.radius, this.scale(0), this.scale(100))
    ctx.stroke()
    ctx.closePath()
    if (this.config.title!==undefined) {
      ctx.font = this.h/12+'px sans-serif'
      var textX = this.config.x-(ctx.measureText(this.config.title).width/2)
      var textY = this.config.y + this.h/4
      ctx.fillText(this.config.title, textX, textY, this.w)
    }
    return ctx
  }


  scale(val) {
    val = Math.min(100, Math.max(0, val))
    return radians((val * (1.80+(2*this.config.depth/100)))-this.config.depth)
  }

  set(val) {
    var ctx = this.createContext()
    ctx.beginPath()
    ctx.strokeStyle = this.config.fg
    ctx.arc(this.config.x, this.config.y, this.config.radius, this.scale(0), this.scale(val))
    ctx.stroke()
    ctx.closePath()
    var text = Math.round(val).toString()
    ctx.font = this.h/5+'px sans-serif'
    var textX = this.config.x-(ctx.measureText(text).width/2)
    var textY = this.config.y + this.h/15
    ctx.fillText(text, textX, textY)
  }
}

// Usage:
// arc = new ProgressArc('#arc-test', 300, 'Completed')
// arc.set(10)
// arc.set(90)