:javascript
  function progress(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.show();
    setInterval(function(){
      if($element.find('#bar').is(":visible") & $element.find('#bar').width() < 400){
        var next = $element.find('#bar').width() + 20;
      } else if ($element.find('#bar').is(":visible") & $element.find('#bar').width() == 400) {
        var next = $element.find('#bar').width() - 20;
      }
      $element.find('#bar').animate({ width:next }, 300).html(value + "%&nbsp;");
    }, 2000);
  };
  function checksmiles () {
    if (document.form.identifier.value == "") {
      alert("Please draw or insert a chemical structure.");
      //$("img.circle").hide();
      document.form.identifier.focus();
      $('#progressBar').hide();
      return false;
    };
    return true;
  };
  function checkboxes () {
    var checked = false;
    $('input[type="checkbox"]').each(function() {
      if ($(this).is(":checked")) {
        checked = true;
      };
    });
    if (checked == false){
      alert("Please select an endpoint.");
      //$("img.circle").hide();
      $('#progressBar').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() ;
    };
  };
  //function showcircle(){
    //$("img.circle").show();
  //};

// 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  !!(checksmiles() & checkboxes())" }
  %fieldset#top
    %a{:href => "#", :id => "linkInsert"}
      %h1 1. Draw a chemical structure
    :javascript
      $("a#linkInsert").click(function () {
        $("#insert").toggle();
        document.location = document.location + "#" + "insert";
      });
    #insert
      %p
      %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:
      %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
    
  .arrow
    %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"}
   
  %fieldset#middle
    %a{:href => "#models", :id => "linkModels"}
      %h1 2. Select one or more endpoints
    
    :javascript
      $("a#linkModels").click(function () {
        $("#models").toggle();
        document.location = document.location + "#" + "models";
      });
      
    #models
      - @detail_count = 0
      - @models.each do |model|
        - model_endpoint = model.type.select{|endpoint| endpoint =~ /Endpoint/}.to_s
        - model_title = model.title.split("_").last(2)[0]
        - model_t = model.title.gsub("_", " ")
        %br
        %b= model_endpoint.split("#").last.gsub("_", " ").gsub(/\"|\]/, "")+" :"
        - @detail_count +=1
        %div{:id => model_title}
          %input{:type => "checkbox", :name => "selection[#{model.uri}]", :id => "selection[#{model_title}]", :value => true, :disabled => false}
          %label{:for => "selection[#{model_title}]"}
            = model_t
          %a{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details", :style=>"font-size:small;"}
            [Details]
      
          :javascript
            $("a#linkDetails#{model_title}").click(function () {
              $("#details_#{@detail_count}").toggle();
              //document.location = document.location + "#" + "details";
            });
        #details{:id => "#{@detail_count}", :style => "display:none;background-color:white;padding:1em;"}
          %h3 Model Details:
          %p{:style=>"display:inline;"} Algorithm:
          %code{:style=>"font-size:x-large;"} lazar
          - model.type.to_s =~ /regression/i ? type = "regression" : type = "classification"
          %p= "Type: "+type
          - training_dataset = OpenTox::Dataset.new "#{model[RDF::OT.trainingDataset]}"
          - training_compounds = training_dataset.compounds.size.to_s
          %p= "Training compounds: "+training_compounds
          %p{:style=>"display:inline;"} Descriptors:
          - if type == "regression"
            %a{:href=>"https://services.in-silico.ch/algorithm/descriptor/physchem/list", :title=>"link opens in new window.", :target=>"_blank"} Physico-chemical (PC) properties
          - else
            %a{:href=>"http://www.maunz.de/libfminer2-bbrc-doc/", :title=>"link opens in new window.", :target=>"_blank"} Fminer backbone refinement classes
          %br
          %br
          %p{:style=>"display:inline"}= "Training Dataset: "
          %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.trainingDataset])}")}", :title=>"link opens in new window."} download rdf
          %br
          %br
          %p{:style=>"display:inline"}= "Feature Dataset: "
          %a{:href=>"#{to("/predict/#{CGI.escape(model[RDF::OT.featureDataset])}")}", :title=>"download"} download rdf
          %br
          %br
          %p{:style=>"display:inline"}= "Model: "
          %a{:href=>"#{to("/predict/#{CGI.escape(model.uri)}")}", :title=>"download"} download rdf
          %br
          %h3 Validation:
          -#%p= @cv.inspect
          %a{:href => "#"} 
            Detailed report link
          %p Number of predictions: integer
          %p Correct predictions: %


      //%br

  .arrow
    %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"}
  
  %fieldset#bottom
    %table{:style=>"cellspacing:10;cellpadding:20"}
      %tr
        %td{:style=>"width:10em;align:center;valign:middle;"}
          %h1
            3. Predict
        %td{:style=>"width:10%;align:center;valign:middle;"}
          %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "(progress(1,$('#progressBar')) & getsmiles() & showcircle())", :style=>"cursor: pointer;display:inline;width:50px;height:50px;border-radius: 50%;color:#2b2b2b;text-align:center;text-decoration:none;background:#f76700;box-shadow: 0 0 5px white;font-weight:bold;"}

        %td{:style=>"align:center;valign:middle;"}
          #progressBar{:style=>"width: 400px;height: 22px;border:1px solid #2b2b2b;background-color:gray;display:none;"}
            #bar{:style =>"width:0;height: 100%;color: #fff;text-align: right;line-height: 22px;background-color: #0099ff;"}