general css update with bootstrap

9 files changed, 300 insertions, 405 deletions

diff --git a/views/details.haml b/views/details.haml
index 02d7b66..00d8f61 100644
--- a/views/details.haml
+++ b/views/details.haml
@@ -1,28 +1,31 @@
-%link{ :href=>"/style.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
+:javascript
+  $(document).ready(function(){
+    $("#details").on('hidden.bs.modal', function() {
+      $(this).removeData('bs.modal');
+    });
+  });
 
-.content{:style=>"margin-top:0;"}
-  .details{:style=>"padding:0.7em;padding-bottom:5em;"}
-    %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"}
-      X
-      
-    %h2{:style=>"margin-left:8px;"}
-      Names and synonyms:
-    %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :width=>"300px", :heigth=>"300px"}
-    %p
-    %b="SMILES:"
-    %p= @smiles
-    %br
-    %b="InChI:"
-    %p= @inchi
-    %br
-    %b="Names:"
-    %p{:style=>"padding-left:0.5em;"}
-    - if @names !~ /^no names/i
-      = @names.join("; ")
-    - else
-      = @names
-    %p{:style=>"padding-left:0.5em;"}
-      / pubchem link
-      %a{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :target=>"_blank"} PubChem read across 
-      %i (experimental)
+%div.modal-body{:style=>"padding:10px;"}
+  %button.close{ :type=>" button", data: { dismiss:"modal"}} ×
+  %h2
+    Names and synonyms:
+  %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :width=>"300px", :heigth=>"300px", :style=>"float:left;"}
+  %p
+  %b="SMILES:"
+  %p= @smiles
+  %br
+  %b="InChI:"
+  %p= @inchi
+  %br
+  %b="Names:"
+  %p{:style=>"padding-left:0.5em;"}
+  - if @names !~ /^no names/i
+    = @names.join("; ")
+  - else
+    = @names
+  %hr
+  %p{:style=>"padding-left:0.5em;"}
+    / pubchem link
+    %a.btn.btn-primary{:href=>"http://aop.in-silico.ch/", :title=>"Link opens in new window.", :alt=>"pubchem read across", :target=>"_blank"} PubChem read across 
+    %i (experimental)
 
diff --git a/views/error.haml b/views/error.haml
index e9a892e..bad965d 100644
--- a/views/error.haml
+++ b/views/error.haml
@@ -1,8 +1,6 @@
-.error
-  .back
-    %h1
-      %img{:src=>"/images/arrow_left_float.png", :alt=>"<"}
-        %a{:href => to('/predict')} New Prediction
-  .message
+%div.well
+  %a.btn.btn-primary{:href => to('/predict')} New Prediction
+  %hr
+  %span.btn.btn-danger.btn-block.disabled
     = @error_report
       
diff --git a/views/info.haml b/views/info.haml
index 92022ea..34ded87 100644
--- a/views/info.haml
+++ b/views/info.haml
@@ -1,2 +1,2 @@
-.info
+%div.info
   currently no models available
diff --git a/views/layout.haml b/views/layout.haml
index 05f4a70..8703042 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -1,70 +1,54 @@
 !!!
 %html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
   %head
-    %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'}
+    %meta{'charset'=>"utf-8"}
+    %meta{'http-equiv'=>"X-UA-Compatible", :content=>"IE=edge"}
+    %meta{'name'=>"viewport", :content=>"width=device-width, initial-scale=1"}
     %title Lazar Toxicity Predictions
     %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'}
-    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/bootstrap.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.default.min.css'}"}
+    %link{:rel=>'stylesheet', :href=>"#{'/css/theme.bootstrap.min.css'}"}
     %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"}
     %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"}
-    %script{:src=>"/javascripts/jquery-1.8.3.min.js", :type=>"text/javascript"}
-    %script{ :src=>"/javascripts/jquery-ui-1.10.3.custom.min.js", :type=>"text/javascript"}
-    %script{:src=>"/javascripts/jquery.tools.min.js", :type=>"text/javascript"}
-    %script{:src=>"/javascripts/jquery.tablesorter.min.js", :type=>"text/javascript"}
-    %script{:src=>"/javascripts/jquery.bpopup.min.js", :type=>"text/javascript"}
-    %script{ :src=>"/javascripts/lazar-gui.js", :type=>"text/javascript"}
-    %script{:src=>"/jsme/jsme.nocache.js", :type=>"text/javascript"}
-
-  %body
+    %script{:src=>"/javascripts/jquery-1.11.2.min.js"}
+    %script{:src=>"/javascripts/bootstrap.min.js"}
+    %script{:src=>"/javascripts/jquery-ui-1.10.3.custom.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.min.js"}
+    %script{:src=>"/javascripts/jquery.tablesorter.widgets.js"}
+    %script{ :src=>"/javascripts/lazar-gui.js"}
+  %body{:style=>"background-color:#E7E7E7"}
     %noscript
       %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
