function Control(el, {
  value = 0, 
  min = 0, 
  max = 255, 
  minAngle = 0,
  maxAngle = 360, 
  wheelSpeed = 0.1,
  step = 1 
} = {}) {

  const img = document.createElement('img')
    img.src = '1@3x.png';
    el.append(img);

  const ratio = (maxAngle - minAngle) / (max - min)
  const getAngle = () => (value - min)*ratio + minAngle;
  

  this.setValue = newValue => {
    if (newValue > max){
      newValue = max
    }
    if (newValue < min){
      newValue = min
    }
    value = newValue
    img.style.transform = `rotate(${getAngle()}deg)`
  }

  img.onmousewheel = e => {
    const {deltaY} = e

    const newValue = value + deltaY*wheelSpeed
    this.setValue(newValue)

    e.preventDefault()
    const colorNum = getAngle();
    this.onchange(colorNum);
  }

  img.onclick = e => {
    console.log(e, img.width, e.layerX)
    const {layerX} = e
    const {width} = img
    
    if (layerX > width/2){
      this.setValue(value +step);
    }
    else {
      this.setValue(value -step);
    }
    
    const colorNum = getAngle();
    this.onchange(colorNum);
  }
  
  this.setValue(value);  
}

let rgb = {
  red: 0,
  green: 0,
  blue: 0,
}

const volumeControl1  = new Control(container1, {value: 1})
volumeControl1.onchange = function(value) {
  rgb.red = value;
  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`;
}

const volumeControl2  = new Control(container2, {value: 1})
volumeControl2.onchange = function(value) {
  rgb.green = value;
  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green} , ${rgb.blue})`;
}
const volumeControl3  = new Control(container3, {value: 1})
volumeControl3.onchange = function(value) {
  rgb.blue = value;
  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green} , ${rgb.blue})`;
}