Add eyecandy bouncing coins

app/assets/javascripts/application.js

@@ -17,6 +17,7 @@
 // require react_ujs
 // require components
 //= require qrcode.min.js
+//= require eyecandy
 // require react-rails-hot-loader
 // require_tree .
 
@@ -28,3 +29,4 @@ $(document).ready(function(){
     $('#play-buttons').load("#{request.path} #play-buttons");
   }, 2000);
 });
+

app/assets/javascripts/eyecandy.js

@@ -0,0 +1,76 @@
+(function ($, window, undefined) {
+	$.fn.marqueeify = function (options) {
+		var settings = $.extend({
+			horizontal: true,
+			vertical: true,
+			speed: 100, // In pixels per second
+			container: $(this).parent(),
+			bumpEdge: function () {}
+		}, options);
+		
+		return this.each(function () {
+			var containerWidth, containerHeight, elWidth, elHeight, move, getSizes,
+				$el = $(this);
+
+			getSizes = function () {
+				containerWidth = settings.container.outerWidth();
+				containerHeight = settings.container.outerHeight();
+				elWidth = $el.outerWidth();
+				elHeight = $el.outerHeight();
+			};
+
+			move = {
+				right: function () {
+					$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
+						settings.bumpEdge();
+						move.left();
+					}});
+				},
+				left: function () {
+					$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
+						settings.bumpEdge();
+						move.right();
+					}});
+				},
+				down: function () {
+					$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
+						settings.bumpEdge();
+						move.up();
+					}});
+				},
+				up: function () {
+					$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
+						settings.bumpEdge();
+						move.down();
+					}});
+				}
+			};
+
+			getSizes();
+
+			if (settings.horizontal) {
+				move.right();
+			}
+			if (settings.vertical) {
+				move.down();
+			}
+
+      // Make that shit responsive!
+      $(window).resize( function() {
+        getSizes();
+      });
+		});
+	};
+})(jQuery, window);
+
+$(document).ready( function() {
+
+	$('.eyecandy').marqueeify({
+		speed: 300,
+		bumpEdge: function () {
+			var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
+			$('.marquee').css('background', newColor);
+      $(this)[0].speed = Math.random()*420;
+		}
+	});
+});

app/assets/stylesheets/application.css.sass

@@ -102,6 +102,13 @@ header
   font-family: Impact, Anton, fantasy, sans-serif
   font-weight: lighter
 
+.eyecandy
+  display: block
+  left: 0
+  position: absolute
+  top: 0
+
+
 li
   list-style: none
 

app/views/visitors/index.html.haml

@@ -9,3 +9,104 @@
   -# = link_to 'Browse Tables', tables_path
   -# = link_to 'Tutorial', tutorial_path
   -# = link_to 'About', page_path('about')
+
+
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-glass.png", width: 32
+.eyecandy
+  = image_tag "ICYPEES-coin.png", width: 32