-        Your web browser must have JavaScript enabled in order for this application to display correctly.
-    .logo
-      %a{:href=> to("/predict")}
-        %img{:src=>"/images/ist_logo.png", :alt=>"logo"}
-      %h1 Lazar Toxicity Predictions
-      %hr{:style=>"color:black;"}
+      Your web browser must have JavaScript enabled in order for this application to display correctly.
+    %header.page-header
+      %div.row
+        %div.col-md-2
+          %a{:href=> to("/predict")}
+            %img.media-object{:src=>"/images/ist_logo.png", :alt=>"logo", :style=>"margin-left:3em;margin-right:1em;"}
+        %div.col-md-8
+          %h1.media-heading Lazar Toxicity Predictions
     
-    .content
+    %div.container
       :javascript
         $(document).ready(function(){
-          // hide #back-top first
           $("#back-top").hide();
-          // fade in #back-top
-          $('a#confidence').tooltip({
-            predelay: 300,
-            position: 'bottom center',
-            offset: [-100, 0],
-          });
-          $('a#result').tooltip({
-            predelay: 300,
-            position: 'bottom center',
-            offset: [-100, 0],
-          });
-          $('a#similarity').tooltip({
-            predelay: 300,
-            position: 'bottom center',
-            offset: [-600, 0],
-          });
-          $('a#measured_activity').tooltip({
-            predelay: 300,
-            position: 'bottom center',
-            offset: [-500, 0],
+          $(".blind").error(function(){
+            $(this).attr('src', '/images/blind.png');
           });
         });
           
       = yield
     
-    .footer{:style=>"margin-bottom:2em;"}
-      &copy; 
-      %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s}
+    %footer.footer
+      %div.container
+        %p.text-muted
+          &copy; 
+          %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2004 - #{Time.now.year.to_s}
 
-    #back-top{:style => "z-index:100;position:fixed;bottom:0%;width:98%;"}
-      %hr{:style => "margin-bottom:0;"}
+    #back-top{:style => "z-index:100;position:fixed;bottom:1%;right:1%;"}
       %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
-        %img{:src => "/rect.png", :alt => "top", :style=>"width:100%;height:50px"}
-      %div{:id=>"backtop", :style => "margin-top:-50px;text-align:right;cursor:default;"}
-        TOP
+        %span.glyphicon.glyphicon-circle-arrow-up{:style => "font-size:3em;color:black;"}
     :javascript
       $("#back-top").hide();
       $(function () {
diff --git a/views/neighbors.haml b/views/neighbors.haml
index 45a3642..db32c88 100644
--- a/views/neighbors.haml
+++ b/views/neighbors.haml
@@ -1,15 +1,22 @@
-/ @@prediction_models and @@predictions defined in POST request '/predict'
+:javascript
+  $(function() {
+    $("#deatils.modal").on('show.bs.modal', function() {
+      alert("alert");
+      //$(this).removeData('bs.modal');
+    });
+  });
+
 / unpacks multi prediction array ;
 / prepare it for neighbors ;
 / align single prediction to endpoint ;
 / display preordered in table view ;
 
-.results{:style=>"display:none"}
+%div.results{:style=>"display:none"}
   - count_m = 0
   / tabs div ;
   #tabs
     %ul
-      / each endpoint becomes a tab head ;
+      / each model a tab head ;
       - @prediction_models.each do |m|
         - count_m += 1
         - m_title = m.title.split("_").last(2)[0]
@@ -36,8 +43,16 @@
           :javascript
             $(document).ready(function(){
               $("table##{count_rs}").tablesorter({
-                //debug: true,
-                //widgets: ['zebra'],
+                debug: false,
+                table: 'ui-widget ui-widget-content ui-corner-all',
+                header: 'ui-widget-header ui-corner-all ui-state-default',
+                theme: "bootstrap",
+                widthFixed: true,
+                hover: 'ui-state-hover',
+                even: 'ui-widget-content',
+                odd: 'ui-state-default',
+                headerTemplate: '{content} {icon}',
+                widgets: ['zebra', 'columns', 'uitheme'],
                 headers: {0: {sorter: false}, 3: {sorter: false}},
                 sortList: [[2,1]]
               });
@@ -45,46 +60,29 @@
           - $logger.debug "neighbors compounds:\t#{p.data_entries[0]}\n"
           - if p.data_entries[0][2] != nil && p.data_entries[0].size != 3
             %h2= "Neighbors: "
-            %table{:id=>"#{count_rs}", :class=>"tablesorter", :cellspacing=>"1"}
+                
+          %div.table-responsive
+            %table.tablesorter{:id=>"#{count_rs}", :style=>"border-style: solid;"}
               %thead
                 %tr
-                  %th
+                  %th{:style =>"vertical-align:middle;"}
                     Compound
-                  %th
-                    %b Measured Activity
-                    / title must be empty for tooltip
-                    %a{:href=>"#", :title=>"", :id=>"measured_activity"}
-                      %img{:src=>"/images/info_white.png"}
-                    .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
-                      %dt
-                        Measured Activity
-                      %dd
-                        Experimental result(s) from the training dataset.
-                  %th
-                    %b Similarity
-                    / title must be empty for tooltip
-                    %a{:href=>"#", :title=>"", :id=>"similarity"}
-                      %img{:src=>"/images/info_white.png"}
-                    .tooltip{:style=>"font-weight: normal; font-size: 1em; text-align: left;"}
-                      %dt
-                        Similarity
-                      %dd
-                        %code{:style=>"font-size:x-large;"} 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
-                    Supporting information
-              -#%tbody
+                  %th{:style =>"vertical-align:middle;"}
+                    Measured Activity
+                    -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
+                  %th{:style =>"vertical-align:middle;"}
+                    Similarity
+                    -#%a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"LAZAR calculates 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><li>ignore inert parts of the structure</li><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.</li></ul>"}, :style=>"z-index:auto+10;"}
+                  %th{:style =>"vertical-align:middle;"}
+                    Supporting Information
+              %info
+                %tr
+                  %td
+                  %td{:style=>"font-size:x-small;padding:0px;"}
+                    %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Measured Activity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
+                  %td{:style=>"font-size:x-small;padding:0px;"}
+                    %a.btn.glyphicon.glyphicon-info-sign{:href=>"#neighbors", :title=>"Similarity", data: {toggle:"popover", placement:"auto", trigger:"focus", html:"true", content:"LAZAR calculates 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><li>ignore inert parts of the structure</li><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.</li></ul>"}, :style=>"z-index:auto+10;"}
+              %tbody
               - count = 0
               - p.compounds.each do |neighbor_compound|
                 / prevent conversion of nil
@@ -96,38 +94,29 @@
                   /- c = Array.new
                   - c = p.data_entries[count][2].to_f.round(3)
                 %tr
-                  %td.compound
-                    %a{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", :target=>"details"}
-                      Names and synonymes >
-                      %img{:src=>"#{neighbor_compound.uri}/image", :alt=>"Compound image not available", :title=>"#{neighbor_compound.smiles}", :width=>"150px"}
-                  %td
+                  %td{:style =>"vertical-align:middle;padding-left:1em;"}
+                    %a.btn.btn-link{:href => to("/prediction/#{CGI.escape(neighbor_compound.uri)}/details"), :id=>"link#{count_rs}#{count}", data: { toggle: "modal", target:"#details"}}
+                      %img.blind{:src=>"#{neighbor_compound.uri}/image", :alt=>"no image", :onError=>"this.onerror=null;", :title=>"#{neighbor_compound.smiles}", :width=>"150px"}
+                  %td{:style =>"vertical-align:middle;padding-left:1em;"}
                     - if c.class == String
                       = c
                     - else
                       = c
-                  %td
+                  %td{:style =>"vertical-align:middle;padding-left:1em;"}
                     = p.data_entries[count][3] != nil ? p.data_entries[count][3].round(3) : "Not enough similar compounds in training dataset." 
-                  %td
+                  %td{:style =>"vertical-align:middle;padding-left:1em;"}
                     - if @type =~ /classification/i
                       - if p.data_entries[count][3] != nil 
-                        %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", :target=>"details"} Significant fragments >
+                        %a.btn.btn-primary{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", data: { toggle: "modal", target:"#details"}} Significant fragments
                     - if @type =~ /regression/i
                       - if p.data_entries[count][3] != nil
-                        %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", :target=>"details"} Descriptors >
-                    :javascript
-                      $(function() {
-                          $("a#link#{count_rs}#{count}").on('click', function(e) {
-                              $('#iframe_details').bPopup();
-                          });
-                      });
-                      $(function() {
-                          $("a#link#{count_rs}#{count}sf").on('click', function(e) {
-                              $('#iframe_details').bPopup();
-                          });
-                      });
+                        %a.btn.btn-primary{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@type}/#{CGI.escape(neighbor_compound.uri)}/significant_fragments"), :id=>"link#{count_rs}#{count}sf", data: { toggle: "modal", target:"#details"}} Descriptors
                   - count += 1
           -#- else
             %h3
               Not enough similar compounds in training dataset
 
-%iframe{:id=>"iframe_details", :name=>"details", :height=>"95%", :width=>"95%", :style=>"display:none;border:0px"}
+%div.modal.fade{:id=>"details", :role=>"dialog"}
+  %div.modal-dialog.modal-lg
+    %div.modal-content
+
diff --git a/views/predict.haml b/views/predict.haml
index 1adc9da..0ff25e8 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,3 +1,4 @@
+%script{:src=>"/jsme/jsme.nocache.js"}
 :javascript
   function callTask(url) {
     var result="";
@@ -12,35 +13,27 @@
     });
     return result;
   };
-  function progressBarWidth(p,w){
-    percent = p * w / 100;
-    return percent ;
-  };
   // form function
   function progress($element, url) {
+    $element.width("2%");
     $element.show();
-    var fullWidth = $element.width();
     var timer = setInterval(function(){
       var percent = callTask(url);
       if(percent == 100.0){
-        var next = progressBarWidth(percent,fullWidth);
+        var next = percent;
         clearInterval(timer);
-        //$element.delay(3000).hide();
-        //percent = 0;
       }
-      //else if($element.find('#bar').is(":visible") & $element.find('#bar').width() < 400){
       else {
-        var next = progressBarWidth(percent,fullWidth);
+        var next = percent;
       }
-      $element.find('#bar').animate({ width:next }, 3000);
+      $element.width(next+"%");
     }, 3000);
   };
   function checksmiles () {
     if (document.form.identifier.value == "") {
       alert("Please draw or insert a chemical structure.");
-      //$("img.circle").hide();
       document.form.identifier.focus();
-      $('#progressBar').hide();
+      $('.progress-bar').hide();
       return false;
     };
     return true;
@@ -54,8 +47,7 @@
     });
     if (checked == false){
       alert("Please select an endpoint.");
-      //$("img.circle").hide();
-      $('#progressBar').hide();
+      $('.progress-bar').hide();
       return false;
     };
     return true;
@@ -72,9 +64,6 @@
       document.form.identifier.value = document.JME.smiles() ;
     };
   };
-  function showcircle(){
-    $("img.circle").show();
-  };
 
 // init task for progress
 - task_uri = OpenTox::Task.task_uri
@@ -82,9 +71,8 @@
 
 // whole site content needs to be in one form. Input and checkboxes are proofed by js functions. 
 %form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return  !!(checksmiles() & checkboxes())" }
-  %fieldset#top
-    %a{:href => "#", :id => "linkInsert"}
-      %h1 1. Draw a chemical structure
+  %fieldset#top.well
+    %h2 1. Draw a chemical structure
     :javascript
       $("a#linkInsert").click(function () {
         $("#insert").toggle();
@@ -99,14 +87,12 @@
         or enter the
         %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
         string:
+      %br
       %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
     
-  .arrow
-    %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"}
    
-  %fieldset#middle
-    %a{:href => "#models", :id => "linkModels"}
-      %h1 2. Select one or more endpoints
+  %fieldset#middle.well
+    %h2 2. Select one or more endpoints
     
     :javascript
       $("a#linkModels").click(function () {
@@ -117,76 +103,84 @@
     #models
       - @detail_count = 0
       - @endpoints.each do |endpoint|
-        %b= endpoint[0].split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :"
-        - @models.each do |model|
-          - if endpoint == model.type.select{|e| e =~ /Endpoint/}
-            - model_title = model.title.split("_").last(2)[0]
-            - model_t = model.title.gsub("_", " ")
-            - @detail_count +=1
-            %div{:id => model_title}
-              %input{:type => "checkbox", :name => "selection[#{model.uri}]", :id => "selection[#{model_title}]", :value => true, :disabled => false}
-              %label{:for => "selection[#{model_title}]"}
-                = model_t
-              %a{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details", :style=>"font-size:small;"}
-                [Details]
-          
-              :javascript
-                $("a#linkDetails#{model_title}").click(function () {
-                  $("#details_#{@detail_count}").toggle();
-                  //document.location = document.location + "#" + "details";
-                });
-            #details{:id => "#{@detail_count}", :style => "display:none;background-color:white;padding:1em;"}
-              %h3 Model Details:
-              %p{:style=>"display:inline;"} Algorithm:
-              %code{:style=>"font-size:x-large;"} lazar
-              - model.type.to_s =~ /regression/i ? type = "regression" : type = "classification"
-              - @model_type = type
-              %p= "Type: "+type
-              - training_dataset = OpenTox::Dataset.new "#{model[RDF::OT.trainingDataset]}"
-              - training_compounds = training_dataset.compounds.size.to_s
-              %p= "Training compounds: "+training_compounds
-              %p{:style=>"display:inline;"} Descriptors:
-              - if type == "regression"
-                %a{:href=>"https://services.in-silico.ch/algorithm/descriptor/physchem/list", :title=>"link opens in new window.", :target=>"_blank"} Physico-chemical (PC) properties
-              - else
-                %a{:href=>"http://www.maunz.de/libfminer2-bbrc-doc/", :title=>"link opens in new window.", :target=>"_blank"} Fminer backbone refinement classes
-              %br
-              %br
-              %p{:style=>"display:inline"}= "Model: "
-              %a{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"} rdf
-              %br
-              %br
-              %p{:style=>"display:inline"}= "Feature Dataset: "
-              %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"} rdf
-              -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}/sdf", :title=>"download"} sdf
-              %br
-              %br
-              %p{:style=>"display:inline"}= "Training Dataset: "
-              %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."} rdf
-              -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}/sdf")}", :title=>"link opens in new window."} sdf
-              %br
-              - unless model.metadata[RDF::OT.crossValidation].nil?
-                %h3 Validation:
-                %a{:href => "#{model.metadata[RDF::OT.crossValidation][0]}", :title=>"link opens in new window.", :target=>"_blank"} 
-                  Detailed report link
-                %br
-                - @cv = OpenTox::Validation.find "#{model.metadata[RDF::OT.crossValidation][0]+"/statistics"}"
-                = haml :validation, :layout => false, :validation => @cv, :model_type => @model_type
+        %div
+          %b= endpoint[0].split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :"
+          - @models.each do |model|
+            - if endpoint == model.type.select{|e| e =~ /Endpoint/}
+              - model_title = model.title.split("_").last(2)[0]
+              - model_t = model.title.gsub("_", " ")
+              - @detail_count +=1
+              %div{:id => model_title}
+                %input{:type => "checkbox", :name => "selection[#{model.uri}]", :id => "selection[#{model_title}]", :value => true, :disabled => false}
+                %label{:for => "selection[#{model_title}]"}
+                  = model_t
+                %a.btn.btn-default.btn-xs{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details", :style=>"font-size:small;"}
+                  Details | Validation
+            
+                :javascript
+                  $("a#linkDetails#{model_title}").click(function () {
+                    $("#details_#{@detail_count}").toggle();
+                    //document.location = document.location + "#" + "details";
+                  });
+              #details{:id => "#{@detail_count}", :style => "display:none;"}
+                %div.panel{:style=>"padding:0.5em;"}
+                  %div.row
+                    %div.col-md-6
+                      %h3 Model Details:
+                      %p
+                        Algorithm: LAZAR
+                        - model.type.to_s =~ /regression/i ? type = "regression" : type = "classification"
+                        - @model_type = type
+                      %p
+                        = "Type: "+type
+                      - training_dataset = OpenTox::Dataset.new "#{model[RDF::OT.trainingDataset]}"
+                      - training_compounds = training_dataset.compounds.size.to_s
+                      %p
+                        Training compounds:
+                        = training_compounds
+                      %p
+                        Descriptors:
+                        - if type == "regression"
+                          %a{:href=>"https://services.in-silico.ch/algorithm/descriptor/physchem/list", :title=>"link opens in new window.", :target=>"_blank"} Physico-chemical (PC) properties
+                        - else
+                          %a{:href=>"http://www.maunz.de/libfminer2-bbrc-doc/", :title=>"link opens in new window.", :target=>"_blank"} Fminer backbone refinement classes
+                      %p
+                        Model:
+                        %a.btn{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"}
+                          rdf
+                          %span.glyphicon.glyphicon-download-alt
+                      %p
+                        Feature Dataset:
+                        %a.btn{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"}
+                          rdf
+                          %span.glyphicon.glyphicon-download-alt
+                        -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}/sdf", :title=>"download"} sdf
+                      %p
+                        Training Dataset:
+                        %a.btn{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."}
+                          rdf
+                          %span.glyphicon.glyphicon-download-alt
+                        -#%a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}/sdf")}", :title=>"link opens in new window."} sdf
+                    - unless model.metadata[RDF::OT.crossValidation].nil?
+                      %div.col-md-6
+                        %h3 Validation:
+                        %a.btn.btn-info.btn-xs{:href => "#{model.metadata[RDF::OT.crossValidation][0]}", :title=>"link opens in new window.", :target=>"_blank"} 
+                          Detailed report link
+                        %p
+                        - @cv = OpenTox::Validation.find "#{model.metadata[RDF::OT.crossValidation][0]+"/statistics"}"
+                        = haml :validation, :layout => false, :validation => @cv, :model_type => @model_type
+            %p
 
-  .arrow
-    %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"}
   
-  %fieldset#bottom
-    %table{:style=>"cellspacing:10;cellpadding:20"}
-      %tr
-        %td{:style=>"width:10em;align:center;valign:middle;"}
-          %h1
-            3. Predict
-        %td{:style=>"width:10%;align:center;valign:middle;"}
-          %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(progress($('#progressBar'),'#{task_uri}') & getsmiles() & checkboxes())", :style=>"cursor: pointer;display:inline;width:50px;height:50px;border-radius: 50%;color:#2b2b2b;text-align:center;text-decoration:none;background:#f76700;box-shadow: 0 0 5px white;font-weight:bold;"}
-          %input{:type => "hidden", :name => "task_uri", :value => "#{task_uri}"}
-
-        %td{:style=>"align:center;valign:middle;"}
-          -#%img{:src=>"/images/wait30trans.gif", :class=>"circle", :style=>"display:none;background-color:white;margin-left:10%;border:solid 1px;vertical-align:middle;"}
-          #progressBar{:style=>"width:400px;height:22px;border:1px solid #2b2b2b;background-color:gray;display:none;"}
-            #bar{:style =>"width:0;height:100%;color:#fff;text-align:right;line-height:22px;background-color:#0099ff;"}
+  %fieldset#bottom.well
+    %div.row
+      %div.col-md-2
+        %h2
+          3. Predict
+      %div.col-md-10
+        %input.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(progress($('.progress-bar'),'#{task_uri}') & getsmiles() & checkboxes())"}
+        %input{:type => "hidden", :name => "task_uri", :value => "#{task_uri}"}
+    %div.row
+      %div.col-md-12
+        %div.progress
+          %div.progress-bar.progress-bar-striped.active{:role=>"progressbar", aria: { valuemin: 0, valuemax: 100}, :style=>"width:0%;"}
diff --git a/views/prediction.haml b/views/prediction.haml
index 764adb1..8d9e235 100644
--- a/views/prediction.haml
+++ b/views/prediction.haml
@@ -1,37 +1,25 @@
 :javascript
-  // increase body width if more than 2 models selected
-  window.onload = function(){
-    var plusSize = ("#{@predictions.size}" > 2 ) ? ("#{@predictions.size}" * 100) : 0;
-    var width = $(window).width() + plusSize;
-    $("body").width(width);
-  };
-.predictions
-  .back
-    %h1
-      %img{:src=>"/images/arrow_left_float.png", :alt=>"<"}
-        %a{:href => to('/predict')} New Prediction
+  $(document).ready(function(){
+    $('[data-toggle="popover"]').popover();
+    $(".modal").on('hidden.bs.modal', function() {
+      $(this).removeData('bs.modal');
+    });
+  });
+%div.well
+  %a.btn.btn-primary{:href => to('/predict')} New Prediction
 
   / displays all prediction result in first table
-  .overview
-    %table{:width=>"100%", :cellspacing=>"1", :id=>"overview"}
+  %div.table-responsive
+    %table.table.table-bordered{:id=>"overview"}
       %thead
         %tr
-          %caption
-            %h2 Prediction Results:
+          %h2 Prediction Results:
 
       %tbody
         %tr
           %td{:id=>"compound", :style=>"vertical-align:top;"}
-            %a{:href => to("/prediction/#{CGI.escape(@compound.uri)}/details"), :id=>"linkCompound", :target=>"details_overview"}
-              Names and synonyms >
-              %img{:src=>"#{@compound.uri}/image", :alt=>"Compound image not available", :title=>"#{@compound.smiles}", :width=>"150", :height=>"150"}
-            %p
-            :javascript
-              $(function() {
-                $("a#linkCompound").on('click', function(e) {
-                  $('#iframe_overview').bPopup();
-                });
-              });
+            %a.btn.btn-link{:href => to("/prediction/#{CGI.escape(@compound.uri)}/details"), :id=>"linkCompound", data: { toggle: "modal", target:"#detailsTop"}}
+              %img{:src=>"#{@compound.uri}/image", :alt=>"no image", :title=>"#{@compound.smiles}", :width=>"150", :height=>"150"}
           - count=0
           - @predictions.each do |pa|
             / unpack to single array/prediction
@@ -70,31 +58,7 @@
                       - result = (c != '' ? c.round(3) : "No prediction result.")
                       = result
                     - confidence = (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0) ? p.data_entries[0][1].round(2) : "--"
-                  
-                  / title must be empty for tooltip
-                  %a{:href=>"#result", :title=>"", :id=>"result"}
-                    %img{:src=>"/images/info_white.png"}
-                  .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"}
-                    %dt
-                      Result
-                    %dd
-                      %code{:style=>"font-size:x-large;"} lazar 
-                      calculates searches the training dataset for similar compounds (neighbors) 
-                      and calculates the prediction from their measured activities. 
-                      %code{:style=>"font-size:x-large;"} lazar 
-                      calculates predictions using
-                      %ul
-                        %li a majority vote (weighted by compound similarity) for 
-                        %em classification 
-                        (
-                        %a{:href=>"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract", :target=>"_blank"} original publication
-                        )
-                        %li a local QSAR model based on neighbors for
-                        %em regression
-                        (
-                        %a{:href=>"http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract", :target=>"_blank"} original publication
-                        )
-                      Please keep in mind that predictions are based on the measured activities of neighbors.
+                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Result", data: {toggle:"popover", placement:"left", trigger:"focus", html:"true", content:"LAZAR calculates searches the training dataset for similar compounds (neighbors) and calculates the prediction from their measured activities. LAZAR calculates predictions using <ul><li>a majority vote (weighted by compound similarity) for<br /><b>classification</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'>original publication</a>) </li><li>a local QSAR model based on neighbors for<br /><b>regression</b> (<a href='http://www.frontiersin.org/Journal/10.3389/fphar.2013.00038/abstract', target='_blank'</h>original publication</a>) </li></ul>Please keep in mind that predictions are based on the measured activities of neighbors."}}
                   - @cv = OpenTox::Validation.find @prediction_models[count].metadata[RDF::OT.crossValidation][0]+"/statistics" #unless @prediction_models[count].title.include?("Mutagenicity")
                     - unless @model_type[count] == "regression"
                     %br  
@@ -104,54 +68,27 @@
                       - prob = @cv.probabilities( confidence, result )[:probs][result]*100
                       = "#{prob.round(1)} %"
                   %p
-                  .confidence
-                    %b Confidence:
-                    = confidence
-                    / title must be empty for tooltip
-                    %a{:href=>"#confidence", :title=>"", :id=>"confidence"}
-                      %img{:src=>"/images/info_white.png"}
-                    .tooltip{:style=>"font-weight: normal; font-size: 1em; width: 50%; text-align: left;"}
-                      %dt
-                        Confidence
-                      %dd
-                        Indicates the applicability domain of a model.
-                        Predictions with a high confidence can be expected to be more reliable than predictions 
-                        with low confidence.
-                        Confidence values may take any value between 0 and 1.
-                        For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between 
-                        reliable and unreliable predictions.
-
-
+                  %b Confidence:
+                  = confidence
+                  %a.btn.glyphicon.glyphicon-info-sign{:href=>"#", :title=>"Confidence", data: {toggle:"popover", placement:"left", trigger:"focus", html:"true", content:"Indicates the applicability domain of a model. Predictions with a high confidence can be expected to be more reliable than predictions with low confidence. Confidence values may take any value between 0 and 1. For most models confidence > 0.025 is a sensible (hard) cutoff to distinguish between reliable and unreliable predictions."}}
                   %p
                   /TODO add tooltip for significant ftagments and descriptors
                   - if @model_type[count] =~ /classification/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0)
                     / Significant fragments:
-                    %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), :id=>"linkPredictionSf", :title=>"", :target=>"details_overview"}Significant fragments >
-                    :javascript
-                      $(function() {
-                        $("a#linkPredictionSf").on('click', function(e) {
-                          $('#iframe_overview').bPopup();
-                        });
-                      });
+                    %a.btn.btn-primary.btn-sm{:id=>"linkSigFragments", :href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), data: { toggle: "modal", target:"#detailsTop"}} Significant fragments
                   - if @model_type[count] =~ /regression/i && (p.data_entries[0][1] != nil && p.data_entries[0][1] != 0.0)
                     / Descriptors
-                    %a{:href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), :id=>"linkPredictionSf", :target=>"details_overview"} Descriptors >
-                    :javascript
-                      $(function() {
-                        $("a#linkPredictionSf").on('click', function(e) {
-                          $('#iframe_overview').bPopup();
-                        });
-                      });
+                    %a.btn.btn-primary.btn-sm{:id=>"linkDescriptors", :href => to("/prediction/#{CGI.escape(@model_uri)}/#{@model_type[count]}/#{CGI.escape(@compound.uri)}/fingerprints"), data: { toggle: "modal", target:"#detailsTop"}} Descriptors
                   %p
                   - if c != ''
-                    %a{:href=> "#tabs", :id=>"link#{count}"}
-                      %b Neighbors >
-                      :javascript
-                        $("a#link#{count}").click(function () {
-                          $(".results").show();
-                          document.getElementById('tabs').focus();
-                          $("#tabs").tabs({ active: "#{count}" });
-                        });
+                    %a.btn.btn-warning.btn-sm{:href=> "#tabs", :id=>"link#{count}"}
+                      Neighbors
+                    :javascript
+                      $("a#link#{count}").click(function () {
+                        $(".results").show();
+                        document.getElementById('tabs').focus();
+                        $("#tabs").tabs({ active: "#{count}" });
+                      });
                   %p
                   - count+=1
                 - else # database hit
@@ -166,4 +103,6 @@
 
   / always show the neighbors table, message is given there  
   = haml :neighbors, :layout => false, :model_type => @model_type
-%iframe{:id=>"iframe_overview", :name=>"details_overview", :height=>"95%", :width=>"95%", :style=>"display:none;border:0px"}
+%div.modal.fade{:id=>"detailsTop", :role=>"dialog"}
+  %div.modal-dialog.modal-lg
+    %div.modal-content
diff --git a/views/significant_fragments.haml b/views/significant_fragments.haml
index b039804..e441a9a 100644
--- a/views/significant_fragments.haml
+++ b/views/significant_fragments.haml
@@ -1,71 +1,66 @@
-%link{ :href=>"/style.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"}
-.content{:style=>"margin-top:0;"}
+%div.modal-body{:style=>"padding:10px;"}
+  %button.close{ :type=>" button", data: { dismiss:"modal"}} &times;
   - if @type =~ /classification/i
-    .significant_fragments{:style=>"padding:0.7em;padding-bottom:10em;"}
-      %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"}
-        X
-      %h2{:style=>"margin-left:8px;"}
-        Significant fragments:
+    %div.row
+      %div.col-md-4
+        %h2{:style=>"margin-left:8px;"}
+          Significant fragments:
+        %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
+      - if !@significant_fragments.empty?
+        %div.col-md-8
+          %table{:id => "sf"}
+            %tr
+              / @value_map => hash; interpret the effect
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                Predominantly in compounds with activity "inactive"
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                p value
+              - @significant_fragments.each do |fragments|
+                / fragments == [effect, smarts, pValue]
+                / fragments[0] = effect
+                /- $logger.debug "effect:\t#{fragments[0]}\n"
+                - if fragments[0] == @value_map.index("inactive")
+                  %tr
+                    %td
+                      / fragments[1] = smarts 
+                      = fragments[1]
+                      -#%img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
+                    %td
+                      /fragments[2] = pValue
+                      = fragments[2]
+            %tr
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                Predominantly in compounds with activity "active"   
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                p value
+              - @significant_fragments.each do |fragments|
+                / fragments == [effect, smarts, pValue]
+                - if fragments[0] == @value_map.index("active")
+                  %tr
+                    %td
+                      %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
+                      = fragments[1]
+                    %td
+                      = fragments[2]
 
-      %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
+  - if @type =~ /regression/i
+    %div.row
+      %div.col-md-4
+        %h2
+          Descriptors:
+        %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
       - if !@significant_fragments.empty?
-        %table{:id => "sf1"}
-          %tr
-            / @value_map => hash; interpret the effect
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              Predominantly in compounds with activity "inactive"
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              p value
-            - @significant_fragments.each do |fragments|
-              / fragments == [effect, smarts, pValue]
-              / fragments[0] = effect
-              /- $logger.debug "effect:\t#{fragments[0]}\n"
-              - if fragments[0] == @value_map.index("inactive")
-                %tr
-                  %td
-                    / fragments[1] = smarts 
-                    = fragments[1]
-                    %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
-                  %td
-                    /fragments[2] = pValue
-                    = fragments[2]
-          %tr
-            %td
-              %br
-          %tr
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              Predominantly in compounds with activity "active"   
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              p value
-            - @significant_fragments.each do |fragments|
-              / fragments == [effect, smarts, pValue]
-              - if fragments[0] == @value_map.index("active")
+        %div.col-md-8
+          %table{:id =>"de"}
+            %tr
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                Descriptor
+              %th{:style=>"border:2px solid #E6E6E6;"}
+                value
+              - @significant_fragments.each do |fragments|
                 %tr
                   %td
-                    %img{:src => "http://smartsview.de/smartsview/auto/png/1/both/#{CGI.escape(fragments[1])}", :class => "smarts"}
-                    = fragments[1]
+                    = fragments[0]
                   %td
-                    = fragments[2]
-
-  - if @type =~ /regression/i
-    .descriptors{:style=>"padding:0.5em;height:100%"}
-      %button{:id=>"closebutton", :onclick=>"parent.$('#iframe_details').bPopup().close();parent.$('#iframe_overview').bPopup().close();"}
-        X
-      %h2{:style=>"margin:0px;margin-left:8px;"}
-        Descriptors:
-
-      %img{:src=>"#{@compound.uri}/image", :alt=>"#{@compound.smiles}", :title=>"#{@compound.smiles}", :width=>"300px", :heigth=>"300px"}
-      - if !@significant_fragments.empty?
-        %table{:id => "sf2"}
-          %tr
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              Descriptor
-            %th{:style=>"border:2px solid #E6E6E6;"}
-              value
-            - @significant_fragments.each do |fragments|
-              %tr
-                %td
-                  = fragments[0]
-                %td
-                  = fragments[1][0].round(3)
+                    = fragments[1][0].round(3)
 
diff --git a/views/style.scss b/views/style.scss
index 4021d1f..0802545 100644
--- a/views/style.scss
+++ b/views/style.scss
@@ -52,7 +52,6 @@ body {
   .content .back {
     display: inline; }
   .content fieldset#top {
-    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
     border: 0;
     padding: 10px;
     background-color: $ist-color; }
@@ -65,7 +64,6 @@ body {
   .content fieldset#middle {
     border: 0;
     padding: 10px;
-    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
     background-color: $ist-color; }
     .content fieldset#middle a#linkModels {
       display: block;
@@ -78,7 +76,6 @@ body {
       font-weight: normal; }
   .content fieldset#bottom {
     border: 0;
-    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
     background-color: $ist-color;
     padding: 10px;
     margin-bottom: 5em; }
@@ -86,12 +83,9 @@ body {
       margin-left: 1em; }
   .content .predictions {
     background-color: $ist-color;
-    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
     padding: 10px;
     text-align: justify; }
   .content .overview {
-    background-image: url("/images/gray_jean.png");
-    box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
     padding: 12px;
     margin-top: 1em;
     margin-bottom: 1em;
@@ -176,8 +170,6 @@ body {
       padding: 0.2em; }
 
 .results {
-  box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
-  background-image: url("/images/gray_jean.png");
   overflow-x: auto;
   overflow-y: hidden;
   margin-top: 2em;
@@ -200,11 +192,11 @@ body {
       .results .tablesorter thead tr th.headerSortDown {
         background-image: url("/images/desc.gif");
         background-color: $ist-color; }
-      .results .tablesorter thead tr th.headerSortUp {
+      table.tablesorter .tablesorter-default thead tr .tablesorter-headerRow th .tablesorter-header .tablesorter-headerAsc {
         background-image: url("/images/asc.gif");
         background-color: $ist-color; }
     .results .tablesorter tbody tr td {
-      box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+      border-spacing: 1px;
       padding-left: 1em; }
     .results .tablesorter tbody .compound {
       width: 250px;
@@ -235,3 +227,4 @@ input#predict {
     color: black; }
     .footer a:hover {
       color: $orange; }
+