att=document.getElementById("Atack1");
AIN=document.getElementById("AIn");
dec=document.getElementById("Decay1")
DIN=document.getElementById("DIn");
sus=document.getElementById("Sustain1");
SIN=document.getElementById("SIn");
rel=document.getElementById("Release1");
RIN=document.getElementById("RIn");
kmitocet=document.getElementById("Kmitoctik");
kmitocetIN=document.getElementById("KmitocetIn")

const OutputSlider=document.getElementById("slidOut");
const INOUT=document.getElementById("outIn");

let attackVal=1;
let decayVal=0.30;
let releaseVal=1;
let sustainVal=0.30;






const selekt1=document.getElementById("tvarsignalu");

let Selekttvar;

selekt1.addEventListener('change', function handleChange(event) {

Selekttvar=Number(event.target.value);



});

let a;

kmitocet.addEventListener('change', function handleChange(event) {

    a=Number(event.target.value);
    kmitocetIN.value=a;
    kmitocet.value=kmitocetIN.value;


});



let b

kmitocetIN.addEventListener('change', function handleChange(event) {

    b=Number(event.target.value);
    kmitocet.value=b;
    kmitocetIN.value=kmitocet.value;


});



att.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    attackVal = Number(event.target.value);
    AIN.value=attackVal;
    zmenaAdsr()




});


AIN.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    A1 = Number(event.target.value);
    att.value=A1;
    attackVal=A1;



    zmenaAdsr()
});





dec.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    decayVal = Number(event.target.value);
    DIN.value=decayVal;
    zmenaAdsr()


});


DIN.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    D1 = Number(event.target.value);
    dec.value=D1;
    decayVal=D1;




    zmenaAdsr()
});




sus.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    sustainVal = Number(event.target.value);
    SIN.value=sustainVal;
    zmenaAdsr()



});

SIN.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    SU1 = Number(event.target.value);
    sus.value=SU1;
    sustainVal=SU1;




    zmenaAdsr()
});




rel.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    releaseVal = Number(event.target.value);
    RIN.value=releaseVal;
    zmenaAdsr()


});

RIN.addEventListener('input', function handleChange(event)
{
    console.log(event.target.value);
    R1 = Number(event.target.value);
    rel.value=R1;
    releaseVal=R1;



    zmenaAdsr()
});


OutputSlider.addEventListener('input', function handleChange(event) {
    console.log(event.target.value);
    OutputSlider1 = Number(event.target.value);
  //  OutputGain.gain.value= OutputSlider1;

    INOUT.value=OutputSlider1;



    zmenaAdsr()
});

INOUT.addEventListener('input', function handleChange(event){

    Oout = Number(event.target.value);
    OutputSlider.value=Oout;
    OutputSlider1=Oout;



    zmenaAdsr()

});











var container = document.getElementById('adsrko'),
  d1 = [[0, 0], [attackVal, OutputSlider.value], [attackVal+decayVal,sustainVal*OutputSlider.value],[attackVal+decayVal+releaseVal,0]];

Flotr.draw(container, [{data: d1, label: "ADSR"},],
    {mode: 'time',
        xaxis: {
            ticks: [[1],[2], [3], [4], [5], [6],[7],[8], [9], [10], [11], [12],[13],[14], [15], [16], [17], [18],]
        },
        grid: {
            minorVerticalLines: true,
            backgroundColor: 'white'
        }
    });

function zmenaAdsr(){

        container = document.getElementById('adsrko'),
        d1 = [[0, 0], [attackVal, OutputSlider.value], [attackVal+decayVal,sustainVal*OutputSlider.value],[attackVal+decayVal+releaseVal,0]];

    Flotr.draw(container, [{data: d1, label: "ADSR"},],
        {mode: 'time',
            xaxis: {
                ticks: [[1],[2], [3], [4], [5], [6],[7],[8], [9], [10], [11], [12],[13],[14], [15], [16], [17], [18],]
            },
            grid: {
                minorVerticalLines: true,
                backgroundColor: 'white'
            }
        });


}





let cas1;
let ted;
let casodstartu;



    function start(){

        let audioCtx = new AudioContext();
        let OutputGain =audioCtx.createGain();
        let osc1 = audioCtx.createOscillator();

        let adsrGain=audioCtx.createGain();

        adsrGain.gain.setValueAtTime(0,0);
        adsrGain.gain.linearRampToValueAtTime(OutputSlider.value,audioCtx.currentTime+attackVal);
        adsrGain.gain.linearRampToValueAtTime(OutputSlider.value*sustainVal,audioCtx.currentTime+attackVal+decayVal);
        adsrGain.gain.linearRampToValueAtTime(0,audioCtx.currentTime+attackVal+decayVal+releaseVal);

        osc1.connect(adsrGain);
        adsrGain.connect(OutputGain);
        OutputGain.connect(audioCtx.destination);
        osc1.frequency.value=kmitocet.value;

        if (Selekttvar===1){

            osc1.type="sine";

        }
        else if(Selekttvar===2){

            osc1.type="square";

        }

        else if(Selekttvar===3){

            osc1.type="sawtooth";

        }

        osc1.start();
        osc1.stop(audioCtx.currentTime + attackVal+decayVal+releaseVal+1);






        casovyprubeh();
        reset();
    }




function casovyprubeh() {
    ted = Date.now();
    if (!cas1) {
        cas1 = ted;
    }

    casodstartu = (ted - cas1)/1000;

    document.getElementById("casprubehu").innerHTML = casodstartu.toFixed(2);

    if ((casodstartu < attackVal+decayVal+releaseVal)*1000) {
        console.log(casodstartu);
        requestAnimationFrame(casovyprubeh);
    }


}
function reset() {
    cas1 = null;
    casovyprubeh();
}

const tlacitko1=document.getElementById("play1");
tlacitko1.addEventListener('click', start);



document.addEventListener('keydown', function(event) {
    if (event.keyCode === 88) {
        start();
    }
});


