diff --git a/css/style.css b/css/style.css
index 9a09b16..3fe4619 100644
--- a/css/style.css
+++ b/css/style.css
@@ -203,7 +203,7 @@ h1 br {
 }
 
 @media screen and (orientation:landscape) and (max-width: 767px) {
-  
+
 }
 
 @media screen and (min-width: 768px) {
@@ -295,3 +295,30 @@ h1 br {
     background-image: url('../assets/pc32@2x.png');
   }
 }
+
+
+/* bubblr http://likeadev.com/show/how-to-make-a-cool-laboratory-tube-with-animated-bubbles.html */
+.test-tube-container {
+    padding-top: 50px;
+}
+.test-tube {
+    /*width: 100%;*/
+    height: 425px;
+    border-left: 5px solid #949494;
+    border-right: 5px solid #949494;
+    border-bottom: 5px solid #949494;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+.test-tube .test-tube-bg {
+    background: #e8e8e8;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    height: 400px;
+    top: 20px;
+    position: relative;
+}
+.test-tube .substance {
+    top: -20px;
+    position: relative
+}
diff --git a/index.html b/index.html
index 00fd915..79591d8 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/style.css">
-    
+
     <link rel="icon" type="image/png" href="assets/favicon.png" />
     <link rel="apple-touch-icon" href="assets/mobile/icon.png">
     <link rel="apple-touch-icon" sizes="72x72" href="assets/mobile/icon.png">
@@ -28,7 +28,7 @@
     </script>
     <!-- End Google Analytics -->
   </head>
-  <body>  
+  <body>
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
@@ -104,12 +104,20 @@
         <hr class="hidden-xs">
         <div id="detector-holder">
           <div id="detector" ng-controller="DetectorController as dc">
-            <canvas id="detector-core" width="400" height="400">
-              Your detector. Click on it to generate events.
-            </canvas>
+            <div class="test-tube-container">
+                <div class="test-tube">
+                    <div class="test-tube-bg">
+                        <canvas id="detector-core'" class="substance" width="400"
+                                       height="400" style=""></canvas>
+                    </div>
+                </div>
+            </div>
             <canvas ng-click="dc.click()" id="detector-events" width="400" height="400" class="prevent-select">
               Your detector. Click on it to generate events.
             </canvas>
+            <canvas id="detector-flame" width="400" height="400" class="prevent-select">
+              Your bunsen burner. Click it to turn on and off.
+            </canvas>
           </div>
         </div>
         <button id="detector-info" class="btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-info"></i></button>
@@ -301,7 +309,7 @@
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="js/external/jquery.cookie-1.4.1.min.js"></script>
     <script src="js/external/retina.js"></script>
     <script src="js/external/fastclick.js"></script>
@@ -310,8 +318,13 @@
     <script src="js/helpers.js"></script>
     <script src="js/analytics.js"></script>
     <script src="js/gameobjects.js"></script>
-    <script src="js/event.js"></script>
-    <script src="js/detector.js"></script>
+
+
+    <script src="js/detector/flame.js"></script>
+    <script src="js/detector/bubblr.js"></script>
+    <script src="js/detector/event.js"></script>
+    <script src="js/detector/detector.js"></script>
+
     <script src="js/ui.js"></script>
     <script src="js/game.js"></script>
     <script src="js/app.js"></script>
diff --git a/js/analytics.js b/js/analytics.js
index c367c5a..e9fe203 100644
--- a/js/analytics.js
+++ b/js/analytics.js
@@ -1,3 +1,4 @@
+/** Custom google analystics events **/
 var analytics =
 {
     enabled: true,
@@ -15,19 +16,19 @@ var analytics =
         categoryResearch: 'Research',
         categoryHR: 'HR',
         categoryUpgrades: 'Upgrades',
-        
+
         actionResearch: 'Research',
         actionHire: 'Hire',
         actionBuy: 'Buy'
     },
-    
+
     init: function()
     {
         if (typeof Helpers.analytics === 'undefined' || Helpers.analytics == '') {
             analytics.enabled = false;
             return;
         }
-        
+
         ga('create', Helpers.analytics);
         ga('set', { 'appName': 'Particle Clicker', 'appId': 'ch.cern.particle-clicker', 'appVersion': '0.9' });
         ga('set', 'anonymizeIp', true);
@@ -54,22 +55,22 @@ var analytics =
             analytics.sendScreen(analytics.screens.main);
         });
     },
-    
+
     sendScreen: function(type)
     {
         if (!analytics.enabled || typeof type === 'undefined') {
             return;
         }
-        
+
         ga('send', 'screenview', { 'screenName': type });
     },
-    
+
     sendEvent: function(category, action, label, value)
     {
         if (!analytics.enabled || typeof category === 'undefined' || typeof action === 'undefined' || typeof label === 'undefined' || typeof value === 'undefined') {
             return;
         }
-        
+
         //ga('send', 'event', category, action, label, value, {'screenName': analytics.screens.main });
     }
 };
