        let parag = document.getElementById('parag');
        let jumboParag = document.getElementById('jumboParag');
        let imgShow = document.getElementById('imgShow');
        const streamDivStat = document.getElementById('streamStat');
        const streamBtn = document.getElementById('streamBtn');
        const paragStreamStat = document.getElementById('paragStreamStat');
        const rotateImg = document.getElementById('rotateImg');
        const servParag = document.getElementById('servParag');

        const looperURL = "dashImgLooper.php";
        const deleterURL = "dashImgDelete.php";
        const streamURL = "streamStat.php";
        const checkStreamURL = "checkStream.php";
                        
        let userName = localStorage.getItem('smartCamUser');
        let userPass = localStorage.getItem('smartCamPass');
  
        

        //checks to see if user is loged in
        if (userName == null && userPass == null) {
            streamDivStat.style.display = "none";
            jumboParag.textContent = "You are not loged in ";
            
        //if it's loged in user can initiate stream
        } else {
            jumboParag.textContent = userName + " | STREAMING page";
            streamDivStat.style.display = "block";
            
            //checks if stream was left ON
            let streamFlag = "";
            let checkForm = new FormData();
            checkForm.append('userName', userName);

           async function checkStreamStat(checkForm) {
                const response = await fetch(checkStreamURL, {
                    method: 'POST',
                    body: checkForm
                });
                const closeStreamResp = await response.text();
                if (closeStreamResp == "streamon") {
                    streamFlag = "on";
                    streamBtn.value = "STOP STREAM";
                    paragStreamStat.textContent = "Streaming has started!";
                    
                } else {
                    paragStreamStat.textContent = "Streaming is off!";
                    rotateImg.style.display = "none";
                    servParag.style.display = "none";
                }
                
            }

            checkStreamStat(checkForm);

            //starts stream if streamstatus is on in database
            let userData = new FormData();
            userData.append("userFolder",userName);

            let streamLoop = setInterval(() => {
                if (streamFlag == "on") {
                    looper(userData);
                }
            }, 1000);
            
            streamDivStat.onclick = function() {
                
                let streamForm = new FormData();
                streamForm.append('streamStat',null);
                streamForm.append('userName', userName);
                streamForm.append('userPass', userPass);
    
                if(streamBtn.value == "START STREAM") {

                    streamBtn.value = "STOP STREAM";
                    paragStreamStat.textContent = "Streaming has started!";
                    rotateImg.style.display = "block";
                    servParag.style.display = "block";
                    streamForm.set('streamStat', 'streamon');
                    let streamResp = changeStreamStat(streamForm);
                } else {
                    streamBtn.value = "START STREAM";
                    paragStreamStat.textContent = "Streaming is off!";
                    rotateImg.style.display = "none";
                    servParag.style.display = "none";
                    streamForm.set('streamStat', 'streamoff');
                    let streamRest = changeStreamStat(streamForm);
                    deleteAllURL = 'deleteAllImg.php';
                    async function deleteAllIMG(streamForm) {
                        const response = await fetch (deleteAllURL,{
                            method : 'POST',
                            body : streamForm
                        });
                    }
                    deleteAllIMG(streamForm);
                }
            }; 

            //stream status change in database
            async function changeStreamStat(streamForm) {
                const response = await fetch(streamURL, {
                    method : 'POST',
                    body : streamForm
                });

                const phpStreamResp = await response.text();

                if (phpStreamResp == "ok") {
                        streamFlag = "on";
                        clearInterval(streamLoop);
                        streamLoop = setInterval(() => {
                            looper(userData);
                        }, 1000);
                    } else {
                        clearInterval(streamLoop);
                    }
                return phpStreamResp;
            }

            
            //uses formData to call php and obtain first two images and the total nr of images in folder
            function looper (userData) {
                fetch(looperURL,
                {
                method: 'POST',
                body: userData
                }).then(function (response) {
                    return response.text();
                })
                .then(function (body) {
                    let arr = body.split("-");
                    
                    let userNameFet = localStorage.getItem('smartCamUser');
                    let imagePath = "../datBundle/" + userNameFet + "/dashCam/";

                    let path = imagePath + arr[1];
                    let path0 = imagePath + arr[0];
                    
                    if (arr[2] > 1) {
                        imgShow.setAttribute('src', path);
                        let imgNr1 = arr[1].replace(".jpeg","");
                        //parag.textContent = arr[1];
                        parag.textContent = imgNr1;
                    } else if (arr[2] == 1) {
                        imgShow.setAttribute('src', path0);
                        let imgNr2 = arr[0].replace(".jpeg","");
                        //parag.textContent = arr[0];
                        parag.textContent = imgNr2;
                    }

                    let formData1 = new FormData(); 
                    //formData1.append("imgSRC", body);
                    formData1.append("userFolder",imagePath);
                    formData1.append("imgDEL",arr[0]);
                    if (arr[2] > 1) {
                        return formData1;
                    } 
                }).then(function (response){
                return deleteIMG(response);
                });
            }

            function deleteIMG(response) {
            fetch(deleterURL, {method:'POST', body: response}).then(function (response) {
                return response.text();
            }).then(function (body){
                //parag2.textContent = body;
            });
            }
            
            let angle = 0;
            rotateImg.onclick = function(){
                let imag = document.getElementById('imgShow');
                if(angle == 0) {
                    imag.setAttribute('style','transform:rotate(90deg)'); 
                    angle = 90;
                    imag.setAttribute('width', 500);
                    imag.setAttribute('height', 500);
                    parag.setAttribute('style',  'padding-top: 7rem');
                    rotateImg.setAttribute('style', 'margin-top: 1rem');
                    paragStreamStat.setAttribute('style', 'padding-bottom: 5rem');
                } else if (angle == 90){
                    imag.setAttribute('style','transform:rotate(180deg)'); 
                    angle = 180;
                    imag.setAttribute('width', 800);
                    imag.setAttribute('height', 800);
                    parag.setAttribute('style',  'padding-top: 0rem');
                    rotateImg.setAttribute('style', 'margin-top: 0rem; ');
                    paragStreamStat.setAttribute('style', 'padding-bottom: 0rem');
                } else if (angle == 180) {
                    imag.setAttribute('style','transform:rotate(270deg)');
                    angle = 270;
                    imag.setAttribute('width', 500);
                    imag.setAttribute('height', 500);
                    parag.setAttribute('style',  'padding-top: 7rem');
                    rotateImg.setAttribute('style', 'margin-top: 1rem');
                    paragStreamStat.setAttribute('style', 'padding-bottom: 5rem');
                } else if (angle == 270) {
                    imag.setAttribute('style','transform:rotate(0deg)');
                    angle = 0;
                    imag.setAttribute('width', 800);
                    imag.setAttribute('height', 800);
                    parag.setAttribute('style',  'padding-top: 0rem');
                    rotateImg.setAttribute('style', 'margin-top: 0rem; ');
                    paragStreamStat.setAttribute('style', 'padding-bottom: 0rem');
                }

            }

            /*
            let streamLoop = setInterval(() => {
                parag3.textContent = "stream flag is OFF";
                if (streamFlag == "on") {
                    parag3.textContent = "stream flag is ON";
                    looper(userData);
                }
            }, 1000);
            */

        }