Add support for floating balloons used in the birthday celebrations

js/hearts.js

@@ -0,0 +1,107 @@
+/*
+    Script: Floating Hearts using Canvas and native JS
+    Author: Abhinav Rastogi
+    Date: Feb 14, 2013
+
+    Sample Usage:
+
+    floatingLove({
+            'minSpeed': 1.5,        //Minimum vertical speed
+            'maxSpeed': 2,          //Maximum vertical speed
+            'minAmplitude': 0.5,    //Minimum amplitude (>0)
+            'maxAmplitude': 1.5,    //Maximum amplitude (>0)
+            'minFrequency': 0.08,    //Maximum Frequency (>0)
+            'maxFrequency': 0.1,    //Maximum Frequency (>0)
+            'minAlpha': 0.7,        //Minimum opacity (0-1)
+            'maxAlpha': 0.8,        //Maximum opacity (0-1)
+            'minScale': 0.2,        //Minimum size multiplier (0-1)
+            'maxScale': 0.8,        //Maximum size multiplier (0-1)
+            'interval': 1000,       //Time gap between each heart
+            'delay': 1000           //Starting delay from initialization
+        }).init();
+*/
+
+var floatingLove = function(settings) {
+	var canvas, context;	
+	var res_heart, body;
+    var pool = new Array();
+	var arr_hearts = new Array();
+
+	window.requestAnimFrame = (function(callback) {
+        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
+        function(callback) {
+          window.setTimeout(callback, 1000/60);
+        };
+    })();
+
+    var generateRandomHeart = function() {
+        var obj_heart;
+        if(pool.length>0) {
+            obj_heart=pool.pop();
+        } else {
+            obj_heart={};
+            obj_heart.image=res_heart;
+        }
+
+        obj_heart.x = (window.innerWidth-100)*Math.random();
+        obj_heart.y = window.innerHeight;
+        obj_heart.speed = settings.minSpeed + (settings.maxSpeed-settings.minSpeed)*Math.random();
+        obj_heart.amplitude = settings.minAmplitude + (settings.maxAmplitude - settings.minAmplitude) * Math.random();
+        obj_heart.frequency = settings.minFrequency + (settings.maxFrequency - settings.minFrequency) * Math.random();
+        obj_heart.alpha = settings.minAlpha + (settings.maxAlpha - settings.minAlpha)*Math.random();
+        obj_heart.size = (res_heart.height * settings.minScale) + (res_heart.height*(settings.maxScale - settings.minScale)) * Math.random();
+        obj_heart.width = res_heart.width;
+        obj_heart.height = res_heart.height;
+
+        arr_hearts.push(obj_heart);
+        setTimeout(generateRandomHeart, settings.interval);
+    };
+
+    var animate = function() {
+    	requestAnimFrame(function() {
+          animate();
+        });
+        context.clearRect(0,0,canvas.width,canvas.height);
+        var heart;
+        for(var i=0; i<arr_hearts.length; i++) {
+        	heart = arr_hearts[i];
+        	context.globalAlpha = heart.alpha;
+        	context.drawImage(heart.image, heart.x, heart.y, heart.size, heart.size * heart.height/heart.width);	
+	    	heart.y-=heart.speed;
+	    	heart.x = heart.x + heart.amplitude*Math.sin(heart.y*heart.frequency);	
+    	}
+    	for(var i=0; i<arr_hearts.length; i++) {
+    		if(arr_hearts[i].y<-100) {
+    			pool.push(arr_hearts.splice(i,1)[0]);
+    			break;
+    		}
+    	}	
+    };	
+
+	var init = function() {
+		canvas = document.createElement('canvas');
+		canvas.height = window.innerHeight || html.clientHeight;
+        canvas.width = window.innerWidth || html.clientWidth;
+        var canvasStyle = canvas.style;
+        canvasStyle.position = 'fixed';
+        canvasStyle.top = 0;
+        canvasStyle.left = 0;
+        canvasStyle.zIndex = 1138;
+        canvasStyle['pointerEvents'] = 'none';
+        body = document.getElementsByTagName('body')[0];
+        body.appendChild(canvas);
+
+        res_heart = new Image();
+        res_heart.onload = function() {
+        	animate();	
+        };	
+        res_heart.src="/static/3rdbdayballoon2_75.png";
+
+        setTimeout(generateRandomHeart, settings.delay);
+        context = canvas.getContext('2d');
+	};
+
+	return ({
+		'init': init
+	});
+};

js/loadballoons.js

@@ -0,0 +1,48 @@
+if (active_page === "catalog" || active_page === "thread" || active_page === "index" ||  active_page === "ukko") {
+
+$(document).on("ready", function() {
+if (window.Options && Options.get_tab('general')) {
+	Options.extend_tab("general", 
+	"<fieldset><legend>Special Event Effects </legend>"
+	+ ("<label class='event-effect' id='eventeffect'><input type='checkbox' /> Enable Special Event Effects</label>")
+	+ "</fieldset>");
+}
+
+$('.event-effect').on('change', function(){
+	var setting = $(this).attr('id');
+
+	localStorage[setting] = $(this).children('input').is(':checked');
+	location.reload();
+});
+
+if (!localStorage.eventeffect) {
+	localStorage.eventeffect = 'true';
+}
+
+function getSetting(key) {
+	return (localStorage[key] == 'true');
+}
+
+if (getSetting('eventeffect')) $('#eventeffect>input').prop('checked', 'checked');
+
+function initBalloons() { //Pashe, influenced by tux, et al, WTFPL
+	if (!getSetting("eventeffect")) {return;}
+
+floatingLove({
+        'minSpeed': 1.5,        //Minimum vertical speed
+        'maxSpeed': 2,          //Maximum vertical speed
+        'minAmplitude': 0.5,    //Minimum amplitude (>0)
+        'maxAmplitude': 1.5,    //Maximum amplitude (>0)
+        'minFrequency': 0.08,    //Maximum Frequency (>0)
+        'maxFrequency': 0.1,    //Maximum Frequency (>0)
+        'minAlpha': 0.7,        //Minimum opacity (0-1)
+        'maxAlpha': 0.8,        //Maximum opacity (0-1)
+        'minScale': 0.2,        //Minimum size multiplier (0-1)
+        'maxScale': 0.8,        //Maximum size multiplier (0-1)
+        'interval': 1000,       //Time gap between each heart
+        'delay': 1000           //Starting delay from initialization
+    }).init();
+}
+initBalloons();
+});
+}