%link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
%script{:src=>"/jsme/jsme.nocache.js"}
:javascript
  var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function() {
    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
      aCallback(anHttpRequest.responseText);
    }
      anHttpRequest.open( "GET", aUrl, true );
      anHttpRequest.send( null );
    }
  };

  $(function() { 
    $('a[data-toggle="tab"]').on('click', function (e) {
      localStorage.setItem('lastTab', $(e.target).attr('href'));
    });
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
      $('a[href="'+lastTab+'"]').click();
    }
  });  
  
  function getInput(){
    identifier = document.getElementById("identifier").value.trim();
    fileselect = document.getElementById("fileselect").value;
    allexisting = document.querySelectorAll('[id^="existing"]');
    existingcsv = false
    for (var index = 0; index < allexisting.length; index++) {
      if(allexisting[index].checked == true) {
        existingcsv = true;
      };
    };
    if (fileselect != "" || existingcsv == true){
      return 1;
    };
    if (identifier != ""){
      return 2;
    };
    return 0;
  };
  function showcircle() {
    switch (getInput()){
      case 0:
        alert("Please draw or insert a chemical structure.");
        return false;
        break;
      case 1:
        if (checkfile() && checkboxes()){
          button = document.getElementById("submit");
          image = document.getElementById("circle");
          button.parentNode.replaceChild(image, button);
          $("img.circle").show();
          return true;
        };
        return false;
        break;
      case 2:
        if (checksmiles() && checkboxes()){
          button = document.getElementById("submit");
          image = document.getElementById("circle");
          button.parentNode.replaceChild(image, button);
          $("img.circle").show();
          return true;
        };
        return false;
        break;
      default: false;
    };
    return false;
  };
  function checkfile() {
    var fileinput = document.getElementById("fileselect");
    if(fileinput.value != "") {
      //TODO check file type is csv
      return true;
    };
    allexisting = document.querySelectorAll('[id^="existing"]');
    for (var index = 0; index < allexisting.length; index++) {
      if(allexisting[index].checked == true) {
        return true;
      };
    };
    alert("Please select a file (csv).");
    return false;
  };
  function checksmiles () {
    getsmiles();
    if (document.form.identifier.value == "") {
      alert("Please draw or insert a chemical structure.");
      document.form.identifier.focus();
      $("img.circle").hide();
      return false;
    };
    return true;
  };
  function checkboxes () {
    var checked = false;
    models = document.querySelectorAll('[id^="selection"]');
    for (var index = 0; index < models.length; index++) {
      if(models[index].checked == true) {
        checked = true;
      };
    };
    if (checked == false){
      alert("Please select an endpoint.");
      $("img.circle").hide();
      return false;
    };
    return true;
  };
  function jsmeOnLoad() {
    jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
      //optional parameters
      "options" : "polarnitro"
    });
  document.JME = jsmeApplet;
  };
  function getsmiles() {
    if (document.JME.smiles() != '') {
      document.form.identifier.value = document.JME.smiles() ;
    };
  };