diff --git a/js/app.js b/js/app.js
index c143d05..4d3f1a2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,11 @@
+/**
+ * Define the angular app
+ */
 'use strict';
 (function() {
   Helpers.validateSaveVersion();
 
+  // init game
   var game = new Game.Game();
   game.load();
 
@@ -15,6 +19,7 @@
 
   var app = angular.module('particleClicker', []);
 
+  // add helpers as filters
   app.filter('niceNumber', ['$filter', function($filter) {
       return Helpers.formatNumberPostfix;
   }]);
@@ -35,6 +40,7 @@
     };
   }]);
 
+  // controllers
   app.controller('DetectorController', function() {
     this.click = function() {
       lab.clickDetector();
diff --git a/js/detector.js b/js/detector.js
deleted file mode 100644
index af4d207..0000000
--- a/js/detector.js
+++ /dev/null
@@ -1,322 +0,0 @@
-var detector =
-{
-    core:
-    {
-        canvas: null,
-        ctx: null
-    },
-
-    events:
-    {
-        canvas: null,
-        ctx: null,
-        list: [],
-    },
-
-    visible: true,
-
-    width: 400,
-    height: 400,
-
-    ratio: 1,
-
-    colors: 
-    {
-        siliconRing: '#FFF371',
-        siliconRingLine: '#EAC918',
-        ecal: '#C5FF82',
-        ecalLine: '#9EFF28',
-        hcal: '#E1FF79',
-        hcalLine: '#C9FF2D',
-        lightRing: '#A0B3FF',
-        lightRingLine: '#A0B3FF',
-        darkRing: '#7280B8',
-        darkRingLine: '#7280B8',
-
-        mucalLight: '#FFDFB7',
-        mucalLightLine: '#FFDFB7',
-        mucalDark: '#EA301F',
-        mucalDarkLine: '#C5291A'
-    },
-
-    radius:
-    {
-        siliconInner: 10,
-        silicon: 30,
-        siliconSpace: 35,
-        ecal: 50,
-        hcal: 80,
-        darkRing1: 83,
-        darkRing1Space: 86,
-        lightRing: 92,
-        lightRingSpace: 94,
-        darkRing2: 100,
-
-        mucal: 107,
-        mucalLight: 8,
-        mucalDark: 18
-    },
-
-    tracks:
-    [
-        {
-            name: 'electron',
-            color: '#0016EA'
-        },
-
-        {
-            name: 'jet',
-            color: '#0B7700'
-        },
-        
-        {
-            name: 'muon',
-            color: '#775400'
-        }
-    ],
-
-    lastRender: 0,
-
-    animate: function(time)
-    {
-        var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
-        detector.lastRender = time;
-
-        requestAnimFrame(detector.animate);
-        detector.draw(duration);
-    },
-
-    init: function(baseSize)
-    {
-        detector.core.canvas = document.getElementById('detector-core');
-        detector.core.ctx = detector.core.canvas.getContext('2d');
-        //detector.core.ctx = new C2S(400,400);
-
-        detector.events.canvas = document.getElementById('detector-events');
-        detector.events.ctx = detector.events.canvas.getContext('2d');
-
-        var devicePixelRatio = window.devicePixelRatio || 1;
-        var backingStoreRatio = detector.core.ctx.webkitBackingStorePixelRatio ||
-                                detector.core.ctx.mozBackingStorePixelRatio ||
-                                detector.core.ctx.msBackingStorePixelRatio ||
-                                detector.core.ctx.oBackingStorePixelRatio ||
-                                detector.core.ctx.backingStorePixelRatio || 1;
-
-        var ratio = devicePixelRatio / backingStoreRatio;
-
-        detector.ratio = baseSize / 400;
-
-        detector.width = baseSize;
-        detector.height = baseSize;
-
-        detector.core.canvas.width = baseSize;
-        detector.core.canvas.height = baseSize;
-
-        detector.events.canvas.width = baseSize;
-        detector.events.canvas.height = baseSize;
-
-        if (devicePixelRatio !== backingStoreRatio) {
-            var oldWidth = detector.core.canvas.width;
-            var oldHeight = detector.core.canvas.height;
-
-            detector.core.canvas.width = oldWidth * ratio;
-            detector.core.canvas.height = oldHeight * ratio;
-            detector.core.canvas.style.width = oldWidth + 'px';
-            detector.core.canvas.style.height = oldHeight + 'px';
-
-            detector.events.canvas.width = oldWidth * ratio;
-            detector.events.canvas.height = oldHeight * ratio;
-            detector.events.canvas.style.width = oldWidth + 'px';
-            detector.events.canvas.style.height = oldHeight + 'px';
-
-            // now scale the context to counter
-            // the fact that we've manually scaled
-            // our canvas element
-            detector.core.ctx.scale(ratio, ratio);
-            detector.events.ctx.scale(ratio, ratio);
-        }
-
-        detector.coreDraw();
-        detector.animate();
-    },
-
-    coreDraw: function()
-    {
-        var ctx = detector.core.ctx;
-        var cx = detector.width / 2;
-        var cy = detector.height / 2;
-
-        ctx.clearRect(0, 0, detector.width, detector.width);
-
-        var muSplit = 2/12;
-        for (var k = 3; k >= 1; k--) {
-            ctx.strokeStyle = detector.colors.mucalDarkLine;
-            ctx.fillStyle = detector.colors.mucalDark;
-            
-            ctx.beginPath();
-            ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
-            for (var i = 1; i <= 13; i++) {
-                ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
-            }
-            ctx.stroke();
-            ctx.fill();
-
-            ctx.beginPath();
-            ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit) * detector.ratio);
-            for (var i = 1; i <= 13; i++) {
-                ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit) * detector.ratio);
-            }
-            ctx.stroke();
-            ctx.fillStyle = detector.colors.mucalLight;
-            ctx.fill();
-        }
-
-        ctx.strokeStyle = detector.colors.mucalDarkLine;
-        ctx.beginPath();
-        ctx.moveTo(cx + detector.radius.mucal * Math.cos(Math.PI * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * muSplit) * detector.ratio);
-        for (var i = 1; i <= 13; i++) {
-            ctx.lineTo(cx + detector.radius.mucal * Math.cos(Math.PI * i * muSplit) * detector.ratio, cy + detector.radius.mucal * Math.sin(Math.PI * i * muSplit) * detector.ratio);
-        }
-        ctx.stroke();
-        ctx.fillStyle = '#FFFFFF';
-        ctx.fill();
-
-
-        ctx.beginPath();
-        ctx.strokeStyle = detector.colors.darkRingLine;
-        ctx.fillStyle = detector.colors.darkRing;
-        ctx.arc(cx, cy, detector.radius.darkRing2 * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.beginPath();
-        ctx.fillStyle = '#FFFFFF';
-        ctx.arc(cx, cy, detector.radius.lightRingSpace * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-
-        ctx.beginPath();
-        ctx.strokeStyle = detector.colors.lightRingLine;
-        ctx.fillStyle = detector.colors.lightRing;
-        ctx.arc(cx, cy, detector.radius.lightRing * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.beginPath();
-        ctx.fillStyle = '#FFFFFF';
-        ctx.arc(cx, cy, detector.radius.darkRing1Space * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-
-        ctx.beginPath();
-        ctx.strokeStyle = detector.colors.darkRingLine
-        ctx.fillStyle = detector.colors.darkRing;
-        ctx.arc(cx, cy, detector.radius.darkRing1 * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.beginPath();
-        ctx.fillStyle = '#FFFFFF';
-        ctx.arc(cx, cy, detector.radius.ecal * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-
-
-        ctx.strokeStyle = detector.colors.hcalLine;
-        ctx.fillStyle = detector.colors.hcal;
-        var calSplit = 20/2;
-        for (var i = 0; i < 20; i++) {
-            ctx.beginPath();
-            ctx.moveTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
-            ctx.lineTo(cx + detector.radius.hcal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.hcal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
-            ctx.arc(cx, cy, detector.radius.hcal * detector.ratio, Math.PI * i / calSplit, Math.PI * (i+1) / calSplit, false);
-            ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
-            ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        }
-
-        ctx.strokeStyle = detector.colors.ecalLine;
-        ctx.fillStyle = detector.colors.ecal;
-        var calSplit = 20/2;
-        for (var i = 0; i < 20; i++) {
-            ctx.beginPath();
-            ctx.moveTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * i / calSplit) * detector.ratio);
-            ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * i / calSplit) * detector.ratio);
-            ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
-            ctx.lineTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * (i+1) / calSplit) * detector.ratio, cy + detector.radius.siliconSpace * Math.sin(Math.PI * (i+1) / calSplit) * detector.ratio);
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        }
-
-        ctx.beginPath();
-        ctx.strokeStyle = detector.colors.siliconRingLine;
-        ctx.fillStyle = detector.colors.siliconRing;
-        ctx.arc(cx, cy, detector.radius.silicon * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.beginPath();
-        ctx.strokeStyle = detector.colors.siliconRingLine;
-        ctx.fillStyle = detector.colors.siliconRing;
-        ctx.arc(cx, cy, detector.radius.siliconInner * detector.ratio, 0, Math.PI * 2, true);
-        ctx.fill();
-        ctx.stroke();
-    },
-
-    addEvent: function()
-    {
-        var num = Math.max(3, Math.ceil(15 * Math.random()));
-
-        for (var i = 0; i < num; i++) {
-            var index = Math.round(Math.random() * (detector.tracks.length - 1));
-            var event = new ParticleEvent(detector.tracks[index], num);
-            detector.events.list.push(event);
-        }
-    },
-
-    addEventExternal: function(numWorkers)
-    {
-        if (!detector.visible) {
-            return;
-        }
-
-        var num = Math.min(20 * numWorkers / 10, 20);
-
-        for (var i = 0; i < num; i++) {
-            var index = Math.round(Math.random() * (detector.tracks.length - 1));
-            var event = new ParticleEvent(detector.tracks[index], num, true);
-            detector.events.list.push(event);
-        }
-    },
-
-    draw: function(duration)
-    {
-        detector.events.ctx.clearRect(0, 0, detector.width, detector.height);
-
-        var del = -1;
-        for (var e in detector.events.list) {
-            if (detector.events.list[e].alpha > 0) {
-                detector.events.list[e].draw(duration);
-            } else {
-                del = e;
-            }
-        }
-
-        if (del > 0) {
-            detector.events.list.splice(0, del);
-        }
-    }
-};
-
-window.requestAnimFrame = (function(){
-    return window.requestAnimationFrame       || 
-           window.webkitRequestAnimationFrame || 
-           window.mozRequestAnimationFrame    || 
-           window.oRequestAnimationFrame      || 
-           window.msRequestAnimationFrame     || 
-           function(/* function */ callback, /* DOMElement */ element){
-               window.setTimeout(callback, 1000 / 60);
-           };
-})();
-
-(function() { detector.init(400); $('#detector').width(400).height(400); })();
diff --git a/js/detector/bubblr.js b/js/detector/bubblr.js
new file mode 100644
index 0000000..3405345
--- /dev/null
+++ b/js/detector/bubblr.js
@@ -0,0 +1,161 @@
+/*
+    Bubblr v1.0 - http://mikeyhogarth.wordpress.com/2012/04/15/bubblr-jquery-bubbles-plugin/
+    Copyright (c) 2012 Mikey Hogarth
+	template based on original jquery lightweight plugin biolerplate: @ajpiano, @addyosmani
+    This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
+*/
+
+;(function ( $, window, document, undefined ) {
+
+	var pluginName = "bubblr";
+
+    var defaults = {
+
+			numberOfBubbles: 10,
+            backgroundColor: "transparent",
+			bubbleColor: "White",
+			bubbleOpacity: .7,
+			bubbleMinSize: 1,
+			bubbleMaxSize: 2,
+			bubbleMaxSpeed: 2,
+			bubbleMinSpeed: 1,
+			animationSpeed: 10
+        };
+
+    function Bubblr( element, options ) {
+        this.element = element;
+        this.options = $.extend( {}, defaults, options) ;
+        this._defaults = defaults;
+        this.init();
+    }
+
+ 	Bubblr.prototype.init = function () {
+
+		if(this.element.getContext) {
+			this.ctx = this.element.getContext("2d");
+		}
+		else {
+			return;
+		}
+
+		$canvas = $(this.element);
+
+		this.width = $canvas.width();
+		this.height = $canvas.height();
+
+		$canvas.css("background-color", this.options.backgroundColor)
+
+		this.bubbles = new Array();
+
+		for(i = 0; i < this.options.numberOfBubbles; i++) {
+			this.bubbles[i] = this.generateBubble();
+		}
+
+		var self = this;
+		this.on=false;
+
+		for(i in this.bubbles) {
+			this.drawBubble(this.bubbles[i]);
+		}
+
+		this.timerId = setInterval(function() {
+			self.animationLoop();
+			}, this.options.animationSpeed);
+
+
+
+		// this.clear();
+
+    };
+
+	Bubblr.prototype.start = function(timespan) {
+		var self = this;
+		if (!this.on){
+			// this.timerId = setInterval(function() {
+			// 	self.animationLoop();
+			// 	}, this.options.animationSpeed);
+			if (timespan) this.nextOffID = setTimeout(self.stop.bind(self),timespan);
+			this.on=true;
+		} else {
+			clearInterval(this.nextOffID);
+			this.nextOff = setTimeout(self.stop.bind(self),timespan);
+		}
+	};
+
+	Bubblr.prototype.stop = function() {
+		// this.clear();
+		// clearInterval(this.timerId);
+		this.on=false;
+		this.timerId=undefined;
+	};
+
+	Bubblr.prototype.animationLoop = function() {
+
+		this.clear();
+
+		for(i in this.bubbles) {
+			this.update(i, this.bubbles[i]);
+			this.draw(i, this.bubbles[i]);
+		}
+
+	};
+
+	Bubblr.prototype.clear = function () {
+		this.ctx.globalAlpha = 1;
+		this.ctx.fillStyle = this.options.backgroundColor;
+		this.ctx.clearRect(0,0,this.width, this.height);
+	};
+
+	Bubblr.prototype.draw = function (index, bubble) {
+			this.ctx.globalAlpha = this.options.bubbleOpacity;
+			this.drawBubble(bubble);
+	};
+
+	Bubblr.prototype.update = function (index, bubble) {
+			bubble.y = bubble.y - bubble.speed
+
+			if(bubble.y < 0 && this.on)
+				this.bubbles[index] = this.generateBubble(true);
+	};
+
+
+	Bubblr.prototype.drawBubble = function(bubble) {
+		this.ctx.fillStyle = this.options.bubbleColor;
+		this.ctx.beginPath();
+		this.ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI*2, true);
+		this.ctx.closePath();
+		this.ctx.fill();
+	};
+
+	Bubblr.prototype.generateBubble = function(start_y_at_zero) {
+		var bubble = new Object();
+		bubble.x = this.randomize(1,this.width);
+
+		if(start_y_at_zero) {
+			bubble.y = this.height;
+		}
+		else {
+			bubble.y = this.randomize(1,this.height);
+		}
+
+
+		bubble.radius = this.randomize(this.options.bubbleMinSize, this.options.bubbleMaxSize);
+		bubble.speed = this.randomize(this.options.bubbleMinSpeed, this.options.bubbleMaxSpeed);
+		return bubble;
+	};
+
+	Bubblr.prototype.randomize = function(min,max) {
+		return Math.floor((Math.random()*max)+min);
+	};
+
+
+    $.fn[pluginName] = function ( options ) {
+        return this.each(function () {
+            if (!$.data(this, 'plugin_' + pluginName)) {
+                $.data(this, 'plugin_' + pluginName,
+                new Bubblr( this, options ));
+            }
+        });
+    }
+
+})( jQuery, window, document );
diff --git a/js/detector/detector.js b/js/detector/detector.js
new file mode 100644
index 0000000..7b5deb4
--- /dev/null
+++ b/js/detector/detector.js
@@ -0,0 +1,148 @@
+/** Manages the detector animation in the canvas of the detector pane **/
+
+var detector =
+{
+    core:
+    {
+        canvas: null,
+        ctx: null
+    },
+
+    events:
+    {
+        canvas: null,
+        ctx: null,
+        list: [],
+    },
+
+    visible: true,
+
+    width: 400,
+    height: 400,
+
+    ratio: 1,
+
+    lastRender: 0,
+
+    animate: function(time)
+    {
+        // var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
+        // detector.lastRender = time;
+        //
+        // requestAnimFrame(detector.animate);
+        // detector.draw(duration);
+    },
+
+    init: function(baseSize)
+    {
+        // get canvas
+        detector.core.canvas = document.getElementById('detector-core');
+        detector.core.ctx = detector.core.canvas.getContext('2d');
+        //detector.core.ctx = new C2S(400,400);
+
+        detector.events.canvas = document.getElementById('detector-events');
+        detector.events.ctx = detector.events.canvas.getContext('2d');
+
+        // set size
+        // TODO resize "#detector-flame" too
+        var devicePixelRatio = window.devicePixelRatio || 1;
+        var backingStoreRatio = detector.core.ctx.webkitBackingStorePixelRatio ||
+                                detector.core.ctx.mozBackingStorePixelRatio ||
+                                detector.core.ctx.msBackingStorePixelRatio ||
+                                detector.core.ctx.oBackingStorePixelRatio ||
+                                detector.core.ctx.backingStorePixelRatio || 1;
+
+        var ratio = devicePixelRatio / backingStoreRatio;
+
+        detector.ratio = baseSize / 400;
+
+        detector.width = baseSize;
+        detector.height = baseSize;
+
+        detector.core.canvas.width = baseSize;
+        detector.core.canvas.height = baseSize;
+
+        detector.events.canvas.width = baseSize;
+        detector.events.canvas.height = baseSize;
+
+        if (devicePixelRatio !== backingStoreRatio) {
+            var oldWidth = detector.core.canvas.width;
+            var oldHeight = detector.core.canvas.height;
+
+            detector.core.canvas.width = oldWidth * ratio;
+            detector.core.canvas.height = oldHeight * ratio;
+            detector.core.canvas.style.width = oldWidth + 'px';
+            detector.core.canvas.style.height = oldHeight + 'px';
+
+            detector.events.canvas.width = oldWidth * ratio;
+            detector.events.canvas.height = oldHeight * ratio;
+            detector.events.canvas.style.width = oldWidth + 'px';
+            detector.events.canvas.style.height = oldHeight + 'px';
+
+            // now scale the context to counter
+            // the fact that we've manually scaled
+            // our canvas element
+            detector.core.ctx.scale(ratio, ratio);
+            detector.events.ctx.scale(ratio, ratio);
+        }
+
+        // init the test tube animation
+        var bubblrElem = $('detector-core').bubblr({
+            backgroundColor: '#e8e8e8',
+            bubbleColor: "#bfbfbf",
+            bubbleMinSize: 3,
+            bubbleMaxSize: 5,
+            bubbleMaxSpeed: 2,
+            bubbleMinSpeed: 1,
+            animationSpeed: 20,
+            // bubbleXposMultiplier allows us to position bubbles on the x-axis
+            bubbleXposMultiplier: 2,
+            // bubbleYpopLimit determines how far in pixels from the canvas's
+            // top edge bubbles will disappear
+            bubbleYpopLimit: 10
+        });
+        this.bubblr = bubblrElem.data('plugin_bubblr');
+
+        // TODO refactor flame animation and put it here
+        // this.flame = $('#detector-flame').flame();
+
+        // detector.coreDraw();
+        detector.animate();
+    },
+
+    /** draw a static core on background **/
+    // coreDraw: function()
+    // {
+    //
+    // },
+
+    addEvent: function()
+    {
+
+    },
+
+    addEventExternal: function(numWorkers)
+    {
+
+    },
+
+    /** Draw current events **/
+    draw: function(duration)
+    {
+
+    }
+};
+
+window.requestAnimFrame = (function(){
+    return window.requestAnimationFrame       ||
+           window.webkitRequestAnimationFrame ||
+           window.mozRequestAnimationFrame    ||
+           window.oRequestAnimationFrame      ||
+           window.msRequestAnimationFrame     ||
+           function(/* function */ callback, /* DOMElement */ element){
+               window.setTimeout(callback, 1000 / 60);
+           };
+})();
+
+// start detector at this height
+(function() { detector.init(400); $('#detector').width(400).height(400); })();
diff --git a/js/event.js b/js/detector/event.js
similarity index 87%
rename from js/event.js
rename to js/detector/event.js
index cbf5bf9..fdd4916 100644
--- a/js/event.js
+++ b/js/detector/event.js
@@ -1,3 +1,11 @@
+/** Define and draw to canvas particle events, used in detector **/
+
+/**
+ * Define and draw to canvas particle events, used in detector
+ * @param {Object}  type     Object with name 'electron'||'jet'||'muon'
+ * @param {Number}  count    Number of particles in this event
+ * @param {Boolean} external Wether even was caused by player or worker
+ */
 function ParticleEvent(type, count, external)
 {
     this.work = typeof external !== 'undefined' ? external : false;
@@ -60,4 +68,3 @@ ParticleEvent.prototype.draw = function(duration, init)
         this.alpha -= 0.03 / 16 * duration;
     }
 };
