View source for Team:Missouri Rolla

<html>
<!-- This is incredibly hacked-together. Proceed at your own risk - mstigem 2015 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, .wrapper {
  height: auto;
}
#firstHeading, div.visualClear {
  display: none;
}
html, body, #globalWrapper, #content, #bodyContent, #mw-content-text {
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100%;
}
p {
  margin: 0;
}
#content {
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
  z-index: 0;
  background-color: transparent;
}
body {
  background-image: url("https://static.igem.org/mediawiki/2015/c/cb/Mstigem_background_texture_2015.png");
  margin-bottom: 0;
}
canvas {
  top: -10px;
  display: block;
  position: absolute;
  z-index: 1;
}
a {
  z-index: 2;
  position: relative;
}
#logo {
  width: 18%;
  min-width: 160px;
  margin-left: 0.5vw;
  margin-top: 10px;
}
#cave {
  width: 32%;
  min-width: 160px;
  right: 0;
  position: absolute;
  z-index: 0;
}
#menu {
  position: relative;
  top: -6.05vw;
  left: 25vw;
  width: 73vw;
}
#menu a {
  color: #D8D8D8;
  text-decoration: none;
  display: inline-block;
  padding: 0.5vw;
  padding-left: 0.7vw;
  padding-right: 0.7vw;
  font-size: 1.2vw;
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#menu a:hover {
  color: #d7b351;
  -o-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
}
h1 {
  display: inline-block;
  position: relative;
  color: #D8D8D8;
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  left: 15vw;
  top: -.5vw;
  width: 54.5vw;
  font-size: 2.5vw;
  font-weight: lighter;
  z-index: 2;
  line-height: 2.8vw;
  border-bottom-color: #8A8A8A;
  padding: 0;
  margin: 0;
}
#mstigem {
  display: block;
  position: relative;
  background-color: white;
  opacity: 0.75;
  left: 17.5vw;
  width: 50vw;
  top: 2.15vw;
  z-index: 2;
  padding: 1vw;
  margin-bottom: 5vw;
}
#mstigem p {
  display: block;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  line-height: 130%;
  text-align: justify;
  font-size: 13pt;
  color: black;
  margin-bottom: 1em;
}
#mstigem a {
  color: #d7b351;
  text-decoration: none;
}
#credit {
  text-align: right;
  position: relative;
  right: 0.5vw;
  color: #8A8A8A;
  font-size: 11pt;
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  z-index: 2;
}
img.inlinephoto {
  display: inline-block;
  width: 40%;
  float: right;
  margin: 0.7vw;
  margin-top: 0;
  margin-right: 0;
}
@media screen and (min-width: 900px) {
  br.menu1 {
    display: none;
  }
  br.menu2 {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 899px) {
  br.menu2 {
    display: none;
  }
  br.menu1 {
    display: initial;
  }
  #menu {
    margin-top: 7vw;
    margin-bottom: 5vw;
    width: 100%;
    position: relative;
    text-align: center;
    left: 0;
    top: 0;
  }
  #menu a {
    padding-top: .3vw;
    padding-bottom: .3vw;
    padding-left: 2.4vw;
    padding-right: 2.4vw;
    font-size: 14pt;
  }
  #mstigem {
    position: relative;
    width: 77vw;
  }
  h1 {
    left: 0;
    font-size: 14pt;
    position: relative;
    line-height: normal;
    margin-left: 10vw;
    width: 80vw;
  }
}
@media screen and (max-width: 479px) {
  #mstigem {
    width: 46vw;
    left: 15vw;
  }
}
@media screen and (max-width: 480px) {
  br.menu2 {
    display: initial;
  }
  br.menu1 {
    display: none;
  }
  img.inlinephoto {
    margin-left: 0;
    width: 100%;
  }
  #menu {
    margin-top: 7vw;
    margin-bottom: 7vw;
    width: 100%;
    position: relative;
    text-align: center;
    left: 0;
    top: 0;
  }
  #menu a {
    padding-top: .3vw;
    padding-bottom: .3vw;
    padding-left: 2.4vw;
    padding-right: 2.4vw;
    font-size: 14pt;
  }
  #mstigem {
    position: relative;
    width: 77vw;
  }
  h1 {
    left: 0;
    font-size: 14pt;
    position: relative;
    line-height: normal;
    margin-left: 10vw;
    width: 80vw;
  }
}
</style>
<a href="https://2015.igem.org/Team:Missouri_Rolla" onmousemove="mouse(event)"><img id="logo" src = "https://static.igem.org/mediawiki/2015/1/16/Mstigem_logo2015.png" /></a>
<img id="cave" src = "https://static.igem.org/mediawiki/2015/d/d1/Mstigem_cave_background.jpg" alt="Missouri cave photographed by Lynn Dieter" />
<div id="menu">
<a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Project">Project</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Practices">Human Practices</a><br class="menu2" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Parts">Parts</a><br class="menu1" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Notebook">Notebook</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Team">Team</a><br class="menu2" /><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Safety">Safety</a><a onmousemove="mouse(event)" href="https://2015.igem.org/Team:Missouri_Rolla/Attributions">Attributions</a>
</div>
<h1 onmousemove="mouse(event)">DEFENDING NORTH AMERICAN BATS FROM THE EMERGING WHITE-NOSE EPIDEMIC</h1>
<div onmousemove="mouse(event)" id="mstigem">
<p onmousemove="mouse(event)">Bats, despite their bad reputation, are vital to the ecosystem and economy of North America. Bats consume enormous numbers of pests, saving agriculture millions of dollars and reducing pesticide use, while serving as the sole pollinators for many plants. Meanwhile, their waste is the main food source for entire cave ecosystems supporting diverse and unique organisms.</p>
<p onmousemove="mouse(event)">Since 2007, a fungal disease has been quickly spreading among bat populations in North America. White-Nose Syndrome (WNS), caused by <i>Pseudogymnoascus destructans</i>, is responsible for mortality rates in excess of 90% in some caves. Included among the wide range of species affected by WNS are several already-endangered species. With current trends, entire bat species could become extinct within decades.</p>
<img class="inlinephoto" onmousemove="mouse(event)" src="https://static.igem.org/mediawiki/2015/6/69/Mstigem-whiteglove-bat.jpg" alt="Northern Long-Eared bat about to be released. Photo credit Scott Bergeson" />
<p onmousemove="mouse(event)"><i>P. Destructans</i> digests the bat’s skin and awakes bats during their crucial hibernation as their body temperature drops. Ultimately, most infected bats die from starvation or inflammatory shock, and estimates suggest more than 6 million bats have already perished.</p>
<p onmousemove="mouse(event)">Traditional approaches to fungal infections, specifically fungicides, indiscriminately kill beneficial and harmful fungi, while providing strong evolutionary pressure to become resistant. We are instead exploring a volatile organic compound, ocimene, which has been shown to slow <i>P. Destructans</i>. We are also investigating ways to sense the causative agent to impact the cave environment as little as possible, and compounds that may inhibit metabolism of the bats’ skin.</p>
</div>
<canvas id="echoes" onmousemove="mouse(event)"></canvas>
<p id="credit" onmousemove="mouse(event)">Missouri cave photo by Lynn Dieter<br />Northern Long-Eared bat photo by Scott Bergeson</p>

