%link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"}
%script{:src=>"/jsme/jsme.nocache.js"}
:javascript
  function showcircle() {
    if (checksmiles() && checkboxes()){
      button = document.getElementById("submit");
      image = document.getElementById("circle");
      button.parentNode.replaceChild(image, button);
      $("img.circle").show();
      return true;
    };
    return false;
  };
  function checksmiles () {
    if (document.form.identifier.value == "") {
      alert("Please draw or insert a chemical structure.");
      document.form.identifier.focus();
      //$('.progress-bar').hide();
      $("img.circle").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();
      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() ;
    };
  };

// init task for progress

// 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  !!(showcircle())" }
  %fieldset#top.well
    %h2 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:
      %br
      %input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
    
   
  %fieldset#middle.well
    %h2 2. Select one or more endpoints
    
    :javascript
      $("a#linkModels").click(function () {
        $("#models").toggle();
        document.location = document.location + "#" + "models";
      });
      
    #models
      - @endpoints.each do |endpoint|
        %div
          %b= endpoint
          - @models.select{|m| m.endpoint == endpoint}.each do |model|
            %div{:id => model.id}
              %input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.id}]", :value => true, :disabled => false}
                %label{:for => "selection[#{model.id}]"}
                  = model.species
            %p

  
  %fieldset#bottom.well
    %div.row
      %div.col-md-2
        %h2
          3. Predict
      %div.col-md-10
        %input.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>">>", :onclick => "getsmiles()"}
        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :style=>"display:none;"}