function Control(el, {value=0, 
    min=0, 
    max=100, 
    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;
}
if(typeof this.onchange === 'function' && newValue !== value){
    this.onchange(newValue);
}
value = newValue;

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

img.onmousewheel = (event) => {
    const {deltaY} = event;
    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;

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

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;
}

function setRGB(getValue){
    document.body.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;


const volumeControl = new Control(volume, {
    min: 0,
    max: 1,
    wheelSpeed: 0.0005,
    step: 0.01
    
});

volumeControl.onchange = setVolume;
function setVolume() { 
    music.volume = volumeControl.getValue();
}