Control Panel
-
-
+
+
-
+
diff --git a/static/css/audience.css b/static/css/audience.css
index e773fa8..11c6614 100644
--- a/static/css/audience.css
+++ b/static/css/audience.css
@@ -3,6 +3,7 @@ Copyright 2014 Team 254. All Rights Reserved.
Author: nick@team254.com (Nick Eyre)
*/
+/* Control Panel (Temporary) */
.controlpanel {
position: fixed;
right: 20px;
@@ -13,12 +14,13 @@ Author: nick@team254.com (Nick Eyre)
border: 1px solid black;
}
+/* Top Level Container */
html,body {
height: 100%;
margin: 0;
width: 100%;
}
-.container {
+#topcontainer {
position: fixed;
top: 0;
bottom: 0;
@@ -26,7 +28,7 @@ html,body {
right: 0;
}
-
+/* Design Element: Blinds */
.blinds {
position: fixed;
top: 0;
@@ -48,13 +50,14 @@ html,body {
background-size: 100%;
}
-#logoScreen .blinds.background {
+/* Screen: Logo */
+#logo .blinds.background {
background-image: url('/static/img/endofmatch-bg.png');
}
-#logoScreen .blinds.center {
+#logo .blinds.center {
background-image: url('/static/img/endofmatch-center.png');
-webkit-backface-visibility: hidden;
}
-#logoScreen .blinds.center.blank {
+#logo .blinds.center.blank {
background-image: url('/static/img/endofmatch-center-blank.png');
}
\ No newline at end of file
diff --git a/static/js/audience.js b/static/js/audience.js
index a509c2e..09f592c 100644
--- a/static/js/audience.js
+++ b/static/js/audience.js
@@ -1,43 +1,79 @@
// Copyright 2014 Team 254. All Rights Reserved.
// Author: nick@team254.com (Nick Eyre)
-var handle;
+var screens = {
-function logoScreen(){
- // Initialize
- $('#container').html($('.template#logoScreen').html());
- $('.blinds.center:not(.blank)').css({rotateY: '-180deg'})
+ blank: {
+ init: function(cb){callback(cb);},
+ open: function(cb){callback(cb);},
+ close: function(cb){callback(cb);}
+ },
- // In Animation
- closeBlinds(function(){
- setTimeout(function(){
- $('.blinds.center.blank').transition({rotateY: '180deg'});
- $('.blinds.center:not(.blank)').transition({rotateY: '0deg'});
- }, 400);
- });
+ logo: {
+ init: function(cb){
+ $('.blinds.center:not(.blank)').css({rotateY: '-180deg'});
+ callback(cb);
+ },
+ open: function(cb){
+ closeBlinds(function(){
+ setTimeout(function(){
+ $('.blinds.center.blank').transition({rotateY: '180deg'});
+ $('.blinds.center:not(.blank)').transition({rotateY: '0deg'}, function(){
+ callback(cb);
+ });
+ }, 400);
+ });
+ },
+ close: function(cb){
+ $('.blinds.center.blank').transition({rotateY: '360deg'});
+ $('.blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
+ openBlinds(callback);
+ });
+ }
+ }
- // Close Function
- return function(callback){
- $('.blinds.center.blank').transition({rotateY: '360deg'});
- $('.blinds.center:not(.blank)').transition({rotateY: '180deg'}, function(){
- openBlinds(callback);
+};
+
+var currentScreen = 'blank';
+function openScreen(screen){
+
+ // If Screen Exists
+ if(typeof(screens[screen]) == 'object' && $('.template#'+screen).length > 0 && currentScreen != screen){
+
+ // Initialize New Screen
+ $('#topcontainer').append("
"+$('.template#'+screen).html()+"
");
+ screens[screen].init(function(){
+
+ // Close Current Screen
+ screens[currentScreen].close(function(){
+
+ // Open New Screen
+ currentScreen = screen;
+ screens[screen].open();
+
+ });
});
}
}
-function closeBlinds(callback){
+function callback(cb){
+ if(typeof(cb) == 'function')
+ cb();
+}
+
+function closeBlinds(cb){
$('.blinds.right').transition({right: 0});
$('.blinds.left').transition({left: 0}, function(){
$(this).addClass('full');
- callback();
+ callback(cb);
});
}
-function openBlinds(callback){
+function openBlinds(cb){
$('.blinds.right').show();
$('.blinds.left').removeClass('full');
$('.blinds.right').show().transition({right: '-50%'});
$('.blinds.left').transition({left: '-50%'}, function(){
- callback();
+ callback(cb);
});
}