// keyboard calculator
// copyright 6th April 2006, 2nd September 2006 by Stephen Chapman
// http://javascript.about.com/
//
// specifications and testing by Espie Estrella
// http://musiced.about.com/
//
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
var topArray = ['wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','lr1'];
var bottomArray = ['wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','lr2'];
var notes = ['C','C# / Db','D','D# / Eb','E','F','F# / Gb','G','G# / Ab','A','A# / Bb','B / Cb'];
var disp = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
var keys = ['1,5,8','1,5,8,12','1,3,5,8,12','1,3,5,6,8,12','1,3,5,8,10,12','1,5,6,8,12','1,5,8,10,12','1,6,8,12','1,3,6,8,12','1,4,8','1,4,8,10','1,4,8,11','1,3,4,8,11','1,3,4,6,8,11','1,3,4,8,10,11','1,3,4,8','1,3,4,8,10','1,4,6,8,11','1,4,8,10,11','1,4,8,12','1,3,4,8,12','1,3,4,6,8,12','1,3,4,8,10,12','1,4,6,8,12','1,4,8,10,12','1,5,8,11','1,5,6,8,11','1,5,8,10,11','1,3,8','1,6,8','1,6,8,10','1,6,8,11','1,3,6,8,11'];
var keynames = ['Major','Major 7th','Major 9','Major 11','Major 13','Major 7th add 11','Major 7th add 13','Major 7th Sus4','Major 9 Sus4','Minor','Minor 6','Minor 7th','Minor 9','Minor 11','Minor 13','Minor add 9','Minor 6 add 9','Minor 7th add 11','Minor 7th add 13','Minor Major 7th','Minor Major 9','Minor Major 11','Minor Major 13','Minor Major 7th add 11','Minor Major 7th add 13','Dominant 7th','Dominant 7th add 11','Dominant 7th add 13','Sus 2','Sus 4','6sus4','7sus4','9sus4'];
var numcode = [['B1',0],['1',1],['#1',2],['B2',2],['2',3],['#2',4],['B3',4],['3',5],['#3',6],['B4',5],['4',6],['#4',7],['B5',7],['5',8],['#5',9],['B6',9],['6',10],['#6',11],['B7',11],['7',12],['#7',13],['Cb',0],['C',1],['C#',2],['Db',2],['D',3],['D#',4],['Eb',4],['E',5],['E#',6],['Fb',5],['F',6],['F#',7],['Gb',7],['G',8],['G#',9],['Ab',9],['A',10],['A#',11],['Bb',11],['B',12],['B#',13]];
document.getElementsByClassName = function(cl) {var retnode = [];var myclass = new RegExp('\\b'+cl+'\\b');var elem = this.getElementsByTagName('*');for (var i = 0; i < elem.length; i++) {var classes = elem[i].className;if (myclass.test(classes)) retnode.push(elem[i]);}return retnode;}; var inv = 0;function dispKeys() {var str = []; for (var i=0; i<3;i++) {for (var j=0;j<12;j++) {var cl = document.getElementById('kt'+ (i*12+j)).style.backgroundColor; if (cl != '' && cl != '#000000' && cl != '#ffffff' && cl != '#000' && cl != '#fff' && cl != 'rgb(0, 0, 0)' && cl != 'rgb(255, 255, 255)') str.push(disp[j]);}}document.getElementById('code').value = str.join(',');} function undo() {for (var i = clwt.length - 1; i >= 0; i--)clwt[i].style.backgroundColor = '#fff';for (var i = clwb.length - 1; i >= 0; i--)clwb[i].style.backgroundColor = '#fff';for (var i = clbl.length - 1; i >= 0; i--)clbl[i].style.backgroundColor = '#000';}function chg(k,c) {document.getElementById('kt'+k).style.backgroundColor = c;if(document.getElementById('kb'+k))document.getElementById('kb'+k).style.backgroundColor = c;dispKeys();}function setall(t,f,c) {undo(); var b = parseInt(t.value)-1;var a = f.value.split(','); if (inv >= a.length) inv = 0; for (var i=a.length -1; i >= 0; i--) {var k = b + parseInt(a[i]); if (inv > 0 && inv == i) k -= 12; chg(k,c);}}function decode(f,c) {undo(); g = f.value.toUpperCase(); var a = g.split(','); for (var i=a.length -1; i >= 0; i--) {for (var j = numcode.length - 1; j >= 0; j--) {if(a[i] == numcode[j][0]) chg(numcode[j][1]+11,c);}}}function start() {var divo = '<div class="';var divc = '"><\/div>';var draw = '<div class="clear">';var len = topArray.length;for (var i = 0; i < len; i++) {draw += divo + topArray[i] + '" id="kt' + i + '" onmouseover="chg(\''+i+'\',\'#ff0\')" onmouseout="undo()' + divc;}draw += '<\/div><div class="clear">';for (var i = 0; i < len; i++) {if (bottomArray[i] != '') draw += divo + bottomArray[i] + '" id="kb' + i + '" onmouseover="chg(\''+i+'\',\'#ff0\')" onmouseout="undo()' + divc;}draw += '<\/div><div class="clear"><\/div><form><div id="key"><select name="chord" class="cho1" size="12" onchange="inv=0;setall(this.form.chord,this.form.formula,\'#ff6e03\');">';len = notes.length;for (var i = 0; i < len; i++) {draw += '<option value="'+(12+i)+ '"';if (i == len-1) draw += ' selected="selected"';draw += '">'+notes[i]+'<\/option>';}draw += '<\/select><\/div><div id="chord"><select name="formula" size="10" class="cho2" onchange="inv=0;setall(this.form.chord,this.form.formula,\'#ff6e03\');">';len = keys.length;for (var i = 0; i < len; i++) {draw += '<option value="'+keys[i]+'"';if (i == 0) draw += ' selected="selected"';draw += '>'+keynames[i]+'<\/option>';}draw += '<\/select><div class="gap"><\/div><span class="indent"><input class="inv-cord" type="button" value=" Invert Chord " onclick="inv++;setall(this.form.chord,this.form.formula,\'#ff6e03\');" /><\/span><\/div><div id="formula"><label for="code">Notes:<br /><input type="text" size="20" name="code" id="code" \/><\/label><div class="gap"><\/div><span class="indent"><input type="button" value="Display" onclick="decode(this.form.code,\'#ccf\')" \/><\/span><div class="gap"><\/div><p class="small">Enter Notes using a comma separated list of<br \/> <b>Numbers :<\/b><br \/>b1,1,#1,b2,2,...b7,7,#7<br \/>and\/or<br \/><b>Notes :<\/b><br \/>Cb,C,C#,Db,....Bb,B,B#<\/p><\/div><\/form>';document.getElementById('keybd').innerHTML = draw+'<div class="clear"><\/div>';clwt = document.getElementsByClassName('wt');clwb = document.getElementsByClassName('wb');clbl = document.getElementsByClassName('bl');}

var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById &&
document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
loaded('keybd',start);