:javascript

$(window).bind("pageshow", function(event) {
  $("img.circle").hide();
});

function showcircle() {
  $("img.circle").show();
};

function addCoating(type, coatings) {
  //console.log(type, coatings);
  var allCoatings = coatings;
  var usedCoatings = [];
  var removedCoating = [];
  var div = document.getElementById("coatings");
  var selectChilds = div.getElementsByTagName("select");
  console.log(selectChilds);
  // iterate the whole select elements and decide to add or remove;
  // last coating should be always present; remove all used coatings
  // from the option list for new elements, but add them back if a
  // select element was removed;
  for(i=0; i < selectChilds.length; i++){
    id = selectChilds[i].id;
    console.log(selectChilds[i].id);
    value = selectChilds[i].value;
    console.log(selectChilds[i].value);

    if (type === "add"){
      var element = document.getElementById(id);
      var clone = element.cloneNode(true);
      console.log(i);
      console.log(i+1);
      clone.id = "selCoating" + (selectChilds.length + 1);
      clone.name = "input_coating_" + (selectChilds.length + 1);
      console.log(clone.name);
      div.appendChild(clone);
      break;
    };
    if (type === "remove" && i !== 0){
      var id = selectChilds[selectChilds.length - 1].id
      document.getElementById(id).remove();
      break;
    }else{
      //alert("One coating is required.")
    };
  };
};

$(document).ready(function(){  
  $('#selCore1').change(function(){
    var selection = $(this).val();
    switch(selection){
      case "Ag":
        $("#physchem1").prop('disabled', false);
        $("#physchem2").prop('disabled', false);
        $("#physchem3").prop('disabled', true);
        $("#physchem4").prop('disabled', true);
        $("#physchem5").prop('disabled', true);
        $("#physchem6").prop('disabled', false);
        $("#physchem7").prop('disabled', true);
        $("#physchem8").prop('disabled', true);
        $("#physchem9").prop('disabled', true);
        $("#physchem10").prop('disabled', true);
        break;
      case "Au":
        $("#physchem1").prop('disabled', false);
        $("#physchem2").prop('disabled', false);
        $("#physchem3").prop('disabled', false);
        $("#physchem4").prop('disabled', false);
        $("#physchem5").prop('disabled', false);
        $("#physchem6").prop('disabled', false);
        $("#physchem7").prop('disabled', false);
        $("#physchem8").prop('disabled', false);
        $("#physchem9").prop('disabled', false);
        $("#physchem10").prop('disabled', false);
        break;
    };
  });
});

%div.well

%h3.help-block
  Select an endpoint:
