const body = {
    content: document.getElementsByClassName('fullscreenImg')[0],
    images: document.querySelectorAll('img:not([class])'),
    buttons: `<div class='closeFullscreenImage'>&#10005;</div><div class='navleft'>&#171;</div><div class='navright'>&#187;</div>`
}

const blogImage = () => {
    body.content.style.opacity = 0
    body.images.forEach((img, index) => {
        img.addEventListener('click', () => {
            body.content.innerHTML = `${body.buttons}<img src='${img.src}'/>`
            body.content.style.opacity = 1
            listener(index)
        })
    })
}

const drawImage = (src) => {
    try {
        body.content.innerHTML = `${body.buttons}<img src='${src}'>`
    } catch (err) {
        //console.log(src)
    }
}

const listener = (index) => {
    const buttons = {
        close: document.getElementsByClassName('closeFullscreenImage')[0],
        left: document.getElementsByClassName('navleft')[0],
        right: document.getElementsByClassName('navright')[0]
    }
    buttons.close.addEventListener('click', () => {
        body.content.style.opacity = 0
        setTimeout(() => {
            body.content.innerHTML = ''
        }, '1000')
    })
    buttons.left.addEventListener('click', () => {
        if (index > 0) {
            console.log(index)
            drawImage(body.images[index - 1].src)
            listener(index - 1)
        } else {
            drawImage(body.images[body.images.length - 1].src)
            listener(body.images.length)
        }
    })
    buttons.right.addEventListener('click', () => {
        if (index < body.images.length - 1) {
            drawImage(body.images[index + 1].src)
            listener(index + 1)
        } else {
            drawImage(body.images[0].src)
            listener(0)
        }
    })
}
blogImage()