osu! site FL/HD mod implementation (April Fools' 2012)

aprilfoold2012.htm

<!-- April Fools' 2012 <3 peppy -->
<!-- Concept courtesey of SapphireGhost -->
<style>
.flashlight {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: url('/images/flashlight.png');
	position: fixed;
	z-index: 99999;
	pointer-events:none;
}

.modtoggle
{
	z-index: 9990;
	display: block;
	position: fixed;
	opacity: 0;
	width: 69px;
	height: 65px;
	top: 5px;
	right: 5px;
}

.modtoggle.fl
{
	background: no-repeat url('/images/selection-mod-flashlight.png');
}

.modtoggle.hd
{
	top: 68px;
	background: no-repeat url('/images/selection-mod-hidden.png');
}

.hiddenA {
	opacity : 0.01;
}

.hiddenA:hover {
	opacity: 1;
}
</style>

<script>
var fl = null;
var modToggle = null;
var timer;

$("document").ready(function() {
	var random = 1;

	switch (Math.floor(Math.random() * 10))
	{
		case 0:
		case 3:
			$("body").append("<div class='flashlight'></div><div class='modtoggle fl'></div>");
			modToggle = $(".modtoggle");

			fl = $(".flashlight");

			$("body").mousemove(function(e) {
				if (fl.is(":visible"))
					fl.css('background-position', (e.pageX - 1280) + 'px ' + (e.pageY - 720 - $(document).scrollTop()) + 'px');
			});

			$(".fl").click(function(e) { fl.toggle(); });
		case 1:
		case 3:
			$("body").append("<div class='modtoggle hd'></div>");
			modToggle = $(".modtoggle");

			$("a").addClass("hiddenA");
			$(".hd").click(function() { $("a").toggleClass("hiddenA"); });
			break;
	}

	if (modToggle != null) timer = setInterval(increaseOpacity, 50);
});

var currOpacity = 0;
function increaseOpacity()
{
	currOpacity += 0.01;
	if (currOpacity >= 0.90)
	{
		currOpacity = 0.90;
		clearInterval(timer);
	}

	if (fl != null)
	{
		fl.css('opacity',currOpacity);
		modToggle.css('opacity', currOpacity < 0.9 ? 0 : currOpacity);
	}
	else
	{
		modToggle.css('opacity', currOpacity);
	}
}
</script>