ObserverHerb/index.html

## index.html
<html>
	<head>
		<style>
			body, div.block, div.video {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: black;
			}

			div.block {
				display: inline-block;
				height: 24vh;
				width: 24vw;
				box-sizing: border-box;
				background-size: cover;
			}

			div.video {
				display: inline-block;
				height: 48vh;
				width: 48vw;
				float: left;
				box-sizing: border-box;
				background-image: url('250px-Press_Your_Luck.png');
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			div.sideContainer {
				display: inline-block;
				width: 24vw;
			}

			iframe#player {
				height: 100%;
				width: 100%;
				border: 0;
			}
		</style>
		<script src="pullFeeds.pl"></script>
		<script>
			var selectorInterval, blockSwitchInterval;
			var currentBlock=0;

			function init() {
				buildBlocks();
				selectorInterval = setInterval(function() { moveSelector(); }, 600);
                blockSwitchInterval = setInterval(function() { buildBlocks(); }, 2000);
				document.getElementById('bigboard').play();
			}

			function buildBlocks() {
				for (i=0; i<12; i++) {
					song=songs[getRandomInt(0,songs.length)];
					block=document.getElementById('block'+i);
					block.style.backgroundImage="url('"+song.snippet.thumbnails.high.url+"')";
					block.dataset.title=song.snippet.title;
					block.dataset.url="http://www.youtube.com/embed/"+song.id.videoId+"?autoplay=1";
				}
			}

			function moveSelector() {
				for (i=0; i<12; i++) {
					document.getElementById('block'+i).style.boxShadow='none';
				}
				currentBlock=getRandomInt(0,12);
				document.getElementById('block'+currentBlock).style.boxShadow='inset 0px 0px 50px rgba(255,215,0,0.8)';
			}

			function play() {
				clearInterval(selectorInterval);
				clearInterval(blockSwitchInterval);
				document.getElementById('player').src=document.getElementById('block'+currentBlock).dataset.url;
				document.getElementById('bigboard').pause();
			}

			function getRandomInt(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
			}
		</script>
	</head>
	<body onload="init();" onclick="play()";>
		<div id="block0" class="block"></div><div id="block1" class="block"></div><div id="block2" class="block"></div><div id="block3" class="block"></div><br><div class="sideContainer" style="float: left;"><div id="block4" class="block"></div><br><div id="block5" class="block"></div></div><div id="video" class="video"><iframe id="player" onclick="play();" seamless="seamless"></iframe></div><div class="sideContainer" style="float: left;"><div id="block6" class="block"></div><br><div id="block7" class="block"></div></div><br style="clear: both;"><div id="block8" class="block" style="clear: both;"></div><div id="block9" class="block"></div><div id="block10" class="block"></div><div id="block11" class="block"></div>
	<audio id="bigboard" loop><source src="press_your_luck_the_big_board.wav" type="audio/wav"></audio>
	<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" onclick="play();"></div>
	</body>
</html>


## pullFeeds.pl
#!/usr/bin/perl

use JSON;
use File::Slurp;
use Data::Dumper;
use LWP::Simple;
use LWP::UserAgent;
use URI;

$userAgent = LWP::UserAgent->new( ssl_opts => { verify_hostname => 0 } );

my $strSongs = read_file("/srv/http/songs.json");
my $songs = from_json( $strSongs );
my @completeList;
foreach $song (@$songs) {
	$song =~ s/\s/\+/g;
	$query=URI->new("https://www.googleapis.com/youtube/v3/search");
	$query->query_form({
		"part" => "snippet",
		"q" => "katy+perry".$song,
		"key" => "AIzaSyANqmEtnzV7g9qh3Z-kJ_xXAvjw5MnSeP8"
	});
	$result = from_json($userAgent->get($query)->decoded_content);
	$items = $result->{'items'};
	push @completeList, @$items;
}

print "Content-Type: application/javascript\n\n";
print "songs = ".to_json(\@completeList);

