shoffing/MumbleCounter.html

## MumbleCounter.html
<head>
	<title>PropSlam Mumble Counter</title>

	<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<style>
		body {
			font-family: 'Inconsolata', sans-serif;
		}

		#cont {
			margin: 0 auto;
			padding: 32px;
			max-width: 960px;
			background-color: #C9D787;
			border: 3px solid #7D8A2E;
			border-radius: 32px;
		}

		ul {
			max-width: 960px;
			padding-left: 8px;
		}

		#join {
			float: right;
			border: 1px solid #7D8A2E;
			border-radius: 8px;
			padding: 8px;
			text-decoration: none;
			color: #000;
			background-color: #FFF;
		}
		#join:hover {
			background-color: #7D8A2E;
			color: #FFF;
		}

		.channel {
			margin: 12px 4px 12px 4px;
			padding: 2px;
			padding-left: 4px;
			list-style-type: none;
			font-size: 18px;
			border: 1px solid #7D8A2E;
			border-radius: 8px;
			background-color: #FFC0A9;
			width: auto;
		}

		.channel-users {
			margin-left: 4px;
			font-size: 14px;
			color: #444;
		}
		.channel-users-arrow {
			font-size: 18px;
		}
	</style>
</head>

<body>
	<div id="cont">
		<a href="mumble://107.170.117.132/Chat?title=Root&version=1.2.0" id="join">JOIN US</a>

		<h2 id="header">PropSlam's Mumble Server:</h2>
		<ul id="list"></ul>
	</div>

	<script>
		var mumbleRoot;

		function refreshCounter() {
			$.get("http://107.170.117.132/MumPI/?view=json&serverId=1", function(e) {
				mumbleRoot = e.root;
				$("#list").html(traverseChannels(mumbleRoot));

				// Alternate colors based on depth
				$.each($(".channel"), function(i, v) {
					var depth = 0;
					var cc = v;
					while(cc.parentNode !== document.getElementById("list")) {
						depth += 0.5;
						cc = cc.parentNode;
					}

					if(depth % 2 == 0) {
						$(this).css("background-color", "#FF8598");
					}
				});
			});
		}
		setInterval(refreshCounter, 1000);
		refreshCounter();

		function traverseChannels(root) {
			var result = "";

			result += "<li class='channel'><i><b>" + root.name + "</b></i>";
			if(root.users.length > 0) {
				result += "<br/><span class='channel-users-arrow'>&#8594;</span><span class='channel-users'>Users [" + root.users.length + "]: " + root.users.map(function(x) { return x.name; }).join(", ") + "</span>";
			}

			if(root.channels.length > 0) {
				// Sort subchannels alphabetically
				root.channels.sort(function(a, b) { if(a.name > b.name) { return 1; } if(a.name < b.name) { return -1; } return 0; });

				result += "<ul>";
				for(var i = 0; i < root.channels.length; i++) {
					result += traverseChannels(root.channels[i]);
				}
				result += "</ul>";
			}
			result += "</li>";

			return result;
		}

	</script>
</body>
	<head>
	<title>PropSlam Mumble Counter</title>

	<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<style>
	body {
	font-family: 'Inconsolata', sans-serif;
	}

	#cont {
	margin: 0 auto;
	padding: 32px;
	max-width: 960px;
	background-color: #C9D787;
	border: 3px solid #7D8A2E;
	border-radius: 32px;
	}

	ul {
	max-width: 960px;
	padding-left: 8px;
	}

	#join {
	float: right;
	border: 1px solid #7D8A2E;
	border-radius: 8px;
	padding: 8px;
	text-decoration: none;
	color: #000;
	background-color: #FFF;
	}
	#join:hover {
	background-color: #7D8A2E;
	color: #FFF;
	}

	.channel {
	margin: 12px 4px 12px 4px;
	padding: 2px;
	padding-left: 4px;
	list-style-type: none;
	font-size: 18px;
	border: 1px solid #7D8A2E;
	border-radius: 8px;
	background-color: #FFC0A9;
	width: auto;
	}

	.channel-users {
	margin-left: 4px;
	font-size: 14px;
	color: #444;
	}
	.channel-users-arrow {
	font-size: 18px;
	}
	</style>
	</head>

	<body>
	<div id="cont">
	<a href="mumble://107.170.117.132/Chat?title=Root&version=1.2.0" id="join">JOIN US</a>

	<h2 id="header">PropSlam's Mumble Server:</h2>
	<ul id="list"></ul>
	</div>

	<script>
	var mumbleRoot;

	function refreshCounter() {
	$.get("http://107.170.117.132/MumPI/?view=json&serverId=1", function(e) {
	mumbleRoot = e.root;
	$("#list").html(traverseChannels(mumbleRoot));

	// Alternate colors based on depth
	$.each($(".channel"), function(i, v) {
	var depth = 0;
	var cc = v;
	while(cc.parentNode !== document.getElementById("list")) {
	depth += 0.5;
	cc = cc.parentNode;
	}

	if(depth % 2 == 0) {
	$(this).css("background-color", "#FF8598");
	}
	});
	});
	}
	setInterval(refreshCounter, 1000);
	refreshCounter();

	function traverseChannels(root) {
	var result = "";

	result += "<li class='channel'><i><b>" + root.name + "</b></i>";
	if(root.users.length > 0) {
	result += "<br/><span class='channel-users-arrow'>→</span><span class='channel-users'>Users [" + root.users.length + "]: " + root.users.map(function(x) { return x.name; }).join(", ") + "</span>";
	}

	if(root.channels.length > 0) {
	// Sort subchannels alphabetically
	root.channels.sort(function(a, b) { if(a.name > b.name) { return 1; } if(a.name < b.name) { return -1; } return 0; });

	result += "<ul>";
	for(var i = 0; i < root.channels.length; i++) {
	result += traverseChannels(root.channels[i]);
	}
	result += "</ul>";
	}
	result += "</li>";

	return result;
	}

	</script>
	</body>