var messages = [
  '1. Define a 12 column grid but skip declaring any rows',
  '2. Size the first two stories by declaring how many columns they span',
  '3. Explicitly define the grid area for the sub-section',
  '4. Declare the column spans for the next 5 stories',
  '5. Clear the right-hand-side by wrapping stories onto a new row',
  '6. Instruct the final 4 stories to start from the 10th grid line and span the remaining columns',
  '7. Set the grid algorithm to dense',
  '8. Make the stories on the left span multiple rows'
]

var steps = messages.length
var current = 0

var next = document.querySelector('button[name=next]')
var prev = document.querySelector('button[name=prev]')
var stat = document.querySelector('.Demo-status')
var logs = document.querySelector('.Demo-logs')

function step (to) {
  if (to > current) {
    document.body.classList.add('step-' + to)
  } else {
    document.body.classList.remove('step-' + current)
  }

  next.disabled = to >= steps
  prev.disabled = to <= 0

  current = to
  
  status()
}

function status () {
  stat.textContent = 'Step ' + current + ' of ' + steps
  
  logs.textContent = messages.slice(0, current).join('\n')
}

next.onclick = function () {
  if (current < steps) {
    step(current + 1)
  }
}

prev.onclick = function() {
  if (current > 0) {
    step(current - 1)
  }
}

step(0)

var support = window.CSS && CSS.supports('display', 'grid')

if (!support) {
  var p = document.createElement('p')
  
  p.innerHTML = '<strong>Your browser does not appear to support grid layout. You may need <a href="https://igalia.github.io/css-grid-layout/enable.html">to enable it</a>.</strong>'
  
  document.body.insertBefore(p, document.body.firstChild);
}