<!--<?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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!-- <script src="/js/d3.min.js"></script> -->
<script src="https://community.envipath.org/javascripts/embed-topics.js"></script>

<br>
<br>

<style>

  .btn-inverse {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #363636;
  *background-color: #222222;
  background-image: -moz-linear-gradient(top, #444444, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  background-image: -webkit-linear-gradient(top, #444444, #222222);
  background-image: -o-linear-gradient(top, #444444, #222222);
  background-image: linear-gradient(to bottom, #444444, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  }
  
  .btn-inverse:hover,
  .btn-inverse:focus,
  .btn-inverse:active,
  .btn-inverse.active,
  .btn-inverse.disabled,
  .btn-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  }
  
  .btn-inverse:active,
  .btn-inverse.active {
  background-color: #080808 \9;
  }
  
  .btn-inverse.active {
  color: rgba(255, 255, 255, 0.75);
  }


              .ep-launch-widget {
                font-family:
                    system-ui,
                    -apple-system,
                    sans-serif;
                text-align: center;
                padding: 2rem;
                max-width: 800px;
                margin: 0 auto;
            }

            .ep-launch-widget h2 {
                margin: 0 0 2rem 0;
                font-size: 1.5rem;
                font-weight: 600;
            }

            .ep-launch-widget .ep-main-section {
                margin: 0 0 2rem 0;
            }

            .ep-launch-widget .ep-flex-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3rem;
                flex-wrap: wrap;
            }

            /* Benzene spinner */
            .ep-launch-widget .ep-benzene {
                width: 120px;
                height: 120px;
                position: relative;
                flex-shrink: 0;
            }

            .ep-launch-widget .ep-benzene-spinner {
                width: 100%;
                height: 100%;
                animation: ep-spin 12s linear infinite;
            }

            .ep-launch-widget .ep-benzene-spinner svg {
                width: 100%;
                height: 100%;
                filter: drop-shadow(0 0 20px rgba(20, 184, 166, 0.3));
            }

            .ep-launch-widget .ep-benzene-hexagon {
                fill: #14b8a6;
                stroke: #14b8a6;
                background: red;
            }

            @keyframes ep-spin {
                100% {
                    transform: rotate(360deg);
                }
            }

            .ep-launch-widget .ep-benzene-orbital {
                position: absolute;
                border: 1px solid rgba(20, 184, 166, 0.2);
                border-radius: 50%;
                animation: ep-orbit 15s linear infinite;
            }

            .ep-launch-widget .ep-benzene-orbital-1 {
                top: -15px;
                left: -15px;
                right: -15px;
                bottom: -15px;
            }

            .ep-launch-widget .ep-benzene-orbital-2 {
                top: -30px;
                left: -30px;
                right: -30px;
                bottom: -30px;
                border-color: rgba(34, 211, 238, 0.1);
                animation-duration: 20s;
                animation-direction: reverse;
            }

            .ep-launch-widget .ep-benzene-dot {
                position: absolute;
                width: 4px;
                height: 4px;
                background: #22d3ee;
                border-radius: 50%;
                top: 50%;
                left: 0;
                transform: translate(-50%, -50%);
                box-shadow: 0 0 8px #22d3ee;
            }

            @keyframes ep-orbit {
                100% {
                    transform: rotate(360deg);
                }
            }

            /* Countdown timer */
            .ep-launch-widget .ep-countdown {
                display: flex;
                gap: 1rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            .ep-launch-widget .ep-countdown-unit {
                text-align: center;
                min-width: 70px;
            }

            .ep-launch-widget .ep-countdown-value {
                font-family: "JetBrains Mono", "Courier New", monospace;
                font-size: 2.5rem;
                font-weight: 600;
                line-height: 1;
                margin: 0 0 0.25rem 0;
            }

            .ep-launch-widget .ep-countdown-label {
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                opacity: 0.6;
                margin: 0;
            }

            /* Responsive */
            @media (max-width: 600px) {
                .ep-launch-widget .ep-flex-container {
                    gap: 2rem;
                }

                .ep-launch-widget .ep-benzene {
                    width: 100px;
                    height: 100px;
                }

                .ep-launch-widget .ep-countdown-value {
                    font-size: 2rem;
                }
            }
</style>


<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 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 predict 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();
      $("#index-form").submit();  
      
  });
  
</script>


<div class="jumbotron">
  <h1>
    <img id="image-logo-long" class="img-responsive" alt="enviPath"
				 width="1000ex" src="/images/logo-long.svg"/></h1>
  <p>enviPath is a database and prediction system for the microbial
    biotransformation of organic environmental contaminants. The
    database provides the possibility to store and view experimentally
    observed biotransformation pathways. The pathway prediction system
    provides different relative reasoning models to predict likely biotransformation
    pathways and products. You can try it out below.</p>
  <p>
    <a class="btn btn-inverse"  target="_blank" href="https://wiki.envipath.org/index.php/Main_Page" role="button">Learn
      more &gt;&gt;</a>
  </p>
</div>

<div>
  
  <form id="index-form" action="/pathway" method="POST" style="margin:0; padding:0; display:block;">
    <div class="input-group">
      <div class="input-group-btn">
	<!-- onclick reload iframe(only if firefox is used, to fix getComputedStyle = null error) sometimes slower (around half a second additional loading time), but it works -->
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick="if(navigator.userAgent.indexOf('Firefox') != -1){ document.getElementById('ifKetcher').contentWindow.location.reload();}"> <span class="caret"></span></button>
	<ul class="dropdown-menu" role="menu">
	  <li>
            <iframe name="iframe" id="ifKetcher"
										src="/js/ketcher2/ketcher.html"
										width="850"
		    height="510"></iframe> <!-- old width: 970 -->
	  </li>
	</ul>
	
	
      </div><!-- /btn-group -->
      
      
      <input id="smilesinput" type="text" class="form-control" aria-label="main-input" name="smilesinput"
             placeholder="SMILES"
						 onblur="textfieldUpdate(this);"
             autocapitalize="none" onkeypress="return keyPressedSmilesInput(event)"/>
      <span class="input-group-btn">
	
	
	<button class="btn btn-default" type="button" id="run-button" onclick="beforeSubmit();">Go!</button>
	
	
	<script type="text/javascript">
	  function keyPressedSmilesInput(event){
	      if (event.which == 13 || event.keyCode == 13) {
		  beforeSubmit();
		  return false;
	      }
	      return true
	  };
	  
	  
	  beforeSubmit = function(){
	      if(!isInputGiven("smilesinput")) {
		  return;
	      }
	      
	      //$("#index-form").submit();
	      $.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();  
		  }
	      })
	  }
	  
	  
	  function iterateOverFoundPWs(pws){
	      var content ='<ul class="list-group">';
	      var foundone = false;
	      for ( var pw in pws.pathway) {
		  if(pws.pathway[pw].reviewStatus == "reviewed"){
		      content += '<a class="list-group-item" href="'+  pws.pathway[pw].id +'">';
		      content += pws.pathway[pw].name;
		      content += '</a>';
		      foundone=true;
		  }
		  
	      }
	      content += '</ul>';
	      if(foundone){
		  $("#foundPathways").append(content);
		  $("#foundMatching").modal();
		  
	      } else {
          $("#index-form").attr("action", getBasePath() + "/" + "pathway");
					$("#index-form").submit();
		  
	      }
	  }
	  
	</script>
      </span>
  </form>
  </div><!-- /input-group -->
  
  
  <script language="javascript">
    document.title = "enviPath";


    // on click in iframe functions do not work, therefore I use a timer interval for now
    setInterval(function() {
    ketcherUpdateLoop("smilesinput");
    }, 250);
    
  </script>
  
  <style type="text/css">
    .infoboxes {
      margin-top: 10ex;
    }
  </style>
  
  
  <div class="infoboxes">
    <style type="text/css">
      .fixed-panel {
      min-height: 100ex;
      max-height: 100ex;
      overflow-y: scroll;
      }
      .panel > .panel-heading {
	  background-image: none;
	  background-color: black;
	  color: white;
      }
      .panel {
	  border-color: black;
      }
    </style>
    
    <!-- <div class="embed-responsive embed-responsive-16by9"> -->
    <!-- <iframe class="embed-responsive-item" -->
    <!-- src="https://www.youtube.com/embed/NkAe30aEG5c" -->
    <!-- frameborder="0" allowfullscreen></iframe> -->
    <!-- </div> -->
    
    <div class="row">
      <div class="col-sm-12 col-md-4">
	<div class="panel panel-primary fixed-panel">
	  <!-- <div class="panel-heading"> -->
	<!--     Twitter -->
	<!--   </div> -->
	<!--   <div class="panel-body"> -->
	<!--     <a href="https://twitter.com/enviPath" -->
	<!--        class="twitter-follow-button" -->
	<!--        data-show-count="false">Follow @enviPath</a> -->
	<!--     <a class="twitter-timeline" -->
	<!--        href="https://twitter.com/enviPath">Tweets by -->
	<!--       enviPath</a> -->
	<!--     <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->

	<!--   </div> -->
	<!-- </div> -->
	  <div class="panel-heading">
	    <a href="https://mstdn.science/@enviPath">Mastodon</a>
	  </div>
	  <div class="panel-body">
	    <iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="325" height="800" src="https://www.mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmstdn.science%2Fusers%2FenviPath&theme=light&size=100&header=true&replies=true&boosts=true"></iframe>
	  </div>
	</div>
      </div>
      <div class="col-sm-12 col-md-4">
	<div class="panel panel-primary fixed-panel">
	  <div class="panel-heading">
            News
	  </div>
	  <div class="panel-body">
            <ul class="list-group">
              <div id="rssfeed"></div>
              
                          <d-topics-list discourse-url="https://community.envipath.org" per-page="10" category="10" template="complete"></d-topics-list>

              <!-- <li class="list-group-item"><h4 class="list-group-item-heading">Update -->
	      <!-- 	  - July 7, 2016 -->
	      <!-- 	</h4> -->
	      <!-- 	<p> -->
	      <!-- 	  We just deployed another update, most changes are on a -->
	      <!-- 	  lower level. Some important updates are: Introduction of -->
	      <!-- 	  multiple structures for one compound, updates in -->
	      <!-- 	  relative reasoning (more updates on this will come in -->
	      <!-- 	  the next month), introduction of a mapping servlet to -->
	      <!-- 	  map PPS rules to enviPath URIs, and many more.  -->
	      <!-- 	  A changelog is -->
	      <!-- 	  given <a href="https://wiki.envipath.org/index.php/Changelog_0.2.9">here</a>. 	       -->
	      <!-- 	</p> -->
              <!-- </li> -->
	      <!-- <li class="list-group-item"><h4 class="list-group-item-heading">Update -->
	      <!-- 	  and Publication - December 14, 2015 -->
	      <!-- 	</h4> -->
	      <!-- 	<p> -->
	      <!-- 	  We released another minor update that prepares the system -->
	      <!-- 	  for more biotransformation rules. Additionally, we fixed -->
	      <!-- 	  a bug that prevented the display of reviewed compounds in -->
	      <!-- 	  the system, all imported compounds from BBD should be -->
	      <!-- 	  visible again. In the next days, we will import another set -->
	      <!-- 	  of transformation rules. We are currently working on -->
	      <!-- 	  providing more return types for the system, as well as -->
	      <!-- 	  fixing existing bugs and preparing the system for the -->
	      <!-- 	  next steps. As always, if you notice any problems with -->
	      <!-- 	  enviPath, please tell us using -->
	      <!-- 	  the <a href="https://lists.sourceforge.net/lists/listinfo/envipath-user">  -->
	      <!-- 	    mailing list</a>. -->
	      <!-- 	</p> -->
	      <!-- 	<p> -->
	      <!-- 	  A few weeks ago, our submission to NAR was published in the -->
	      <!-- 	  NAR early acces. It is available <a target="_blank" -->
	      <!-- 					      href="http://nar.oxfordjournals.org/content/early/2015/11/17/nar.gkv1229.full.pdf+html">here</a>. Please -->
	      <!-- 	  cite this paper when refering  -->
	      <!-- 	  to enviPath:<br> -->
	      <!-- 	  Wicker, J&ouml;rg; Lorsbach, Tim; G&uuml;tlein, Martin; Schmid, Emanuel; Latino, Diogo; Kramer, Stefan; Fenner, Kathrin -->
	      <!-- 			      enviPath - The Environmental Contaminant Biotransformation Pathway Resource. -->
	      <!-- 			      Nucleic Acid Research, 2015. -->
	      <!-- 			      </p> -->
              <!-- </li> -->
	      
	      
	      
	      <!-- <li class="list-group-item"><h4 class="list-group-item-heading">Migration -->
	      <!-- 	  from EAWAG-BBD/PPS to enviPath - November 5, 2015 -->
	      <!-- 	</h4> -->
	      <!-- 	<p> -->
	      <!-- 	  Another update to enviPath was just deployed. It -->
	      <!-- 	  consists mainly of smaller bugfixes and improvements -->
	      <!-- 	  in the user interface. We are still in the process -->
	      <!-- 	  of importing data from EAWAG-BBD/PPS to -->
	      <!-- 	  enviPath. The data from BBD (mostly pathways) are -->
	      <!-- 	  already fully imported, but we still are working on -->
	      <!-- 	  importing the biotransformation rules. Currently, we -->
	      <!-- 	  have 45 rules from PPS in enviPath. We will add a -->
	      <!-- 	  few more rules in the next days, and plan to have -->
	      <!-- 	  most of the rules imported in the next few months. The -->
	      <!-- 	  status of the migration from PPS to enviPath is -->
	      <!-- 	  shown <a href="/migration">here</a>. The import of -->
	      <!-- 	  the rules is a long process, we have to export the -->
	      <!-- 	  rules from Chemaxon, and import them into the -->
	      <!-- 	  <a href="http://ambit.sourceforge.net/AMBIT2-LIBS/ambit2-smarts/" -->
	      <!-- 	     target="_blank">Ambit SMARTS/SMIRKS</a> library. We -->
	      <!-- 	  use this process to evaluate the rules -->
	      <!-- 	  systematically and fix the problems we identify. If -->
	      <!-- 	  you notice any problems with a biotransformation -->
	      <!-- 	  rule (for example wrongly predicted reactions), -->
	      <!-- 	  please tell us using -->
	      <!-- 	  the <a href="https://lists.sourceforge.net/lists/listinfo/envipath-user"> -->
	      <!-- 	    mailing list</a>. -->
	      <!-- 	</p> -->
              <!-- </li> -->
	      
	      
              <!-- <li class="list-group-item"><h4 class="list-group-item-heading">Release -->
	      <!-- 	  - September 15, 2015 -->
	      <!-- 	</h4> -->
	      <!-- 	<p>We just released a new version of enviPath. Although -->
	      <!-- 	  there are still some minor known issues, this release -->
	      <!-- 	  can be considered as stable. This is the initial stable release, an -->
	      <!-- 	  overview of the features is given <a target="_blank" -->
	      <!-- 					       href="https://wiki.envipath.org/">in our wiki</a>. Feel free to -->
	      <!-- 	  contribute and upload your data.</p> -->
	      <!-- 	<p>If you find any problems, or have any suggestions or -->
	      <!-- 	  questions please -->
	      <!-- 	  send <a href="mailto:admin@envipath.org">an email</a> -->
	      <!-- 	  or ontact us using -->
	      <!-- 	  the <a href="https://lists.sourceforge.net/lists/listinfo/envipath-user"> -->
	      <!-- 	    mailing list</a>.</p>  -->
              <!-- </li> -->
              <!-- <li class="list-group-item"><h4 class="list-group-item-heading">Update -->
	      <!-- 	  - August 21, 2015 -->
	      <!-- 	</h4> -->
	      <!-- 	<p>enviPath is close to a stable release, scheduled for -->
	      <!-- 	  September 15, 2015. Most functionality is already -->
	      <!-- 	  included into the system, and a large fraction of the -->
	      <!-- 	  data from the UM-BBD is already imported. In the next -->
	      <!-- 	  weeks until the stable release, the system will be updated -->
	      <!-- 	  more frequently.</p> -->
	      <!-- 	<p>There are some known issues, we work on fixing them -->
	      <!-- 	  at the moment. Some of them are: -->
	      <!-- 	  <ul> -->
	      <!-- 	    <li>Internet Explorer / MS Edge is not fully -->
	      <!-- 	      supported</li> -->
	      <!-- 	    <li>Text input on start page does not work, please -->
	      <!-- 	      use the draw function</li> -->
	      <!-- 	    <li>Several minor problems when displaying scenarios</li> -->
	      <!-- 	  </ul> -->
	      <!-- 	</p> -->
	      <!-- 	<p>If you find any problems, please send -->
	      <!-- 	  <a href="mailto:admin@envipath.org">an email</a> or -->
	      <!-- 	  contact us using -->
	      <!-- 	  the <a href="https://lists.sourceforge.net/lists/listinfo/envipath-user"> -->
	      <!-- 	    mailing list</a>.</p>  -->
              <!-- </li> -->
            <!-- </ul> -->
	  </div>
	  
	</div>
      </div>
      
      <div class="col-sm-12 col-md-4">
	<div class="panel panel-primary fixed-panel">
	  <div class="panel-heading">
            Latest Pathway
	  </div>
	  <div class="panel-body">
            <p id="latestpwName"></p>
            <p id="viz"></p>
	  </div>
	  <div class="panel-heading">
	    enviPath 101
	  </div>
	  <div class="panel-body">
            <ul class="list-group">
	      <li class="list-group-item"><h4 class="list-group-item-heading">Wiki</h4>The
		main documentation
		can be found <a target="_blank"
		href="https://wiki.envipath.org/">in our
		wiki</a>. </li>
	    </ul>
            <iframe width="300" height="160"
            src="https://www.youtube-nocookie.com/embed/0uQ94tuN3TI"
            frameborder="0" allow="accelerometer; autoplay;
            clipboard-write; encrypted-media; gyroscope;
            picture-in-picture" allowfullscreen></iframe> 
	  </div>
	</div>
	
	
	
	
      </div>
    </div>
  </div>
  
  <script language="javascript">
    
    // override default settings for pathway
    pwURI = getBasePath() + "/" + "pathway?latest";

    width = 300;
    height = 300;
    compoundSize = (width > height ? width : height) / 10;
    centerLayoutLinkDistance = function(){ return 1.5 * compoundSize };
    linkStrokeWidth = function(){ return 0.03 * compoundSize };
    arrowOffset = function(target_size){ return target_size * 0.55 };
    border = "none";
    popupEnabled = false;
    selectionEnabled = false;
    
    onGraphLoad = function(graph) {
	$("#latestpwName").html("<a href='"+graph.id+"'>"+graph.name+"</a>");
    };
    
    restartPathwayViz(onGraphLoad);

    //header('Access-Control-Allow-Origin: *');

    feed="https://envipath.com/feed/";
    //feedurl="http://feeds.feedburner.com/raymondcamdensblog?format=xml";
    //feed="http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript"

    $.ajax(feed, {
        accepts:{
            xml:"application/rss+xml"
        },
        dataType:"xml",
        success:function(data) {
            //Credit: http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript
            
            $(data).find("item").each(function () { // or "item" or whatever suits your feed
                var el = $(this);

                document.getElementById("rssfeed").innerHTML += '<li class="list-group-item"><h4 class="list-group-item-heading">'
                    + '<a target="blank" href="'
                    + el.find("link").text()
                    + '">'
                    + el.find("title").text()
                    + "</a></h4><h6>"
                    + el.find("pubDate").text()
                    + "</h6><p>"
                    + el.find("description").text()
                    + "</p></li>";
                
                // console.log(el);
                // console.log("------------------------");
                // console.log("title      : " + el.find("title").text());
                // console.log("pubDate    : " + el.find("pubDate").text());
                // console.log("link       : " + el.find("link").text());
                // console.log("description: " + el.find("description").text());
                // console.log("creator:     " + el.find("creator").text());
            });
            
            
        }   
    });

    
    
</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>