!!!
%html
  %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"}
      %body
    %div{:style => "text-align: center;"}
      %h1 Object Relational Matrices
      %h3
        Generated by
        %a{:href => "https://github.com/CoralineAda/society"}
          Society
    #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
          %p.instructions
            Order by frequency to see how strong the relation between two classes is.
            Order by hierarchy to visualize the relations in hierarchical clustering.
        #heatmap
    :javascript
      var data = JSON.parse('#{json_data}');
      Society.generate("#network", {
        data: {
          json: data
        }
      });
      Society.generate("#heatmap", {
        type: "heatmap",
        data: {
          json: data
        }
      });
      $(function() {
        $( "#tabs" ).tabs();
      });