Fixed demo file structure
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
new file mode 100644
index 0000000..353b309
--- /dev/null
+++ b/dev/demo/vc.html
@@ -0,0 +1,115 @@
+<!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>