<!--<?xml version="1.0" encoding="UTF-8" ?>-->
<!DOCTYPE html>
<!-- please note that DOCTYPE is supposed to be that short for HTML5 -->
<html><!-- xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">-->
<script>
	   window.SERVER_BASE = "https://legacy.envipath.org/";

</script>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8"/>
	<title>enviPath</title>
	<link id="css-pps_white_general.css" href="https://legacy.envipath.org/css/pps_white_general.css" rel="stylesheet"
		  type="text/css"/>

    <!-- CDN VERSION -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link
            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600&display=swap"
            rel="stylesheet"
        />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
	<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<link rel="stylesheet"
		  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
	<!-- CDN END -->

	<!-- LOCAL VERSION -->
<!--	<script src="https://legacy.envipath.org/js/jquery.min.js"></script>-->
<!--	<link rel="stylesheet" href="https://legacy.envipath.org/css/bootstrap.min.css">-->
<!--	<script src="https://legacy.envipath.org/js/bootstrap.min.js"></script>-->
<!--	<script src="https://legacy.envipath.org/js/jquery.tmpl.js"></script>-->
<!--	<link href="https://legacy.envipath.org/css/font-awesome.css" rel="stylesheet">-->
<!--	<link rel="stylesheet" href="https://legacy.envipath.org/css/bootstrap-select.min.css">-->
<!--	<script src="https://legacy.envipath.org/js/bootstrap-select.min.js"></script>-->
	<!-- END LOCAL -->

	<script src="https://legacy.envipath.org/js/pps.js"></script>
	<script src="https://legacy.envipath.org/js/jquery-bootstrap-modal-steps.js"></script>
	<script src="https://legacy.envipath.org/js/arrive.min.js"></script>
	<script src="https://legacy.envipath.org/js/d3.v3.min.js"></script>
	<script src="https://legacy.envipath.org/js/d3-pathway.js"></script>
	<script src="https://legacy.envipath.org/js/c3.js"></script>
	<script src="https://legacy.envipath.org/js/newSettingModal.js"></script>
	<link id="css-c3" href="https://legacy.envipath.org/css/c3.css" rel="stylesheet" type="text/css">
	<!--	<script src="https://legacy.envipath.org//js/ketcher2/script/index.js"></script>-->

	<script type="text/javascript">
        // if internet explorer(or edge) is used, deactivate caching of ajax requests
        if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )
                || (navigator.userAgent.indexOf("Edge") != -1 )) {
            $.ajaxSetup({ cache: false });
        }

	</script>

	<!-- Matomo -->
	<script>
	  var _paq = window._paq = window._paq || [];
	  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
	  _paq.push(['trackPageView']);
	  _paq.push(['enableLinkTracking']);
	  (function() {
	      var u="//matomo.envipath.com/";
	      _paq.push(['setTrackerUrl', u+'matomo.php']);
	      _paq.push(['setSiteId', '12']);
	      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
	      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
	  })();
	</script>
	<!-- End Matomo Code -->

</head>
  <body>

        <!-- Brand and toggle get grouped for better mobile display -->
      <style>
          @media (max-width: 1220px) {
            .navbar-header-framework {
                float: none;
            }
            .navbar-left-framework,.navbar-right-framework {
                float: none !important;
            }
            .navbar-toggle-framework {
                display: block;
            }
            .navbar-collapse-framework {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            }
            .navbar-fixed-top-framework {
                top: 0;
                border-width: 0 0 1px;
            }
            .navbar-collapse-framework.collapse {
                display: none!important;
            }
            .navbar-nav-framework {
                float: none!important;
                margin-top: 7.5px;
            }
            .navbar-nav-framework>li {
                float: none;
            }
            .navbar-nav-framework>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .collapse-framework.in{
                display:block !important;
            }
          }
      </style>


