--- a/playground/index.html	Fri Jul 08 13:01:09 2011 -0400
+++ b/playground/index.html	Fri Jul 08 14:19:51 2011 -0400
@@ -63,30 +63,39 @@
               <li class="button">
                  <span onmousedown="playground.populate('Library')">Library</span>
               </li>
-            </ul>
-            <div id="errors"></div>
-            <textarea id="markup"
-               placeholder="Enter your JSON-LD markup here..."
-               onkeyup="playground.process()"></textarea>
+            </ul><br />
+
+            <div id="markup-container">
+               <textarea id="markup"
+                  placeholder="Enter your JSON-LD markup here..."
+                  onkeyup="playground.process()"></textarea>
+               <textarea id="frame" class="compressed"
+                  placeholder="Enter your JSON-LD frame here..."
+                  onkeyup="playground.process()"></textarea>
+            </div>
+
+            <div id="markup-errors"></div>
+
+            <div id="frame-errors"></div>
 
             <div id="tabs">
                 <ul>
-                    <li><a href="#compacted"><span>Compacted</span></a></li>
-                    <li><a href="#expanded"><span>Expanded</span></a></li>
-                    <li><a href="#normalized"><span>Normalized</span></a></li>
-                    <li><a href="#framed"><span>Framed</span></a></li>
-                    <li><a href="#turtle"><span>TURTLE</span></a></li>
+                    <li><a id="tab-compacted" 
+                       href="#compacted"><span>Compacted</span></a></li>
+                    <li><a id="tab-expanded" 
+                       href="#expanded"><span>Expanded</span></a></li>
+                    <li><a id="tab-normalized" 
+                       href="#normalized"><span>Normalized</span></a></li>
+                    <li><a id="tab-framed" 
+                       href="#framed"><span>Framed</span></a></li>
+                    <li><a id="tab-turtle" 
+                       href="#turtle"><span>TURTLE</span></a></li>
                 </ul>
-                <pre id="compacted" class="prettyprint language-jsonld">
-                </pre>
-                <pre id="expanded" class="prettyprint language-jsonld">
-                </pre>
-                <pre id="normalized" class="prettyprint language-jsonld">
-                </pre>
-                <pre id="framed" class="prettyprint language-jsonld">
-                </pre>
-                <pre id="turtle" class="prettyprint language-ttl">
-                </pre>
+                <pre id="compacted" class="prettyprint language-jsonld"></pre>
+                <pre id="expanded" class="prettyprint language-jsonld"></pre>
+                <pre id="normalized" class="prettyprint language-jsonld"></pre>
+                <pre id="framed" class="prettyprint language-jsonld"></pre>
+                <pre id="turtle" class="prettyprint language-ttl"></pre>
             </div>
 
          </div>

--- a/playground/jquery-ui-1.8.14.custom.css	Fri Jul 08 13:01:09 2011 -0400
+++ b/playground/jquery-ui-1.8.14.custom.css	Fri Jul 08 14:19:51 2011 -0400
@@ -58,7 +58,7 @@
 ----------------------------------*/
 .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
 .ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
 .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
 .ui-widget-content a { color: #222222; }
 .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }

--- a/playground/playground-examples.js	Fri Jul 08 13:01:09 2011 -0400
+++ b/playground/playground-examples.js	Fri Jul 08 14:19:51 2011 -0400
@@ -6,6 +6,7 @@
    window.playground = window.playground || {};
    var playground = window.playground;
    playground.examples = {};
+   playground.frames = {};
 
    // Add the example of a Person
    playground.examples["Person"] =
@@ -73,7 +74,7 @@
    playground.examples["Product"] =
    {
       "@subject": "http://example.org/cars/for-sale#tesla",
-      "@type": "gr:Offering",
+      "a": "gr:Offering",
       "gr:name": "Used Tesla Roadster",
       "gr:description": "Need to sell fast and furiously",
       "gr:hasBusinessFunction": "gr:Sell",
@@ -85,7 +86,7 @@
       },
       "gr:includes": 
       {
-         "@type": ["gr:Individual", "pto:Vehicle"],
+         "a": ["gr:Individual", "pto:Vehicle"],
          "gr:name": "Tesla Roadster",
          "foaf:page": "http://www.teslamotors.com/roadster"
       },