## songs.json
[
	"Dark Horse",
	"Roar",
	"This is How We Do",
	"Teenage Dream",
	"Last Friday Night",
	"International Smile",
	"Unconditionally"
]
	<html>
	<head>
	<style>
	body, div.block, div.video {
	margin: 0;
	padding: 0;
	}

	body {
	background-color: black;
	}

	div.block {
	display: inline-block;
	height: 24vh;
	width: 24vw;
	box-sizing: border-box;
	background-size: cover;
	}

	div.video {
	display: inline-block;
	height: 48vh;
	width: 48vw;
	float: left;
	box-sizing: border-box;
	background-image: url('250px-Press_Your_Luck.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	}

	div.sideContainer {
	display: inline-block;
	width: 24vw;
	}

	iframe#player {
	height: 100%;
	width: 100%;
	border: 0;
	}
	</style>
	<script src="pullFeeds.pl"></script>
	<script>
	var selectorInterval, blockSwitchInterval;
	var currentBlock=0;

	function init() {
	buildBlocks();
	selectorInterval = setInterval(function() { moveSelector(); }, 600);
	blockSwitchInterval = setInterval(function() { buildBlocks(); }, 2000);
	document.getElementById('bigboard').play();
	}

	function buildBlocks() {
	for (i=0; i<12; i++) {
	song=songs[getRandomInt(0,songs.length)];
	block=document.getElementById('block'+i);
	block.style.backgroundImage="url('"+song.snippet.thumbnails.high.url+"')";
	block.dataset.title=song.snippet.title;
	block.dataset.url="http://www.youtube.com/embed/"+song.id.videoId+"?autoplay=1";
	}
	}

	function moveSelector() {
	for (i=0; i<12; i++) {
	document.getElementById('block'+i).style.boxShadow='none';
	}
	currentBlock=getRandomInt(0,12);
	document.getElementById('block'+currentBlock).style.boxShadow='inset 0px 0px 50px rgba(255,215,0,0.8)';
	}

	function play() {
	clearInterval(selectorInterval);
	clearInterval(blockSwitchInterval);
	document.getElementById('player').src=document.getElementById('block'+currentBlock).dataset.url;
	document.getElementById('bigboard').pause();
	}

	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
	}
	</script>
	</head>
	<body onload="init();" onclick="play()";>
	<div id="block0" class="block"></div><div id="block1" class="block"></div><div id="block2" class="block"></div><div id="block3" class="block"></div><br><div class="sideContainer" style="float: left;"><div id="block4" class="block"></div><br><div id="block5" class="block"></div></div><div id="video" class="video"><iframe id="player" onclick="play();" seamless="seamless"></iframe></div><div class="sideContainer" style="float: left;"><div id="block6" class="block"></div><br><div id="block7" class="block"></div></div><br style="clear: both;"><div id="block8" class="block" style="clear: both;"></div><div id="block9" class="block"></div><div id="block10" class="block"></div><div id="block11" class="block"></div>
	<audio id="bigboard" loop><source src="press_your_luck_the_big_board.wav" type="audio/wav"></audio>
	<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" onclick="play();"></div>
	</body>
	</html>
	#!/usr/bin/perl

	use JSON;
	use File::Slurp;
	use Data::Dumper;
	use LWP::Simple;
	use LWP::UserAgent;
	use URI;

	$userAgent = LWP::UserAgent->new( ssl_opts => { verify_hostname => 0 } );

	my $strSongs = read_file("/srv/http/songs.json");
	my $songs = from_json( $strSongs );
	my @completeList;
	foreach $song (@$songs) {
	$song =~ s/\s/\+/g;
	$query=URI->new("https://www.googleapis.com/youtube/v3/search");
	$query->query_form({
	"part" => "snippet",
	"q" => "katy+perry".$song,
	"key" => "AIzaSyANqmEtnzV7g9qh3Z-kJ_xXAvjw5MnSeP8"
	});
	$result = from_json($userAgent->get($query)->decoded_content);
	$items = $result->{'items'};
	push @completeList, @$items;
	}

	print "Content-Type: application/javascript\n\n";
	print "songs = ".to_json(\@completeList);
	[
	"Dark Horse",
	"Roar",
	"This is How We Do",
	"Teenage Dream",
	"Last Friday Night",
	"International Smile",
	"Unconditionally"
	]