| <!DOCTYPE html> | 
 | <html> | 
 |   <head> | 
 |     <title>Virtual Collection demo</title> | 
 |     <meta charset="utf-8" /> | 
 |     <script src="../src/menu.js"></script> | 
 |     <script src="../src/vc.js"></script> | 
 |     <link href="../../css/build/kalamar.css" rel="stylesheet" type="text/css"></link> | 
 |     <style type="text/css" rel="stylesheet"> | 
 |  | 
 | body { | 
 |   background-color: #7ba400; | 
 |   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> |