<!DOCTYPE html>
<html>
  <head>
    <title>Virtual Collection demo</title>
    <meta charset="utf-8" />
    <script src="../js/src/menu.js"></script>
    <script src="../js/src/vc.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
    <style type="text/css" rel="stylesheet">

body {
  background-color: #9bad0b;
  color: white;
  font-family: tahoma, verdana, arial;
  font-size: 10pt;
  margin: 20px;
}

.info {
  background-color:white;
  color: black;
  padding: 1em;
  font-family: mono;
}
    </style>
  </head>
  <body>
    <div id="vc"></div>
    <div id="menu" class="vc"></div>

    <script>
    var json = {
      "@type":"koral:docGroup",
      "operation":"operation:or",
      "operands":[
        {
          "@type":"koral:docGroup",
          "operation":"operation:and",
          "operands":[
            {
              "@type":"koral:doc",
              "key":"Titel",
              "value":"Der Birnbaum",
              "match":"match:eq"
            },
            {
              "@type":"koral:doc",
              "key":"Veröffentlichungsort",
              "value":"Mannheim",
              "match":"match:eq"
            },
            {
              "@type":"koral:docGroup",
              "operation":"operation:or",
              "operands":[
                {
                  "@type":"koral:doc",
                  "key":"Untertitel",
                  "value":"Aufzucht und Pflege",
                  "match":"match:eq"
                },
                {
                  "@type":"koral:doc",
                  "key":"Untertitel",
                  "value":"Gedichte",
                  "match":"match:eq",
                  "rewrites" : [
                    {
                      "@type": "koral:rewrite",
                      "src" : "policy",
                      "operation" : "operation:injection",
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "@type":"koral:doc",
          "key":"Veröffentlichungsdatum",
          "type":"type:date",
          "value":"2015-03-05",
          "match":"match:geq"
        }
      ]
    };
    KorAP.Locale.AND = 'und';
    KorAP.Locale.OR  = 'oder';

    var vc = KorAP.VirtualCollection.render(json);
    document.getElementById('vc').appendChild(vc.element());

    function showJSON() {
      document.getElementById("json").innerHTML = JSON.stringify(vc.root().toJson());
    };

    function showQuery() {
      document.getElementById("query").innerHTML = vc.root().toQuery();
    };

    </script>

    <hr />

    <p><a onclick="showJSON()" style="cursor:pointer">show JSON!</a></p>
    <div id="json" class="info"></div>

    <hr />

    <p><a onclick="showQuery()" style="cursor:pointer">show Query!</a></p>
    <div id="query" class="info"></div>

  </body>
</html>