class Button {
  constructor(arg) {
    arg.type = 'button'
    this.element = buildElement(arg)

    this.addTo = function(parentId) {
      var parent = document.getElementById(parentId)
      parent.appendChild(this.element)
    }
class Input {
  constructor(arg) {
    arg.type = 'input'
    this.element = buildElement(arg)

    this.addTo = function(parentId) {
      var parent = document.getElementById(parentId)
      parent.appendChild(this.element)
    }
  }
}

class Header {
  constructor(arg) {
    var headerWrapping = buildElement({type: 'div', attributes: {id: 'header-wrapping'}})
    headerWrapping.appendChild(buildElement({type: 'h1', attributes: {id: 'header-title'}, innerHTML: arg.title || 'Titel'}))
    headerWrapping.appendChild(buildElement({type: 'div', attributes: {id: 'header-actions'}}))
    document.body.appendChild(headerWrapping)

    this.setTitle = function(newTitle) {
      document.getElementById('header-title').innerHTML = newTitle
    }

    this.remove = function() {
      this.parentNode.removeChild(this)
    }
  }
}

function buildElement(arg) {
  if(typeof arg.type == 'undefined') {throw new Error(['Missing build arguments'])}
  var element = document.createElement(arg.type)
  element.appendChild(document.createTextNode(arg.innerHTML || ''))

  for(var key in arg.attributes) {
    element.setAttribute(key, arg.attributes[key])
  }

  var style = ""
  for(var key in arg.styles) {
    style = style + key + ': ' + arg.styles[key] + '; '
  }
  if(style.length > 0) { element.setAttribute('style', style) }

  return element
}
  }
}
