<!DOCTYPE html>
<html>
  <head>
    <title>Panel and ButtonGroup demo</title>
    <meta charset="utf-8" />
    <script src="../js/lib/require.js" async="async"></script>
    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
  </head>
  <body>
    <nav id="mainButton" style="position: absolute; width: 100%; top: 150px"></nav>
  </body>
  <script>
requirejs.config({
  baseUrl: '../js/src',
  paths : {
    'lib': '../lib'
  }
});


require(['buttongroup', 'panel', 'view/result/koralquery', 'state'], function (btnClass, panelClass, kqClass, stateClass) {
  KorAP.koralQuery = {
    '@type' : "https://beispiel",
    'key' : 'Cool'
  };

  let panel = panelClass.create();
  let actions = panel.actions;

  // Add simple button
  actions.add('Meta',{'cls':['meta']}, function () {
    console.log(this.button.classList.contains('meta'));
    view = kqClass.create();
    panel.add(view);
  });

  // Add list button
  var list = actions.addList('More', ['list']);

  list.readItems([
    ['cool', 'cool', function (e, action) { console.log('really' + this.action()) }],
    ['very cool', 'veryCool', function (e, action) { console.log('very cool') }]
  ]);

  // Add toggle button
  let s = stateClass.create(true);

  let bgChange = {
    setState : function (val) {
      if (val) {
        document.body.style.backgroundColor = 'red';
      } else {
        document.body.style.backgroundColor = 'transparent';
      }
    }
  };

  s.associate(bgChange);

  actions.addToggle('Background',['bg'], s);

  document.getElementById('mainButton').appendChild(panel.element());
});


  </script>
</html>