/ @@prediction_models and @@predictions defined in POST request '/predict'
/ unpacks multi prediction array ;
/ prepare it for neighbours ;
/ align single prediction to endpoint ;
/ display preordered in table view ;

:javascript
  $(function() {
    $( ".results" ).resizable({
      containment: ".content"
    });
  });
  
.results{:style=>"display:none"}
  - count_m = 0
  / tabs div ;
  #tabs
    %ul
      / each endpoint becomes a tab head ;
      - @@prediction_models.each do |m|
        - count_m += 1
        %li
          %a{:href => "#results_#{count_m}", :id => "link#{m.title}"}
            = m.title
    - count_rs = 0
    / unpack to single arrays
    - @@predictions.each do |pa|
      - count_rs += 1
      #results{:id=>"#{count_rs}"}
        - pa.each do |p|
          / prepare dataset for neighbours table ;
          / delete first array which contains input compound prediction ;
          / keep the following arrays they are the neighbour predictions ;
          - p.data_entries.shift
          - p.compounds.shift
          / call the tablesorter plugin ;
          / presort by similarity ;
          :javascript
            $(document).ready(function(){
              $("table##{count_rs}").tablesorter({
                //debug: true,
                //widgets: ['zebra'],
                headers: {0: {sorter: false}, 3: {sorter: false}},
                sortList: [[2,1]]
              });
            });
          / TODO catch table error if tbody is empty      
          %h2= "Neighbours: "
          %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
            %thead
              %tr
                %th
                  Compound
                %th
                  %a{:href=>"#", :title=>"", :id=>"measured_activity"} Measured Activity
                  .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
                    Experimental result(s) from the training dataset.
                %th
                  %a{:href=>"#", :title=>"", :id=>"similarity"} Similarity
                  .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
                    %dt
                      Similarity
                    %dd
                      %code lazar 
                      calculates 
                      %em
                        activity specific 
                      similarities based on the presence of statistically significant fragments.
                      This procedure will
                      %ul
                        %li consider only those parts of a chemical structure that are relevant for a particular endpoint
                        %li ignore inert parts of the structure
                        %li lead to different similarities, depending on the toxic endpoint
                        Similarities of 1 may be encountered even for structurally dissimilar compounds, because inert parts are ignored.
                %th
                  Details
            -#%tbody
            - count = 0
            - p.compounds.each do |neighbour_compound|
              %tr
                %td
                  %img{:src=>"#{neighbour_compound.uri}/image", :alt=>"", :width=>"100px"}
                %td{:class => p.data_entries[count][2]}
                  = p.data_entries[count][2]
                %td{:class => p.data_entries[count][2]}
                  = p.data_entries[count][3].round(3)                  
                %td{:class => p.data_entries[count][2]}
                  %a{:href => to("/prediction/#{CGI.escape(neighbour_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"}
                    %img{:src=>"/images/arrow_right_float.png", :alt=>"arrow"}
                  :javascript
                    $(function() {
                        $("a#link#{count_rs}#{count}").on('click', function(e) {
                            $('#iframe').bPopup();
                        });
                    });
                    
                - count += 1

%iframe{:id=>"iframe", :name=>"details", :height=>"80%", :width=>"80%", :style=>"display:none;border:0px"}