var loco = {
		
			bubbleCount : 8, // how many bubbles ?
			cellSize : 8,  // repeating cell size 
			cellOffset : 1, // offset of the one-bubble image to make it line up with the background
			oneBubbleHeight : 128,
			slowestFPS: 10,
			fastestFPS: 40,
			containerID : "bubble_base",
			stop: false
		}; // module namespace
		
		 loco.getAdjustedBottom = function () {
				var screenBottom = jQuery('#' + loco.containerID).height();
				var remainder = screenBottom  % loco.cellSize;
				var adjustedBottom = screenBottom - remainder + loco.cellOffset;
				return adjustedBottom;
		}
		
		loco.randomiseRateFromFPSRange = function (slowest,highest) { // e.g. between 10 fps and 40 fps
			slowest = (slowest >0) ? slowest : 1; 
			highest = (highest > slowest) ? highest : slowest + 10;
			var range = highest - slowest;
			var r = Math.floor(Math.random() * range) + slowest;
			// now have fps between slowest and highest
			// convert to frequency in seconds
			return 1/r;
		}
		
		
		 loco.Bubble = function() {
			var rate;
			var steps;
			var top,pe;
			var bubble = jQuery(document.createElement('img'));
			bubble.attr('src', BASE_URL + 'graphics/bubble_strip.png');
			bubble.addClass('bubble');
			bubble.css('left', nextLeft());
			bubble.css('top', loco.getAdjustedBottom() + 'px');
			jQuery('#' + loco.containerID).append(bubble);

			
			
			
			function reset() {
				// move the bubble to a random horizontal position. 
				// set its top to the screen-height 
				steps = loco.getSteps(); // reset in case the screen size changes
				
				top = loco.getAdjustedBottom();
				bubble.css('left', nextLeft());
				bubble.css('top', top + 'px');
				animate();
			}
			function nextLeft() {
				// var position = // (the base width divided by cellSize) - 1  gives the number of possible positions
				var bWidth = jQuery('#' + loco.containerID).width();
				var slots = Math.floor(bWidth / loco.cellSize) - 1;
				var slot = Math.floor(Math.random() * slots);
				var position = slot * loco.cellSize;
				return position + "px";
			}
			
			function animate() {
			    var time = loco.randomiseRateFromFPSRange(loco.slowestFPS, loco.fastestFPS) + 's';
			    bubble.everyTime(time, function() {
						if (steps-- <= 0) {
							if (loco.stop) {
								jQuery(this).stopTime();
							} else {
//							jQuery(this).stopTime(); 
//							reset();
							// Don't redo the timer every time
								steps = loco.getSteps(); // reset in case the screen size changes
								
								top = loco.getAdjustedBottom();
								bubble.css('left', nextLeft());
								bubble.css('top', top + 'px');
							}
						} else {
						    bubble.css('top', (top -= loco.cellSize) + 'px');
						}
				});
			    delete time;
			}
			
			return {
				fizz: reset
			};
		};
		
		loco.getSteps = function () {
			return (loco.getAdjustedBottom() + loco.oneBubbleHeight)/loco.cellSize;
		}
		
		loco.bubbles = function () {
			loco.stop = false;
			for (var i = 0; i < loco.bubbleCount; i++) {
				b = new loco.Bubble();
				b.fizz(); // make it run 
			}
		};
		
		loco.bubblesStop = function () {
			loco.stop = true; // Stop
		};


jQuery(document).ready(function() {
	loco.bubbles();
});