From 1872a047c51a74afa9289e1ec14027e1c46e6f18 Mon Sep 17 00:00:00 2001
From: Gabriel Florit <gabriel.florit@velir.com>
Date: Fri, 16 Mar 2012 19:01:15 -0400
Subject: [PATCH] slider trigger is ctrl on linux, alt everywhere else

---
 data/chord.txt |  3 +--
 js/water.js    | 13 ++++++++++---
 water.html     |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/data/chord.txt b/data/chord.txt
index 6855204..d897e78 100644
--- a/data/chord.txt
+++ b/data/chord.txt
@@ -1,8 +1,7 @@
+
 // chord diagram from http://mbostock.github.com/d3/ex/chord.html
 // colors from the twilight theme: http://bit.ly/wufWv1
 
-// click the pulsing red numbers and hold down the alt key!
-
 var chord = d3.layout.chord()
   .padding(0.05)
   .sortSubgroups(d3.descending)
diff --git a/js/water.js b/js/water.js
index f3a3213..f99d281 100644
--- a/js/water.js
+++ b/js/water.js
@@ -168,17 +168,24 @@ slider.slider({
 	}
 });
 
+// use control key on linux, alt key everywhere else
+var sliderKey = navigator && navigator.platform && navigator.platform.toLowerCase().indexOf('linux') != -1
+	? 'ctrl' : 'alt';
+
+// display slider key on page
+$('#sliderKey').text(sliderKey);
+
 // trigger slider on control
-$('textarea').bind('keydown.alt', function(e) {
+$('textarea').bind('keydown.' + sliderKey, function(e) {
 	// are we on a token?
 	if (onNumeric) {
 		slider.css('visibility', 'visible'); 
 	}
-}).bind('keyup.alt', function(e) {
+}).bind('keyup.' + sliderKey, function(e) {
 	slider.css('visibility', 'hidden');
 });
 
-$('#slider').bind('keyup.alt', function(e) {
+$('#slider').bind('keyup.' + sliderKey, function(e) {
 	slider.css('visibility', 'hidden');
 });
 
diff --git a/water.html b/water.html
index c1c84fc..626ab9f 100644
--- a/water.html
+++ b/water.html
@@ -61,7 +61,7 @@
         </div>
         <div id="slider"></div>
         <div id='instructions'>
-            click a number and hold down the alt key
+            click a number and hold down the <span id='sliderKey'></span> key
         </div>
         <div id='aboutAndAttribution'>
             <a id='about' href='blog-water'>what is this?</a>