-
diff --git a/js/detector/flame.js b/js/detector/flame.js
new file mode 100644
index 0000000..c8d434b
--- /dev/null
+++ b/js/detector/flame.js
@@ -0,0 +1,109 @@
+/* http://codepen.io/jackrugile/pen/Jbnpv */
+// TODO refactor this to be a object with inputs and outputs, and to center on
+// window resize
+var c = document.getElementById('detector-flame'),
+    ctx = c.getContext('2d'),
+    cw = c.width = 400,
+    ch = c.height = 300,
+    parts = [],
+    partCount = 200,
+    partsFull = false,
+    hueRange = 50,
+    globalTick = 0,
+    rand = function(min, max){
+        return Math.floor( (Math.random() * (max - min + 1) ) + min);
+    };
+
+var Part = function(){
+  this.reset();
+};
+
+Part.prototype.reset = function(){
+  this.startRadius = rand(1, 25);
+  this.radius = this.startRadius;
+  this.x = cw/2 + (rand(0, 6) - 3);
+  this.y = 250;
+  this.vx = 0;
+  this.vy = 0;
+  this.hue = rand(globalTick - hueRange, globalTick + hueRange);
+  this.saturation = rand(50, 100);
+  this.lightness = rand(20, 70);
+  this.startAlpha = rand(1, 10) / 100;
+  this.alpha = this.startAlpha;
+  this.decayRate = .1;
+  this.startLife = 7;
+  this.life = this.startLife;
+  this.lineWidth = rand(1, 3);
+}
+
+Part.prototype.update = function(){
+  this.vx += (rand(0, 200) - 100) / 1500;
+  this.vy -= this.life/50;
+  this.x += this.vx;
+  this.y += this.vy;
+  this.alpha = this.startAlpha * (this.life / this.startLife);
+  this.radius = this.startRadius * (this.life / this.startLife);
+  this.life -= this.decayRate;
+  if(
+    this.x > cw + this.radius ||
+    this.x < -this.radius ||
+    this.y > ch + this.radius ||
+    this.y < -this.radius ||
+    this.life <= this.decayRate
+  ){
+    this.reset();
+  }
+};
+
+Part.prototype.render = function(){
+  ctx.beginPath();
+  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+  ctx.fillStyle = ctx.strokeStyle = 'hsla('+this.hue+', '+this.saturation+'%, '+this.lightness+'%, '+this.alpha+')';
+  ctx.lineWidth = this.lineWidth;
+  ctx.fill();
+  ctx.stroke();
+};
+
+var createParts = function(){
+  if(!partsFull){
+    if(parts.length > partCount){
+      partsFull = true;
+    } else {
+      parts.push(new Part());
+    }
+  }
+};
+
+var updateParts = function(){
+  var i = parts.length;
+  while(i--){
+    parts[i].update();
+  }
+};
+
+var renderParts = function(){
+  var i = parts.length;
+  while(i--){
+    parts[i].render();
+  }
+};
+
+var clear = function(){
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.fillStyle = 'hsla(0, 0%, 0%, .3)';
+  ctx.fillRect(0, 0, cw, ch);
+  ctx.globalCompositeOperation = 'lighter';
+};
+
+var loop = function(){
+  window.requestAnimFrame(loop, c);
+  clear();
+  createParts();
+  updateParts();
+  renderParts();
+  globalTick++;
+};
+
+window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
+
+loop();
diff --git a/js/game.js b/js/game.js
index ebf4753..2f13809 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,4 +1,7 @@
-var Game = (function() {
+/**
+ * Game object load/saves game resources and stores game objects
+ */
+var Game = (function(Helpers,GameObjects,ObjectStorage) {
   'use strict';
 
   var Game = function() {
@@ -58,4 +61,4 @@ var Game = (function() {
   };
 
   return {Game : Game};
-}());
+}(Helpers,GameObjects,ObjectStorage));
diff --git a/js/gameobjects.js b/js/gameobjects.js
index dccf0b5..75ca21d 100644
--- a/js/gameobjects.js
+++ b/js/gameobjects.js
@@ -1,3 +1,7 @@
+/**
+ * Game objects such as workers, research, upgrades, and achievements.
+ */
+
 var GameObjects = (function() {
   'use strict';
   var GLOBAL_VISIBILITY_THRESHOLD = 0.5;
@@ -22,7 +26,7 @@ var GameObjects = (function() {
     GameObject.apply(this, [{
                              key : 'lab',
                              state : {
-                               name : 'Give your lab an awesome name!',
+                               name : 'Click here to give your lab an awesome name!',
                                detector : 1,
                                factor : 5,
                                data : 0,
diff --git a/js/histogram.js b/js/histogram.js
deleted file mode 100644
index e04f1e5..0000000
--- a/js/histogram.js
+++ /dev/null
@@ -1,137 +0,0 @@
-
-function draw_hist(ident, vals) {
-
-    // A formatter for counts.
-    var formatCount = d3.format(",0d");
-
-    var margin = {top: 10, right: 30, bottom: 30, left: 30},
-        width = 400 - margin.left - margin.right,
-        height = 200 - margin.top - margin.bottom;
-
-    var x = d3.scale.linear()
-        .domain([-5, 5])
-        .range([0, width]);
-
-    // Generate a histogram using twenty uniformly-spaced bins.
-    var data = d3.layout.histogram()
-        .bins(x.ticks(20))
-        (vals);
-
-    var y = d3.scale.linear()
-        .domain([0, d3.max(data, function(d) { return d.y + Math.sqrt(d.y); })])
-        .range([height, 0]);
-
-    correction = y(0);
-
-    var xAxis = d3.svg.axis()
-        .scale(x)
-        .ticks(3)
-        .tickFormat(function(d) { return '';})
-        .orient("bottom");
-
-    var yAxis = d3.svg.axis()
-        .scale(y)
-        .ticks(4)
-        //.tickFormat(function(d) { return ''; })
-        .orient("left");
-
-    var svg = d3.select(ident).append("svg")
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-      .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-    var bar = svg.selectAll(".bar")
-        .data(data)
-        .enter().append("svg:circle")
-        .attr("stroke", "black")
-        .attr("fill", function(d, i) { return "black" })
-        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
-        .attr("r", function(d, i) { return 1 });
-
-    svg.selectAll(".bar")
-        .data(data)
-        .enter().append("svg:line")
-        .attr("x1", 0)
-        .attr("x2", 0)
-        .attr("y1", function(d) { return y(Math.sqrt(d.y))-correction; })
-        .attr("y2", function(d) { return -y(Math.sqrt(d.y))+correction; })
-        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
-        .attr("stroke", "black")
-        .attr("stroke-width", 1)
-
-    svg.selectAll(".bar")
-        .data(data)
-        .enter().append("svg:line")
-        .attr("x1", -2)
-        .attr("x2", 2)
-        .attr("y1", function(d) { return y(Math.sqrt(d.y))-correction; })
-        .attr("y2", function(d) { return y(Math.sqrt(d.y))-correction; })
-        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
-        .attr("stroke", "black")
-        .attr("stroke-width", 1)
-
-    svg.selectAll(".bar")
-        .data(data)
-        .enter().append("svg:line")
-        .attr("x1", -2)
-        .attr("x2", 2)
-        .attr("y1", function(d) { return -y(Math.sqrt(d.y))+correction; })
-        .attr("y2", function(d) { return -y(Math.sqrt(d.y))+correction; })
-        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
-        .attr("stroke", "black")
-        .attr("stroke-width", 1)
-
-    bar.append("rect")
-        .attr("x", 1)
-        .attr("width", x(data[0].dx))
-        .attr("height", function(d) { return height - y(d.y); });
-
-    svg.append("g")
-        .attr("class", "x axis")
-        .attr("transform", "translate(0," + (height ) + ")")
-        .call(xAxis);
-
-    svg.append("text")
-        .attr("class", "x label")
-        .attr("text-anchor", "end")
-        .attr("x", width)
-        .attr("y", height + 20)
-        .text("m (GeV)");
-
-    svg.append("g")
-        .attr("class", "y axis")
-        .attr("transform", "translate(0, 0)")
-        .call(yAxis);
-
-    svg.append("text")
-        .attr("class", "y label")
-        .attr("text-anchor", "end")
-        .attr("y", -20)
-        .attr("dy", "-1em")
-        .attr("dx", "-0.5em")
-        .attr("transform", "rotate(-90)")
-        .text("events");
-
-    return svg;
-}
-
-function Histogram(ident) {
-    // TODO: Allow for arbitrary numbers of events
-    this.values = [];
-    draw_hist(ident, []);
-
-    this.add_events = function(num) {
-        var new_vals = d3.range(num).map(d3.random.normal(0, 1));
-        this.values = $.merge(this.values, new_vals);
-        d3.select(ident).select("svg").remove();
-        draw_hist(ident, this.values);
-    }
-
-    this.clear = function() {
-        d3.select(ident).select("svg").remove();
-        this.values = [];
-        draw_hist(ident, []);
-    }
-}
-
diff --git a/js/ui.js b/js/ui.js
index 0db1056..8630d23 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -8,8 +8,8 @@ var UI = (function () {
    * Also introduce FastClick for faster clicking on mobile.
    */
   $(function() {
-    FastClick.attach(document.body);    
-    
+    FastClick.attach(document.body);
+
     var resize = function() {
       var h = $(window).height();
       var offset = 111;
@@ -66,12 +66,12 @@ var UI = (function () {
         }
       }
     }
-    
+
     $(window).resize(resize);
     resize();
   });
 
-  /** Show a bootstrap modal with dynamic content. */
+  /** Show a bootstrap modal with dynamic content e.g. background info **/
   var showModal = function(title, text, level) {
     var $modal = $('#infoBox');
     $modal.find('#infoBoxLabel').html(title);
@@ -140,6 +140,7 @@ var UI = (function () {
     window.setTimeout(remove(alert), 2000);
   }
 
+  // display cookie warning
   if (typeof $.cookie('cookielaw') === 'undefined') {
     var alert = '<div id="cookielaw" class="alert alert-info" role="alert">';
     alert += '<button type="button" class="btn btn-primary">OK</button>';
@@ -155,20 +156,21 @@ var UI = (function () {
     $('#messages-container').append(alert);
   }
 
-  if (typeof $.cookie('cern60') === 'undefined') {
-    var alert = '<div id="cern60" class="alert alert-info" role="alert">';
-    alert += '<button type="button" class="btn btn-primary">Close</button>';
-    alert += '<i class="fa fa-area-chart alert-glyph"></i> <span class="alert-text"><a class="alert-link" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge" target="_blank">Join the CERN 60 computing challenge!</a></span>';
-    alert += '</div>';
-    alert = $(alert);
-    alert.find('button').click(function ()
-    {
-      $.cookie('cern60', 'closed', { expires: 365 });
-      $('#cern60').slideUp(300, function() { $('#cern60').remove(); });
-    })
-
-    $('#messages-container').append(alert);
-  }
+  // display new user alert
+  // if (typeof $.cookie('cern60') === 'undefined') {
+  //   var alert = '<div id="cern60" class="alert alert-info" role="alert">';
+  //   alert += '<button type="button" class="btn btn-primary">Close</button>';
+  //   alert += '<i class="fa fa-area-chart alert-glyph"></i> <span class="alert-text"><a class="alert-link" href="http://home.web.cern.ch/about/updates/2014/12/take-part-cern-60-public-computing-challenge" target="_blank">Join the CERN 60 computing challenge!</a></span>';
+  //   alert += '</div>';
+  //   alert = $(alert);
+  //   alert.find('button').click(function ()
+  //   {
+  //     $.cookie('cern60', 'closed', { expires: 365 });
+  //     $('#cern60').slideUp(300, function() { $('#cern60').remove(); });
+  //   })
+  //
+  //   $('#messages-container').append(alert);
+  // }
 
   return {
     showAchievement: showAchievement,
@@ -197,19 +199,19 @@ var UI = (function () {
         document.onfocusin = document.onfocusout = onchange;
     // All others:
     else
-        window.onpageshow = window.onpagehide 
+        window.onpageshow = window.onpagehide
             = window.onfocus = window.onblur = onchange;
 
     function onchange (evt) {
         var v = 'visible', h = 'hidden',
-            evtMap = { 
-                focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h 
+            evtMap = {
+                focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
             };
 
         evt = evt || window.event;
         if (evt.type in evtMap)
             detector.visible = evtMap[evt.type] == 'visible';
-        else        
+        else
             detector.visible = !this[hidden];
     }
 })();
diff --git a/json/keywords.json b/json/keywords.json
new file mode 100644
index 0000000..0d63c31
--- /dev/null
+++ b/json/keywords.json
@@ -0,0 +1 @@
+["always makes", "sometimes makes", "never makes", "is", "is made up of","any element","no elements"]
diff --git a/json/runes.json b/json/runes.json
new file mode 100644
index 0000000..702d808
--- /dev/null
+++ b/json/runes.json
@@ -0,0 +1,83 @@
+[
+    "ᚠ",
+    "ᚡ",
+    "ᚢ",
+    "ᚣ",
+    "ᚤ",
+    "ᚥ",
+    "ᚦ",
+    "ᚧ",
+    "ᚨ",
+    "ᚩ",
+    "ᚪ",
+    "ᚫ",
+    "ᚬ",
+    "ᚭ",
+    "ᚮ",
+    "ᚯ",
+    "ᚰ",
+    "ᚱ",
+    "ᚲ",
+    "ᚳ",
+    "ᚴ",
+    "ᚵ",
+    "ᚶ",
+    "ᚷ",
+    "ᚸ",
+    "ᚹ",
+    "ᚺ",
+    "ᚻ",
+    "ᚼ",
+    "ᚽ",
+    "ᚾ",
+    "ᚿ",
+    "ᛀ",
+    "ᛁ",
+    "ᛂ",
+    "ᛃ",
+    "ᛄ",
+    "ᛅ",
+    "ᛆ",
+    "ᛇ",
+    "ᛈ",
+    "ᛉ",
+    "ᛊ",
+    "ᛋ",
+    "ᛌ",
+    "ᛍ",
+    "ᛎ",
+    "ᛏ",
+    "ᛐ",
+    "ᛑ",
+    "ᛒ",
+    "ᛓ",
+    "ᛔ",
+    "ᛕ",
+    "ᛖ",
+    "ᛗ",
+    "ᛘ",
+    "ᛙ",
+    "ᛚ",
+    "ᛛ",
+    "ᛜ",
+    "ᛝ",
+    "ᛞ",
+    "ᛟ",
+    "ᛠ",
+    "ᛡ",
+    "ᛢ",
+    "ᛣ",
+    "ᛤ",
+    "ᛥ",
+    "ᛦ",
+    "ᛧ",
+    "ᛨ",
+    "ᛩ",
+    "ᛪ",
+    "᛫",
+    "᛬",
+    "᛭",
+    "ᛮ",
+    "ᛯ",
+    "ᛰ"
+]
