From aabdaae96a9d50fd484c4e474ff705ec1f67d500 Mon Sep 17 00:00:00 2001
From: Alexis Sukrieh <sukria@sukria.net>
Date: Sat, 5 Dec 2009 15:46:17 +0100
Subject: [PATCH] keybindings support and UI controls

---
 public/css/style.css  |  4 +---
 views/layouts/main.tt |  4 +++-
 views/remote.tt       | 32 +++++++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 11 deletions(-)
diff --git a/public/css/style.css b/public/css/style.css
index 4a7f59e..560fea1 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,12 +1,10 @@
 body {
     font-family: Lucida,sans-serif;   
     color: #eee;
-    background-color: #1f1b1a;
+    background: #212121 url(/images/boxee_logo.png) no-repeat top right;
 }
 
 #content {
-    color: #000;
-    background-color: #eee;
     padding: 1em;
     margin: 1em;
     padding-top: 0.5em;
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index f004920..27a05f9 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -4,7 +4,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
 <head>
 <title>BoxeeRemote</title>
-<script src="/javascripts/prototype.js"></script>
+<script type="text/javascript" src="/javascripts/prototype.js"></script>
+<script type="text/javascript" src="/javascripts/effects.js"></script>
+<script type="text/javascript" src="/javascripts/bind.js"></script>
 <link rel="stylesheet" type="text/css" href="/css/style.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
diff --git a/views/remote.tt b/views/remote.tt
index 5adfbac..8b0fe94 100644
--- a/views/remote.tt
+++ b/views/remote.tt
@@ -1,8 +1,26 @@
 <script type="text/javascript">
 function send_action(action) {
-	new Ajax.Request('/action/'+action);
+	$(action).src = '/images/'+action+'_highlight.png';
+	new Ajax.Request('/action/'+action, {
+		method: 'post',
+		onLoading: function() {
+			true;
+		},
+		onComplete: function() {
+			$(action).src = '/images/'+action+'.png';
+		}
+	});
 }
 
+Bind.init();
+
+Bind.bind('up', function() { send_action('up') } );
+Bind.bind('down', function() { send_action('down') } );
+Bind.bind('left', function() { send_action('left') } );
+Bind.bind('right', function() { send_action('right') } );
+Bind.bind('backspace', function() { send_action('back') } );
+Bind.bind('return', function() { send_action('start') } );
+
 </script>
 
 <div style="margin-bottom: 1em; font-size: 12px;">
@@ -18,23 +36,23 @@ function send_action(action) {
 <table border="0">
     <tr>
         <td></td>
-        <td><a href="#" onclick="send_action('up');return(false);">UP</a></td>
+        <td><a href="#" onclick="send_action('up');return(false);"><img id="up" src="/images/up.png" border="0" /></a></td>
         <td></td>
     </tr>
     <tr>
-        <td><a href="#" onclick="send_action('left');return(false);">LEFT</a></td>
-        <td><a href="#" onclick="send_action('start');return(false);">OK</a></td>
-        <td><a href="#" onclick="send_action('right');return(false);">RIGHT</a></td>
+        <td><a href="#" onclick="send_action('left');return(false);"><img id="left" src="/images/left.png" border="0" /></a></td>
+        <td><a href="#" onclick="send_action('start');return(false);"><img id="start" src="/images/start.png" border="0" /></a></td>
+        <td><a href="#" onclick="send_action('right');return(false);"><img id="right" src="/images/right.png" border="0" /></a></td>
     </tr>
     <tr>
         <td></td>
-        <td><a href="#" onclick="send_action('down');return(false);">DOWN</a></td>
+        <td><a href="#" onclick="send_action('down');return(false);"><img id="down" src="/images/down.png" border="0" /></a></td>
         <td></td>
     </tr>
 </table>
 </div>
 
-<a href="#" onclick="send_action('back')">BACK</a>
+<a href="#" onclick="send_action('back'); return(false);"><span id="back">BACK</span></a>
 
 <br>
 TODO : PLAY/PAUSE VOLUME +/- 
