modalComponent = (function(){
  self = this
  self.display = false
  self.header = ''
  self.content = ''
  self.domElement;

  function _buildComponent() {
    return [
    '<div class="alg-modal-overlay" data-modal-component>',
      '<div class="alg-modal">',
        '<div class="alg-modal-header">',
          self.header,
        '</div>',
        '<div class="alg-modal-content">',
          self.content,
        '</div>',
        '<div class="alg-modal-footer">',
          self.footer,
        '</div>',
      '</div>',
    '</div>'
    ].join('');
  }

  function _setAttributes(args) {
    self.header  = args['header']  || '';
    self.footer  = args['footer']  || '<button data-dismiss="modal" class="button-close">Close</button><button data-dismiss="modal" class="button-accept">Accept</button>';
    self.content = args['content'] || '';
  }

  function _start() {
    document.body.innerHTML += _buildComponent();
    self.display = true;
    self.domElement = document.querySelector('[data-modal-component]');
    self.domElement.addEventListener('click', close);

    var closetriggers = document.querySelectorAll('[data-dismiss="modal"]');

    for (i = 0; i < triggers.length; i++) {
      triggers[i].addEventListener('click', close);
    }
  }

  function init(args={}) {
    _setAttributes(args);
    _start();
  }

  function close() {
    self.domElement.remove();
  }

  return {
    init: init
  }
})();