!!! 5
%html
  %head
    %meta{ :charset => "utf-8" }
    %title= "PubChem read across"
    %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/favicon.ico'}
    %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
    %script{:type => "text/javascript", :src  => "/jquery-1.8.2.js"}
    :javascript
      function show(title,element,uri) {
        $(element).html("<h4>"+title+"</h4>"+"Retrieving data from PubChem. This may take some time, please be patient."+"<img src=\"/spinning-wait-icons/wait30trans.gif\" alt=\"Searching PubChem\">");
        $.ajax({
          cache: true,
          url: uri,
          //timeout: 120000;
          success: function(data){
            var slash = new RegExp("/","g");
            data = "<h4>"+title+"</h4>"+"<button onclick='hide(\"" + title + "\",\"" + element + "\",\"" + uri + "\");'>Hide</button> <a href=\"" + uri + "/" + uri.replace("/cid/", "").replace(slash,'-') + ".csv\"> (csv)</a>" + data;
            $(element).html(data);
          },
          error: function(data,textStatus,message){
            $(element).html(message);
          }
        });
      }

      function hide(title,element,uri) {
        data = "<h4>"+title+"</h4>"+"<button onclick='show(\"" + title + "\",\""  + element + "\",\"" + uri + "\");'>Show</button>";
        $(element).html(data);
      }

      function display(element,uri) {
        $(element).html("Retrieving data from PubChem. This may take some time, please be patient."+"<img src=\"/spinning-wait-icons/wait30trans.gif\" alt=\"Searching PubChem\">");
        $.ajax({
          cache: true,
          url: uri,
          //timeout: 120000;
          success: function(data){
            $(element).html(data);
          },
          error: function(data,textStatus,message){
            $(element).html(message);
          }
        });
      }

  %body
    %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 => "/"}
        %img{:src => "/ist_logo.png", :alt => "logo"}
    %h1 PubChem read across
    %button{:id=>"about", :style => "margin-left:80%;margin-right:20px;z-index:4;position:absolute;top:10px;right:0px;"}
      About this service 
    :javascript
      $("#about").click(function() {
        $("#info").toggle();
      });

    #info{:style => "display:none;z-index:5;position:fixed; top:10px; left:25%; width: 50%; background-color:#F5F5F5;border:solid 1px black;"}
      %button{:id => "x", :style => "position:absolute;right:0px;"} x
      :javascript
        $("#x").click(function() {
          $("#info").toggle();
        });
        
      %div{:style => "align:justify;padding:1em;"}
        %h3
          Predict targets potentially affected by a given chemical structure.
        Enter a chemical name and press "Search" to obtain search results and predictions. |
        The system will search the <a href="http://pubchem.ncbi.nlm.nih.gov/">PubChem</a> database for | 
        (i) experimental data of the query compound and |
        (ii) structurally similar compounds (neighbors) and their experimental data. |
        Predictions for the query compound are derived from the neighbors experimental data using an automated |
        read-across algorithm.
        %br
        %br
        The results page is organized according to the following dimensions:
        %dl
          %dt
            Gene/protein targets vs. other assays:
          %dd
            PubChem Assays with known Gene/Protein targets are listed in the first column, assays without known |
            targets are in the "Other assays" column.
            %br
            %br
          %dt
            Active vs. inactive targets/assays:
          %dd
            Targets/assays with positive outcomes are listed as targets/active assays, negative outcomes are |
            filed under non-targets/ inactive assays.
            %br
            %br
          %dt
            Experimental vs. read across:
          %dd
            Experimental data for the query compound is labelled with "experimental", read-across predictions |
            are labelled with "read across". In case of insufficient data no results will be displayed.i
            %br
            %br
          %dt
            Similar compounds
          %dd
            Detailed information about the compounds used for read across predictions (and their experimental data)
        %br
        <small>Source code for the project can be obtained from <a href="https://github.com/opentox/pubchem-read-across">Github</a></small>.

    %form{:name => "form", :action => '/search', :method => "GET"}
      %fieldset
        %label{:for => 'name'} Compound name:
        %input{:type => 'text', :name => 'name', :id => 'name'}
        %input{ :type => "submit", :value => "Search" }
    %em This is an experimental version. Loading data from PubChem can be slow. Please use the "Back" button and retry the offending operation if you have timeout problems.



    = yield

    .footer
      &copy;
      %a{:href => 'http://www.in-silico.ch', :rel => "external"} <i style="font-family: serife">in silico</i> toxicology gmbh 2013 - #{Time.now.year.to_s}
      :javascript
        $('A[rel="external"]').each(function(){
          $(this).attr('target', 'external');
        });
    #back-top{:style => "z-index:100;position:fixed;bottom:0%;width:97%;"}
      %hr{:style => "margin-bottom:0;"}
      %a{:href => "", :style=>"text:decoration:none;color:#ccc;"}
        %img{:src => "/rect.png", :alt => "top", :style=>"width:100%;height:50px"}
      %div{:style => "margin-top:-50px;font-size:x-small;text-align:center;z-index:101;"}
        TOP
    :javascript
      $("#back-top").hide();
      $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 600) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
          $('body,html').animate({
            scrollTop: 0
          }, 500);
          return false;
        });
      });