View source for Team:Missouri Rolla/Project

<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 ul {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 11pt;
  list-style-image: none;
  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)">PROJECT</h1>
<div onmousemove="mouse(event)" id="mstigem">
<p onmousemove="mouse(event)">PROJECT STUFF TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p><img class="inlinephoto" src="https://static.igem.org/mediawiki/2015/d/dd/Mstigem_wns_spread_map_small.jpg" alt="White-Nose Syndrome spread map. Map credit Lindsey Heffernan">
</div>
</div>
<canvas id="echoes" onmousemove="mouse(event)"></canvas>
<p id="credit" onmousemove="mouse(event)">Missouri cave photo by Lynn Dieter<br />White-Nose Syndrome spread map by Lindsey Heffernan</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>