//Select the poem tag
let poemNumber = 0
const poemTag = document.querySelector('div.poem h1')

//Content for the poemTag
const poems = [
  'My human shell enclosed in bark',
  "It's cold inside this cocoon",
  'I go to a funeral everyday',
  'Merging under the white heat',
  'My love is unholy'
]

//Pick a random line from poems
const randomPoem = function() {
  poemNumber = Math.floor(Math.random() * poems.length)
  poemTag.innerHTML = poems[poemNumber]
}

//change the content of the poem tag
document.addEventListener('DOMContentLoaded', function() {
  randomPoem()
})

//random image Anordnung
const imageList = [
  '_dsf4699.jpg',
  '_dsf4744.jpg',
  '_dsf4785.jpg',
  '_dsf1410.jpg',
  '_dsf4694.jpg',
  '_dsf4749.jpg'
]
const picturesSection = document.querySelector('section#pictures')

//Random parameters
const parameterLeft = ['0px', '5%', '10%']
const parameterRight = ['0px', '0px', '0px', '5%']
const parameterTop = ['200px', '50px', '100px', '150px', '250px', '300px']
const parameterBottom = ['0px', '5%']
const parameterWidth = ['35%', '30%', '20%', '20%', '20%', '40%']


const randomImages = function() {
  for(var i = imageList.length -1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i+1))
    var temp = imageList[i]
    imageList[i] = imageList[j]
    imageList[j] = temp
  }

  imageList.forEach(function(image) {
    const img = document.createElement('img')
    img.setAttribute('src', image)

    img.style.marginTop = parameterTop[Math.floor(Math.random() * parameterTop.length)]
    img.style.marginRight = parameterRight[Math.floor(Math.random() * parameterRight.length)]
    img.style.marginBottom = parameterBottom[Math.floor(Math.random() * parameterBottom.length)]
    img.style.marginLeft = parameterLeft[Math.floor(Math.random() * parameterLeft.length)]
    img.style.width = parameterWidth[Math.floor(Math.random() * parameterWidth.length)]

    picturesSection.appendChild(img)
  })
}

document.addEventListener('DOMContentLoaded', function() {
  randomImages()
})