window.onload = function() {

  // Update ingredients amounts

  let inputs = []
  document.querySelectorAll('code').forEach(function (number) {

    // Install input
    const value = parseNumber(number.innerHTML)
    number.innerHTML = `<input value="${formatNumber(1, value)}">`

    // Push to inputs
    const element = number.children[0]
    inputs.push({ element, value })

    element.addEventListener('input', function() {

      // Parse modified input value
      const n = parseNumber(element.value)

      if (!isNaN(n)) {
        // Find current factor
        const currentInput = inputs.find(function (input) {
          return input.element === element
        })
        const factor = n / currentInput.value

        // Apply factor to other inputs
        inputs.forEach(function (input) {
          if (input.element !== currentInput.element) {
            input.element.value = formatNumber(factor, input.value)
          }
        })
      }
    })
  })

  // Set up done marks for steps

  document.querySelectorAll('ol > li').forEach(function (item) {
    item.addEventListener('click', function() {
      item.className = item.className ? '' : 'completed'
    })
  })

}

function parseNumber(value) {
  return parseFloat(value.replace(',', '.')) || 0
}

function formatNumber(factor, value) {
  if (factor === 1) {
    return value.toString().split('.').join(',')
  } else {
    const n = factor * value
    const xs = n.toString().split('.')
    const p = precision(value) || 1
    if (xs.length == 2) {
      return `${xs[0]},${xs[1].slice(0, p)}`
    } else {
      return n
    }
  }
}

function precision(value) {
  const xs = value.toString().split('.')
  if (xs.length === 2) {
    return xs[1].length
  }
}