From e9c975739c044c96cd7eb43acc8ad923971a4d70 Mon Sep 17 00:00:00 2001
From: Brandon Thomas Suit <brandon.suit@gmail.com>
Date: Wed, 16 Nov 2011 03:49:02 -0500
Subject: [PATCH] Reddit Downtime "Cloud" UI implemented & integrated

---
 style.css |  5 ++---
 util.js   | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index 4920b29..00f89bc 100644
--- a/style.css
+++ b/style.css
@@ -14,14 +14,12 @@
 	opacity: 0.05;
 	width: 15px;
 	height: 15px;
-	z-index: -1;
-	overflow: hidden;
+	z-index: -100;
 }
 
 .cloud {
 	position: absolute;
 	display: block;
-	border: 5px solid #f00;
 }
 
 
@@ -32,6 +30,7 @@ body {
 	color: #111;
 	background-color: #fff;
 	font-family: helvetica;
+	overflow: hidden;
 }
 
 ul, ol {
diff --git a/util.js b/util.js
index d1c3bc4..562d493 100644
--- a/util.js
+++ b/util.js
@@ -10,8 +10,12 @@ randInt = function(a, b) {
 };
 
 // ==========================================================
+// The following is an in-progress adaptation of the Reddit "downtime"
+// page 'cloud background animation', which I find really cool and somewhat
+// relaxing. I don't think it will distract from the presentation at all. 
 //
-//
+// TODO: Page change animation is affected by this. I need to lower the 
+// CPU load so everything is smooth and minimal.
 
 function randomInt(min, max) {
 	return Math.floor(Math.random() * (max - min + 1)) + min
@@ -43,6 +47,10 @@ function makeCloud() {
 				puff.className = 'puff'
 				puff.style.left = (x + w) * PIXEL_SIZE + 'px'
 				puff.style.top = (y + h) * PIXEL_SIZE + 'px'
+
+				$(puff).data('left', (x+w)*PIXEL_SIZE);
+				$(puff).data('top', (y+h)*PIXEL_SIZE);
+
 				cloud.appendChild(puff)
 			}
 
@@ -87,6 +95,26 @@ function animateClouds() {
  
 	var newClouds = []
 
+	/* Too CPU intensive... why?
+	$(".puff").each(function(i, attr){
+		var x = $(this).data('x') || 0;
+		//this.style.left = this.
+		x += dx;
+		$(this).data('x', x);
+		$(this).css({
+			left: x + 'px',
+		});
+	});*/
+
+	/*$(".puff").each(function(i, attr){
+		var top = $(this).data('top') || 0;
+		var left = $(this).data('left') || 0;
+		if(top > $(window).height() || left > $(window).width()) {
+			$(this).remove();
+		}
+	});*/
+
+
 	// Move the clouds!
 	for (var i=0; i < clouds.length; i++) 
 	{
@@ -108,7 +136,7 @@ function start() {
 	if (arguments.callee.ran) { return; }
 	arguments.callee.ran = true
  
-	setInterval(animateClouds, 2*1000)
+	setInterval(animateClouds, 5*1000)
  
 	for (n=0; n<50; n++) {
 		addCloud(true)