Fixed bubles in detector

css/style.css

@@ -2,7 +2,7 @@ body {
   padding-top: 40px;
 }
 
-* {
+button, .badge, .modal-content {
   border-radius: 0 !important;
 }
 
@@ -302,23 +302,9 @@ h1 br {
     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
-}

index.html

@@ -104,14 +104,8 @@
         <hr class="hidden-xs">
         <div id="detector-holder">
           <div id="detector" ng-controller="DetectorController as dc">
-            <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 id="detector-core" class="test-tube" width="400"
+                           height="400" style=""></canvas>
             <canvas ng-click="dc.click()" id="detector-events" width="400" height="400" class="prevent-select">
               Your detector. Click on it to generate events.
             </canvas>

js/detector/bubblr.js

@@ -38,6 +38,8 @@
 			return;
 		}
 
+		if (this.timerId) this.remove();
+
 		$canvas = $(this.element);
 
 		this.width = $canvas.width();
@@ -63,11 +65,16 @@
 			}, this.options.animationSpeed);
 
 
-
-		// this.clear();
+		$(window).on('resize',this.onResize.bind(this));
 
     };
 
+	Bubblr.prototype.onResize= function(){
+		this.clear();
+		this.width = Math.max($canvas.width(),this.element.width);
+		this.height = Math.max($canvas.height(),this.element.height);
+	};
+
 	Bubblr.prototype.start = function(timespan) {
 		var self = this;
 		if (!this.on){
@@ -78,17 +85,22 @@
 			this.on=true;
 		} else {
 			clearInterval(this.nextOffID);
-			this.nextOff = setTimeout(self.stop.bind(self),timespan);
+			this.nextOffID = setTimeout(self.stop.bind(self),timespan);
 		}
 	};
 
 	Bubblr.prototype.stop = function() {
-		// this.clear();
-		// clearInterval(this.timerId);
 		this.on=false;
-		this.timerId=undefined;
+		this.nextOffID=null;
 	};
 
+	/** remove animation loop **/
+	Bubblr.prototype.remove = function (arguments) {
+		clearInterval(this.timerId);
+		this.timerId=null;
+		detector.bubblr.clear()
+	}
+
 	Bubblr.prototype.animationLoop = function() {
 
 		this.clear();

js/detector/detector.js

@@ -24,14 +24,7 @@ var detector =
 
     lastRender: 0,
 
-    animate: function(time)
-    {
-        // var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
-        // detector.lastRender = time;
-        //
-        // requestAnimFrame(detector.animate);
-        // detector.draw(duration);
-    },
+    bubblr: undefined,
 
     init: function(baseSize)
     {
@@ -86,8 +79,17 @@ var detector =
             detector.events.ctx.scale(ratio, ratio);
         }
 
+
+        detector.initBubbles();
+        // TODO refactor flame animation and put it here
+        // this.flame = $('#detector-flame').flame();
+
+        detector.animate();
+    },
+
+    initBubbles: function(){
         // init the test tube animation
-        var bubblrElem = $('detector-core').bubblr({
+        var bubblrElem = $('#detector-core').bubblr({
             backgroundColor: '#e8e8e8',
             bubbleColor: "#bfbfbf",
             bubbleMinSize: 3,
@@ -101,35 +103,34 @@ var detector =
             // 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();
+        detector.bubblr = bubblrElem.data('plugin_bubblr');
     },
 
-    /** draw a static core on background **/
-    // coreDraw: function()
-    // {
-    //
-    // },
+    animate: function(time)
+    {
+        // var duration = typeof time !== 'undefined' ? time - detector.lastRender : 16;
+        // detector.lastRender = time;
+        //
+        // requestAnimFrame(detector.animate);
+        // detector.draw(duration);
+    },
 
+    /** When a user clicks the detector **/
     addEvent: function()
     {
-
+        detector.bubblr.start(500); // bubble for 500ms, TODO make one bubble
     },
 
+    /** When a worker clicks the detector **/
     addEventExternal: function(numWorkers)
     {
-
+        // detector.bubblr.start(500*numWorkers);
     },
 
     /** Draw current events **/
     draw: function(duration)
     {
-
+        detector.bubblr.start(duration);
     }
 };