: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;"}