:javascript
  function checksmiles () {
    if (document.form.identifier.value == "") {
      alert("Please draw or insert a chemical structure.");
      document.form.identifier.focus();
      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.")
      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  !!(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  
      #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
      // TODO order models by echa endpoint
      #endpoint
        %b Acute toxicity to fish (lethality):
      - @models.each do |model|
        - model_title = model.title.split(" ").first
        - if model_title =~ /LC50/
          %div{:id => model_title}
            %input{:type => "checkbox", :name => "selection[#{model_title}]", :id => "selection[#{model_title}]", :value => true, :disabled => false}
            %label{:for => "selection[#{model_title}]"}
              = " EPA v4b Fathead Minnow Acute Toxicity "+model_title
            %a{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details"}
              [Details]
        
            :javascript
              $("a#linkDetails#{model_title}").click(function () {
                $("#details_#{model_title}").toggle();
                //document.location = document.location + "#" + "details";
              });

          #details{:id => "#{model_title}", :style=> "display:none;"}
            %h3 Model Details:
            //%p= "Training Dataset:\t#{model[RDF::OT.trainingDataset]}"
            %p Algorithm: Lazar
            %p Type: regression
            %p Training compounds: integer
            %p Descriptors: Fminer
            //%p= "Training Dataset:\t#{model[RDF::OT.trainingDataset]}"
            //%p= "Feature Dataset:\t#{model[RDF::OT.featureDataset]}"
            %h3 Validation: 
            %a{:href => "#"} 
              Detailed report link
            %p Number of predictions: integer
            %p Correct predictions: %
      %br
      %b Carcinogenicity:
      - @models.each do |model|
        - model_title = model.title.split(" ").first
        - if model_title =~ /hamster|rodent/i
          %div{:id => model_title}
            %input{:type => "checkbox", :name => "selection[#{model_title}]", :id => "selection[#{model_title}]", :value => true, :disabled => false}
            %label{:for => "selection[#{model_title}]"}
              = " DSSTox Carcinogenic Potency DBS "+model_title
            %a{:href=>"#details", :id => "linkDetails#{model_title}", :title=>"#{model_title} details"}
              [Details]

            :javascript
              $("a#linkDetails#{model_title}").click(function () {
                $("#details_#{model_title}").toggle();
                //document.location = document.location + "#" + "details";
              });

          #details{:id=>"#{model_title}", :style=> "display:none;"}
            %h3 Model Details:
            //%p= "Training Dataset:\t#{model[RDF::OT.trainingDataset]}"
            %p Algorithm: Lazar
            %p Type: classification
            %p Training compounds: integer
            %p Descriptors: Fminer
            //%p= "Training Dataset:\t#{model[RDF::OT.trainingDataset]}"
            //%p= "Feature Dataset:\t#{model[RDF::OT.featureDataset]}"
            %h3 Validation: 
            %a{:href => "#"} 
              Detailed report link
            %p Number of predictions: integer
            %p Correct predictions: %
            %br

      %br

  .arrow
    %img{:src=>"/images/arrow_down_float.png", :alt=>"v", :class=> "arrow"}

  %fieldset#bottom
    %h1 
      3. Predict
    %input{ :type => "submit", :id => "submit", :value=>">>", :onclick => "getsmiles()"}