* chords: Allow clicking on tab to cycle alternate versions

2 files changed, 21 insertions, 2 deletions

diff --git a/index.php b/index.php
index c415408..1df2c64 100755
--- a/index.php
+++ b/index.php
@@ -55,8 +55,8 @@ Author: Zach DeCook
 
 	<div class = "col-xs-6 col-xs-offset-0 ">
 		<div id="chordarea">
-			<canvas id='guitarregion' width="100" height="100"></canvas>
-			<canvas id='ukuleleregion' width="100" height="100"></canvas>
+			<canvas id='guitarregion' width="100" height="100" onclick="cycle(guitarObj);"></canvas>
+			<canvas id='ukuleleregion' width="100" height="100" onclick="cycle(ukeObj);"></canvas>
 		</div>
 		<i>Experimental: Click on a chord to view guitar tablature</i>
 		<div id="messages"></div>
diff --git a/jsonly.js b/jsonly.js
index 4d68c42..ae1ceb1 100644
--- a/jsonly.js
+++ b/jsonly.js
@@ -10,11 +10,17 @@ var guitarObj = {
 	name: 'guitar',
 	dict: chordsDict,
 	region: 'guitarregion',
+	chord: '',
+	chordd: '',
+	number: 0,
 }
 var ukeObj = {
 	name: 'ukulele',
 	dict: ukulelechordsDict,
 	region: 'ukuleleregion',
+	chord: '',
+	chordd: '',
+	number: 0,
 }
 
 function do_transpose()
@@ -122,6 +128,9 @@ function plotChord(chord, chordd, obj){
 	try{
 		tab = obj.dict[chordd][0];
 		ChordCharter.drawChord( obj.region, 30, 25, chord, tab );
+		obj.chord = chord;
+		obj.chordd = chordd;
+		obj.number = 0;
 	}
 	catch(target){
 		$("#messages").prepend("No "+obj.name+" tab for '" + chord + "'. ");
@@ -134,3 +143,13 @@ function plotChord(chord, chordd, obj){
 	}
 
 }
+
+function cycle(obj){
+	var canvas = $("#"+obj.region)[0];
+	var context = canvas.getContext('2d');
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
+	obj.number = (obj.number + 1) % obj.dict[obj.chordd].length
+	tab = obj.dict[obj.chordd][obj.number]
+	ChordCharter.drawChord( obj.region, 30, 25, obj.chord +"("+obj.number + ")", tab );
+}