Added favico.js

client/css/style.css

@@ -168,7 +168,7 @@ button {
 }
 #sidebar .pulse {
 	color: #fff;
-	transition: color 0s;
+	transition: color 0.2s;
 }
 #sidebar .network {
 	margin-top: 30px;

client/index.html

@@ -157,6 +157,7 @@
 	<script src="/socket.io/socket.io.js"></script>
 	<script src="/js/jquery.js"></script>
 	<script src="/js/jquery.plugins.js"></script>
+	<script src="/js/favico.js"></script>
 	<script src="/js/uri.js"></script>
 	<script src="/js/handlebars.js"></script>
 	<script src="/js/chat.js"></script>

client/js/chat.js

@@ -2,11 +2,6 @@ $(function() {
 	var chat = $("#chat");
 	var sidebar = $("#sidebar");
 
-	setTimeout(function() {
-		// Enable transitions.
-		$("body").removeClass("preload");
-	}, 500);
-	
 	var commands = [
 		"/ame",
 		"/amsg",
@@ -165,9 +160,24 @@ $(function() {
 		}
 	}
 	
+	setTimeout(function() {
+		// Enable transitions.
+		$("body").removeClass("preload");
+	}, 500);
+	
 	var pop = new Audio();
 	pop.src = "/audio/pop.ogg";
 	
+	var favicon = new Favico({
+		animation: "none"
+	});
+	
+	document.addEventListener("visibilitychange", function() {
+		if (sidebar.find(".highlight").length == 0) {
+			favicon.badge("");
+		}
+	});
+	
 	var viewport = $("#viewport");
 	var touchDevice = (window.screen.width <= 768);
 	
@@ -179,6 +189,7 @@ $(function() {
 		if (!target) {
 			return;
 		}
+		
 		viewport.removeClass();
 		sidebar.find(".active").removeClass("active");
 		link.addClass("active")
@@ -186,6 +197,10 @@ $(function() {
 			.removeClass("highlight")
 			.empty();
 		
+		if (sidebar.find(".highlight").length == 0) {
+			favicon.badge("");
+		}
+		
 		$("#main .active").removeClass("active");
 		var window = $(target)
 			.css("z-index", z++)
@@ -231,6 +246,9 @@ $(function() {
 		var last = messages.find(".row:last-child");
 		if (last.hasClass("highlight")) {
 			pop.play();
+			if (document.hidden) {
+				favicon.badge("!");
+			}
 		}
 		
 		var link = $("#channel-" + id + ":not(.active)");