Added a bunch of functionality

There is a note painter which paints wherever the mouse is until turned
off.

There are also "fretpainters" at the bottom which will paint all the
notes in a fret.

You can show the note names or the note intervals relative to the
selected root.

There is a root pull-down and a set Root mode with the next mouse click.

There is also a notegroups browser which will replace any painted notes
with scales or arpeggios (and update the root). I haven't figured out
the best way to present chords yet.

The paint by Interval color mode will continue to paint with this note
group.

You can drag the notegroups to the notegroup dashboard. From there you
can single click to convert painted notes to the new notegroup. These
notegroup "buttons" can be resorted and double-clicked to trash.

There are also Player controls which will cycle through the notes
relative to the speed spinner.

The generate link works pretty much the same.

PlayerModel.js

@@ -0,0 +1,181 @@
+// JavaScript Document
+
+var PS_STOPPED = "STOPPED";
+var PS_PLAYING = "PLAYING";
+var PS_PAUSED = "PS_PAUSED";
+var DIR_FWD = "FORWARD";
+var DIR_BACK = "BACKWARD";
+
+var PlayerModel = {
+
+	"aNoteGroupDivs" : []
+	,
+	"prevNG" : ""
+	,
+
+	"i" : 0
+	,
+
+	"playState" : PS_STOPPED
+	,
+
+	"looper" : "" //setInterval
+	,
+
+	"playSpeed" : 2000
+
+	,
+
+	"setNoteGroupDivs" : function(arr){
+			this["aNoteGroupDivs"] = arr; // array of cNoteGroup divs in ngDashbaord
+		}
+	,
+	"getNoteGroupDivs" : function(){
+			return this["aNoteGroupDivs"];
+		}
+	,
+	"setPrevNG" : function(ng){
+			this["prevNG"] = ng;
+		}
+	,
+	"getPrevNG" : function(){
+			return this["prevNG"];
+		}
+	,
+	"setPlaystate" : function(st){
+			this["playState"] = st;
+		}
+	,
+	"getPlaystate" : function(){
+			return this["playState"];
+		}
+	,
+	"setLooper" : function(interval){
+			this["looper"] = interval;
+		}
+	,
+	"getLooper" : function(){
+			return this["looper"];
+		}
+			,
+	"setPlaySpeed" : function(speed){
+			this["playSpeed"] = Number(speed);
+			if(this["playState"] == PS_PLAYING){
+				clearInterval(this["looper"]);
+				this["looper"] = setInterval(function(){animateNotegroups();},Number(speed));
+			}
+		}
+	,
+	"getPlaySpeed" : function(){
+			return this["playSpeed"];
+		}
+	,
+	"getNextNG" : function(){
+		var arr =  this.aNoteGroupDivs;
+		var ng = arr[this.i];
+		this.prevNG = ng;
+		this.i = (this.i +1) % this.aNoteGroupDivs.length;
+		return ng;
+	}
+	,
+	"getNextNGBack" : function(){
+		var arr =  this.aNoteGroupDivs;
+		this.prevNG = arr[this.i];
+		this.i = ((this.i - 1) + this.aNoteGroupDivs.length) % this.aNoteGroupDivs.length;
+		var ng = arr[this.i];
+		return ng;
+	}
+	,
+
+	"reloadNotegroups" : function(ngDiv){
+		this["aNoteGroupDivs"] = ngDiv.children().toArray(); 
+		// strip out playing css?
+		this["i"] = 0;
+		this["prevNG"] = this.aNoteGroupDivs[this.aNoteGroupDivs.length -1];
+	}
+
+}
+
+
+
+var ctl_stopPlayer = function(){
+		mPlayer.setPlaystate(PS_STOPPED);
+		clearInterval(mPlayer.getLooper());
+		//remove all playing css in notegroups?
+		var arr = mPlayer.getNoteGroupDivs();
+		for(var ng in mPlayer.getNoteGroupDivs()){
+			if($(arr[ng]).hasClass("playing") ){
+			$(arr[ng]).removeClass("playing");	
+		}
+		}
+		$('#dashPlayStop').val("Play");
+	}
+
+var ctl_playPlayer = function(){
+		if($('#ngDashboard').children().length > 1){
+			if(mPlayer.getPlaystate()!=PS_PAUSED){
+				mPlayer.reloadNotegroups($('#ngDashboard'));
+				//animateNotegroups(true);
+			}
+			if(mPlayer.getPlaystate()==PS_PAUSED){
+				//animateNotegroups(true);
+			}
+			mPlayer.setPlaystate(PS_PLAYING);
+			$('#dashPlayStop').val("Stop");	
+			if(mPlayer.i == 0){
+			animateNotegroups(true); // animate once to start instantly; true == forward
+			}
+			mPlayer.setLooper(setInterval(function(){animateNotegroups(true);},mPlayer.getPlaySpeed()));	
+		} else {
+			ctl_stopPlayer();
+		}
+	}
+
+var ctl_pausePlayer = function(dir){
+		PS_PAUSED.direction = dir;
+		mPlayer.setPlaystate(PS_PAUSED);
+		clearInterval(mPlayer.getLooper());
+		$('#dashPlayStop').val("Play");
+	}
+
+var ctl_backPlayer = function(){
+		var wasPlaySt = mPlayer.getPlaystate(); 
+		ctl_pausePlayer(DIR_BACK);
+		//mPlayer.setPlaystate(PS_PAUSEDBACK);
+
+		animateNotegroups(false);
+
+	}
+
+var ctl_fwdPlayer= function(){
+		var wasPlaySt = mPlayer.getPlaystate(); 
+		ctl_pausePlayer(DIR_FWD);
+		//mPlayer.setPlaystate(PS_PAUSEDFWD);
+
+		animateNotegroups(true);
+
+	}
+
+var animateNotegroups = function(goForward){
+	if(goForward){
+		var prvNg = mPlayer.getPrevNG();
+		if(prvNg != "" && $(prvNg).hasClass("playing") ){
+			$(prvNg).removeClass("playing");	
+			}
+		var ng = $(mPlayer.getNextNG());
+		ng.addClass("playing");
+		var abDivArrID = ng.context.attributes["notegroup"].value.split('_');
+		set_notes_per_notegroup(abDivArrID[0], abDivArrID[1], abDivArrID[2]);
+	} else {
+		var ng = $(mPlayer.getNextNGBack());
+		ng.addClass("playing");
+		var abDivArrID = ng.context.attributes["notegroup"].value.split('_');
+		set_notes_per_notegroup(abDivArrID[0], abDivArrID[1], abDivArrID[2]);
+
+		var prvNg = mPlayer.getPrevNG();
+		if(prvNg != "" && $(prvNg).hasClass("playing") ){
+			$(prvNg).removeClass("playing");	
+		}
+
+	}
+}