@@ -152,13 +153,47 @@
    // Add the example of a Library
    playground.examples["Library"] =
    {
-      "name": "The Long Library",
-      "@context":
-      {
-         "xsd": "http://www.w3.org/2001/XMLSchema#",
-         "@coerce":
+      "@": [
          {
-            "xsd:anyURI": ["image"]
+            "@": "http://example.org/library",
+            "a": "ex:Library",
+            "ex:contains": "http://example.org/library/the-republic"
+         },
+         {
+            "@": "http://example.org/library/the-republic",
+            "a": "ex:Book",
+            "dc:creator": "Plato",
+            "dc:title": "The Republic",
+            "ex:contains": "http://example.org/library/the-republic#introduction"
+         },
+         {
+            "@": "http://example.org/library/the-republic#introduction",
+            "a": "ex:Chapter",
+            "dc:description": "An introductory chapter on The Republic.",
+            "dc:title": "The Introduction"
+         }
+      ],
+      "@context": {
+         "@coerce": {
+            "xsd:anyURI": "ex:contains"
+         },
+         "dc": "http://purl.org/dc/elements/1.1/",
+         "ex": "http://example.org/vocab#"
+      }
+   };
+
+   // Add the example of a Library
+   playground.frames["Library"] =
+   {
+      "@context": {
+         "dc": "http://purl.org/dc/elements/1.1/",
+         "ex": "http://example.org/vocab#"
+      },
+      "a": "ex:Library",
+      "ex:contains": {
+         "a": "ex:Book",
+         "ex:contains": {
+            "a": "ex:Chapter"
          }
       }
    };

--- a/playground/playground.css	Fri Jul 08 13:01:09 2011 -0400
+++ b/playground/playground.css	Fri Jul 08 14:19:51 2011 -0400
@@ -3,10 +3,19 @@
 }
 
 textarea {
+   display: inline;
    margin-top: 10px;
    margin-bottom: 10px;
    width:100% !important;
-   min-height:250px !important;
+   min-height:200px !important;
+}
+
+textarea.compressed {
+   display: inline;
+   margin-top: 10px;
+   margin-bottom: 10px;
+   width:49% !important;
+   min-height:200px !important;
 }
 
 .clear { /* generic container (i.e. div) for floating buttons */

--- a/playground/playground.js	Fri Jul 08 13:01:09 2011 -0400
+++ b/playground/playground.js	Fri Jul 08 14:19:51 2011 -0400
@@ -10,6 +10,22 @@
    playground.init = function()
    {
       $("#tabs").tabs();
+      $("#frame").hide();
+      $("#tabs").bind("tabsselect", playground.tabSelected);
+   };
+
+   playground.tabSelected = function(event, ui)
+   {
+      if(ui.tab.id == "tab-framed")
+      {
+         $("#markup").addClass("compressed");
+         $("#frame").show();
+      }
+      else
+      {
+         $("#frame").hide();
+         $("#markup").removeClass("compressed");
+      }
    };
 
    playground.process = function()
@@ -17,11 +33,12 @@
       try
       {
          var input = JSON.parse($("#markup").val());
+         var frame = JSON.parse($("#frame").val());
          var normalized = forge.jsonld.normalize(input);
          var expanded = forge.jsonld.removeContext(input);
          var compacted = forge.jsonld.changeContext(
             input["@context"] || {}, input);
-         var framed = forge.jsonld.frame({}, input);
+         var framed = forge.jsonld.frame(input, frame);
 
          $("#normalized").html(js_beautify(JSON.stringify(normalized)),
             { "indent_size": 3, "brace_style": "expand" });
@@ -29,6 +46,8 @@
             { "indent_size": 3, "brace_style": "expand" });
          $("#expanded").html(js_beautify(JSON.stringify(expanded)),
             { "indent_size": 3, "brace_style": "expand" });
+         $("#framed").html(js_beautify(JSON.stringify(framed)),
+            { "indent_size": 3, "brace_style": "expand" });
 
          prettyPrint();
       }
@@ -45,6 +64,14 @@
       {
          $("#markup").val(js_beautify(JSON.stringify(playground.examples[type]),
             { "indent_size": 3, "brace_style": "expand" }));
+         $("#frame").val("{}");
+
+         if(type in playground.frames)
+         {
+            $("#frame").val(js_beautify(
+               JSON.stringify(playground.frames[type]),
+               { "indent_size": 3, "brace_style": "expand" }));
+         }
       }
 
       playground.process();