:javascript
  function getsmiles() {
    if (document.JME.smiles() != '') {
      document.form.identifier.value = document.JME.smiles() ;
    };
  };
  function checksmiles () {
    if (document.form.identifier.value == "") {
      alert("Please insert a compound.");
      document.form.identifier.focus();
      return false;
    };
    return true;
  };
  function checkboxes () {
    if ($("#model input[type=checkbox]:checked").length < 1 ){
      alert("Please select an endpoint.")
      document.getElementById('model').focus();
      return false;
    };
    return true;
  };

/ whole site content needs to be in one form. Input and checkboxes are checked by js functions. 
%form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return  !!(checksmiles() & checkboxes())" }
  %fieldset#top
    %a{:href => "#insert", :id => "linkInsert"}
      %h1 1. Draw or insert your compound   
    :javascript
      $("a#linkInsert").click(function () {
        $("#insert").toggle();
        document.location = document.location + "#" + "insert";
      });
    #insert{:style=>"display:none"}   
      %p
      %label &nbsp;
      .jme
        %applet{:code => "JME.class", :name => "JME", :archive => "JME.jar", :width => "500", :height => "360"}
          %param{ :name => "options", :value => "polarnitro"}
          Please enable Java and JavaScript in your browser to use the JME editor.
        %a{:href => "jme_help", :rel => "external"} (help)
        %span{:style=>"font-size:75%"}
          &copy;
          %a{:href => 'http://www.molinspiration.com/jme/index.html', :rel => "external"} JME Editor
          courtesy of Peter Ertl, Novartis
      %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'}
      
      .close
        = hide_link "#insert"
    
  .arrow
    %img{:src=>"/images/arrow_down_float.png", :alt=>"arrow", :class=> "arrow"}

   
  %fieldset#middle
    %a{:href => "#models", :id => "linkModels"}
      %h1 2. Select one or more toxic endpoints
    
    :javascript
      $("a#linkModels").click(function () {
        $("#models").toggle();
        document.location = document.location + "#" + "models";
      });
      
    #models{ :style => "display: none;"}
      %p Please observe validation report for details.
      %br    
      - @models.each do |model|
        - model.get
        #model
          %input{:type => "checkbox", :name => "selection[#{model.title}]", :id => "selection[#{model.title}]", :value => true, :disabled => false}
          %label{:for => "selection[#{model.title}]"}
            %b= model.title
          %a{:href=>"#", :alt=>"#{model.title} validation"}
            %i Validation Link
          %br
          
      .close
        = hide_link "#models"

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

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