let painting = false
document.body.addEventListener('mousedown', event => {
  if (event.target.className === 'pixel') {
    painting = true
    paint(event.target)
  }
})
document.body.addEventListener('mouseup', event => {
  painting = false
})
document.body.addEventListener('mouseover', event => {
  if (painting && event.target.className === 'pixel') {
    paint(event.target)
  }
})
function paint(pixel) {
  let brush = document.querySelector('input[name="brush"]:checked')
  let color = brush ? brush.value : ''
  let index = Math.floor(Array.prototype.indexOf.call(
    brush.parentNode.parentNode.childNodes,
    brush.parentNode
  ) / 2)
  pixel.style.backgroundColor = color
  pixel.dataset.brush = index
  updateTemplates()
}
function updateTemplates() {
  let data = [[],[],[],[],[],[],[]]
  let columns = document.querySelectorAll('#calendar > ul > li')
  Array.prototype.forEach.call(columns, (col, x) => {
    let cells = col.querySelectorAll('.pixel')
    Array.prototype.forEach.call(cells, (cell, y) => {
      let brush = cell.dataset.brush || 0
      data[y][x] = brush
    })
  })
  updateGitHubBoard(data)
  updateGitfiti(data)
}
function updateGitHubBoard(data) {
  document.getElementById('github-board').value =
    data.map(row => row.join('')).join('\n')
}
function updateGitfiti(data) {
  document.getElementById('gitfiti').value = ':template\n[[' +
    data.map(row => row.join()).join('],\n[') + ']]'
}