Is there anyone at the hackerspace?

css/style.css

@@ -191,6 +191,7 @@ header {
 	background-position: center;
 
 	border-bottom: 1px solid black;
+    position: relative;
 }
 
 #main {
@@ -301,3 +302,44 @@ div .twtr-widget p {
 	font-weight: bold;
 	opacity: 0.5;
 }
+
+#status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+#status img {
+    width: 118px;
+    height: 80px;
+    float: right;
+}
+
+#status-tooltip {
+    float: right;;
+    margin-left: 5px;
+    margin-top: 15px;
+    height: 50px;
+    width: 410px;
+
+    background-image: url('../img/tooltip-green.png');
+}
+
+#status-tooltip p {
+    padding-left: 7px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-right: 20px;
+    margin: 0;
+    color: #eee;
+    line-height: 130%;
+    font-weight: 600;
+    font-family: verdana, sans-serif;
+    font-size: 14px;
+}
+
+#status-tooltip a {
+    color: #eee;
+    text-decoration: none;
+    border-bottom: 1px solid #ccc;
+
+}

index.html

@@ -28,6 +28,14 @@
   </header>
   <div role="main" id="main">
   	<div id="rotimage">
+         <div id="status" style="display: none;">
+             <img src="/img/status-open.png" alt="Sorry, we're open! - The Warsaw Hackerspace is open right now." />
+             <div id="status-tooltip" style="display: none;">
+                 <p>
+                    According to <a href="https://at.hackerspace.pl">our instruments</a> there are 5 people at the hackerspace right now.
+                 </p>
+             </div>
+         </div>
 	 </div>
 	 <div id="content">
 		 <h1>Czym jest Hackerspace?</h1>

js/script.js

@@ -28,6 +28,31 @@ $(function(){
 			});
 		}
 	});
+
+    $.get("/at", function(data) {
+        var jdata = JSON.parse(data);
+        var users = jdata.users.length;
+        
+        if (users > 0)
+        {
+            var text = 'According to <a href="http://at.hackerspace.pl">our instruments</a> there ';
+            if (users == 1)
+                text += 'is one person';
+            else
+                text += 'are ' + users + ' people';
+            text += ' at the hackerspace right now.';
+
+            $("#status-tooltip p").html(text);
+            $("#status img").attr("src", "/img/status-open.png");
+            $("#status-tooltip").css("display", "block");
+            $("#status").css("display", "block");
+        }
+        else
+        {
+            $("#status img").attr("src", "/img/status-closed.png");
+            $("#status").css("display", "block");
+        }
+    });
 });
 
 

test/static.py

@@ -1,6 +1,13 @@
 from flask import Flask, render_template
+import urllib
+
 app = Flask(__name__, static_folder='../', static_url_path='', template_folder='../')
 @app.route('/')
 def index():
     return render_template('index.html')
+
+@app.route('/at')
+def at():
+    return urllib.urlopen("http://at.hackerspace.pl/api").read()
+
 app.run()