!!! 5
%html
  %head
    %meta{ :charset => "utf-8" }
    %title= "PubChem read across"
    %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.

    %h1 PubChem read across
    %button{:id=>"about", :style => "margin-left:80%;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;"}
        %dl
          %dt
            (experimental)
          %dd
            Filtered experimental data from pubchem database.
            %br
          %dt
            (read across)
          %dd
            Predictions - results of processed pubchem data.
            %br
          %dt
            Predictions relationship
          %dd
            Similar compounds, predicted assays and predicted targets are related considering relevant data.
            If data is insufficent there will be no result displayed.

    %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 - 2014
      :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;
        });
      });