<!--<?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'] -->
<div class="modal fade" tabindex="-1" id="newPwModal" role="dialog"
     aria-labelledby="newPwModal" aria-hidden="true">
  <!-- FIXME: make width dynamic-->
  <div class="modal-dialog-multiple" id="addmodal" style="width:900px">
    <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>
      <div id="duplicates"></div>
      <div class="modal-body hide"
	   data-step="1" data-title="New Pathway">
        <div class="jumbotron">Create a new pathway by entering
          the root compound and a name. Then select if you want to
          use the prediction engine to generate a predicted pathway or
          create an empty pathway that you fill in by yourself. If
          you choose to predict a pathway, you can modify the
          settings for the prediction, or use the default settings
          and just click Submit.</div>
		<div class="modal-body">
			<div class="alert alert-warning">
				Pathways entered or predicted as anonymous user
				will be deleted after 30 days. Please log in to save your results.
			</div>
		</div>
	
	
	<div class="row">
	  <div class="col-md-6">
	    <label for="name">Name</label> <input id="name"
						  class="form-control"
						  name="name"
						  placeholder="Name" />
	    <label for="description">Description</label> <input id="description"
								class="form-control"
								name="description"
								placeholder="no description" />
    </div>
    
	  <div class="col-md-6">
        <label for="predict">Predict pathway or build yourself?</label>
        <div class="radio" id="predict">

          <p>
            <label><input type="radio"
                    name="predict"
                    id="radioPredict"
                    onclick="clickedRadios()"
                    value="predict" checked
                    />Predict pathway
            </label>
          </p>
			<p>
				<label><input type="radio"
							  name="predict"
							  id="radioIncremental"
							  onclick="clickedRadios()"
							  value="incremental"
				/>Incremental prediction
				</label>
			</p>
          <p>
            <label><input type="radio"
              name="predict"
              id="radioBuild"
              value="build"
              onclick="clickedRadios()"
              />Build pathway
            </label>
          </p>

        </div>
        
        <!-- <label for="rootOnly">sd<input style="float:right; margin-left:1em" -->
        <!-- 				 type="checkbox" -->
        <!-- 				 name="rootOnly" -->
        <!-- 				 value="rootOnly" -->
        <!-- 				 id="rootOnly"> -->
      </div>
	</div>
	<label for="smilesinput">SMILES</label>
				<table style="width: 100%">
					<colgroup>
						<col span="1" style="width: 90%;">
						<col span="1" style="width: 10%;">
					</colgroup>
					<tr>
						<td>
							<input id="smilesinput"
										 class="form-control"
										 name="smilesinput"
										 placeholder="C1CCCCC1"
										 autocapitalize="none"
										 onkeypress="checkPressEnterUpdate(event);"/>
						</td>
						<td>
							<button type="button"
											class="btn btn-default"
											onclick="textfieldUpdate(document.getElementById('smilesinput'))">
								Render</button>
						</td>
					</tr>
				</table>


	
	<p id="ketcher_container"></p>
        <div id=noSmiles></div>
	<div>
	  <iframe id="ifKetcher"
						src="/js/ketcher2/ketcher.html" width="850"
						height="510"></iframe>
	</div>
	
      </div>
      
      <!-- <form id="modal-form" accept-charset="UTF-8" action=""
	   data-remote="true" method="post">-->
      <div class="modal-body hide" data-step="2" data-title="New
							     Pathway
							     -
							     Advanced Settings">
	
	<div class="jumbotron">Choose if you want to use an existing
	  setting, or create a new one for this pathway
	  prediction. Then click Submit to use the specified setting,
	  or click next to set the parameters. </div>
	
	<div id="settings">
	  
	  <div class="radio" id="settingRadio">
	    <p>
	      <label><input type="radio"
			    name="existing"
			    id="radioDefault"
			    onclick="clickedRadiosSetting()"
			    value="exisiting" checked/>Use
		Default</label>
            </p>
            <p>
	      <label><input type="radio"
			    name="existing"
			    id="radioExists"
			    onclick="clickedRadiosSetting()"
			    value="exisiting"/>Select Existing</label>
	    </p>
	    <p>
	      <label><input type="radio"
			    name="existing"
			    id="radioNew"
			    onclick="clickedRadiosSetting()"
			    value="temporary"/>Create New</label>	
	    </p>
	  </div>
	  
	  <!-- TruncationStrategy goes here -->

	  <select id="settingSelect" name="settingSelect" class="form-control">
	    <!-- Append options here -->
	  </select>
	  <!-- <p></p> -->
	  <!--     <button type="button" class="btn btn-primary pull-right" onclick="setSelSetting()" >Set Setting</button> -->
	      
	  <!--   </div> -->
	  <p></p>
	</div>
	
	
	
      </div>
      <div id="newSettingModalContent"></div>
      
      <!-- </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"
		id="backbutton"></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> 
	<!-- <button type="button" class="btn btn-default" onclick="reset()" data-dismiss="modal">Cancel</button> -->
	
      </div>
    </div>
  </div>