<script type="text/javascript">
// using setInterval for support in IE8 and 9, rather than requestAnimationFrame
// ugly nested ifs are a result of mediawiki parsing &&
"use strict";
var canvas = document.getElementById("echoes");
var ctx = canvas.getContext("2d");
var mousex;
var mousey;
var reflectx, reflecty;
setInterval(sendEcho, 12, canvas, ctx);

function mouse(event) {
  mousex = event.clientX;
  mousey = event.clientY + document.body.scrollTop;
}

function sendEcho(canvas, ctx) {
  if(typeof sendEcho.radius == 'undefined') {
    sendEcho.radius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
    sendEcho.reflecting = false;
    sendEcho.rradius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
  }
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.offsetHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.strokeStyle = "white";
  ctx.globalAlpha = 0.16;
  ctx.lineWidth = 2;
  ctx.arc(canvas.width / 8, 2 * canvas.height / 3, sendEcho.radius, 0, 2 * Math.PI);
  ctx.stroke();
  if(sendEcho.radius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30) {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.globalAlpha = 0.16;
    ctx.lineWidth = 2;
    ctx.arc(canvas.width / 8, 2 * canvas.height / 3, Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30), 0, 2 * Math.PI);
    ctx.stroke();
  }
  if(sendEcho.radius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.globalAlpha = 0.16;
    ctx.lineWidth = 2;
    ctx.arc(canvas.width / 8, 2 * canvas.height / 3, Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15), 0, 2 * Math.PI);
    ctx.stroke();
  }
  if(Math.abs(sendEcho.radius - Math.sqrt((mousex - canvas.width / 8) * (mousex - canvas.width / 8) + (mousey - 2 *canvas.height / 3)*(mousey - 2 *canvas.height / 3))) < Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284)) {
    if(!sendEcho.reflecting) {
      sendEcho.reflecting = true;
      reflectx = mousex;
      reflecty = mousey;
      sendEcho.rradius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
    }
  }
  if(sendEcho.reflecting) {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.globalAlpha = 0.16;
    ctx.lineWidth = 2;
    ctx.arc(reflectx, reflecty, sendEcho.rradius, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
    ctx.stroke();
    if(sendEcho.rradius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30) {
      ctx.beginPath();
      ctx.strokeStyle = "white";
      ctx.globalAlpha = 0.16;
      ctx.lineWidth = 2;
      ctx.arc(reflectx, reflecty, Math.round(sendEcho.rradius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 30), Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
      ctx.stroke();
    }
    if(sendEcho.rradius > Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) {
      ctx.beginPath();
      ctx.strokeStyle = "white";
      ctx.globalAlpha = 0.16;
      ctx.lineWidth = 2;
      ctx.arc(reflectx, reflecty, Math.round(sendEcho.rradius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15), Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) - Math.PI / 12 + Math.PI, Math.atan2(reflecty - 2 * canvas.height / 3, reflectx - canvas.width / 8) + Math.PI / 12 + Math.PI);
      ctx.stroke();
    }
    if(Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284) != 0) {
      sendEcho.rradius += Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
    }
    else {
      sendEcho.rradius++;
    }
    if(sendEcho.rradius > Math.sqrt(canvas.width*canvas.width+canvas.height*canvas.height) * 1.3) {
      sendEcho.reflecting = false;
    }
  }
  if(Math.round(sendEcho.radius - Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 15) > Math.sqrt((7 * canvas.width / 8)*(7 * canvas.width / 8) + (2 * canvas.height / 3)*(2 * canvas.height / 3))) {
    if(!sendEcho.reflecting) {
      sendEcho.radius = Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
    }
  }
  if(Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284) != 0) {
    sendEcho.radius += Math.round(Math.sqrt((canvas.width / 2)*(canvas.width / 2) + (canvas.height / 2)*(canvas.height / 2)) / 284);
  }
  if(sendEcho.rradius >= Math.sqrt((reflectx - canvas.width / 8)*(reflectx - canvas.width / 8)+(reflecty - 2 * canvas.height / 3)*(reflecty - 2 * canvas.height / 3))) {
    if(sendEcho.rradius <= Math.sqrt(canvas.width*canvas.width+canvas.height*canvas.height)) {
      if(canvas.width > 800) {
        ctx.beginPath();
        ctx.fillStyle = "#d7b351";
        ctx.globalAlpha = 0.6;
        ctx.arc(29 * canvas.width / 240, 43 * canvas.height / 63, 2, 0, 2*Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "#d7b351";
        ctx.globalAlpha = 0.6;
        ctx.arc(31 * canvas.width / 240, 43 * canvas.height / 63, 2, 0, 2*Math.PI);
        ctx.fill();
      }
      else {
        ctx.beginPath();
        ctx.fillStyle = "#d7b351";
        ctx.globalAlpha = 0.6;
        ctx.arc(28 * canvas.width / 240, 43 * canvas.height / 63, 1, 0, 2*Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "#d7b351";
        ctx.globalAlpha = 0.6;
        ctx.arc(31 * canvas.width / 240, 43 * canvas.height / 63, 1, 0, 2*Math.PI);
        ctx.fill();
      }
    }
  }
  else {
    sendEcho.radius++;
  }
}
</script>
</html>