let container1 = document.querySelector(".container");
let audio = document.querySelector("audio");

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

console.log(step);

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

if (typeof this.onchange === 'function' && newValue !== value)
this.onchange(newValue)

value = newValue

img.style.transform = `rotate(${getAngle()}deg)`
}

img.onmousewheel = (event) => {
const {deltaY} = event
//console.log(deltaY)
this.setValue(value  + deltaY * wheelSpeed)
event.preventDefault()
}

img.onclick = (event) => {
const {layerX} = event
if (layerX < img.width/2)
this.setValue(value  -step)
else
this.setValue(value  +step)
event.preventDefault()
}

const event2Deg  = event => {
const {layerX, layerY} = event
const {width, height}  = img
const x = layerX - width/2
const y = height/2 - layerY 

//console.log(x, y, width, height)

return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
}

let prevAngle = null

img.onmousedown = (event) => {
prevAngle = event2Deg(event)
}

img.onmousemove = (event) => {
if (prevAngle === null) return

const currentAngle = event2Deg(event) 
const deltaValue = (prevAngle - currentAngle) / ratio 
//console.log(prevAngle - currentAngle, deltaValue)
this.setValue(value  +deltaValue)
prevAngle = currentAngle
event.preventDefault()
}

img.onmouseup = (event) => {
prevAngle = null
}


this.setValue(value)
this.getValue = () => value
}



const volumeControl  = new Control(container1, {value: 0.5, 
                              min: 0, 
                              max: 1, 
                              minAngle: -90, maxAngle: 90, step: 0.1})

volumeControl.onchange = () => audio.volume = volumeControl.getValue(); //на каждый setValue
//пришейте к нему тэг audio для громкости

function setRGB(){
    container1.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
}

const red  = new Control(container1, {min: 0, max: 255})
red.onchange = setRGB
const green  = new Control(container1, {min: 0, max: 255})
green.onchange = setRGB
const blue  = new Control(container1, {min: 0, max: 255})
blue.onchange = setRGB

setRGB();

////сделать три крутилки для RGB
////и обновлять цвет блока/фона блока при вращении любой из трех

//setTimeout(() => volumeControl.setValue(80), 2000)