</div>

<p></p>
<div id="pathwaycontent"></div>

  <script language="javascript">
	document.getElementById("ifKetcher").src = getBasePath() + "/" + "js/ketcher2/ketcher.html";
	$.ajaxSetup({async: false})
	$("#newSettingModalContent").load(getBasePath() + "/templates/setting/newSettingModal.html");
	$.ajaxSetup({async: true})
	$("#selrr").attr("data-step","3");
	$('#selpack').attr("data-step","4");
	$("#seltrunc").attr("data-step","5");
	$("#summary").attr("data-step","6");
	// For ketcher smiles synchronisation
      // on click in iframe functions do not work, therefore I use a timer interval for now
      setInterval(function() {
          ketcherUpdateLoop("smilesinput");
      }, 250);

      function keyPressedSmilesInput(event){
          if (event.which == 13 || event.keyCode == 13) {
              beforeSubmit();
              return false;
          }
          return true
      }


      beforeSubmit = function() {
		  if (!isInputGiven("smilesinput")) {
			  return;
		  }

		  $.getJSON(getBasePath() + "/" +
				  "pathway?rootNode=" + encodeURIComponent($('#smilesinput').val()), function (result) {
			  if (result.pathway) {
				  iterateOverFoundPWs(result);
			  }

			  if (result.object) {
				  $("#index-form").attr("action", getBasePath() + "/" + "pathway");
				  $("#index-form").submit();
			  }
		  })
	  }

	$.getJSON(getBasePath() + "/" + "setting",function(result){
		ppsJsonToDropdown(result.setting, "#settingSelect");
	})
	.fail( function(d) {
		handleError(JSON.parse(d.responseText));
	});


  function clickedRadios(){
    if(document.getElementById('radioBuild').checked) {
	  document.getElementById('nextbutton').disabled = true;
      }
      if(document.getElementById('radioPredict').checked) {
	  document.getElementById('nextbutton').disabled = false;
      }
  }

  

  function clickedRadiosSetting(){
      if(document.getElementById('radioNew').checked) {
	  $("#settingSelect").prop("disabled",true);
          $("#nextbutton").prop("disabled",false);
      }

      if(document.getElementById('radioExists').checked) {
          $("#settingSelect").prop("disabled",false);
          $("#nextbutton").prop("disabled",true);
      }

      if(document.getElementById('radioDefault').checked) {
          $("#settingSelect").prop("disabled",true);
          $("#nextbutton").prop("disabled",true);
      }
  }

	var callback1 = function () {
		document.getElementById('nextbutton').innerHTML = "Advanced";
	};

	var callback2 = function () {
		document.getElementById('nextbutton').innerHTML = "Next";
		if(!document.getElementById('radioNew').checked) {
			$("#nextbutton").prop("disabled", true);
		}
		if(!document.getElementById('radioExists').checked) {
			$("#settingSelect").prop("disabled", true);
		}

		$("#modal-form-submit").show();
	};

	var callback3 = function () {
		//document.getElementById('nextbutton').style.visibility = 'hidden';
		document.getElementById('nextbutton').innerHTML = "Next";
		$("#modal-form-submit").hide();

	};

	var callback = function() {
		clickedSubmit();
	}

  $('#newPwModal').modalSteps({
      btnCancelHtml: 'Cancel',
      btnPreviousHtml: 'Back',
      btnNextHtml: 'Advanced',
      btnLastStepHtml: 'Submit',
      disableNextButton: false,
      completeCallback: callback , //completeCallback, //fullScenSubmit,
      callbacks: {
	  '1' : callback1,
	  '2': callback2,
	  '3' : callback3
      }
  });
  
  var smiles = "";
  
  var title = 'Pathways';
  
  var desc = 'A pathway displays the (predicted) biodegradation of a compound as graph.'
      + ' <a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more &gt;&gt;</a>';
  
  function getSmiles() {
      var smilesInput = document.getElementById("smilesinput").value;
      if (smilesInput) {
          return smilesInput;
      }
      var ketcher = getKetcher();
      if (ketcher) {
	  		return ketcher.getSmiles();
      } else {
	  		return "";
      }
  }

  document.title = "enviPath - Pathways";
  makeLoadingGif('#pathwaycontent');
  $.ajaxSetup({
      async: false
  });
  getObjects(makeList, '#pathwaycontent', 'pathway', title, desc, true);
  var actionsIdArray = ["#newPwModal"];
  var actionsNameArray = ["New Pathway"];
  var actionsGlyphiconArray = ["glyphicon glyphicon-plus"];
  if(userIsWriterOnSite()){
      makeActionsButton('#headingPanel', actionsIdArray, actionsNameArray, actionsGlyphiconArray);
  }
  $.ajaxSetup({
      async: true
  });


  function clickedSubmit() {
      var sm = getSmiles();
      if(sm === "") {
	  var theDiv = document.getElementById("noSmiles");
	  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> Please enter a valid SMILES.</div>';
	  theDiv.innerHTML += content;
	  $("#newPwModal").modal('toggle');
	  alert("Please enter a valid SMILES.");
	  return;
      }
      
      var pwName = $("#name").val();
      
      var sameName;
      
      var sameRoot;
      
      $.ajaxSetup({
	  async: false
      });
      if(name !== "") {
	  $.getJSON("?name=" + pwName, function (result) {
	      sameName = result;
	  });
      }
      $.getJSON(getBasePath() + "/" + "pathway?rootNode="+encodeURIComponent(sm),
					function
					(result) {
	  sameRoot = result;
      });
      
      $.ajaxSetup({
	  async: true
      });
      console.log("a");
      if ((sameName && sameName.length > 0) || (sameRoot  && sameRoot.length > 0)) {
	  console.log(sameName);
	  console.log(sameRoot);

	  iterateOverFoundPWs(sameName, sameRoot);
      } else {
	  console.log("b");
	  postAll();
      }
  }
  
  function iterateOverFoundPWs(sameName, sameRoot) {
      var content = '<ul class="list-group" style="overflow-y: initial">';
      var foundone = false;
      if(sameName) {
	  for (var pw in sameName.pathway) {
	      content += '<a class="list-group-item" href="' + sameName.pathway[pw].id + '">';
	      content += sameName.pathway[pw].name + " (same name)";
	      content += '</a>';
	      foundone = true;
	  }
      }
      
      if (sameRoot) {
	  
	  for (var pw in sameRoot.pathway) {
	      content += '<a class="list-group-item" href="' + sameRoot.pathway[pw].id + '">';
	      content += sameRoot.pathway[pw].name + " (same root)";
	      content += '</a>';
	      foundone = true;
	  }
      }
      content += '</ul>';
      if(foundone){
	  $("#foundPathways").append(content);
	  $("#foundMatching").modal();
      }
  }

	// Add onscroll feature
	$(window).scroll(onScrollAttachObjects);

  </script>

<div class="modal fade"
     tabindex="-1"
     id="foundMatching"
     role="dialog"
     aria-labelledby="foundModal"
     aria-hidden="true">
  <div class="modal-dialog">
    <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="modal-title"
	    id="newPackMod">Found Pathway in Database</h4>
      </div>
      <div class="modal-body">
	<p>We found at least one pathway in the database with the
	  given name and/or with the given root compound.
	  Do you want to open any of the existing pathways or
	  predict a new one? To open an existing pathway, simply click
	  on the pathway, to create a new one, click Predict. The predicted
	  pathway might differ from the ones in the database due to the
	  settings used in the prediction.</p>
	
	<div id="foundPathways"></div>
	
	
	
      </div>
      <div class="modal-footer">
	<a id="modal-predict"
	   class="btn btn-primary"
	   href="#">Predict</a>
	
	<button type="button"
		class="btn btn-default"
		data-dismiss="modal">Cancel</button>
	
      </div>
    </div>
  </div>
</div>

<script language="javascript">
    $('#modal-predict').on('click', function(e) {
	e.preventDefault();
	postAll();
    });
  
</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>