--- a/playground/index.html	Thu Mar 14 16:20:15 2013 +0100
+++ b/playground/index.html	Thu Mar 14 11:51:45 2013 -0400
@@ -81,18 +81,21 @@
                        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-flattened"
+                       href="#flattened"><span>Flattened</span></a></li>
                     <li><a id="tab-framed"
                        href="#framed"><span>Framed</span></a></li>
                     <li><a id="tab-nquads"
                        href="#nquads"><span>N-Quads</span></a></li>
+                    <li><a id="tab-normalized"
+                       href="#normalized"><span>Normalized</span></a></li>
                 </ul>
                 <pre id="compacted" class="prettyprint lang-jsonld"></pre>
                 <pre id="expanded" class="prettyprint lang-jsonld"></pre>
-                <pre id="normalized" class="prettyprint lang-jsonld"></pre>
+                <pre id="flattened" class="prettyprint lang-jsonld"></pre>
                 <pre id="framed" class="prettyprint lang-jsonld"></pre>
                 <pre id="nquads" class="prettyprint lang-nquads"></pre>
+                <pre id="normalized" class="prettyprint lang-jsonld"></pre>
             </div>
 
          </div>

--- a/playground/playground.js	Thu Mar 14 16:20:15 2013 +0100
+++ b/playground/playground.js	Thu Mar 14 11:51:45 2013 -0400
@@ -158,12 +158,12 @@
    */
   playground.tabSelected = function(event, ui) {
     playground.activeTab = ui.tab.id;
-    if(ui.tab.id === 'tab-compacted' || ui.tab.id === 'tab-framed') {
-      // if the 'compact' or 'frame' tab is selected, display the appropriate
-      // input textarea
+    if(ui.tab.id === 'tab-compacted' || ui.tab.id === 'tab-flattened' ||
+      ui.tab.id === 'tab-framed') {
+      // these options require more UI inputs, so compress UI space
       $('#markup').addClass('compressed');
 
-      if(ui.tab.id === 'tab-compacted') {
+      if(ui.tab.id === 'tab-compacted' || ui.tab.id === 'tab-flattened') {
         $('#param-type').html('JSON-LD Context');
         $('#context').show();
         $('#frame').hide();
@@ -200,13 +200,14 @@
     // set base IRI
     var options = {base: document.baseURI};
 
-    if(playground.activeTab === 'tab-normalized') {
-      options.format = 'application/nquads';
-      jsonld.normalize(input, options, function(err, normalized) {
+    if(playground.activeTab === 'tab-compacted') {
+      jsonld.compact(input, param, options, function(err, compacted) {
         if(err) {
           return callback(err);
         }
-        $('#normalized').html(playground.htmlEscape(normalized));
+        $('#compacted').html(js_beautify(
+          JSON.stringify(compacted).replace('<', '&lt;').replace('>', '&gt;'),
+          {'indent_size': 2}));
         callback();
       });
     }
@@ -215,18 +216,20 @@
         if(err) {
           return callback(err);
         }
-        $('#expanded').html(js_beautify(JSON.stringify(expanded).replace('<', '&lt;').replace('>', '&gt;'),
-          {'indent_size': 2, 'brace_style': 'expand'}));
+        $('#expanded').html(js_beautify(
+          JSON.stringify(expanded).replace('<', '&lt;').replace('>', '&gt;'),
+          {'indent_size': 2}));
         callback();
       });
     }
-    else if(playground.activeTab === 'tab-compacted') {
-      jsonld.compact(input, param, options, function(err, compacted) {
+    else if(playground.activeTab === 'tab-flattened') {
+      jsonld.flatten(input, param, options, function(err, flattened) {
         if(err) {
           return callback(err);
         }
-        $('#compacted').html(js_beautify(JSON.stringify(compacted).replace('<', '&lt;').replace('>', '&gt;'),
-          {'indent_size': 2, 'brace_style': 'expand'}));
+        $('#flattened').html(js_beautify(
+          JSON.stringify(flattened).replace('<', '&lt;').replace('>', '&gt;'),
+          {'indent_size': 2}));
         callback();
       });
     }
@@ -235,8 +238,9 @@
         if(err) {
           return callback(err);
         }
-        $('#framed').html(js_beautify(JSON.stringify(framed).replace('<', '&lt;').replace('>', '&gt;'),
-          {'indent_size': 2, 'brace_style': 'expand'}));
+        $('#framed').html(js_beautify(
+          JSON.stringify(framed).replace('<', '&lt;').replace('>', '&gt;'),
+          {'indent_size': 2}));
         callback();
       });
     }
@@ -250,6 +254,16 @@
         callback();
       });
     }
+    else if(playground.activeTab === 'tab-normalized') {
+      options.format = 'application/nquads';
+      jsonld.normalize(input, options, function(err, normalized) {
+        if(err) {
+          return callback(err);
+        }
+        $('#normalized').html(playground.htmlEscape(normalized));
+        callback();
+      });
+    }
   };
 
   /**
@@ -282,7 +296,8 @@
     var param = null;
     var jsonParam = null;
 
-    if(playground.activeTab === 'tab-compacted') {
+    if(playground.activeTab === 'tab-compacted' ||
+      playground.activeTab === 'tab-flattened') {
       jsonParam = $('#context').val();
       needParam = true;
     }