<nav class="navbar navbar-default navbar-inverse" style="border-radius:0px;" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header navbar-header-framework">
      <button type="button" class="navbar-toggle navbar-toggle-framework" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a id="pictureLink" href="https://legacy.envipath.org/" class="navbar-brand">
	    <img id="image-logo-short-white.svg" src="https://legacy.envipath.org//images/logo-short-white.svg" width="100"
					 alt="enviPath">
	  </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse collapse-framework navbar-collapse-framework" id="navbarCollapse">
	  <ul class="nav navbar-nav navbar-nav-framework">
		  <li><a href="/package" id="packageLink">Package</a></li>
		  <li><a href="/pathway" id="pathwayLink">Pathway</a></li>
		  <li><a href="/rule" id="ruleLink">Rule</a></li>
		  <li><a href="/compound" id="compoundLink">Compound</a></li>
		  <li><a href="/reaction" id="reactionLink">Reaction</a></li>
		  <li><a href="/relative-reasoning" id="relative-reasoningLink">Relative
			  Reasoning</a></li>
		  <li><a href="/scenario" id="scenarioLink">Scenario</a></li>
		  <li><a href="/setting" id="settingLink">Setting</a></li>
		  <li><a href="/user" id="userLink">User</a></li>
		  <li><a href="/group" id="groupLink">Group</a></li>
		  <li class="dropdown">
			  <a data-toggle="dropdown" class="dropdown-toggle" href="#">Predict <b class="caret"></b></a>
			  <ul role="menu" class="dropdown-menu">
				  <li><a href="/batch_prediction" id="batchpredictLink">Batch Predict</a></li>
			  </ul>
		  </li>
	  </ul>

      <ul class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework">
        <li><a href="/search" id="searchLink">Search</a></li>
	    <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Info <b class="caret"></b></a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="/contributors" id="contributorsLink">Contributors</a></li>
            <li><a href="/funding" id="fundingLink">Funding</a></li>
            <li><a href="https://community.envipath.org/t/envipath-license/109" id="licenceLink">Licences</a></li>
            <li class="divider"></li>

            <li><a target="_blank" href="https://wiki.envipath.org/" id="wikiLink">Documentation Wiki</a></li>
            <li><a target="_blank" href="https://community.envipath.org/" id="communityLink">Support Forum</a></li>
            <li>
                <a href="#"
                id="citeButton"
                data-toggle="modal"
                data-target="#citemodal">How to cite enviPath</a>
            </li>
            <li class="divider"></li>
            <li><a>Version 0.3.3</a></li>
          </ul>
        </li>
        <li>
          <a href="#signup"
           id="loginButton"
           data-toggle="modal"
           data-target="#signupmodal" style="margin-right:10px">Login</a>
        </li>

      <li class="dropdown">
        <a data-toggle="dropdown"
           id="loggedInButton"

           class="dropdown-toggle"
           id="logedInButton"
           href="#">
          <div id="username"></div>
        </a>
        <ul role="menu" class="dropdown-menu">
          <li>
			<a href="#account"
             id="accountbutton">Account</a>
			</li>
          <li class="divider"></li>
              <form class="navbar-form navbar-left navbar-left-framework"
            role="logout"
            action=""
            method="post">
        <div class="form-group">
          <input type="hidden" name="hiddenMethod" value="logout" >
        </div>
        <button type="submit" class="btn btn-default">Logout</button>
          </form>
            </ul>
          </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    <!-- Modal -->
    <div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4>How to cite enviPath</h4>
          </div>
	              <div class="modal-body">
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item">
                        Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
                        <cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel
                            functionalities in enviPath.</cite>
                        <a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93
                            (2024)</a>
                    </li>
                    <li class="list-group-item">
                        Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K.
                        <cite>enviPath - The environmental contaminant biotransformation pathway resource</cite>
                        <a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
                            Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages D502-D508
                        </a>
                    </li>
                </ol>
            </div>

          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>


    <div class="modal fade bs-modal-sm" id="signupmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
	<div class="modal-content">
          <br>
          <div class="bs-example bs-example-tabs">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#signin" data-toggle="tab">Sign In</a></li>
              <li class=""><a href="#signup" data-toggle="tab">Register</a></li>
              <li class=""><a href="#why" data-toggle="tab">Why?</a></li>
            </ul>
          </div>
	  <div class="modal-body">
            <div id="myTabContent" class="tab-content">


	      <!-- Why tab -->

              <div class="tab-pane fade in" id="why">
		<p>After you register, you have more permissions on
		this site, e.g., can create your own
		  packages, submit data for review, and set access
		  permissions to your data.</p>
		<p></p><p>
		  <br> Please
		  contact <a href="mailto:admin@envipath.org">admin@envipath.org</a>
		  if you have any questions.</p>
	      </div>
	      <div class="tab-pane fade active in" id="signin">
		<form class="form-horizontal" method="post" action="">
		  <fieldset>
		  <input type="hidden" name="hiddenMethod" id="login" value="login" />

		    <!-- Sign In Form -->
		    <!-- Text input-->
		    <div class="control-group">
		      <label class="control-label" for="userinput">Login:</label>
		      <div class="controls">
			<input required
			       id="userinput"
			       name="loginusername"
			       type="text"
			       class="form-control"
			       placeholder="User"
			       class="input-medium" >
		      </div>
		    </div>

		    <!-- Password input-->
		    <div class="control-group">
		      <label class="control-label" for="passwordinput">Password:</label>
		      <div class="controls">
			<input required
			       id="passwordinput"
			       name="loginpassword"
			       class="form-control"
			       type="password"
			       placeholder="********"
			       class="input-medium">
		      </div>
		    </div>

		    <!-- Multiple Checkboxes (inline) -->
		    <!-- <div class="control-group"> -->
		    <!--   <label class="control-label" -->
		    <!-- 	     for="rememberme"></label> -->
		    <!--   <div class="controls"> -->
		    <!-- 	<label class="checkbox inline" for="rememberme-0"> -->
		    <!-- 	  <input type="checkbox"  -->
		    <!-- 		 name="rememberme"  -->
		    <!-- 		 id="rememberme-0"  -->
		    <!-- 		 value="Remember me"> -->
		    <!-- 	  Remember me -->
		    <!-- 	</label> -->
		    <!--   </div> -->
		    <!-- </div> -->

		    <!-- Button -->
		    <div class="control-group">
		      <label class="control-label" for="signin"></label>
		      <div class="controls">
			<button id="signin"
				name="signin"
				class="btn btn-success">Sign In</button>
		      </div>
		    </div>
		  </fieldset>
		</form>
	      </div>

	      <!-- Register -->
	      <div class="tab-pane fade"
		   id="signup">
			  <div id="passwordGuideline" class="alert alert-info">
				  The password must contain 8 to 30 characters<br>
				  The following characters are allowed:
				  - Upper and lower case characters<br>
				  - Digits<br>
				  - Special characters _, -, +<br>

			  </div>

			  <form id="signup-action"
					class="form-horizontal"
		      action="/user"
		      method="post">
		  <fieldset>
		    <!-- Sign Up Form -->
		    <!-- Text input-->
		    <div class="control-group">
		      <label class="control-label"
			     for="email">Email:</label>
		      <div class="controls">
			<input id="email"
			       name="email"
			       class="form-control"
			       type="email"
			       placeholder="user@envipath.org"
			       class="input-large" required>
		      </div>
		    </div>

		    <!-- Text input-->
		    <div class="control-group">
		      <label class="control-label" for="userid">Username:</label>
		      <div class="controls">
			<input id="userid"
			       name="username"
			       class="form-control"
			       type="text"
			       placeholder="user"
			       class="input-large" required>
		      </div>
		    </div>

		    <!-- Password input-->
		    <div class="control-group">
		      <label class="control-label"
			     for="password">Password:</label>
		      <div class="controls">
			<input id="password"
			       name="password"
			       class="form-control"
			       type="password"
			       placeholder="********"
			       class="input-large"
			       required>
		      </div>
		    </div>

		    <!-- Text input-->
		    <div class="control-group">
		      <label class="control-label"
			     for="reenterpassword">Re-Enter Password:</label>
		      <div class="controls">
			<input id="reenterpassword"
			       class="form-control"
			       name="reenterpassword"
			       type="password"
			       placeholder="********"
			       class="input-large"
			       required>
		      </div>
		    </div>
		    <input id="redirectTo" type="hidden" name="redirectTo" value="">
		    <!-- Multiple Radios (inline) -->
		    <br>
		    <div class="control-group">
		      <label class="control-label" for="humancheck">Humanity Check:</label>
		      <div style="margin-left:8%" class="controls">
		    	<label class="radio inline" for="humancheck-0">
		    	  <input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
		    	<label class="radio inline" for="humancheck-1">
		    	  <input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
		      </div>
		    </div>

		    <!-- Button -->
		    <div class="control-group">
		      <label class="control-label"
			     for="confirmsignup"></label>
		      <div class="controls">
			<button id="confirmsignup"
				name="confirmsignup"
				class="btn btn-success">Sign Up</button>
		      </div>
		    </div>
		  </fieldset>
		</form>
	      </div>
	    </div>
	  </div>
	  <div class="modal-footer">
	    <center>
	      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	    </center>
	  </div>
	</div>
      </div>
    </div>