// 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 !!(showcircle())" }
  %fieldset#top.well
    %h2 1. Draw a chemical structure
    %div.row
      %div.col-md-6
        #insert
          %label &nbsp;
          #appletContainer
          %br
          %label{:for => 'identifier'}
            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'}
          %p
          %label{:for=>"fileselect"}
            or upload a CSV or SMI file for batch predictions
          %br
          %span.btn.btn-default.btn-file
            %input{:type=>"file", :name=> "fileselect", :id=>"fileselect", :autocomplete=>"off", :accept=>"text/csv,chemical/x-daylight-smiles"}
          %a.btn.btn-warning{:href => to("/help"), :rel => "external", :style=>"margin-left: 1em;"} Help
      %div.col-md-6
        - if !@existing_datasets.blank?
          %label{:for=>"storage"} or select an uploaded file
          #storage.storage-list
            - @existing_datasets.each do |id,values|
              %div.p2
                %input.checkDataset{:type => "checkbox", :name => "existing[#{id}]", :id => "existing[#{id}]", :value => true, :disabled => false}
                %div.btn-group{:role=>"group", :aria=>{:label=>"remove-download"}}
                  %a.btn.btn-secondary{:role=>"button", :href=>to("/delete/dataset/#{id}")}
                    %i.glyphicon.glyphicon-trash
                  %a.btn.btn-secondary{:role=>"button", :href=>to("/download/dataset/#{id}")}
                    %i.glyphicon.glyphicon-save
              %div.p2
                %label{:for => "existing[#{id}]"}
                  = values[0]
              %div.p2
                = values[1].strftime("%Y-%m-%d %H:%M:%S")
              %hr

  %fieldset#middle.well
    %h2 2. Select one or more endpoints
    #models
      %input{:type => "checkbox", :name => "checkAll", :id => "checkAll"}
      %label{:for => "checkAll"}
        All
      :javascript
        $("#checkAll").click(function () {
          if ($(this).prop('checked')){
            $(".check").prop('checked', true);
          }else{
            $(".check").prop('checked', false);
          };
        });
        $(".checkDataset").click(function () {
          $('.checkDataset').not(this).prop('checked', false);
        });
      - @endpoints.each do |endpoint|
        %div{:id=>endpoint.gsub(/\s+/, "_")}
          %h4.head-back=endpoint
          - if endpoint !~ /^Oral|Mazzatorta/
            - @models.select{|m| m.endpoint == endpoint}.each do |model|
              %div.row{:id => model.id,:style=>"margin-bottom:1em;"}
                %span.col-lg-4.col-md-4.col-sm-4.col-xs-4
                  %input.check{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.species.gsub(/\s+/, "_")}]", :value => true, :disabled => false}
                  %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
                    = (endpoint =~ /mutagenicity/i ? "Consensus mutagenicity" : model.species)
                %span.col-lg-8.col-md-8.col-sm-8.col-xs-8
                  %a.btn.btn-default.btn-xs{:data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :onclick=>"load#{model.id}Details('#{model}')", :id => "link#{model.id}", :style=>"font-size:small;"}
                    %span.glyphicon.glyphicon-menu-right
                    Details | Validation
                  %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
              %div.panel-collapse.collapse{:id=>"details#{model.id}", :style=>"margin-left:1em;"}
              :javascript
                function load#{model.id}Details(model) {
                  button = document.getElementById("link#{model.id}");
                  span = button.childNodes[1];
                  if (span.className == "glyphicon glyphicon-menu-right"){
                    span.className = "glyphicon glyphicon-menu-down";
                  } else if (span.className = "glyphicon glyphicon-menu-down"){
                    span.className = "glyphicon glyphicon-menu-right";
                  };
                  image = document.getElementById("circle#{model.id}");
                  if ($('modeldetails#{model.id}').length == 0) {
                    $(button).hide();
                    $(image).show();
                    aClient = new HttpClient();
                    aClient.get("#{to("/predict/modeldetails/#{model.id}")}", function(response) {
                      var details = document.createElement("modeldetails#{model.id}");
                      details.innerHTML = response;
                      document.getElementById("details#{model.id}").appendChild(details);
                      $(button).show();
                      $(image).hide();
                      addExternalLinks();
                    });
                  }
                }
          - elsif endpoint =~ /^Oral/
            %div.row{:id => "Cramer",:style=>"margin-bottom:1em;"}
              %span.col-lg-4.col-md-4.col-sm-4.col-xs-4
                %input.check{:type => "checkbox", :name => "selection[Cramer]", :id => "selection[Cramer]", :value => true, :disabled => false}
                %label{:for => "selection[Cramer]"}
                  Cramer rules
          - elsif endpoint =~ /Mazzatorta/
            %div.row{:id => "Mazzatorta",:style=>"margin-bottom:1em;"}
              %span.col-lg-4.col-md-4.col-sm-4.col-xs-4
                %input.check{:type => "checkbox", :name => "selection[Mazzatorta]", :id => "selection[Mazzatorta]", :value => true, :disabled => false}
                %label{:for => "selection[Mazzatorta]"}
                  Rat
  %fieldset#bottom.well
    %div.row
      %div.col-md-2
        %h2
          3. Predict
      %div.col-md-10.input-group
        %button.has-feedback.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>"", :onclick => "getsmiles()"}
          %span.glyphicon.glyphicon-play
        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}