<!DOCTYPE html>
<html>
  <head>
    <title>Plugin demo</title>

    <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />

    <!-- load client javascript library -->
    <script src="/js/src/plugin/client.js" data-server="http://localhost:3003/"></script>
    <style>
      body, html {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border-width: 0;
        height: unset !important;
      }

      body {
        min-height: unset !important;
      }
    </style>
  </head>
  <body style="background-color: yellow">
    <h2>Example Widget!</h2>
    <script>
      function flood () {
        var i = 0;
        for (; i < 90; i++) {
          KorAPlugin._sendMsg({
            'action' : '-'
          });
        };
      };

      function pluginit (p) {
        p.onMessage = function(msg) {
          switch (msg.key) {
            // console.log("State changed to", msg.key, msg.value);
            case 'glemm':
              let data = {
                'action' : 'pipe',
                'service' : 'http://glemm/'
              };
                   
              if (!msg.value) {
                data['job'] = 'del';
              };
              KorAPlugin.sendMsg(data);
              break;
          }
        };
      };
      </script>
    <ul>
      <li><a onclick="KorAPlugin.log(333, 'Huhu!')">Send log!</a></li>
      <li><a onclick="KorAPlugin.resize()">Resize</a></li>
      <li><a onclick="KorAPlugin.sendMsg({'action':'pipe','service':'Glemm'})">Add Glemm</a></li>
      <li><a onclick="flood()">Flood!</a></li>
    </ul>
    <p style="width: 2000px">------------------------------------------------------------------------------------------------------------------------</p>
  </body>
</html>