<div id="sidebarNav" style="position:fixed;right:0;">
    <style>
        /* sidebar */
        .bs-docs-sidebar {
            padding-left: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        /* all links */
        .bs-docs-sidebar .nav>li>a {
            color: #999;
            border-left: 2px solid transparent;
            padding: 4px 20px;
            font-size: 13px;
            font-weight: 400;
        }

        /* active & hover links */
        .bs-docs-sidebar .nav>.active>a,
        .bs-docs-sidebar .nav>li>a:hover,
        .bs-docs-sidebar .nav>li>a:focus {
            color: #000000;
            text-decoration: none;
            background-color: transparent;
            border-left-color: #000000;
        }
        /* all active links */
        .bs-docs-sidebar .nav>.active>a,
        .bs-docs-sidebar .nav>.active:hover>a,
        .bs-docs-sidebar .nav>.active:focus>a {
            font-weight: 700;
        }

        /* hide nav bar if screen to small*/
        @media screen and (max-width: 1550px){ /*originally at 500px*/
            .bs-docs-sidebar {
                display:none
        }
        #sidebar.floating {
            position: fixed;
            top: 0;
            right: 0;
        }
    </style>
    <script>
        // marks shown part of site as actice (doesnt seem to work TODO)
        $('docContent').scrollspy({
            target: '.bs-docs-sidebar',
            offset: 40
        });
        // keeps nav bar in the top right corner
        $(document).ready( function() {

            $(window).scroll( function() {
                if ($(window).scrollTop() > $('#sidebarNav').offset().top)
                    $('#sidebar').addClass('floating');
                else
                    $('#sidebar').removeClass('floating');
            } );

        } );
	</script>
</div>

    <div id="docContent" class="content container">
        <div id="bread"></div>
        <div id="internetExplorerWarning"></div>
        <div id="justRegistered"></div>
        <div id="activationStatus"></div>
        <div id="alreadyExisting"></div>
        <div id="noPermission"></div>
        <div id="nothingChanged"></div>
		<div id="passwordChanged"></div>
        <div id="exception"></div>
	<!-- toggle, hide, show -->

	<!-- [variable 'content'] -->
<!-- <script src="/js/jsme/jsme.nocache.js"></script> -->
<div class="modal fade"
     tabindex="-1"
     id="newModelModal"
     role="dialog"
     aria-labelledby="newModelModal"
     aria-hidden="true">
    <div class="modal-dialog-multiple">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"
                        class="close"
                        data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="js-title-step"></h4>
            </div>
            <form id="modal-form"
                  accept-charset="UTF-8"
                  action=""
                  data-remote="true"
                  method="post">
                <div class="modal-body hide" data-step="1" data-title="New Relative
							       Reasoning">
                    <div class="jumbotron">Create a new Relative Reasoning to
                        limit the number of degradation products in the
                        prediction. You just need to set a name and the packages
                        you want the object to be based on. If you want to use the
                        default options suggested by us, simply click Submit,
                        otherwise click Advanced Options.
                    </div>
                    <p>
                        <label for="name">Name</label>
                        <input id="name"
                               name="modelName"
                               class="form-control"
                               placeholder="Name"/>
                    </p>
                    <div id="rulesPackageForm">
                    </div>
                    <p></p>
                    <div id="pathwayPackageForm">
                    </div>
                </div>
                <div class="modal-body hide" data-step="2" data-title="Advanced Options">
                    <div class="jumbotron">Select advanced options for the
                        Relative Reasoning creation. The threshold is used for
                        the predicted probabilies and should be between 0.0 and 1.0, the fingerprinter calculates the
                        features for each compound, and the Classifier type is the used
                        multi-label classifier.
                    </div>

                    <!--<label for="p-Cut">p-Cut</label>-->
                    <!--<input id="p-Cut"-->
                    <!--type="checkbox"-->
                    <!--name="p-Cut">-->
                    <label for="cut-off">Threshold</label>
                    <input id="cut-off"
                           name="cut-off"
                           type="number"
                           class="form-control"
                           value="0.5"
                           step="0.01"
                           min="0"
                           max="1">
                    <!--		<label for="holdOutSplit">Split</label>-->
                    <!--		<input id="holdOutSplit"-->
                    <!--				name="holdOutSplit"-->
                    <!--				type="number"-->
                    <!--				class="form-control"-->
                    <!--				value="0.6"-->
                    <!--					step="0.01"-->
                    <!--					min="0.1"-->
                    <!--					max="0.9">-->
                    <label for="fpType">Fingerprinter type</label>
                    <select id="fpType"
                            name="fpType"
                            type="number"
                            class="form-control">
                        <option value="ENVIPATH_FINGERPRINTER">MACS Fingerprinter</option>
                    </select>
                    <div id="additionalFingerprinterForm">
                    </div>
                    <label for="clfType">Classifier type</label>
                    <select id="clfType"
                            name="clfType"
                            class="form-control"
                            onclick="checkEvalType()">
                        <option value="RULEBASED">Rule-Based</option>
                        <option value="MLCBMAD">Machine Learning-Based (MLC-BMaD)</option>
                        <option value="ECC">Machine Learning-Based (ECC)</option>
                    </select>
                    <label for="evalType">Evaluation type</label>
                    <select id="evalType"
                            name="evalType"
                            class="form-control"
                            disabled=true>
                        <option value="singleGen">Single Generation</option>
                        <option value="multiGen">Single + Multiple Generations</option>
                    </select>

                    <div id="paramForms">
                        <label>Additional Evaluation Options</label>
                        <div class="checkbox">
                            <label> <input type="checkbox" id="quickBuild" name="quickBuild">Quick build</label>
                        </div>
                        <div class="checkbox">
                            <label> <input type="checkbox" id="evaluateLater" name="evalLater"
                                           onchange="checkEvalLater()">Evaluate later</label>
                        </div>
                        <div id="packageFormII">
                        </div>
                    </div>
                </div>
                <!-- AD Stuff START             -->
                <div class="modal-body hide" data-step="3" data-title="Advanced Options II">
                    <div class="jumbotron">Selection of parameter values for the Applicability Domain process.
                        Number of Neighbours refers to a requirement on the minimum number of compounds from the
                        training
                        dataset that has at least one triggered transformation rule that is common with the compound
                        being
                        analyzed.
                        Reliability Threshold is a requirement on the average tanimoto distance to the set number of
                        "nearest neighbours" (Number of neighbours with the smallest tanimoto distances).
                        Local Compatibility Threshold is a requirement on the average F1 score determined from the
                        number of
                        nearest neighbours, using their respective precision and recall values computed from the
                        agreement
                        between their observed and triggered rules.
                        You can learn more about it in our wiki!
                    </div>
                    <!-- Use AD? -->
                    <div class="checkbox">
                        <label> <input type="checkbox" id="buildAD" name="buildAD">Also build an Applicability
                            Domain?</label>
                    </div>
                    <!-- Num Neighbours -->
                    <label for="adK">Number of Neighbours</label>
                    <input id="adK"
                           name="adK"
                           type="number"
                           class="form-control"
                           value="5"
                           step="1"
                           min="0"
                           max="10">
                    <!-- F1 Threshold -->
                    <label for="localCompatibilityThreshold">Local Compatibility Threshold</label>
                    <input id="localCompatibilityThreshold"
                           name="localCompatibilityThreshold"
                           type="number"
                           class="form-control"
                           value="0.5"
                           step="0.01"
                           min="0"
                           max="1">
                    <!-- Percentile Threshold -->
                    <label for="reliabilityThreshold">Reliability Threshold</label>
                    <input id="reliabilityThreshold"
                           name="reliabilityThreshold"
                           type="number"
                           class="form-control"
                           value="0.5"
                           step="0.01"
                           min="0"
                           max="1">
                </div>
                <!-- AD Stuff END               -->
            </form>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-default js-btn-step pull-left"
                        data-orientation="cancel"
                        onclick="reset()"
                        data-dismiss="modal"></button>
                <button type="button"
                        class="btn btn-default js-btn-step"
                        data-orientation="previous"></button>
                <button type="button"
                        class="btn btn-default js-btn-step"
                        data-orientation="next"
                        id="nextbutton"></button>
                <a id="modal-form-submit"
                   class="btn btn-primary" onclick="clickedSubmit()" href="#">Submit</a>
            </div>
        </div>
    </div>
</div>
<p>
<div id="modelcontent"></div>
</p>


<script language="javascript">


  var callback2 = function () {
      document.getElementById('nextbutton').style.visibility = 'hidden';
  };


  var callback1 = function () {
      document.getElementById('nextbutton').style.visibility = 'visible';
  };



  $('#newModelModal').modalSteps({
	btnCancelHtml: 'Cancel',
	btnPreviousHtml: 'Back',
	btnNextHtml: 'Advanced Options',
	btnLastStepHtml: 'Submit',
	disableNextButton: false,
	//completeCallback: callback , //completeCallback, //fullScenSubmit,
	callbacks: {
	    '1' : callback1,
	    '2': callback1,
	    '3': callback2
	}
    });


  var title = 'Relative Reasoning';
  var desc = 'A relative reasoning model applies machine learning to limit the combinatorial explosion.'
      + ' <a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn more &gt;&gt;</a>';

  makeLoadingGif('#modelcontent');
  $.ajaxSetup({
      async: false
  });
  getObjects(makeList, '#modelcontent', 'relative-reasoning', title, desc);
//  getObjects(makeList, '#modelcontent', 'relative-reasoning', title, desc, true);
  var actionsIdArray = ["#newModelModal"];
  var actionsNameArray = ["New Relative Reasoning"];
  var actionsGlyphiconArray = ["glyphicon glyphicon-plus"];
  makeActionsButton('#headingPanel', actionsIdArray, actionsNameArray, actionsGlyphiconArray);
  $.ajaxSetup({
      async: true
  });
  document.title = "enviPath - Relative Reasoning";

  // Check if ml server is available
  checkMLServer();

  function checkEvalType(){
    if(document.getElementById('clfType').value!="RULEBASED") {
	  document.getElementById('evalType').disabled = false;
	 }
	 if(document.getElementById('clfType').value=="RULEBASED") {
	  document.getElementById('evalType').disabled = true;
     }
  }

  function checkEvalLater(){
    if(document.getElementById('evaluateLater').checked) {
      console.log("disable package select as evallater was checked");
      $('#packageFormII').hide();
      $('.evalPackages').selectpicker('deselectAll');
	 } else {
	  console.log("enable package select as evallater was unchecked");
	  $('#packageFormII').show();
     }
  }

  // generic method to create a drop down for model-param
  function selector(label, name, values) {
      selec = "<div><label>"+label+"</label><br>";
      selec += "<select name='"+name+"' class='"+name+"' data-width='auto'>";
      for (i in values) {
	  selec += "<option>"+values[i]+"</option>";
      }
      selec += "</select></div>";
      // enable selectpicker javascript as soon as drop down is added to document
      $(document).arrive("."+name, function() {
	  $(this).selectpicker();
      });
      return selec;
  }

  // get model-param json and create dropdowns
  var pForm = document.getElementById('paramForms');
  //  $.getJSON("/relative-reasoning?params=true", function(paramsJson) {
  //      for (var i in paramsJson) {
  //         var name = paramsJson[i].param
  //         var label = name.replace(/^model/g, "");
  //         var values = paramsJson[i].values
  //         pForm.innerHTML += selector(label, name, values);
  //      }
  //  })
  //  .fail( function(d) {
  //      handleError(JSON.parse(d.responseText));
  //  });

  // get model-param json and create dropdowns
  var defaultPackageId;
  var rulesPackForm = document.getElementById('rulesPackageForm');
  var pathwayPackForm = document.getElementById('pathwayPackageForm');

  $.getJSON(getBasePath() + "/" + "package", function(result) {
      var allPackages = result.package;
      $.getJSON(getBasePath() + "/" + "package?getDefault", function(result) {
	  defaultPackageId = result.id;
	  rulesPackForm.innerHTML += createMultiSelectDropdown("Packages containing rules", "rulePackages" , allPackages, defaultPackageId);
	  pathwayPackForm.innerHTML += createMultiSelectDropdown("Packages containing pathways", "pathwayPackages" , allPackages, defaultPackageId);
      })
	  .fail( function(d) {
	      handleError(JSON.parse(d.responseText));
	  });
  })
    .fail( function(d) {
	handleError(JSON.parse(d.responseText));
    });

var packFormII = document.getElementById('packageFormII');

$.getJSON(getBasePath() + "/" + "package", function(result) {
	var allPackages = result.package;
	$.getJSON(getBasePath() + "/" + "package?getDefault", function(result) {
	defaultPackageId = result.id;
	packFormII.innerHTML += createMultiSelectDropdown("Evaluation Packages","evalPackages",allPackages,'');
	})
	.fail( function(d) {
		handleError(JSON.parse(d.responseText));
	});
})
  .fail( function(d) {
  handleError(JSON.parse(d.responseText));
  });

  // submit-button
  $('#modal-form-submit').on('click', function(e){
      e.preventDefault();
      $('#modal-form').submit();
  });

  // cancel button should re-set selected package
  $('#modal-form-cancel').on('click', function(e) {
      $('.packages').selectpicker('val',defaultPackageId);
  });

  if(!userIsWriterOnSite()) {
      document.getElementById('actionsButton').style.display = 'none';
  }


$.getJSON(getBasePath() + "/" + "plugin", function(result) {
    for(x in result["classifiers"]) {
        $("#clfType").append(new Option(result["classifiers"][x], result["classifiers"][x]));
    }
    var additionalFingerprinterForm = document.getElementById('additionalFingerprinterForm');
    var jsonArr = [];
    console.log(result['descriptors'])
    for(x in result["descriptors"]) {
        console.log(x);
        console.log(result['descriptors'][x]);
        jsonArr.push({
            id: result['descriptors'][x],
            name: result['descriptors'][x]
        });
    }
    console.log(jsonArr);
    additionalFingerprinterForm.innerHTML += createMultiSelectDropdown("Select additional descriptors","additionalDescriptors",jsonArr, null);
});
// Still disable since this index doesnt go the usual route (TODO: Fix)
//  // Add onscroll feature
//  $(window).scroll(onScrollAttachObjects);



  

</script>
<!-- [/variable 'content'] -->
    </div>



    <div class="container text-center">
      <hr />

      <div class="row">
	<div class="col-lg-12">
	  <ul class="nav nav-pills
		     nav-justified">
	    <li>
	      <a href="http://eawag.ch" target="_blank">
		<img id="image-ealogo"
                     height="60"
		   src="https://legacy.envipath.org//images/ealogo.gif"
		   alt="Eawag" />
	      </a>
	    </li>
	    <!-- <li> -->

	    <!--   <a href="http://www.uni-mainz.de/eng/" target="_blank"> -->
	    <!-- 	<img id="image-jgu-print" -->
            <!--          height="60" -->
	    <!-- 	   src="https://legacy.envipath.org//images/jgu-print.png" -->
	    <!-- 	   alt="Johannes Gutenberg-Universitaet Mainz" /> -->
	    <!--   </a> -->
	    <!-- </li> -->
	    <li>
	      <a href="http://ml.auckland.ac.nz" target="_blank">
		<img id="image-uoalogo"
                     height="60"
		   src="https://legacy.envipath.org//images/uoa.png"
		   alt="The Univserity of Auckland" />
	      </a>
	    </li>
	  </ul>
	</div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
	<ul class="nav nav-pills nav-justified">
	  <li><a href="https://envipath.com/imprint/"
		 target="_blank">Impressum/Imprint</a></li>
	  <li><a href="mailto:admin@envipath.org"
		 target="_blank">Contact</a></li>

	  <li><a href="http://envipath.com" target="_blank">
	      enviPath UG (haftungsbeschr&auml;nkt) &amp; Co. KG &copy;
	      <script type="text/javascript">
                document.write(new Date().getFullYear());
              </script></a></li>
	  <!-- <li><a href="http://www.informatik.uni-mainz.de/secondnavigation/legal-notice" -->
	  <!-- target="_blank">Legal Notice</a></li> -->
	</ul>
	</div>
    </div>


    <script type="text/javascript">
    if((navigator.userAgent.indexOf("MSIE") != -1 )
            || (!!document.documentMode == true )) {
        var theDiv = document.getElementById("internetExplorerWarning");
        var content = '<div class="alert '
                + 'alert-danger"> Please note: We are experiencing problems '
                + 'displaying pathways with Microsoft Internet Explorer and it is unlikely that there will '
                + 'be a solution any time soon! We suggest using Mozilla Firefox or Google Chrome instead.'
				+ '</div>';
        theDiv.innerHTML += content;
    }
    </script>

    <input type="hidden" id="refreshed" value="no">
				<script type="text/javascript">

	// TODO This needs a refactoring!!!

	$.getJSON("?getname=true",function(result){
	    if(result.name !== "" && result.name !== undefined) {
    	    document.title = document.title + " - " + result.name;
        }
	 });

				  // to refresh page after hitting back button
            addLoadEvent(function(){
                var e=document.getElementById("refreshed");
                if(e.value=="no")e.value="yes";
                else{e.value="no";location.reload();}
            });
        //fill breadcrumbs
        var url = window.location.href + "";
        var content = "<ol class='breadcrumb'>";
        var theDiv = document.getElementById("bread");


        if (appPath!="") {

//            Update href of links
            document.getElementById("packageLink").href = getBasePath() +
                "/package";
            document.getElementById("pathwayLink").href = getBasePath() +
                "/pathway";
            document.getElementById("ruleLink").href = getBasePath() + "/rule";
            document.getElementById("compoundLink").href = getBasePath() +
                "/compound";
            document.getElementById("reactionLink").href = getBasePath() +
                "/reaction";
            document.getElementById("relative-reasoningLink").href =
                getBasePath() +
                "/relative-reasoning";
            document.getElementById("scenarioLink").href = getBasePath() +
                "/scenario";
            document.getElementById("settingLink").href = getBasePath() +
								"/setting";
            document.getElementById("userLink").href = getBasePath() + "/user";
            document.getElementById("groupLink").href = getBasePath() + "/group";
            document.getElementById("searchLink").href = getBasePath() + "/search";
            document.getElementById("contributorsLink").href = getBasePath() +
								"/contributors";
            document.getElementById("fundingLink").href = getBasePath() +
								"/funding";
            document.getElementById("licenceLink").href = getBasePath() +
								"/licence";
            document.getElementById("wikiLink").href = "https://wiki.envipath.org/";
            //Update signup
            document.getElementById("signup-action").action = getBasePath() + "/" +
                "user";
        }


        // Get Pathname by taking the difference between full url and basePath
        var currentPathname = window.location.href.replace(getBasePath(),"");
        var active = "Active";
        var locationName = "Location";
        if (currentPathname){
            var pathArray = currentPathname.split( '/' );
            content += "<li><a href='" + getBasePath() + "'>Home</a></li>";
            for (j = 0; j < pathArray.length; j++) {
                if (pathArray[j] === "") continue;
                if (pathArray[j] === "index") continue;
                var newPathname = getBasePath();

                for (i = 1; i < j+1; i++) {
                    newPathname += "/";
                    newPathname += pathArray[i];
                }

                if (i === pathArray.length) {
                    active = pathArray[j];
                    // if active is an ID get name from json
                    if ((active.length === 36)
                        && (active.indexOf("-") === 8)
                        && (active.indexOf("-",9) === 13)
                        && (active.indexOf("-",14) === 18)
                        && (active.indexOf("-",19) === 23)){

                        $.ajaxSetup({
                            async: false
                        });
                        $.getJSON("?getname=true", function(result) {
                            active = result.name;
                        })
                            .fail( function(d) {
                                handleError(JSON.parse(d.responseText));
                            });
                    } else {
											/* if ((active != "funding") && (active != "documentation")
											 && (active != "contributors") && (active != "lhs")
											 && (active != "rhs")){
											 active = active.concat("s");
											 }*/
											// Capitalize active
												// active = active.capitalize();
                        active = active.charAt(0).toUpperCase() +
														active.slice(1);
                    }

                    content += "<li class='active'>" + active + "</a></li>";
                    $.ajaxSetup({
                        async: true
                    });
                } else {
                    locationName = pathArray[j];
                    if ((locationName.length === 36)
                        && (locationName.indexOf("-") === 8)
                        && (locationName.indexOf("-",9) === 13)
                        && (locationName.indexOf("-",14) === 18)
                        && (locationName.indexOf("-",19) === 23)){

                        $.ajaxSetup({
                            async: false
                        });

                        $.getJSON(newPathname + "?getname=true", function(result) {
                            locationName = result.name;
                        })
                            .fail( function(d) {
                                handleError(JSON.parse(d.responseText));
                            });
                    } else {
                        if((locationName != "rhs") && (locationName != "lhs"))
                        //locationName = locationName.concat("s");
                        // simple-rule / parallel-rule / composite-rule are all shown under rule
                            if (locationName.indexOf("-rule") > -1) {
                                newPathname = newPathname.substring(0,newPathname.lastIndexOf("/")+1)+"rule";
                                locationName = locationName.replace(/^.*-/,"");
                            }
												// Capitalize
												//locationName = locationName.capitalize();
                        locationName = locationName.charAt(0).toUpperCase() +
                            locationName.slice(1);
                    }

                    content += "<li><a href='" + newPathname + "'>"
                        + locationName + "</a></li>";
                    $.ajaxSetup({
                        async: true
                    });
                }
            }
            content += "</ol>";
        } else {
            content += "<li><a href='"+ url +"'>Home</a></li></ol>"
        }
        // don't show breadcrumbs on start page
        if(window.location.href == getBasePath() || pathArray[1] == "") {
            content = "";
        }
        theDiv.innerHTML += content;
		</script>
				<script>
				whoAmI();
      //enables popovers on all elements of the ppsPopover class
      var url = window.location.href + "";
      if(url.indexOf("justRegistered=true") > -1){
          var theDiv = document.getElementById("justRegistered");
          var content = '<div class="alert '
                  + 'alert-warning"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button> Received registration request!'
	          + ' To complete your'
	          + ' registration, click the confirmation'
                  + ' link in the E-Mail we just send you, to complete'
                  + ' your registration! Make sure to do this before trying to log in.</div>';
          theDiv.innerHTML += content;
      }

      if(url.indexOf("activationSuccessful") > -1){
          var theDiv = document.getElementById("activationStatus");
          var content = '<div class="alert '
                  + 'alert-success"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button> Your activation was successful!</div>';
          theDiv.innerHTML += content;
      }

      if(url.indexOf("alreadyExisting") > -1){
    	  var obj = "object";

    	  if(url.indexOf("compound") > -1){
    		  obj = "compound";
    	  }
    	  if(url.indexOf("reaction")){
    		  obj = "reaction";
    	  }

    	  var theDiv = document.getElementById("alreadyExisting");
          var content = '<div class="alert '
                  + 'alert-success"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button>You are redirected to an equal '+obj+'! But you can modify it.</div>';
          theDiv.innerHTML += content;

      }

      if(url.indexOf("activationFailed") > -1){
          var theDiv = document.getElementById("activationStatus");
          var content = '<div class="alert '
                  + 'alert-danger"> Your activation was not successful! '
                  + 'Please check the activation link. '
                  + 'If your activation link is broken please contact: admin@envipath.org'
                  + '</div>';
          theDiv.innerHTML += content;
      }

      if(url.indexOf("alreadyActivated") > -1){
          var theDiv = document.getElementById("activationStatus");
          var content = '<div class="alert '
                  + 'alert-warning"> The account is already activated and can be used to log in.'
                  + '</div>';
          theDiv.innerHTML += content;
      }

      if(url.indexOf("nothingChanged") > -1){
          var theDiv = document.getElementById("nothingChanged");
          var content = '<div class="alert '
                  + 'alert-danger"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button> You have not entered any input, nothing was changed! '
                  + '</div>';
          theDiv.innerHTML += content;
      }

	  // Give feedback whether the password was changed
      if(url.indexOf("passwordChanged") > -1) {
      	  var theDiv = document.getElementById("passwordChanged");
          var content = '<div class="alert '
                  + 'alert-success"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button> Password successfully changed! '
                  + '</div>';
          theDiv.innerHTML += content;
      }

      //alert if user wants to change group owner without being the current user
      if(url.indexOf("permissionToChangeOwner=false") > -1){
          var theDiv = document.getElementById("noPermission");
          var content = '<div class="alert '
                  + 'alert-danger"> <button type="button" class="close" '
                  + 'data-dismiss="alert" aria-label="Close"><span aria-hidden="true"'
                  + '>&times;</span></button> You must be the current owner of the group '
                  + 'to change the ownership of the group!</div>';
          theDiv.innerHTML += content;
      }
      document.getElementById('redirectTo').value = url;
      $('.ppsPopover').popover();
    </script>


  </body>
</html>