README.creole

@@ -13,3 +13,26 @@ Here are some examples:
 * [[http://eliasdorneles.github.com/Fretboard-Studies/#strings=5:0,8:2;5:0,8:0;5:2,7:0;5:0,7:0;5:0,7:0;5:0,8:2&diagram_title=C%20major%20pentatonic|C major pentatonic scale]]
 
 If you want to help, or have ideas or suggestions, feel free to drop me an email: eliasdorneles (at) gmail com
+
+
+= Fretboard Studies v.2 =
+
+I added some thing to Elias's fretboard.
+
+There is a note painter which paints wherever the mouse is until turned off. 
+
+There are also "fretpainters" at the bottom which will paint all the notes in a fret.
+
+You can show the note names or the note intervals relative to the selected root. 
+
+There is a root pull-down and a set Root mode with the next mouse click. 
+
+There is also a notegroups browser which will replace any painted notes with scales or arpeggios (and update the root). I haven't figured out the best way to present chords yet.
+
+The paint by Interval color mode will continue to paint with this note group. 
+
+You can drag the notegroups to the notegroup dashboard. From there you can single click to convert painted notes to the new notegroup. These notegroup "buttons" can be resorted and double-clicked to trash. 
+
+There are also Player controls which will cycle through the notes relative to the speed spinner. 
+
+The generate link works pretty much the same.