musicgrid: title hover, set font color dependent on background

1 files changed, 9 insertions, 4 deletions

diff --git a/www/js/musicgrid.js b/www/js/musicgrid.js
index 695bca4..70722d0 100644
--- a/www/js/musicgrid.js
+++ b/www/js/musicgrid.js
@@ -63,13 +63,18 @@ Musicgrid.prototype.fetch = function() {
 
 Musicgrid.prototype.updateTable = function() {
   var $table = $('#app-musicgrid table');
+  $('tr td', $table).html('').css('background-color', '').css('color', '').attr('title', null);
   $(this.clocks).each(function(index, clock) {
     var $td = $('tr[data-dow="' + clock.dow + '"] td[data-hour="' + clock.hour +'"]', $table);
-    var $div = $('<div>' + clock.name + '<br />' + clock.title + '</div>');
-    $div.css('background-color', clock.color);
+    $td.html(clock.name);
+    $td.attr('title', clock.title);
+    $td.css('background-color', clock.color);
+    if($td.isBackgroundDark()) {
+      $td.css('color', '#ffffff');
+    }
+
     // todo: move this css to stylesheet
-    $div.css('text-align', 'center');
-    $td.html($div);
+    $td.css('text-align', 'center');
   });
 };