index.htm.haml in society-1.5.0

- old
+ new

@@ -3,37 +3,53 @@
   %head
     %meta{:charset => "utf-8"}
       %title Society Relational Analysis
       :css
         @import url(stylesheets/society.css);
+        @import url(http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css)
       %script{:src => "javascripts/d3.min.js"}
+      %script{:src => "http://code.jquery.com/jquery-1.10.2.js"}
+      %script{:src => "http://code.jquery.com/ui/1.11.4/jquery-ui.js"}
       %script{:src => "javascripts/society.js"}
       :css
         body {
           background-color: #fff;
           padding: 1em;
           font-family: Consolas, Verdana, sans-serif;
           font-size: 12px;
         }
-  %body
+        $(function() {
+          $( "#tabs" ).tabs();
+        });
+      %body
     %div{:style => "text-align: center;"}
-      %h1 Relational Matrices
+      %h1 Object Relational Matrices
       %h3
         Generated by
         %a{:href => "https://github.com/Bantik/society"} Society
-    %hr{:size => "1"}/
-    %div{:style => "text-align: center;"}
-      %h2 Heatmap
-    #heatmap
-    %hr{:size => "1"}/
-    %div{:style => "text-align: center;"}
-      %h2 Network
-      %p
-        %em
-          Hover over a class name to see incoming references (green) and outgoing
-          references (red).
-    #network{:style => "height: 100%; width: 100%;"}
+    #tabs
+      %ul
+        %li
+          %a{:href => "#tabs-1"} Network
+        %li
+          %a{:href => "#tabs-2"} Heat Map
+      #tabs-1
+        %div
+          %h2 Network
+          %p.instructions
+            Hover over a class name to see
+            %span.key-green incoming references
+            and
+            = succeed "." do
+              %span.key-red outgoing references
+            Double-click on a class name to enter
+            focus mode. Press ESC to return to the full view.
+        #network{:style => "height: 100%; width: 100%;"}
+      #tabs-2
+        %div
+          %h2 Heatmap
+        #heatmap
     :javascript
       var data = JSON.parse('#{json_data}');
       Society.generate("#network", {
         data: {
           json: data
@@ -43,6 +59,8 @@
         type: "heatmap",
         data: {
           json: data
         }
       });
-
+      $(function() {
+        $( "#tabs" ).tabs();
+      });