"

From 2014.igem.org

  $(document).ready(function() {
  $('body').scrollspy({ target: '#affix-nav' });
  
$('#menubar li[style]').css('color', 'transparent');

 $('#myCarousel').carousel({
   interval: 7000
 });
   // Scroll page with easing effect
   $('.navbar ul li a.goto').bind('click', function(e) {
       e.preventDefault();
       target = this.hash;
       $.scrollTo(target, 1500, {
         easing: 'easeOutCubic'
       });

       $(".btn-navbar").click();
   });

     // Scroll page with easing effect
   $('#footerMenu a').bind('click', function(e) {
       e.preventDefault();
       target = this.hash;
       $.scrollTo(target, 1500, {
         easing: 'easeOutCubic'
       });

       $(".btn-navbar").click();
   });

 // Show/Hide Sticky "Go top" button
 $(window).scroll(function(){
   if($(this).scrollTop()>200){
     $(".go-top").fadeIn(200);
   }
   else{
     $(".go-top").fadeOut(200);  
   }
 });
 
 // Scroll Page to Top when clicked on "go top" button
 $(".go-top").click(function(event){
   event.preventDefault();

   $.scrollTo(20, 1500, {
         easing: 'easeOutCubic'
       });
 });

 var SCREEN_WIDTH = 388;
 var SCREEN_HEIGHT = 220;

 var MAX_SCREEN_WIDTH = 388;
 var MAX_SCREEN_HEIGHT = 220;

 var MAX_IMG_WIDTH = 1129;
 var MAX_IMG_HEIGHT = 427;
   
 var canvas;
 var context;
 var particle;
 var img;
 
 var mouseX = null;
 var mouseY = null;

 var initialized = false;
 
 init();

 function init() {

   canvas = document.getElementById('biopad');

   img = document.getElementById('slide1');
   
   if (canvas && canvas.getContext) {
     context = canvas.getContext('2d');
     
     // Register event listeners
     canvas.addEventListener('mousemove', documentMouseMoveHandler, false);
     canvas.addEventListener('touchstart', canvasTouchStartHandler, false);
     canvas.addEventListener('touchmove', canvasTouchMoveHandler, false);
     window.addEventListener('resize', windowResizeHandler, false);
     
     createParticles();

     windowResizeHandler();
     
     setTimeout(windowResizeHandler, 1000);
     
     setInterval( loop, 1000 / 60 );
   }
 }

 function createParticles() {
     particle = {
       position: { x: mouseX, y: mouseY },
       size: 5,
       speed: 0.05,
       targetSize: 3,
       fillColor: '#ffff66',
     };
     
 }

 function documentMouseMoveHandler(event) {

   pos = canvas.getBoundingClientRect();
   mouseX = event.clientX - pos.left;
   mouseY = event.clientY - pos.top;

  initialized = true;
 }
 

 function canvasTouchStartHandler(event) {
   if(event.touches.length == 1) {

     pos = canvas.getBoundingClientRect();
     mouseX = event.touches[0].pageX - pos.left;
     mouseY = event.touches[0].pageY - pos.top;

     event.preventDefault();

     initialized = true;

   }
 }
 
 function canvasTouchMoveHandler(event) {
   if(event.touches.length == 1) {

     pos = canvas.getBoundingClientRect();
     event.preventDefault();

     mouseX = event.touches[0].pageX - pos.left;
     mouseY = event.touches[0].pageY - pos.top;

    initialized = true;
   }
 }
 

 function windowResizeHandler() {

   imgPos = img.getBoundingClientRect();

   ratioW = imgPos.width / MAX_IMG_WIDTH;
   ratioH = imgPos.height / MAX_IMG_HEIGHT;

   SCREEN_WIDTH = parseInt(MAX_SCREEN_WIDTH * ratioW);
   SCREEN_HEIGHT = parseInt(MAX_SCREEN_HEIGHT * ratioH);
   
   canvas.width = SCREEN_WIDTH;
   canvas.height = SCREEN_HEIGHT;
   
   canvas.style.position = 'absolute';
   canvas.style.left = parseInt((imgPos.right - canvas.width) - 48 * ratioW) + 'px';
   canvas.style.top = parseInt(90 * ratioH) + 'px';
 }

 function loop() {

     if (initialized) {
   // Fade out the lines slowly by drawing a rectangle over the entire canvas
   context.fillStyle = 'rgba(203,225,229,0.3)';
   //context.fillStyle = 'rgba(0,0,0,0.05)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
         
   var lp = { x: particle.position.x, y: particle.position.y };

   if (lp.x == null && lp.y == null) {
     lp.x = mouseX;
     lp.y = mouseY;
   }
       
   // Apply position
   particle.position.x = mouseX;
   particle.position.y = mouseY;
   
   // Limit to screen bounds
   particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 );
   particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 );
   
   
   context.beginPath();
   context.fillStyle = particle.fillColor;
   context.strokeStyle = particle.fillColor;
   context.lineWidth = particle.size;
   context.moveTo(lp.x, lp.y);
   context.lineTo(particle.position.x, particle.position.y);
   context.stroke();
   context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
   context.fill();

  }
   
 }

  var machu = new Audio("https://static.igem.org/mediawiki/2014/0/00/01_Machu_Pichu.mp3");

var easter_egg = new Konami(function() { machu.play(); });

 });