", {class: "cNoteGroup "+ngBoxClrClass, notegroup: idStr}).html(htmlTxt);
+ $abDiv.dblclick(
+ // remove abridgedDiv on doubleclick
+ function(){
+ ctl_stopPlayer();
+ $(this).remove();
+ update_link();
+ }
+ ).click(
+ // set notegroups on abridged Div click
+ function(){
+ //var abDivArrID = this.attributes["notegroup"].value.split('_');
+ set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]);
+ }
+ );
+
+ if(mPlayer.getPlaystate() == PS_PLAYING){
+ ctl_stopPlayer();
+ }
+
+ $("#ngDashboard").append($abDiv); // add dragged notegroup to Dashboard
+ $("#ngDashboard").sortable({
+ stop: function( event, ui ) {mPlayer.reloadNotegroups($("#ngDashboard"))},
+ start: function( event, ui ) {ctl_stopPlayer();}
});
+ mPlayer.reloadNotegroups($("#ngDashboard"));
+ update_link();
+
+ }
+var ctl_updateColorIntMode = function(boolNewMode){
+ if(boolNewMode){
+ COLORBYINTERVALS = true;
+ $('#colorByInterval').attr('value', 'Pallete Color' );
+ // hide color pallete
$('#colorchooser').hide();
- $('#checkanswer').show();
- } else {
- fill_from_repr(url_params['strings']);
+ set_notespans();
+ update_link();
+ } else{
+ COLORBYINTERVALS = false;
+ $('#colorByInterval').attr('value', 'Color Intervals' );
+ // hide color pallete
+ $('#colorchooser').show();
+ set_notespans();
+ update_link();
+ }
+ }
+
+var ctl_color_td_by_interval = function(string, fret){
+ var nsSemiInt = ((mFB.getNGintnames().length + Number($('#ns_'+string+'_'+fret).attr("semiInts"))) - mFB.getKeyInt()) % mFB.getNGintnames().length;
+ var newColor = mFB.getNGintcolor()[Number(nsSemiInt)]; // need to be a number?
+ td_paint($('#nc_'+string+'_'+fret), newColor );
+ }
+
+var ctl_change_key = {
+ "setRoot" : function(kObj){
+ mFB.setKey(kObj);
+ if($("#selKey").val() != kObj.safename){
+ $("#selKey").val(kObj.safename);
+ }
+ set_notespans();
+ },
+ "keyChangeNotegroup" : function(kSafeName){
+ mFB.setKey(dictKeys[kSafeName]);
+ var selKeyVal = $("#selKey").val();
+ if(selKeyVal != kSafeName){
+ $("#selKey").val(kSafeName);
+ }
+ },
+ "selKeyChange" : function(selKeyVal){
+
+ mFB.setKey(dictKeys[selKeyVal]);
+ set_notespans();
+ update_link();
+ }
+
+ }
+
+var set_notes_per_notegroup = function(keySafeName, ngType, ng){
+ // if color by intervals is off, turn on and save state
+ var paletteState = !COLORBYINTERVALS;
+ COLORBYINTERVALS = true;
+ ctl_change_key.keyChangeNotegroup(keySafeName);
+ var ng = ngType+'_'+ng;
+ mFB.setNotegroup(ng);
+ set_notespans();
+ COLORBYINTERVALS = !paletteState; // keep pallete if open
+ //var msg = "Painting notes for
"+mFB.getKeyTextName();
+// if(ngType != "ARP"){msg += " ";}
+// msg += mFB.getNotegroup().name+"";
+// $('#message').html(msg);
+}
+
+var isPalleteColor = function(c){
+ for(var pc in PALLETE_COLORS){
+ if (c == pc) return true;
+ }
+ return false;
+ }
+
+var getChromaticInt = function(noteStr, chromNamesScale){
+
+ if(chromNamesScale == null){
+ chromNamesScale = mFB.getChromNames();
+ }
+ for(var i = 0; i < chromNamesScale.length; i++){
+ if (noteStr == chromNamesScale[i])
+ return i;
+ }
+}
+
+
+
+var getEnharmonic = function(noteStr){
+ // make sure more than 1 chars
+ if(noteStr.length > 1){
+ getAccTypeStr(noteStr)
+ switch(getAccTypeStr(noteStr)) {
+ case FLATTED:
+ //flat
+ enStr = acc[0]+"♭";
+ noteStr = CHROMSHARP[getChromaticInt(enStr,CHROMFLAT)];
+ break;
+ case SHARPED:
+ //sharp
+ enStr = acc[0]+"♯";
+ noteStr = CHROMFLAT[getChromaticInt(enStr,CHROMSHARP)];
+ break;
+ default:
+ //natural
+ noteStr = noteStr.charAt(0);
+ }
+ }
+
+
+ return noteStr;
+
+}
+
+var getAccTypeStr = function(noteStr){
+ var accType;
+ var acc = escape(noteStr).split('%');
+ switch(acc[1]) {
+ case 'u266D':
+ //flat
+ accType = FLATTED;
+ break;
+ case 'u266F':
+ //sharp
+ accType = SHARPED;
+ break;
+ default:
+ //natural
+ accType= NATURAL;
+ }
+
+ return accType;
+}
+
+var getKeyObjFromNoteName = function(noteStr){
+ var intFromC = getKeyObjFromUnsafeName(noteStr).fromC
+ var newKeyHtmlName = mFB.getKeyObj().baseScale[intFromC];
+ return getKeyObjFromUnsafeName(newKeyHtmlName);
+ }
+
+var getSafeNameFromNoteName = function(noteStr){
+ var intFromC = getKeyObjFromUnsafeName(noteStr).fromC
+ var newKeyHtmlName = mFB.getKeyObj().baseScale[intFromC];
+ return getKeyObjFromUnsafeName(newKeyHtmlName).safename;
+ }
+
+var getKeyObjFromSafeName = function(safenameStr){
+ var keyObj = "";
+ for(ko in dictKeys){
+ if (safenameStr == dictKeys[ko].safename){
+ keyObj = dictKeys[ko];
+ break;
+ }
+ }
+ return keyObj;
+ }
+
+var getKeyObjFromUnsafeName = function(htmlStr){
+ var keyObj = "";
+ for(ko in dictKeys){
+ if (htmlStr == dictKeys[ko].name){
+ keyObj = dictKeys[ko];
+ break;
+ }
+ }
+
+ if(keyObj == ""){
+ // likely a sharp key that needs to be a flat key = get Enharmonic
+ for(var i = 0; i < CHROMSHARP.length; i++){
+ if(htmlStr == CHROMSHARP[i]){
+ htmlStr = CHROMFLAT[i];
+ break;
+ }
+ }
+
+ for(ko in dictKeys){
+ if (htmlStr == dictKeys[ko].name){
+ keyObj = dictKeys[ko];
+ break;
+ }
+ }
+ }
+ return keyObj;
+ }
+
+var getNotespanFromTD = function(td){
+ var arr = td.attr('id').split('_');
+ return $('#ns_'+arr[1]+'_'+arr[2]);
+ }
+
+var getStringFret = function(el){
+ var aStringFret = el.attr('id').split('_');
+ aStringFret.shift();
+ return aStringFret;
+ }
+
+var updateSetRootView = function(){
+ if(SETTINGROOT){
+ $("#setRoot").addClass( 'setRootArmed' );
+ }else{
+ $("#setRoot").removeClass( 'setRootArmed' )
+ }
+ }
+
+//var populateScaleMenu = function(){
+// var scaleSel = $('#selScale');
+// var arrScales = dictScales;
+// $.each(arrScales, function(val, text) {
+// scaleSel.append(
+// $('
').val(val).html(text["name"])
+// );
+// });
+// }
+
+var populateNotegroupsUnabridged = function(){
+ var html = '
';
+ $('#notegroupsUnabridged').append(html);
+
+ html ="";
+ for(var key in dictKeys){
+ html += '
';
+ //populateKeyWithUnabridgedNotegroups();
+ html += '
';
+ html += '
';
+
+ // ~~~~~~ arpeggios
+ html += '
';
+
+ // divs
+ for(var ng in dictArps){
+ //var obj = ng;
+ html += '
';
+ html += dictKeys[key].name+dictArps[ng].name;
+ html += '
';
}
+
+
+ html += '
';
+
+ // ~~~~~~ scales
+ html += '
';
+
+ for(var ng in dictScales){
+ //var obj = ng;
+ html += '
';
+ html += dictKeys[key].name +' '+ dictScales[ng].name;
+ html += '
';
+ }
+
+
+ html += '
';
+
+
+ // ~~~~~~ chords
+ html += '
';
+ //html += dictKeys[key].name+' chords';
+ html += 'Maybe in the next update!'
+ html += '
';
+ html += '
';
+ // end of div for key
+ html += '
';
}
+ $('#notegroupsUnabridged').append(html);
+
+
+ };
+
+var makeUnabridgedDragDroppable = function(){
+ var x = null;
+ //Make element draggable
+ $(".ngUnabDiv").draggable({
+ helper: 'clone',
+ containment: 'document' ,
+ start: function(e, ui)
+ {
+ $(ui.helper).addClass("ui-draggable-helper");
+ },
+ cursor: 'move',
+ tolerance: 'fit',
+ revert: true
+ }).click(function(){
+ var arrID = this.id.split('_');
+ set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]);
+ });
+
+ $("#ngDashboard").droppable({
+ accept: '.ngUnabDiv',
+ activeClass: "drop-area",
+ drop: function (e, ui) {
+ if ($(ui.draggable)[0].id != "") {
+ // on dropping unabridged div
+ var x = ui.helper.clone();
+ var helperID = ui.helper.clone().context.id;
+ ui.helper.remove();
+ ctrl_addDashNotegroups(x.context.id);
+ x.remove(); // get rid of clone
+ }
+ }
+});
+
+$("#remove-drag").droppable({
+ drop: function (event, ui) {
+ $(ui.draggable).remove();
+ },
+ hoverClass: "remove-drag-hover",
+ accept: '.remove'
+});
+
+}
+
+var onDocReady = function(){
+
}
-jQuery(function() {
+
+jQuery(document).ready(function() {
+
+ populateNotegroupsUnabridged();
+ $("#notegroupsUnabridged").tabs();
+ makeUnabridgedDragDroppable();
+ for(var key in dictKeys){
+ $("#ngTab_"+dictKeys[key].safename).tabs();
+ }
+
+ $("#notegroupsUnabridged2").tabs();
+
+ $( ".cNoteGroup" ).draggable({ addClasses: false });
+
+
$(gen_fret_boxes(19, 6)).insertAfter($('#mainfretboard'));
GUITAR_STRINGS = getFretcloneStrings();
set_notes();
+
+ // add another row onto Fretclone to serve as fretpaint buttons
+ var newRow = function(){
+ var html ="
"
+ var board_strings = $('#fretclone tr');
+
+ var children = board_strings[0].children;
+ for (var f = 0; f < children.length; f++){
+ html +=' | ';
+ }
+ html +="
"
+ return html;
+ }
+ $('#fretclone > tbody:last').append(newRow);
+
+ //populateScaleMenu(); // removed from view
- // show diagram of a C Major chord
- //show_chord([null, 1, null, 2, [3, 'red']]);
-
- //var a_minor_penta = [[5, 8], [5, 8], [5, 7], [5, 7], [5, 7], [5, 8]];
- // show diagram of an A minor penta scale form
- //show_scale(a_minor_penta);
- loadFromUrl(get_url_parameters());
+ var url_params = get_url_parameters();
+ var loadFromUrl = function(){
+ if (is_defined(url_params['intColor'])){
+ if(url_params['intColor'] == "true"){
+
+ ctl_updateColorIntMode(true);
+ }
+ }
+ if (is_defined(url_params['intNames'])){
+ if(url_params['intNames'] == "true"){
+ ctl_updateIntervalMode(true);
+ }
+ }
+ if (is_defined(url_params['key'])){
+ // key should use safename
+ ctl_change_key.keyChangeNotegroup(url_params['key']);
+ }
+ if (is_defined(url_params['dash'])){
+ var arrNotgroups = url_params['dash'];
+ ctl_populateDash(arrNotgroups);
+ }
+ if (is_defined(url_params['diagram_title'])){
+ $('#diagram_title').val(unescape(url_params['diagram_title']));
+ }
+ if (is_defined(url_params['strings'])){
+ if (is_defined(url_params['q']) && url_params['q'] == 'y'){
+ COLOR = "black";
+ $('#checkanswer').click(function(){
+ check_answers(url_params['strings']);
+ });
+ $('#colorchooser').hide();
+ $('#checkanswer').show();
+ } else {
+ fill_from_repr(url_params['strings']);
+ }
+ }
+ }
+ loadFromUrl();
update_link();
var message = $('#message');
// update link at every click on a note...
@@ -255,27 +844,163 @@ jQuery(function() {
message.html('');
})
- // set up eraser and clear buttons:
- $('#eraser').toggle(function(){
- ERASER = true;
- $(this).removeClass('blank').addClass('white');
- message.html('
Eraser activated!Mouseover the marks to erase them')
- }, function(){
- $(this).removeClass('white').addClass('blank');
- ERASER = false;
- message.html('')
+ // set up fret painters which paint or erase fret
+ $('.fretpainter').click(function(){
+ //get the corresponding fret
+ var fret = this.id.split('_')[1];
+ var fpainted = false;
+ for(var s = 0; s < GUITAR_STRINGS.length; s++){
+ var nc = $('#'+'nc_'+s+'_'+fret);
+ if(is_painted(nc)){
+ fpainted = true;
+ break;
+ }
+ }
+
+
+ for(var s = 0; s < GUITAR_STRINGS.length; s++){
+ if(fpainted){
+ td_clear($('#'+'nc_'+s+'_'+fret));
+ } else{
+ var ns = $('#'+'nc_'+s+'_'+fret);
+ if(COLORBYINTERVALS){
+ ctl_color_td_by_interval(s,fret)
+ } else
+ {
+ td_paint($('#'+'nc_'+s+'_'+fret), COLOR);
+ }
+
+ }
+ }
+
+ })
+
+ // set up eraser brush and clear buttons:
+ $('#brush').click(function(){
+ var iteration=$(this).data('iteration')||1
+ switch ( iteration) {
+ case 1:
+ BRUSH = true;
+ ERASER = false;
+ $(this).removeClass('blank').addClass('white');
+ //message.html('
Brush activated!Mouseover the marks to paint them');
+ break;
+ case 2:
+ $(this).removeClass('white').addClass('blank');
+ BRUSH = false;
+ //message.html('')
+ break;
+ }
+ iteration++;
+ if (iteration>2) iteration=1
+ $(this).data('iteration',iteration)
});
+
+ $('#eraser').click(function(){
+ var iteration=$(this).data('iteration')||1
+ switch ( iteration) {
+ case 1:
+ ERASER = true;
+ BRUSH = false;
+ $(this).removeClass('blank').addClass('white');
+ //message.html('
Eraser activated!Mouseover the marks to erase them');
+ break;
+ case 2:
+ $(this).removeClass('white').addClass('blank');
+ ERASER = false;
+ //message.html('')
+ break;
+ }
+ iteration++;
+ if (iteration>2) iteration=1
+ $(this).data('iteration',iteration)
+ });
+
+
+
$('#clear').click(function(){
message.html('');
clear_fretboard(); update_link();
});
+
+ $('#modeNoteInt').click(function(){
+ if(INTERVALMODE == true){
+ ctl_updateIntervalMode(false);
+ } else{
+ ctl_updateIntervalMode(true);
+ }
+
+ });
+
+ $('#colorByInterval').click(function(){
+ if(COLORBYINTERVALS){
+ ctl_updateColorIntMode(false);
+ } else {
+ ctl_updateColorIntMode(true);
+ }
+
+
+ });
+
+ $('#setRoot').click(function(){
+ if(!SETTINGROOT){
+ SETTINGROOT=true;
+ } else {
+ SETTINGROOT=false;
+ }
+ updateSetRootView();
+ });
+
+ $('#selKey').change(function(){
+ ctl_change_key.selKeyChange($('#selKey').val());
+
+ });
+
+ // dash player controls
+ $('#dashPlayStop').click(function(){
+ if (mPlayer.getPlaystate() == PS_PLAYING){
+ ctl_stopPlayer();
+ } else {
+ ctl_playPlayer();
+ }
+ });
+
+ $('#dashBack').click(function(){
+ ctl_backPlayer();
+
+ });
+
+ $('#dashFwd').click(function(){
+ ctl_fwdPlayer();
+ });
+
+
+ $('#dashSpeed').change(function(){
+ var timerSpeed = Math.round(1000 * 60 / $('#dashSpeed').val() );
+ mPlayer.setPlaySpeed(timerSpeed);
+ });
+
+ // removed from view
+// $('#selScale').change(function(){
+// var newScale = $('#selScale').val();
+// //var key = $('#selKey').val();
+// mFB.setNotegroup(newScale, dictScales);
+//// mScale.setScale(newScale);
+//// A_INTERVAL_COLOR = mScale.getIntColorArr();
+//// A_INTERVAL_NAMES = mScale.getIntNamesArr();
+// set_notespans();
+// });
// set up example links
$('#examples ul li a').click(function(){
- clear_fretboard();
- loadFromUrl(get_url_parameters($(this).attr('href')));
- update_link();
+ url_params = get_url_parameters($(this).attr('href'));
+ clear_fretboard(); update_link();
+ loadFromUrl();
});
- // TODO: fix quiz behavior (do not show note names in quiz mode), and show message on check answer
- // TODO: find a way to show enarmonics
+
+
+
+
+ // TODO: generate jTab
+ // TODO: show chord in standard notation
});
diff --git a/fretboard.css b/fretboard.css
new file mode 100644
index 0000000..77f28ea
--- /dev/null
+++ b/fretboard.css
@@ -0,0 +1,253 @@
+@charset "utf-8";
+/* CSS Document */
+
+* { margin:0; padding:0; border-spacing:0; }
+body { font-family:sans-serif; font-size:100%; }
+table#mainfretboard { position:absolute; top:120px; left:50px; border:1px solid red; }
+table#mainfretboard tr td { border:1px solid black; font-size: 28px; width:46px; height:34px; text-align:center; }
+/* fretclone sits at z of 1 over main fretboard */
+table#fretclone { position:absolute; top:100px; left:-5px; border-spacing:8px; }
+table#fretclone tr td { margin: 0 2px; display:inline-block; border:2px solid transparent; background-color:transparent; font-size:18px; font-weight:bold; width:40px;height:24px; text-align:center; z-index:1; border-radius: 5px; }
+table#fretclone tr td:hover { cursor:pointer; border-color: black !important; border-style: dotted !important; }
+
+
+a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
+a:hover, a:active { outline: 0; }
+a { color: #0088cc; text-decoration: none; }
+a:hover { color: #005580; text-decoration: underline; }
+/*a:hover { color: #FF0000; text-decoration: underline; }*/
+
+/* interval colorings */
+.i_root { background-color:#f2a87d !important; border-color:#400d14 !important; color:#400d14 !important; }
+.i_flatnine { background-color:#FFF !important; border-color:#f7f900 !important; color:#333333 !important; }
+.i_nine { background-color:#FFF !important; border-color:#f7f900 !important; color:#333333 !important; }
+.i_flatnine { background-color:#FFF !important; border-color:#f7f900 !important; color:#333333 !important; }
+.i_sharpnine { background-color:#000 !important; border-color:#80c0f9 !important; color:#FFF !important; }
+.i_flatthird { background-color:#000 !important; border-color:#80c0f9 !important; color:#FFF !important; }
+.i_third { background-color:#000 !important; border-color:#80c0f9 !important; color:#FFF !important; }
+.i_eleven {}
+.i_sharpeleven {}
+.i_flatfifth { background-color:#000 !important; border-color:#c5f1a8 !important; color:#FFF !important; }
+.i_fifth { background-color:#000 !important; border-color:#c5f1a8 !important; color:#FFF !important; }
+.i_augfifth { background-color:#000 !important; border-color:#c5f1a8 !important; color:#FFF !important; }
+.i_flatsixth { background-color:#FFF !important; border-color:#80c0f9 !important; color:#333333 !important; }
+.i_sixth { background-color:#FFF !important; border-color:#80c0f9 !important; color:#333333 !important; }
+.i_flatseventh { background-color:#000 !important; border-color:#ccc7fa !important; color:#FFF !important; }
+.i_seventh { background-color:#000 !important; border-color:#ccc7fa !important; color:#FFF !important; }
+.i_passing { background-color:#ffffff !important; border-color:#333 !important; color:#111111 !important; }
+
+/* pallete colorings */
+.black { background-color:#000 !important; border-color:#000 !important; color:#FFF !important; }
+.orange { background-color:#ffbb67 !important; border-color:#543d22 !important; color:#333 !important; }
+.green { background-color:#669999 !important; border-color:#003333 !important; color:#003333 !important; }
+.blue { background-color:#333745 !important; border-color:#afcded !important; color:#afcded !important; }
+.yellow { background-color:#f6f792 !important; border-color:#4c4c2d !important; color:#4c4c2d !important; }
+.lightgreen { background-color:#daede2 !important; border-color:#000000 !important; color:#000000 !important; }
+.red { background-color:#ea2e49 !important; border-color:#400d14 !important; color:#400d14 !important; }
+.blank { background-color:#dddddd !important; border-color:#333333 !important; color:#333333 !important; }
+.white { background-color:#ffffff !important; border-color:#FFF !important; color:#111111 !important; }
+
+
+.transparent { background-color:transparent !important; border-color:transparent !important; color:transparent !important }
+
+table#fretclone tr .fretpainter {background-color:#CFCFCF !important; border-color:#FFF !important; color:#4c4c2d !important; height:4px !important; border-radius:0px !important;}
+
+div#main { height:280px; margin:10px; width: 940px; }
+#diagram_title { font-size:25px; font-weight:bold; margin:15px; display:block; padding:4px; border:0; width:100%; }
+
+div.h_ctrl_cnt{ padding:10px; margin:0px 10px 0px 10px; }
+div.h_ctrl { display:inline; margin-right: 12px; }
+
+
+
+.setRootArmed { background-color:rgb(147,32,32); color: #FFF;}
+
+#clear, #eraser, #brush { font-weight: bold; padding: 2px; }
+
+input.color_button { width:40px; border-radius: 5px; }
+
+#colorchooser { display:inline; };
+
+
+
+
+
+#form_controls { padding:10px; }
+
+#checkanswer { display:none; }
+#message { text-align: right;
+ color:#a5a5a5;
+ }
+#examples ul { margin-left: 20px; }
+
+/* jquery ui*/
+.tabs-nohdr {
+ padding: 0px;
+ background: none;
+ border-width: 0px;
+ font-size: inherit;
+
+
+
+}
+.tabs-nohdr .ui-tabs-nav {
+ padding-left: 0px;
+ background: transparent;
+ border-width: 0px 0px 1px 0px;
+ -moz-border-radius: 0px;
+ -webkit-border-radius: 0px;
+ border-radius: 0px;
+}
+.tabs-nohdr .ui-tabs-panel {
+ background: #FFF;
+ border-width: 0px 1px 1px 1px;
+ overflow:auto;
+}
+.tabs-nohdr .ui-tabs-anchor{
+ font-weight:normal;
+}
+/* must be under tabs-nohdr */
+div#notegroupsUnabridged {
+ font-size:12px;
+ width: 650px;
+ display:inline-block;
+ float:left;
+}
+
+div#notegroupsUnabridged2 {
+ font-size:12px;
+ width: 650px;
+ display:inline-block;
+ float:left;
+}
+
+
+#notegroupsKeysTab a{
+ font-weight:bold;
+}
+
+
+#dashContainer{
+ border:#aaa thin solid;
+ padding:4px 12px 12px 12px;
+ display:inline-block;
+ float:left;
+ margin-left: 10px;
+ border-radius: 4px;
+ }
+#dashControls{
+ padding:8px;
+ height:24px;
+ }
+#dashControls input { padding:2px;}
+#ngDashboard {
+ border:#aaa thin solid;
+ width: 588px;
+ height: 400px;
+
+}
+
+div.cNoteGroup{
+ float:left;
+ text-align:center;
+ font-size:14px;
+ font-weight: bold;
+ width:120px;
+ height:36px;
+ padding: 4px;
+ margin: 8px;
+ background:rgb(200,238,251);
+ border-bottom:#555 thin solid;
+ border-top:#FFF thin solid;
+ border-right:#FFF thin solid;
+ border-left:#FFF thin solid;
+ /*border-width: 0px 0px 1px 0px; */
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+div .ngUnabDiv{
+ float:left;
+ text-align:center;
+ width:220px;
+ padding: 6px;
+ margin: 2px;
+ background:rgb(200,238,251);
+ border:#555 thin solid;
+ border-width: 0px 0px 1px 0px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+div .tabs-nobg .ui-tabs-panel {
+ overflow:hidden;
+ padding:5px;
+ }
+
+.ui-draggable-helper{
+ background:#aaa;
+ z-index:999;
+ border:#F00 thin solid;
+ }
+
+ul .uNotegroup{
+ list-style:none;
+ border:#555 thin solid;
+ padding:3px;
+ margin: 2px;
+ }
+
+div .ngboxScale{
+ background:#ddfcc2;
+}
+
+div .ngboxArp{
+ background:#faf5af;
+}
+
+div .ngboxChd{
+ background:#cff6fd;
+}
+/* drag drop classes */
+ .ngExchange{}
+ span .drag{
+ background-color:rgb(153,153,153);
+ }
+ .remove-drag-hover {
+ background-color: #ED4949 !important;
+ }
+ .drop-area {
+ background-color: #afd1b2;
+ }
+ .xicon {
+ margin-top: 4px;
+ position: absolute;
+ margin-left: -17px;
+ color: #FFF;
+ font: message-box;
+ text-decoration: none;
+ }
+ .xicon:hover {
+ background-color: #fff;
+ color: #000;
+ width: 13px;
+ height: 20px;
+ text-align: center;
+ }
+ .tip {
+ font-size: 12px;
+ clear: both;
+ }
+
+/* end drag drop classes */
+
+
+div .playing{
+ //color:red;
+ border:rgb(255,0,0) thin solid;
+ //text-decoration:underline;
+ //background-color: rgb(255,102,153);
+ }
+/*@media print { #form_controls { display:none; } }*/
\ No newline at end of file
diff --git a/fretboard.html b/fretboard.html
index ae40233..3962d80 100644
--- a/fretboard.html
+++ b/fretboard.html
@@ -3,40 +3,20 @@
Fretboard Studies
-
-
-
@@ -49,34 +29,161 @@
| | | ● | | ● | | ● | | ● | | | | | | ● | | ● | |
| | | | | | | | | | | | ● | | | | | | |
| | | | | | | | | | | | | | | | | | |
-