#tabs
  %ul.nav.nav-tabs{:id=>"modelTab", :role=>"tablist"}
    - @prediction_models.each_with_index do |m, idx|
      %li{:class => ("active" if idx == 0)}
        %a{:href => "#model_#{idx}", :id => "linkTab#{idx}", data: {toggle:"tab"}}
          = "#{idx+1}. #{m["type"].capitalize}"
  %div.tab-content
    - @prediction_models.each_with_index do |m, idx|
      - case m["type"]
      - when "fingerprint"
        - example = @example_fingerprint
        - type = "fingerprint"
        - relevant_features = @fingerprint_relevant_features
      - when "physchem"
        - example = @example_physchem
        - type = "physchem"
        - relevant_features = @physchem_relevant_features
      - when "proteomics"
        - example = @example_proteomics
        - type = "proteomics"
        - relevant_features = @proteomics_relevant_features

      #model.tab-pane{:id=>"#{idx}", :class => ("active" if idx == 0)}
        %b Model:
        %br
        Name:
        = m.model.name
        %br
        Type: regression
        %br
        Source:
        %a{:href=>"#{m.source}", :alt=>"source", :rel=>"external"}
          = m.source
        %br
        Species:
        = m.species
        %br
        Training nanoparticles:
        = m.model.training_dataset.nanoparticles.size
        %br
        Endpoint:
        = m.endpoint
        %br
        Unit:
        = m.unit
        %br
        %b Algorithms:
        %br
        Similarity:
        %a{:href=> "http://www.rubydoc.info/gems/lazar/OpenTox%2F#{m.model.algorithms["similarity"]["method"].sub("::", "%2F")}", :rel=>"external"}
          = m.model.algorithms["similarity"]["method"]
        = ", min: #{m.model.algorithms["similarity"]["min"]}"
        %br
        Prediction:
        %a{:href=>"http://www.rubydoc.info/gems/lazar/OpenTox%2F#{m.model.algorithms["prediction"]["method"].sub("::","%2f")}", :rel=>"external"}
          = m.model.algorithms["prediction"]["method"]
        %br
        Feature selection:
        = m.model.algorithms["feature_selection"]["method"].split(".").last if m.model.algorithms["feature_selection"]
        %br
        Descriptors:
        = m.model.algorithms["descriptors"]["method"]+","
        = m.model.algorithms["descriptors"]["categories"]
        %p
        %b Independent crossvalidations (log2 transformed):
        %div.row{:id=>"validations#{m.id}", :style=>"background-color:#f5f5f5;"}
          - m.crossvalidations.each do |cv|
            %span.col-xs-2.col-sm-2.col-md-2.col-lg-2
              = "Num folds:\t"
              = cv.folds
              %br
              = "Num instances:\t"
              = cv.nr_instances
              %br
              = "Num unpredicted"
              = cv.nr_unpredicted
              %br
              %a.ht5{:href=>"https://en.wikipedia.org/wiki/Root-mean-square_deviation", :rel=>"external"} RMSE:
              = cv.rmse.round(3) if cv.rmse
              %br
              %a.ht5{:href=>"https://en.wikipedia.org/wiki/Mean_absolute_error", :rel=>"external"} MAE:
              = cv.mae.round(3) if cv.mae
              %br 
              %a.ht5{:href=>"https://en.wikipedia.org/wiki/Coefficient_of_determination", :rel=>"external"}= "R"+"<sup>2</sup>"+":"
              = cv.r_squared.round(3) if cv.r_squared
        %br
        %b QMRF report
        %p
        %a.btn.btn-default{:href=>to('/qmrf-report/'+m.id), :rel=>"external"} download
        %hr
        %form{:id=>idx, :role=>"form", :action=> to("/predict"), :method=>"post"}
          %h3.help-block
            Please characterise a nanoparticle:

          - if type == "fingerprint"

            %div.form-group
              // type = fingerprint
              // send hidden example data to compare
              %input{:id=>"type",:type=>"hidden",:name=>"type",:value=>"#{type}"}
              %input{:id=>"example_core",:type=>"hidden",:name=>"example_core",:value=>"#{example.core["name"]}"}
              - example.coating.each_with_index do |ex_coating, idx|
                %input{:id=>"example_coating_#{idx}",:type=>"hidden",:name=>"example_coating_#{idx}",:value=>"#{ex_coating["name"]}"}
              %input{:id=>"example_pc",:type=>"hidden",:name=>"example_pc",:value=>"{}"}
              %input{:id=>"id",:type=>"hidden",:name=>"example_id",:value=>example.id}

            // input form parameters to transfer
            // core
            %div.form-group
              %label{:for=>"selCore#{idx}"} Core
              %select.form-control{:id=>"selCore#{idx}", :autocomplete=>"off", :name=>"input_core",:value=>example.core["name"]}
                %option{:selected => ("selected" if example.core["name"] == "Ag"), :value => "Ag"} Ag
                %option{:selected => ("selected" if example.core["name"] == "Au"), :value => "Au"} Au

            // coating
            - coatings = $coating_list.collect{|nano| nano.coating.collect{|co| co["name"]}}.flatten.compact.uniq.sort_by(&:downcase)
            %div.form-group{:id=>"coatings"}
              %label{:for=>"selCoating#{idx}"} Coating
              - example.coating.each_with_index do |ex_coating, idx|
                %select.form-control{:id=>"selCoating#{idx}", :autocomplete=>"off", :name=>"input_coating_#{idx}",:value=>ex_coating["name"]}
                  - coatings.each do |co|
                    %option{:selected => ("selected" if ex_coating["name"] == co), :value => co}
                      = co

            %div{:id=>"coating_buttons"}
              %span.btn.glyphicon.glyphicon-plus{:onclick=>"addCoating(\"add\", #{coatings});"}
              %span.btn.glyphicon.glyphicon-minus{:onclick=>"addCoating(\"remove\", #{coatings});"}

          - if type =~ /physchem/
            %div.form-group
              // type = physchem,proteomics
              // send hidden example data to compare
              %input{:id=>"type",:type=>"hidden",:name=>"type",:value=>"#{type}"}
              %input{:id=>"example_core",:type=>"hidden",:name=>"example_core",:value=>"#{example.core["name"]}"}
              %input{:id=>"example_coating",:type=>"hidden",:name=>"example_coating",:value=>"#{example.coating[0]["name"]}"}
              %input{:id=>"example_pc",:type=>"hidden",:name=>"example_pc",:value=>"#{example.properties}"}
              - size = relevant_features.size
              %input{:id=>"size",:type=>"hidden",:name=>"size",:value=>size}
              %input{:id=>"id",:type=>"hidden",:name=>"example_id",:value=>example.id}

              // input form parameters to transfer
              // core
              %div.form-group
                %label{:for=>"selCore#{idx}"} Core
                %select.form-control{:id=>"selCore#{idx}", :autocomplete=>"off", :name=>"input_core",:value=>example.core["name"]}
                  %option{:selected => ("selected" if example.core["name"] == "Ag"), :value => "Ag"} Ag
                  %option{:selected => ("selected" if example.core["name"] == "Au"), :value => "Au"} Au

              // relevant features
              - relevant_features.sort_by{|f| f.name}.each_with_index do |relf,id|
                - feature = relf
                - v = example.properties.find{|id,v| id == feature.id.to_s  }
                - name = feature.name
                - if feature[:conditions] && !feature[:conditions]["MEDIUM"].blank?
                  - name = feature.name + " / " + feature[:conditions]["MEDIUM"]
                - else
                  - name = feature.name
                - val = !v.nil? ? v[1] : ""
                - id = id + 1

                %h5
                  %a.descriptor{:href=>$npo[feature.name], :rel=>"external"}= name + (feature.unit.blank? ? "" : " (#{feature.unit})")

                // input physchem parameters
                %input.input-sm.form-control{:id=>"physchem#{id}",:type=>"text",:name=>"input_value_#{id}",:value=>"#{val[0]}", :disabled=>("disabled" if val[0].blank?)}
                %input{:id=>id,:type=>"hidden",:name=>"input_key_#{id}",:value=>feature.id}

          - if type =~ /proteomics/
            %div.form-group
              // type = physchem,proteomics
              // send hidden example data to compare
              %input{:id=>"type",:type=>"hidden",:name=>"type",:value=>"#{type}"}
              %input{:id=>"example_core",:type=>"hidden",:name=>"example_core",:value=>"#{example.core["name"]}"}
              %input{:id=>"example_coating",:type=>"hidden",:name=>"example_coating",:value=>"#{example.coating[0]["name"]}"}
              %input{:id=>"example_pc",:type=>"hidden",:name=>"example_pc",:value=>"#{example.properties}"}
              - size = relevant_features.size
              %input{:id=>"size",:type=>"hidden",:name=>"size",:value=>size}
              %input{:id=>"id",:type=>"hidden",:name=>"example_id",:value=>example.id}

              // input form parameters to transfer
              // core
              %div.form-group
                %label{:for=>"selCore#{idx}"} Core
                %select.form-control{:id=>"selCore#{idx}", :autocomplete=>"off", :name=>"input_core",:value=>example.core["name"]}
                  %option{:selected => ("selected" if example.core["name"] == "Ag"), :value => "Ag"} Ag
                  %option{:selected => ("selected" if example.core["name"] == "Au"), :value => "Au"} Au

              // relevant features
              - relevant_features.sort_by{|f| f.name}.each_with_index do |relf,id|
                - feature = relf
                - v = example.properties.find{|id,v| id == feature.id.to_s  }
                - name = feature.name
                - if feature[:conditions] && !feature[:conditions]["MEDIUM"].blank?
                  - name = feature.name + " / " + feature[:conditions]["MEDIUM"]
                - else
                  - name = feature.name
                - val = !v.nil? ? v[1] : ""
                - id = id + 1

                %h5
                  %a{:href=>"http://www.uniprot.org/uniprot/#{name}", :rel=>"external"}= name + (feature.unit.blank? ? "" : " (#{feature.unit})")

                // input physchem parameters
                %input.input-sm.form-control{:id=>"#{id}",:type=>"text",:name=>"input_value_#{id}",:value=>"#{val[0]}"}
                %input{:id=>id,:type=>"hidden",:name=>"input_key_#{id}",:value=>feature.id}

          // prediction model id 
          %input{:id=>"prediction_model",:type=>"hidden",:name=>"prediction_model",:value=>m.id}

          %hr
          #predict
            %button.btn.btn-success{:id=>"submitbutton", :type=>"submit", :onclick=>"showcircle();"} 
              Find similar nano particles
              %span.glyphicon.glyphicon-chevron-right{:id=>"span"}
            %img{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}