From 8ef9ad0d62f3ebe003cc2dc2ed4b0f3a33facd4b Mon Sep 17 00:00:00 2001
From: jeremy <jeremyjmarkowitz@gmail.com>
Date: Thu, 21 Aug 2014 12:32:38 -0400
Subject: [PATCH] update link fix, color arrays

split color arrays into two groups
created color pallete dynamically based on color pallate array
changed demo links
---
 boxfrets.js    | 38 +++++++++++++++++++++++++++++---------
 fretboard.css  |  2 +-
 fretboard.html | 33 +++++++++++++++++++--------------
 3 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/boxfrets.js b/boxfrets.js
index 57e0bc3..6ffb920 100644
--- a/boxfrets.js
+++ b/boxfrets.js
@@ -1,9 +1,7 @@
 /* code to handle manipulation */
 var GUITAR_STRINGS;
 var COLOR = "lightgreen";
-//var PALLETE_COLORS = ["orange", "green", "blue", "yellow", "lightgreen", "red", "transparent"]
-//var POSSIBLE_COLORS2 = ["orange", "green", "blue", "yellow", "lightgreen", "red", "i_root", "transparent"]
-var POSSIBLE_COLORS = [
+var INTERVAL_COLORS = [
 	"i_root",
 	"i_flatnine",
 	"i_nine",
@@ -17,15 +15,21 @@ var POSSIBLE_COLORS = [
 	"i_flatseventh",
 	"i_seventh",
 	"i_passing",
+	"white",
+	"black"
+	]
+
+var PALLETE_COLORS = [
 	"orange",
 	"green",
 	"blue",
 	"yellow",
 	"lightgreen",
 	"red",
-	"black",
-	"white",
-	"transparent"];
+	"transparent"
+	]
+
+var POSSIBLE_COLORS = INTERVAL_COLORS.concat(PALLETE_COLORS);// concat  interval and pallete colors
 var ERASER = false;
 var BRUSH = false;
 var SETTINGROOT = false;
@@ -416,13 +420,14 @@ var ctrl_addDashNotegroups = function(idStr){
 					function(){
 					  ctl_stopPlayer();
 					  $(this).remove();
-					  update_link();
+					  //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]);
+					//update_link();
 				   }
 				);
 
@@ -653,6 +658,14 @@ var updateSetRootView = function(){
 //		});
 //	}
 
+var populateColorPalleteChooser = function(){
+	html = "Palette:";
+	for(var i=0; i < PALLETE_COLORS.length; i++){
+		html += '<input type="button" value="&nbsp;" class="color_button '+PALLETE_COLORS[i]+'" />';
+	}
+	$('#colorchooser').append(html);
+
+}
 var populateNotegroupsUnabridged = function(){
 	var html = '<ul id="unabridgedKeyTabs">';
 	for (var key in dictKeys) {
@@ -727,8 +740,10 @@ var	makeUnabridgedDragDroppable = function(){
 	}).click(function(){
 		var arrID = this.id.split('_');
 		set_notes_per_notegroup(arrID[0], arrID[1], arrID[2]);
+		update_link();
 		});
 
+
 	$("#ngDashboard").droppable({
     accept: '.ngUnabDiv',
     activeClass: "drop-area",
@@ -759,6 +774,9 @@ var onDocReady = function(){
 }
 
 jQuery(document).ready(function() {
+	//START
+
+	populateColorPalleteChooser();
 
 	populateNotegroupsUnabridged();
 	$("#notegroupsUnabridged").tabs();
@@ -924,7 +942,8 @@ jQuery(document).ready(function() {
 
 	$('#clear').click(function(){
 		message.html('');
-		clear_fretboard(); update_link();
+		clear_fretboard();
+		update_link();
 	});
 
 	$('#modeNoteInt').click(function(){
@@ -997,7 +1016,8 @@ jQuery(document).ready(function() {
 	// set up example links
 	$('#examples ul li a').click(function(){
 		url_params = get_url_parameters($(this).attr('href'));
-		clear_fretboard(); update_link();
+		clear_fretboard();
+		//update_link();
 		loadFromUrl();
 	});
 
diff --git a/fretboard.css b/fretboard.css
index 89f40b6..62fa1b9 100644
--- a/fretboard.css
+++ b/fretboard.css
@@ -67,7 +67,7 @@ div.h_ctrl   { display:inline; margin-right: 12px; }
 
 #clear, #eraser, #brush { font-weight: bold; padding: 2px; }
 
-input.color_button { width:40px; border-radius: 5px; }
+input.color_button { width:40px; border-radius: 5px; margin-left: 8px; }
 
 #colorchooser {  display:inline; };
 
diff --git a/fretboard.html b/fretboard.html
index 764b178..04519a4 100644
--- a/fretboard.html
+++ b/fretboard.html
@@ -96,13 +96,13 @@
 
 	<div class="h_ctrl">
     	<div id="colorchooser">
-			Palette:
-			<input type="button" value="&nbsp;" class="color_button green" />
+        <!-- generated by js -->
+			<!-- <input type="button" value="&nbsp;" class="color_button green" />
 			<input type="button" value="&nbsp;" class="color_button yellow" />
 			<input type="button" value="&nbsp;" class="color_button blue" />
 			<input type="button" value="&nbsp;" class="color_button lightgreen" />
 			<input type="button" value="&nbsp;" class="color_button red" />
-			<input type="button" value="&nbsp;" class="color_button orange" />
+			<input type="button" value="&nbsp;" class="color_button orange" /> -->
 		</div>
     </div>
     </div><!-- first button row end -->
@@ -171,23 +171,28 @@
 		<div id="examples"><strong>Examples:</strong>
         <!-- (hiE){[fret,color], [fret,color]};(B){...};(G){...};(D){...};(A){...};(lowE){...}&diagram_title=title  -->
 			<ul>
-				<li><a href="#strings=6:16,18:16;11:16;3:16,15:16;8:16;1:16,13:16;6:16,18:16&key=Cnatural&intColor=false&intNames=false&diagram_title=Bb%20octaves">Bb octaves</a></li>
-				<li><a href="#strings=0:17,3:17,8:17,12:17,15:17;1:17,5:17,8:17,13:17;0:17,5:17,9:17,12:17;2:17,5:17,10:17,14:17;3:17,7:17,10:17,15:17;0:17,3:17,8:17,12:17,15:17&key=Cnatural&intColor=false&intNames=false&diagram_title=C%20major%20along%20the%20fretboard">C major all along the fretboard</a></li>
-				<li><a href="#strings=3:0,4:20,5:20,6:20,7:4,8:20;3:7,4:20,5:20,6:11,7:20,8:0;3:20,4:4,5:20,6:20,7:7,8:20;3:11,4:20,5:0,6:20,7:20,8:20;3:20,4:20,5:7,6:20,7:20,8:11;3:0,4:20,5:20,6:20,7:4,8:20&key=Gnatural&intColor=true&intNames=false&diagram_title=C%20Major%20ii-V-I&dash=Dnatural_ARP_DIM,Gnatural_ARP_DOM7,Cnatural_ARP_MAJ7,Cnatural_ARP_MAJ7">
-                2-5-1 in C Major</a>
+				<li><a href="#strings=6:16,18:16;11:16;3:16,15:16;8:16;1:16,13:16;6:16,18:16&key=Cnatural&intColor=false&intNames=false&diagram_title=Bb%20octaves"
+                >Bb octaves</a></li>
+				<li><a href="#strings=0:17,3:17,8:17,12:17,15:17;1:17,5:17,8:17,13:17;0:17,5:17,9:17,12:17;2:17,5:17,10:17,14:17;3:17,7:17,10:17,15:17;0:17,3:17,8:17,12:17,15:17&key=Cnatural&intColor=false&intNames=true&diagram_title=C%20major%20along%20the%20fretboard"
+                >C major all along the fretboard</a></li>
+				<li><a href="#strings=3:7,4:13,5:13,6:13,7:11;3:13,4:13,5:4,6:13,7:13;3:13,4:11,5:0,6:13,7:13;3:13,4:13,5:7,6:13,7:13;3:0,4:13,5:13,6:13,7:4;3:7,4:13,5:13,6:13,7:11&key=Cnatural&intColor=true&intNames=false&diagram_title=C%20Major%20ii-V-I&dash=Dnatural_ARP_MIN7,Gnatural_ARP_DOM7,Cnatural_ARP_MAJ7,Cnatural_ARP_MAJ7_MAJ7"
+                >2-5-1 in C Major</a>
                 </li>
-                <li><a href="l#strings=;;;;;&key=Cnatural&intColor=false&intNames=false&diagram_title=F%20minor%202-5-1&dash=Gnatural_ARP_MIN7b5,Cnatural_ARP_DOM7,Fnatural_ARP_MIN7,Fnatural_ARP_MIN7">
-                2-5-1 in F Minor</a>
+                <li><a href="#strings=3:14,4:4,5:13,6:14,7:13;3:13,4:11,5:13,6:0,7:13;3:14,4:13,5:7,6:14,7:13;3:0,4:13,5:14,6:4,7:13;3:7,4:14,5:13,6:11,7:13;3:14,4:4,5:13,6:14,7:13&key=Fnatural&intColor=true&intNames=false&diagram_title=F%20Minor%202-5-1&dash=Gnatural_SC_LOCRIAN,Cnatural_SC_MIXOLYDIAN,Fnatural_SC_DORIAN,Fnatural_SC_DORIAN"
+                >2-5-1 in F Minor</a>
                 </li>
                 <li>
-                <a href="#strings=;;;;;&key=Cnatural&intColor=false&intNames=false&diagram_title=3-6-2-5-1%20for%20Ab%20Major&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ">
-                3-6-2-5-1 in Ab Major</a>
+                <a href="#strings=2:13,3:13,4:0,5:13,6:13;2:13,3:13,4:7,5:13,6:13;2:13,3:13,4:13,5:4,6:13;2:13,3:13,4:13,5:13,6:0;2:13,3:4,4:13,5:13,6:7;2:13,3:13,4:0,5:13,6:13&key=Aflat&intColor=false&intNames=false&diagram_title=3-6-2-5-1%20for%20Ab%20Major&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ"
+                >3-6-2-5-1 in Ab Major</a>
                 </li>
 
 
-                <li><a href="#strings=3:13;2:15;3:15;2:15;;3:15&key=Gnatural&intColor=false&intNames=false&diagram_title=Gdim%20fingering">Gdim fingering</a></li>
-				<li><a href="#strings=0:4,2:3,5:3,7:18,10:3,12:3,14:3;0:18,3:3,5:3,7:3,10:3,12:18,15:3;2:3,4:18,7:3,9:3,11:3,14:3;0:4,2:3,4:3,7:3,9:18,12:3,14:3;0:4,2:18,5:3,7:3,9:3,12:3,14:18;0:4,2:3,5:3,7:18,10:3,12:3,14:3&key=Gnatural&intColor=false&intNames=false&diagram_title=B%20minor%20pentatonic">B minor pentatonic</a></li>
-				<li><a href="#strings=;4:15;4:15;4:15;;4:18&key=Cnatural&intColor=false&intNames=false&diagram_title=Abmin%20fingering">Abmin fingering</a></li>
+                <li><a href="#strings=3:19;2:19;3:19;2:20;;&key=Gnatural&intColor=false&intNames=false&diagram_title=Edim7%20Fingering"
+                >Edim7 fingering</a></li>
+				<li><a href="#strings=0:14,2:7,5:11,7:0,10:4,12:14,14:7;0:0,3:4,5:14,7:7,10:11,12:0,15:4;2:11,4:0,7:4,9:14,11:7,14:11;0:4,2:14,4:7,7:11,9:0,12:4,14:14;0:11,2:0,5:4,7:14,9:7,12:11,14:0;0:14,2:7,5:11,7:0,10:4,12:14,14:7&key=Bnatural&intColor=false&intNames=true&diagram_title=B%20minor%20pentatonic&dash=Cnatural_ARP_MIN7,Fnatural_ARP_MIN7,Bflat_ARP_MIN,Eflat_ARP_DOM7,Aflat_ARP_MAJ"
+                >B minor pentatonic</a></li>
+				<li><a href="#strings=;5:15;5:15;5:15;;5:20&key=Anatural&intColor=false&intNames=true&diagram_title=A-7%20Fingering"
+                >A-7 fingering</a></li>
 
             </ul>
 		</div>