From c5fc6cb93d52af2338b8484ae1a188bfdbc32b19 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Sat, 23 May 2015 08:36:48 -0500
Subject: [PATCH 01/11] Fix typos.

---
 web/app/assets/javascripts/band_setup.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index d8a8a51ee..311b3ef58 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -58,7 +58,7 @@
       }
     }
 
-    function renderCurrentPange() {
+    function renderCurrentPage() {
       $(".band-step").addClass("hidden")      
       $("#band-setup-step-" + currentStep).removeClass("hidden")
       if(currentStep==0) {                
@@ -211,8 +211,7 @@
         })  
         .always(function (jqXHR) {            
           bindNavButtons()      
-        })                      
-      }      
+        })                                  
     }
 
     function createBandInvitations(bandId, onComplete) {
@@ -277,7 +276,7 @@
 
         $('.band-photo').addClass("hidden")
       }
-      renderCurrentPange()
+      renderCurrentPage()
     }
 
     function loadBandDetails() {

From 064f402f593100418826089d15540e4ebc3c9199 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Sat, 23 May 2015 13:00:22 -0500
Subject: [PATCH 02/11] VRFS-3244 : Add additional fields for musical
 experience.  Fix a few bugs and style issues.

---
 web/app/assets/javascripts/band_setup.js      |  27 +-
 .../assets/stylesheets/client/band.css.scss   |  33 ++-
 web/app/views/clients/_band_setup.html.slim   | 259 ++++++++++--------
 3 files changed, 190 insertions(+), 129 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index 311b3ef58..a333019b0 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -22,7 +22,10 @@
     var nilOptionText = 'n/a';
     var bandId = '';
     var friendInput=null;
-
+    var bandType=null;
+    var bandStatus=null;
+    var concertCount=null;
+    
     // TODO: Use a single variable for a mutually exclusive option:
     var step1, step2;
     var isSaving = false;
@@ -58,7 +61,7 @@
       }
     }
 
-    function renderCurrentPage() {
+    function renderCurrentPage() {      
       $(".band-step").addClass("hidden")      
       $("#band-setup-step-" + currentStep).removeClass("hidden")
       if(currentStep==0) {                
@@ -73,8 +76,8 @@
       }
     }
 
-    function is_new_record() {
-      return bandId.length == 0;
+    function is_new_record() {      
+      return bandId==null || typeof(bandId)=='undefined' || bandId.length == 0;
     }
 
     function removeErrors() {
@@ -110,8 +113,7 @@
 
       resetGenres();
 
-      $("#band-setup-step-1").show();
-      $("#band-setup-step-2").hide();
+      //renderCurrentPage();$(".band-step").addClass("hidden")
 
       $(friendInput)
         .unbind('blur')
@@ -164,6 +166,7 @@
 
     function buildBand() {
       var band = {};
+      band.id = (is_new_record()) ? null : bandId;
       band.name = $("#band-name").val();
       band.website = $("#band-website").val();
       band.biography = $("#band-biography").val();
@@ -171,6 +174,10 @@
       band.state = $("#band-region").val();
       band.country = $("#band-country").val();
 
+      band.band_type = bandType.val();
+      band.band_status= bandStatus.val();
+      band.concert_count= concertCount.val();
+
       if (step2) {
         band.genres = getSelectedGenres();
         band.validate_genres = true
@@ -285,6 +292,10 @@
         $("#band-website").val(band.website);
         $("#band-biography").val(band.biography);
 
+        bandType.val(band.band_type)
+        bandStatus.val(band.band_status)
+        concertCount.val(band.concert_count)
+
         if (band.photo_url) {
           $("#band-avatar").attr('src', band.photo_url);
         }
@@ -541,6 +552,10 @@
         'afterShow': afterShow
       };
 
+      bandType=$("#band-type")
+      bandStatus=$("#band-status")
+      concertCount=$("#concert-count")
+    
       app.bindScreen('band/setup', screenBindings);
     }
 
diff --git a/web/app/assets/stylesheets/client/band.css.scss b/web/app/assets/stylesheets/client/band.css.scss
index b2228bf5b..f3c291133 100644
--- a/web/app/assets/stylesheets/client/band.css.scss
+++ b/web/app/assets/stylesheets/client/band.css.scss
@@ -1,13 +1,15 @@
 @import "client/common.css.scss";
 
 #band-setup, #band-profile {
-  input, select, textarea {
-    @include border_box_sizing;
-    width: 100%;
-    padding: 2px 4px 2px 2px;
+  .band-field {
+    input, select, textarea {
+      @include border_box_sizing;
+      width: 100%;
+      padding: 2px 4px 2px 2px;
+    }
   }
 
-  td.band-biography {
+  td.band-biography, td.tdBandGenres {
     height:100%;
     vertical-align: top;
     #band-biography {
@@ -18,7 +20,7 @@
 
   .band-setup-genres {
       width:100%;
-      height:90px;
+      height:200px;
       background-color:#c5c5c5;
       border:none;
       -webkit-box-shadow: inset 2px 2px 3px 0px #888;
@@ -346,12 +348,14 @@
     width:  100%;
   }
 
+  
   #band-setup-form {
     padding: 0.25em 0.5em 0.25em 0.25em;
-    #band-setup-table {    
-      
+    table.band-form-table {
+      width: 100%;
+      margin: 1em;
     }
-
+    
     .easydropdown {
       padding: 0 3px;
       width:100%;
@@ -369,4 +373,15 @@
       margin-bottom:2px;
     }
   }
+}
+
+.band-setup-genre {
+  input {
+    display: inline;
+    width: auto !important;
+  }
+  label {
+    display: inline;
+    width: auto;
+  }
 }
\ No newline at end of file
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 8f9c12451..37c44d525 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -7,126 +7,157 @@
     = render "screen_navigation"
   .content-body
     .content-body-scroller
-      form#band-setup-form
-        div style="display:block;"
-          #band-setup-step-0.band-step.content-wrapper style="padding:10px 35px10px 35px;"
-            h2 edit profile: basics
-            table width="100%"
-              tr
-                td colspan="2"
-                  
-              tr#name_row 
-                td colspan="2"
-                  .band-photo.hidden
-                    span.field
-                      a.band-avatar-profile href="#"
-                        = image_tag "shared/avatar_generic_band.png", {:id => "band-avatar", :align=>"absmiddle", :height => 88, :width => 88 }
-                    span.field
-                      a#band-change-photo.small.ml20 href="#"
-                        | Upload band photo.
-                    
-                  .band-name
-                    .field
-                      label for="band-name"
-                        | Band Name:
-                      input#band-name type="text" maxlength="1024" value=""          
-                / td#tdBandWebsite[]
-                /   .field
-                /     label for="band-website"
-                /       | Web Site:
-                /     input#band-website[type="text" maxlength="4000" value=""]
-              tr
-                td.band-country
-                  .field
-                    label for="band-country"
-                      | Country:
-                    select#band-country
-                td.band-biography rowspan="3" 
-                  .field
-                    label for="band-biography"
-                      | Description / Bio:
-                    textarea#band-biography rows="8"
-              tr              
-                td.band-region
-                  .field
-                    label for="band-region"
-                      | State/Region:
-                    select#band-region
-              tr
-                td.band-city
-                  .field
-                    label for="band-city"
-                      | City:
-                    select#band-city
-
-                / td#tdBandGenres[valign="top"]
-                /   .field
-                /     label for="band-genres"
-                /       | Genres:
-                /     .band-setup-genres.w90
-                /       table#band-genres[width="100%" cellpadding="10" cellspacing="6"]
-          #band-setup-step-1.band-step.content-wrapper 
-            h2 edit profile: musical experience
-          #band-setup-step-2.band-step.content-wrapper 
-            h2 edit profile: current interests
-          #band-setup-step-3.band-step.content-wrapper 
-            h2 edit profile: online presence & performance samples
-          #band-setup-step-4.band-step.content-wrapper 
-            h2 invite members
-            br
-            #band-setup-invite-musicians
-            br
-            br
-            |  If your bandmates are not on JamKazam yet, use any of the options below to invite them to join the service.
-            br
-            br
-            .left.mr20
-              .left
-                a.btn-email-invitation
-                  = image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle")
-              .right.mt5.ml5
-                | E-mail
-            .left.mr20
-              .left
-                a.btn-facebook-invitation
-                  = image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle")
-              .right.mt5.ml5
-                | Facebook
-            .left.left
-              .left
-                a.btn-gmail-invitation
-                  = image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle")
-              .right.mt5.ml5
-                | Google+
-            / br clear="all"
-            / .right
-            /   a#btn-band-setup-back.button-grey
-            /     | BACK
-            /   |    
-            /   a#btn-band-setup-save.button-orange
-            /     | CREATE BAND
-            / .clearall
+      form#band-setup-form        
+        #band-setup-step-0.band-step.content-wrapper
+          h2 edit profile: basics
+          table.band-form-table
+            tr
+              td colspan="2"
                 
-          br clear="all"
-          .right
-            a#btn-band-setup-cancel.nav-button.button-grey
-              | CANCEL               
-            a#btn-band-setup-back.nav-button.button-grey.hidden
-              | BACK
-            a#btn-band-setup-next.nav-button.button-orange
-              | SAVE &amp; NEXT
-          .clearall
+            tr#name_row 
+              td colspan="2"
+                .band-photo.hidden
+                  span.field
+                    a.band-avatar-profile href="#"
+                      = image_tag "shared/avatar_generic_band.png", {:id => "band-avatar", :align=>"absmiddle", :height => 88, :width => 88 }
+                  span.field
+                    a#band-change-photo.small.ml20 href="#"
+                      | Upload band photo.
+                  
+                .band-name
+                  .field.band-field
+                    label for="band-name"
+                      | Band Name:
+                    input#band-name type="text" maxlength="1024" value=""          
+              / td#tdBandWebsite[]
+              /   .field
+              /     label for="band-website"
+              /       | Web Site:
+              /     input#band-website[type="text" maxlength="4000" value=""]
+            tr
+              td.band-country
+                .field.band-field
+                  label for="band-country"
+                    | Country:
+                  select#band-country
+              td.band-biography rowspan="3" 
+                .field.band-field
+                  label for="band-biography"
+                    | Description / Bio:
+                  textarea#band-biography rows="8"
+            tr              
+              td.band-region
+                .field.band-field
+                  label for="band-region"
+                    | State/Region:
+                  select#band-region
+            tr
+              td.band-city
+                .field.band-field
+                  label for="band-city"
+                    | City:
+                  select#band-city
+
+                
+        #band-setup-step-1.band-step.content-wrapper 
+          h2 edit profile: musical experience
+
+          table.band-form-table
+            tr
+              td#tdBandGenres rowspan="3"
+                label for="band-genres" What genres do you play?
+                .band-setup-genres
+                  table#band-genres
+
+              td
+                .field
+                  label for="band-type" Type
+                  select#band-type.easydropdown name="band_type" 
+                    option value="" Not Specified
+                    option value="virtual" Virtual
+                    option value="physical" Physical
+
+            tr
+              td
+                .field
+                  label for="band-status" Status
+                  select#band-status.easydropdown name="band_status" 
+                    option value="" Not Specified
+                    option value="amateur" Amateur
+                    option value="professional" Professional
+
+            tr
+              td
+                .field
+                  label for="concert-count" Concert Gigs Played
+                  select#concert-count.easydropdown name="concert_count" 
+                    option value="" Not Specified
+                    option value="0" Zero
+                    option value="1" Under 10
+                    option value="2" 10 to 50
+                    option value="3" 50 to 100
+                    option value="4" Over 100                      
+          
+        #band-setup-step-2.band-step.content-wrapper 
+          h2 edit profile: current interests
+        #band-setup-step-3.band-step.content-wrapper 
+          h2 edit profile: online presence & performance samples
+        #band-setup-step-4.band-step.content-wrapper 
+          h2 invite members
+          br
+          #band-setup-invite-musicians
+          br
+          br
+          |  If your bandmates are not on JamKazam yet, use any of the options below to invite them to join the service.
+          br
+          br
+          .left.mr20
+            .left
+              a.btn-email-invitation
+                = image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle")
+            .right.mt5.ml5
+              | E-mail
+          .left.mr20
+            .left
+              a.btn-facebook-invitation
+                = image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle")
+            .right.mt5.ml5
+              | Facebook
+          .left.left
+            .left
+              a.btn-gmail-invitation
+                = image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle")
+            .right.mt5.ml5
+              | Google+
+          / br clear="all"
+          / .right
+          /   a#btn-band-setup-back.button-grey
+          /     | BACK
+          /   |    
+          /   a#btn-band-setup-save.button-orange
+          /     | CREATE BAND
+          / .clearall
+              
+        br clear="all"
+        .right
+          a#btn-band-setup-cancel.nav-button.button-grey
+            | CANCEL               
+          a#btn-band-setup-back.nav-button.button-grey.hidden
+            | BACK
+          a#btn-band-setup-next.nav-button.button-orange
+            | SAVE &amp; NEXT
+        .clearall
 
 script#template-band-setup-genres type="text/template"
-  tr
+  tr.band-setup-genre
     tr
-      td 
-        input value="{id}" {checked} type="checkbox" 
-          | {description}
+      td
+        <input id="{id}" value="{id}" {checked} type="checkbox" />{description}
+
 
 script#template-band-invitation type="text/template"
-  .invitation user-id="{userId}" 
-    | {userName}
+  .invitation user-id="{{userId}}" 
+    | {{userName}}
     a
       img src="shared/icon_delete_sm.png" width="13" height="13"
 

From 79af533348c0b1a3ce28f5d35038e5b44d070c0e Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Tue, 26 May 2015 21:17:25 -0500
Subject: [PATCH 03/11] VRFS-3245 : Layout and initial styling of band profile
 current interests screen -- incremental.

---
 .../assets/stylesheets/client/band.css.scss   | 38 +++++++---
 web/app/views/clients/_band_setup.html.slim   | 72 +++++++++++++++++++
 2 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/web/app/assets/stylesheets/client/band.css.scss b/web/app/assets/stylesheets/client/band.css.scss
index f3c291133..c880af36c 100644
--- a/web/app/assets/stylesheets/client/band.css.scss
+++ b/web/app/assets/stylesheets/client/band.css.scss
@@ -1,14 +1,25 @@
 @import "client/common.css.scss";
 
 #band-setup, #band-profile {
+  font-family: helvetica, verdana, arial, sans-serif;
   .band-field {
-    input, select, textarea {
+    input[type="text"], select, textarea {
       @include border_box_sizing;
       width: 100%;
       padding: 2px 4px 2px 2px;
     }
   }
 
+  .radio-field {
+    display: inline;
+    label {
+      display: inline !important;
+    }
+    input {
+      display: inline  !important; 
+    }    
+  }
+
   td.band-biography, td.tdBandGenres {
     height:100%;
     vertical-align: top;
@@ -373,15 +384,26 @@
       margin-bottom:2px;
     }
   }
-}
 
-.band-setup-genre {
-  input {
-    display: inline;
-    width: auto !important;
+
+  .band-setup-genre {
+    input {
+      display: inline;
+      width: auto !important;
+    }
+    label {
+      display: inline;
+      width: auto;
+    }
   }
+
   label {
-    display: inline;
-    width: auto;
+    font-size: 1.1em;  
   }
+
+  label.strong-label {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+
 }
\ No newline at end of file
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 37c44d525..1fb0eba8b 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -100,8 +100,79 @@
           
         #band-setup-step-2.band-step.content-wrapper 
           h2 edit profile: current interests
+          table.band-form-table
+            tr
+              td
+                label.strong-label for="new-member" 
+                    | We want to add a new member &nbsp;
+                    a.help help-topic="profile-interests-virtual-band" [?]               
+              td 
+                label for="desired-experience" 
+                  | Desired Experience &nbsp;
+                  a.select-desired-experience select
+              td 
+                label for="play-commitment" Play Commitment
+              td
+                label for="touring-option" Touring Option
+            tr
+              td
+                .radio-field
+                  input#new-member-yes.irad_minimal type="radio" name="new-member" value='true'
+                  label for='new-member-yes' Yes
+                .radio-field
+                  input#new-member-no.irad_minimal type="radio" name="new-member" value='false' 
+                  label for='new-member-no' No            
+              td 
+                em 
+                  #desired-experience-label None specified                
+              td 
+                select#play-commitment.easydropdown name="play_commitment" 
+                    option value="1" Infrequent
+                    option value="2" Once a Week
+                    option value="3" 2-3 Times Per Week
+                    option value="4" 4+ Times Per Week 
+              td
+                select#touring-option.easydropdown name="touring_option" 
+                    option value="true" Yes
+                    option value="false" No
+            tr
+              td
+                label.strong-label for="paid-gigs" 
+                    | We want to play paid gigs &nbsp;
+                    a.help help-topic="profile-interests-paid-gigs" [?]               
+              td
+                label for="hourly-rate" Hourly Rate:
+              td
+                label for="gig-minimum" Gig Minimum:
+            tr
+              td
+                .radio-field                  
+                  input#paid-gigs-yes.irad_minimal type="radio" name="paid_gigs" value='true' 
+                  label for="paid-gigs-yes" Yes
+                .radio-field                  
+                  input#paid-gigs-no.irad_minimal type="radio" name="paid_gigs" value='false'
+                  label for="paid-gigs-no" No
+              td
+                input#hourly-rate type="number" name="hourly_rate"
+              td
+                input#gig-minimum type="number" name="gig_minimum"
+            tr
+              td
+                label.strong-label for="free-gigs" 
+                    | We want to play free gigs &nbsp;
+                    a.help help-topic="profile-interests-free-gigs" [?]               
+            tr
+              td
+                .radio-field
+                  input#free-gigs-yes.irad_minimal type="radio" name="free-gigs" value='true' 
+                  label for="free-gigs-yes" Yes
+                .radio-field
+                  input#free-gigs-no.irad_minimal type="radio" name="free-gigs" value='false' 
+                  label for="free-gigs-no" No            
+
         #band-setup-step-3.band-step.content-wrapper 
           h2 edit profile: online presence & performance samples
+          table.band-form-table
         #band-setup-step-4.band-step.content-wrapper 
           h2 invite members
           br
@@ -148,6 +219,7 @@
             | SAVE &amp; NEXT
         .clearall
 
+
 script#template-band-setup-genres type="text/template"
   tr.band-setup-genre
     tr

From c714b98af137e122b8902311ae938a9f2b125862 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Wed, 27 May 2015 13:11:12 -0500
Subject: [PATCH 04/11] VRFS-3245 : Integrate iCheck and style accordingly.

---
 web/app/assets/javascripts/band_setup.js      |  7 ++++++
 .../assets/stylesheets/client/band.css.scss   | 15 +++++++-----
 web/app/views/clients/_band_setup.html.slim   | 24 +++++++++----------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index a333019b0..58d84e0d9 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -557,6 +557,13 @@
       concertCount=$("#concert-count")
     
       app.bindScreen('band/setup', screenBindings);
+
+      $('input[type=radio]')
+        .iCheck({
+          checkboxClass: 'icheckbox_minimal',
+          radioClass: 'iradio_minimal',
+          inheritClass: true
+        });
     }
 
     this.initialize = initialize;
diff --git a/web/app/assets/stylesheets/client/band.css.scss b/web/app/assets/stylesheets/client/band.css.scss
index c880af36c..322880bba 100644
--- a/web/app/assets/stylesheets/client/band.css.scss
+++ b/web/app/assets/stylesheets/client/band.css.scss
@@ -1,7 +1,7 @@
 @import "client/common.css.scss";
 
 #band-setup, #band-profile {
-  font-family: helvetica, verdana, arial, sans-serif;
+  font-family: Raleway, Arial, Helvetica, verdana, arial, sans-serif;
   .band-field {
     input[type="text"], select, textarea {
       @include border_box_sizing;
@@ -12,11 +12,14 @@
 
   .radio-field {
     display: inline;
-    label {
-      display: inline !important;
+    padding: 2px;
+    margin: 0.5em 2em 0.5em 0.25em;
+    label {      
+      display: inline;            
     }
-    input {
-      display: inline  !important; 
+    .iradio-inline {
+      display: inline-block;
+      //padding: 2px;
     }    
   }
 
@@ -361,7 +364,7 @@
 
   
   #band-setup-form {
-    padding: 0.25em 0.5em 0.25em 0.25em;
+    padding: 0.25em 0.5em 1.25em 0.25em;
     table.band-form-table {
       width: 100%;
       margin: 1em;
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 1fb0eba8b..4b1fcc137 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -116,11 +116,11 @@
                 label for="touring-option" Touring Option
             tr
               td
-                .radio-field
-                  input#new-member-yes.irad_minimal type="radio" name="new-member" value='true'
+                .radio-field                  
+                  input#new-member-yes.iradio-inline type="radio" name="new-member" value='true'                  
                   label for='new-member-yes' Yes
-                .radio-field
-                  input#new-member-no.irad_minimal type="radio" name="new-member" value='false' 
+                .radio-field                  
+                  input#new-member-no.iradio-inline type="radio" name="new-member" value='false'                   
                   label for='new-member-no' No            
               td 
                 em 
@@ -146,11 +146,11 @@
                 label for="gig-minimum" Gig Minimum:
             tr
               td
-                .radio-field                  
-                  input#paid-gigs-yes.irad_minimal type="radio" name="paid_gigs" value='true' 
+                .radio-field                                    
+                  input#paid-gigs-yes.iradio-inline type="radio" name="paid_gigs" value='true'                   
                   label for="paid-gigs-yes" Yes
-                .radio-field                  
-                  input#paid-gigs-no.irad_minimal type="radio" name="paid_gigs" value='false'
+                .radio-field                                    
+                  input#paid-gigs-no.iradio-inline type="radio" name="paid_gigs" value='false'                  
                   label for="paid-gigs-no" No
               td
                 input#hourly-rate type="number" name="hourly_rate"
@@ -163,11 +163,11 @@
                     a.help help-topic="profile-interests-free-gigs" [?]               
             tr
               td
-                .radio-field
-                  input#free-gigs-yes.irad_minimal type="radio" name="free-gigs" value='true' 
+                .radio-field                  
+                  input#free-gigs-yes.iradio-inline type="radio" name="free-gigs" value='true'                   
                   label for="free-gigs-yes" Yes
-                .radio-field
-                  input#free-gigs-no.irad_minimal type="radio" name="free-gigs" value='false' 
+                .radio-field                  
+                  input#free-gigs-no.iradio-inline type="radio" name="free-gigs" value='false'                   
                   label for="free-gigs-no" No            
 
         #band-setup-step-3.band-step.content-wrapper 

From 9d59e53679f9b39d035383088a7c277f4ee93796 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Wed, 27 May 2015 16:14:00 -0500
Subject: [PATCH 05/11] VRFS-3245 : Tweak style/layout to more closely match
 spec.

---
 .../assets/stylesheets/client/band.css.scss   | 20 +++++++++++++++++++
 web/app/views/clients/_band_setup.html.slim   |  3 +--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/web/app/assets/stylesheets/client/band.css.scss b/web/app/assets/stylesheets/client/band.css.scss
index 322880bba..7d76277b3 100644
--- a/web/app/assets/stylesheets/client/band.css.scss
+++ b/web/app/assets/stylesheets/client/band.css.scss
@@ -8,6 +8,17 @@
       width: 100%;
       padding: 2px 4px 2px 2px;
     }
+
+  }
+
+  // Mimic style of easydropdown selects:
+  input[type="number"] {
+    border-radius: 6px;
+    background-color: #c5c5c5;
+    border-right-style: outset;
+    border-bottom-style: outset;
+    height: 15px;
+    padding: 5px;
   }
 
   .radio-field {
@@ -16,6 +27,7 @@
     margin: 0.5em 2em 0.5em 0.25em;
     label {      
       display: inline;            
+      padding: 2px;
     }
     .iradio-inline {
       display: inline-block;
@@ -23,6 +35,10 @@
     }    
   }
 
+  tr:nth-child(even) td {
+    padding-bottom: 1em;    
+  }
+
   td.band-biography, td.tdBandGenres {
     height:100%;
     vertical-align: top;
@@ -386,6 +402,10 @@
     label {
       margin-bottom:2px;
     }
+
+    #desired-experience-label {
+      font-style: italic;
+    }
   }
 
 
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 4b1fcc137..3461d98bc 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -123,8 +123,7 @@
                   input#new-member-no.iradio-inline type="radio" name="new-member" value='false'                   
                   label for='new-member-no' No            
               td 
-                em 
-                  #desired-experience-label None specified                
+                #desired-experience-label None specified                
               td 
                 select#play-commitment.easydropdown name="play_commitment" 
                     option value="1" Infrequent

From 8d73ef6aaca3210ba9bc44553f0ee89a649d9a3c Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 28 May 2015 14:21:55 -0500
Subject: [PATCH 06/11] VRFS-3245 : Serialize additional attributes.

---
 web/app/assets/javascripts/band_setup.js    | 58 +++++++++++++++++----
 web/app/views/api_bands/show.rabl           |  4 +-
 web/app/views/clients/_band_setup.html.slim | 16 +++---
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index 58d84e0d9..4798354a1 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -24,11 +24,7 @@
     var friendInput=null;
     var bandType=null;
     var bandStatus=null;
-    var concertCount=null;
-    
-    // TODO: Use a single variable for a mutually exclusive option:
-    var step1, step2;
-    var isSaving = false;
+    var concertCount=null;    
     var currentStep = 0;
     var STEPS_COUNT=5;
 
@@ -73,7 +69,7 @@
       } else {                
         $("#btn-band-setup-back").removeClass("hidden")
         $("#btn-band-setup-next").removeClass("hidden").html("SAVE & FINISH")
-      }
+      }      
     }
 
     function is_new_record() {      
@@ -111,6 +107,15 @@
       // website
       $('#band-website').val('');
 
+      $("#new-member-no").iCheck('check').attr('checked', 'checked')
+      $("#paid-gigs-no").iCheck('check').attr('checked', 'checked')
+      $("#free-gigs-no").iCheck('check').attr('checked', 'checked')
+      $('#touring-option').val('no')
+
+      
+      $("#play-commitment").val('1')
+      $("#hourly-rate").val("0.0")
+      $("#gig-minimum").val("0.0")      
       resetGenres();
 
       //renderCurrentPage();$(".band-step").addClass("hidden")
@@ -178,7 +183,16 @@
       band.band_status= bandStatus.val();
       band.concert_count= concertCount.val();
 
-      if (step2) {
+      band.add_new_members = $('input[name="add_new_members"]:checked').val()=="yes"
+      band.paid_gigs = $('input[name="paid_gigs"]:checked').val()=="yes"
+      band.free_gigs=$('input[name="free_gigs"]:checked').val()=="yes"
+      band.touring_option=$('#touring-option').val()=="yes"
+      
+      band.play_commitment=$("#play-commitment").val()
+      band.hourly_rate=$("#hourly-rate").val()
+      band.gig_minimum=$("#gig-minimum").val()
+          
+      if (currentStep==3) {
         band.genres = getSelectedGenres();
         band.validate_genres = true
       } else {
@@ -295,7 +309,30 @@
         bandType.val(band.band_type)
         bandStatus.val(band.band_status)
         concertCount.val(band.concert_count)
+        if (band.add_new_members){
+          $("#new-member-no").iCheck('check').attr('checked', 'checked')
+        } else {
+          $("#new-member-yes").iCheck('check').attr('checked', 'checked')
+        }
 
+        if (band.paid_gigs) {
+          $("#paid-gigs-no").iCheck('check').attr('checked', 'checked')
+        } else {
+          $("#paid-gigs-yes").iCheck('check').attr('checked', 'checked')
+        }
+
+        if (band.free_gigs) {
+          $("#free-gigs-no").iCheck('check').attr('checked', 'checked')
+        } else {
+          $("#free-gigs-yes").iCheck('check').attr('checked', 'checked')
+        }
+
+        $('#touring-option').val(band.touring_option ? 'yes' : 'no')
+        $("#play-commitment").val(band.play_commitment)
+        $("#hourly-rate").val(band.hourly_rate)
+        $("#gig-minimum").val(band.gig_minimum)
+        
+        // Initialize avatar
         if (band.photo_url) {
           $("#band-avatar").attr('src', band.photo_url);
         }
@@ -307,8 +344,8 @@
             loadCities(band.city);
           });
         });
+        ;
 
-        // TODO: initialize avatar
       });
     }
 
@@ -448,8 +485,7 @@
         $('#selected-band-invitees').append(invitationHtml);
         $('#band-invitee-input').select();
         selectedFriendIds[data] = true;
-      }
-      else {
+      } else {
         $('#band-invitee-input').select();
         context.alert('Invitation already exists for this musician.');
       }
@@ -536,7 +572,7 @@
       $('div[layout-id="band/setup"] .btn-facebook-invitation').click(function () {
         invitationDialog.showFacebookDialog();
       });
-
+      
       $(friendInput).focus(function() { $(this).val(''); })
     }
 
diff --git a/web/app/views/api_bands/show.rabl b/web/app/views/api_bands/show.rabl
index 74d8dd08d..d398dbbd3 100644
--- a/web/app/views/api_bands/show.rabl
+++ b/web/app/views/api_bands/show.rabl
@@ -1,7 +1,9 @@
 object @band
 
 attributes :id, :name, :city, :state, :country, :location, :website, :biography, :photo_url, :logo_url, :liker_count, :follower_count, :recording_count, :session_count,
-:original_fpfile_photo, :cropped_fpfile_photo, :crop_selection_photo
+:original_fpfile_photo, :cropped_fpfile_photo, :crop_selection_photo,
+:band_type, :band_status, :concert_count, :add_new_members, :play_commitment, :touring_option, :paid_gigs, 
+:free_gigs, :hourly_rate, :gig_minimum
 
 child :users => :musicians do
   attributes :id, :first_name, :last_name, :name, :photo_url
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 3461d98bc..85a9321e8 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -117,10 +117,10 @@
             tr
               td
                 .radio-field                  
-                  input#new-member-yes.iradio-inline type="radio" name="new-member" value='true'                  
+                  input#new-member-yes.iradio-inline type="radio" name="add_new_members" value='yes'                  
                   label for='new-member-yes' Yes
                 .radio-field                  
-                  input#new-member-no.iradio-inline type="radio" name="new-member" value='false'                   
+                  input#new-member-no.iradio-inline type="radio" name="add_new_members" value='no'                   
                   label for='new-member-no' No            
               td 
                 #desired-experience-label None specified                
@@ -132,8 +132,8 @@
                     option value="4" 4+ Times Per Week 
               td
                 select#touring-option.easydropdown name="touring_option" 
-                    option value="true" Yes
-                    option value="false" No
+                    option value="yes" Yes
+                    option value="no" No
             tr
               td
                 label.strong-label for="paid-gigs" 
@@ -146,10 +146,10 @@
             tr
               td
                 .radio-field                                    
-                  input#paid-gigs-yes.iradio-inline type="radio" name="paid_gigs" value='true'                   
+                  input#paid-gigs-yes.iradio-inline type="radio" name="paid_gigs" value='yes'                   
                   label for="paid-gigs-yes" Yes
                 .radio-field                                    
-                  input#paid-gigs-no.iradio-inline type="radio" name="paid_gigs" value='false'                  
+                  input#paid-gigs-no.iradio-inline type="radio" name="paid_gigs" value='no'                  
                   label for="paid-gigs-no" No
               td
                 input#hourly-rate type="number" name="hourly_rate"
@@ -163,10 +163,10 @@
             tr
               td
                 .radio-field                  
-                  input#free-gigs-yes.iradio-inline type="radio" name="free-gigs" value='true'                   
+                  input#free-gigs-yes.iradio-inline type="radio" name="free_gigs" value='yes'                   
                   label for="free-gigs-yes" Yes
                 .radio-field                  
-                  input#free-gigs-no.iradio-inline type="radio" name="free-gigs" value='false'                   
+                  input#free-gigs-no.iradio-inline type="radio" name="free_gigs" value='no'                   
                   label for="free-gigs-no" No            
 
         #band-setup-step-3.band-step.content-wrapper 

From a4317a532bf7f555ff0202ad2aa996ce9d93bdb2 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 28 May 2015 17:12:39 -0500
Subject: [PATCH 07/11] VRFS-3245 : Render optional controls

* If new member is wanted, show play commitment and touring option
* If paid gigs, show amount and gig minimum
* Works largely through class names.
---
 web/app/assets/javascripts/band_setup.js    | 37 ++++++++++++++++-----
 web/app/views/clients/_band_setup.html.slim | 28 ++++++++--------
 2 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index 4798354a1..eadf82a99 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -69,10 +69,30 @@
       } else {                
         $("#btn-band-setup-back").removeClass("hidden")
         $("#btn-band-setup-next").removeClass("hidden").html("SAVE & FINISH")
-      }      
+      }
+      renderOptionalControls()
     }
 
-    function is_new_record() {      
+    function renderOptionalControls(e) {      
+      if(e){e.stopPropagation()}
+      
+      // Is new member selected?        
+      if ($('input[name="add_new_members"]:checked').val()=="yes") {
+        $(".new-member-dependent").removeClass("hidden")
+      } else {
+        $(".new-member-dependent").addClass("hidden")
+      }
+
+      // Is paid gigs selected?        
+      if ($('input[name="paid_gigs"]:checked').val()=="yes") {       
+        $(".paid-gigs-dependent").removeClass("hidden")
+      } else {
+        $(".paid-gigs-dependent").addClass("hidden")
+      }
+      return false;
+    }
+
+    function isNewBand() {      
       return bandId==null || typeof(bandId)=='undefined' || bandId.length == 0;
     }
 
@@ -118,8 +138,6 @@
       $("#gig-minimum").val("0.0")      
       resetGenres();
 
-      //renderCurrentPage();$(".band-step").addClass("hidden")
-
       $(friendInput)
         .unbind('blur')
         .attr("placeholder", "Looking up friends...")
@@ -171,7 +189,7 @@
 
     function buildBand() {
       var band = {};
-      band.id = (is_new_record()) ? null : bandId;
+      band.id = (isNewBand()) ? null : bandId;
       band.name = $("#band-name").val();
       band.website = $("#band-website").val();
       band.biography = $("#band-biography").val();
@@ -217,7 +235,7 @@
       unbindNavButtons()
       var band = buildBand()
 
-      var saveBandFn = (is_new_record()) ? rest.createBand : rest.updateBand
+      var saveBandFn = (isNewBand()) ? rest.createBand : rest.updateBand
       saveBandFn(band)
         .done(function (response) {            
           saveInvitations()
@@ -277,7 +295,7 @@
     function afterShow(data) {
       inviteMusiciansUtil.loadFriends();
 
-      if (!is_new_record()) {
+      if (!isNewBand()) {
         $("#band-change-photo").html('Upload band photo.');
         $('.band-photo').removeClass("hidden")
         
@@ -344,7 +362,8 @@
             loadCities(band.city);
           });
         });
-        ;
+
+        renderOptionalControls();
 
       });
     }
@@ -572,6 +591,8 @@
       $('div[layout-id="band/setup"] .btn-facebook-invitation').click(function () {
         invitationDialog.showFacebookDialog();
       });
+
+      $('#band-setup').on('ifToggled', 'input[type="radio"].dependent-master', renderOptionalControls);
       
       $(friendInput).focus(function() { $(this).val(''); })
     }
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 85a9321e8..b869dcd36 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -106,31 +106,31 @@
                 label.strong-label for="new-member" 
                     | We want to add a new member &nbsp;
                     a.help help-topic="profile-interests-virtual-band" [?]               
-              td 
+              td.new-member-dependent 
                 label for="desired-experience" 
                   | Desired Experience &nbsp;
                   a.select-desired-experience select
-              td 
+              td.new-member-dependent 
                 label for="play-commitment" Play Commitment
-              td
+              td.new-member-dependent
                 label for="touring-option" Touring Option
             tr
               td
                 .radio-field                  
-                  input#new-member-yes.iradio-inline type="radio" name="add_new_members" value='yes'                  
+                  input#new-member-yes.iradio-inline.dependent-master type="radio" name="add_new_members" value='yes'                  
                   label for='new-member-yes' Yes
                 .radio-field                  
-                  input#new-member-no.iradio-inline type="radio" name="add_new_members" value='no'                   
+                  input#new-member-no.iradio-inline.dependent-master type="radio" name="add_new_members" value='no'                   
                   label for='new-member-no' No            
-              td 
+              td.new-member-dependent 
                 #desired-experience-label None specified                
-              td 
+              td.new-member-dependent 
                 select#play-commitment.easydropdown name="play_commitment" 
                     option value="1" Infrequent
                     option value="2" Once a Week
                     option value="3" 2-3 Times Per Week
                     option value="4" 4+ Times Per Week 
-              td
+              td.new-member-dependent
                 select#touring-option.easydropdown name="touring_option" 
                     option value="yes" Yes
                     option value="no" No
@@ -139,21 +139,21 @@
                 label.strong-label for="paid-gigs" 
                     | We want to play paid gigs &nbsp;
                     a.help help-topic="profile-interests-paid-gigs" [?]               
-              td
+              td.paid-gigs-dependent
                 label for="hourly-rate" Hourly Rate:
-              td
+              td.paid-gigs-dependent
                 label for="gig-minimum" Gig Minimum:
             tr
               td
                 .radio-field                                    
-                  input#paid-gigs-yes.iradio-inline type="radio" name="paid_gigs" value='yes'                   
+                  input#paid-gigs-yes.iradio-inline.dependent-master type="radio" name="paid_gigs" value='yes'                   
                   label for="paid-gigs-yes" Yes
                 .radio-field                                    
-                  input#paid-gigs-no.iradio-inline type="radio" name="paid_gigs" value='no'                  
+                  input#paid-gigs-no.iradio-inline.dependent-master type="radio" name="paid_gigs" value='no'                  
                   label for="paid-gigs-no" No
-              td
+              td.paid-gigs-dependent
                 input#hourly-rate type="number" name="hourly_rate"
-              td
+              td.paid-gigs-dependent
                 input#gig-minimum type="number" name="gig_minimum"
             tr
               td

From c02f8ceda8f8d6629b4590013e8e3a1de3c42349 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 28 May 2015 22:39:32 -0500
Subject: [PATCH 08/11] VRFS-3245 : Fix reset form logic.

---
 web/app/assets/javascripts/band_setup.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index eadf82a99..252039d2d 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -126,7 +126,7 @@
 
       // website
       $('#band-website').val('');
-
+      
       $("#new-member-no").iCheck('check').attr('checked', 'checked')
       $("#paid-gigs-no").iCheck('check').attr('checked', 'checked')
       $("#free-gigs-no").iCheck('check').attr('checked', 'checked')
@@ -286,10 +286,10 @@
         var stepNum = data['d'].substring(4)
         if(stepNum) {
           currentStep=stepNum
-          delete data['d'];
-          resetForm();
+          delete data['d'];          
         }
       }
+      resetForm();
     }
 
     function afterShow(data) {
@@ -327,6 +327,7 @@
         bandType.val(band.band_type)
         bandStatus.val(band.band_status)
         concertCount.val(band.concert_count)
+        
         if (band.add_new_members){
           $("#new-member-no").iCheck('check').attr('checked', 'checked')
         } else {

From dbd161a068501ec24dea0ef825d8fbce928949a5 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 28 May 2015 22:40:19 -0500
Subject: [PATCH 09/11] VRFS-3245 : Change "edit profile" to "set up band".

---
 web/app/views/clients/_band_setup.html.slim | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index b869dcd36..694eec75e 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -9,7 +9,7 @@
     .content-body-scroller
       form#band-setup-form        
         #band-setup-step-0.band-step.content-wrapper
-          h2 edit profile: basics
+          h2 set up band: basics
           table.band-form-table
             tr
               td colspan="2"
@@ -60,7 +60,7 @@
 
                 
         #band-setup-step-1.band-step.content-wrapper 
-          h2 edit profile: musical experience
+          h2 set up band: musical experience
 
           table.band-form-table
             tr
@@ -99,7 +99,7 @@
                     option value="4" Over 100                      
           
         #band-setup-step-2.band-step.content-wrapper 
-          h2 edit profile: current interests
+          h2 set up band: current interests
           table.band-form-table
             tr
               td
@@ -170,7 +170,7 @@
                   label for="free-gigs-no" No            
 
         #band-setup-step-3.band-step.content-wrapper 
-          h2 edit profile: online presence & performance samples
+          h2 set up band: online presence & performance samples
           table.band-form-table
         #band-setup-step-4.band-step.content-wrapper 
           h2 invite members

From d91d0b0cfe14cf987bdf61e2f521ab5159b62035 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 28 May 2015 22:41:03 -0500
Subject: [PATCH 10/11] VRFS-3245 : Instrument selector dialog -- incremental.

---
 .../dialog/instrumentSelectorDialog.js        | 83 +++++++++++++++++++
 web/app/assets/javascripts/ui_helper.js       |  6 ++
 web/app/views/dialogs/_dialogs.html.haml      |  1 +
 .../_instrumentSelectorDialog.html.haml       | 16 ++++
 4 files changed, 106 insertions(+)
 create mode 100644 web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
 create mode 100644 web/app/views/dialogs/_instrumentSelectorDialog.html.haml

diff --git a/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js b/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
new file mode 100644
index 000000000..b77c6fc1b
--- /dev/null
+++ b/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
@@ -0,0 +1,83 @@
+(function(context,$) {
+
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.InstrumentSelectorDialog = function(app, type, instruments, callback) {
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var $dialog = null;
+    var dialogId = 'instrument-selector-dialog';
+    var $screen = $('#' + dialogId);
+    var $btnSelect = $screen.find(".btn-select-instruments");
+    var $instructions = $screen.find('.instructions');
+    var $instruments = $screen.find('.instruments');    
+
+    function beforeShow(data) {
+    }
+
+    function afterShow(data) {
+      var instrumentList = context.JK.instruments;
+
+      $instruments.empty();
+
+      if (instrumentList) {
+        $.each(instrumentList, function(index, val) {        
+          $instruments.append('<li>');
+          var checked = '';
+          if (instruments && $.inArray(val.id, instruments) > -1) {
+            checked = 'checked';
+          }
+
+          $instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
+          $instruments.append('</li>');
+        });
+      }
+    }
+
+    function afterHide() {
+      $btnSelect.unbind("click")
+    }
+
+    function showDialog() {
+      return app.layout.showDialog(dialogId);
+    }
+
+    function events() {
+      $btnSelect.unbind("click").bind("click", function(evt) {
+        evt.preventDefault();
+        var selectedInstruments = [];
+        $instruments.find('input[type=checkbox]:checked').each(function(index) {
+          selectedInstruments.push($(this).val());
+        });
+
+        if (callback) {
+          callback(selectedInstruments);
+        }
+
+        app.layout.closeDialog(dialogId);
+
+        return false;
+
+      });
+    }
+
+    function initialize() {
+      var dialogBindings = {
+        'beforeShow' : beforeShow,
+        'afterShow' : afterShow,
+        'afterHide': afterHide
+      };
+
+      app.bindDialog(dialogId, dialogBindings);
+
+      $instructions.html('Select one or more instruments for ' + type + ':');
+
+      events();
+    }
+
+    this.initialize = initialize;
+    this.showDialog = showDialog;
+  }
+
+  return this;
+})(window,jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js
index 01d2aa403..c68ed7c09 100644
--- a/web/app/assets/javascripts/ui_helper.js
+++ b/web/app/assets/javascripts/ui_helper.js
@@ -62,6 +62,12 @@
       });
     }
 
+    function launchInstrumentSelectorDialog(type, instruments, callback) {
+      var instrumentSelectorDialog = new JK.InstrumentSelectorDialog(JK.app, type, instruments, callback);
+      instrumentSelectorDialog.initialize();
+      return instrumentSelectorDialog.showDialog();
+    }
+
     function launchGenreSelectorDialog(type, genres, callback) {
       var genreSelectorDialog = new JK.GenreSelectorDialog(JK.app, type, genres, callback);
       genreSelectorDialog.initialize();
diff --git a/web/app/views/dialogs/_dialogs.html.haml b/web/app/views/dialogs/_dialogs.html.haml
index 8f2905797..6f29cde19 100644
--- a/web/app/views/dialogs/_dialogs.html.haml
+++ b/web/app/views/dialogs/_dialogs.html.haml
@@ -38,6 +38,7 @@
 = render 'dialogs/loginRequiredDialog'
 = render 'dialogs/jamtrackPaymentHistoryDialog'
 = render 'dialogs/singlePlayerProfileGuard'
+= render 'dialogs/instrumentSelectorDialog'
 = render 'dialogs/genreSelectorDialog'
 = render 'dialogs/recordingSelectorDialog'
 = render 'dialogs/soundCloudPlayerDialog'
\ No newline at end of file
diff --git a/web/app/views/dialogs/_instrumentSelectorDialog.html.haml b/web/app/views/dialogs/_instrumentSelectorDialog.html.haml
new file mode 100644
index 000000000..ac6e44c2d
--- /dev/null
+++ b/web/app/views/dialogs/_instrumentSelectorDialog.html.haml
@@ -0,0 +1,16 @@
+.dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'instrument-selector-dialog', id: 'instrument-selector-dialog'}
+  .content-head
+    = image_tag "content/icon_checkmark_circle.png", {:width => 20, :height => 20, :class => 'content-icon' }
+    %h1
+      = 'select instrument'
+  .dialog-inner
+    %strong
+      .instructions
+    %br{:clear => "all"}/
+    .content-body 
+      .content-body-scroller
+        %ul.instruments.three-column-list-container
+
+  .right.action-buttons
+    %a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL
+    %a.button-orange.btn-select-instruments SELECT
\ No newline at end of file

From 540c3cc37f26b89b8606037014f6557ce2a13eee Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Fri, 29 May 2015 21:04:33 -0500
Subject: [PATCH 11/11] VRFS-3245 : Instrument selector

* Wrap instrument selector widget in dialog widget and delegate as
necessary
* Add instrument info to band api result
* Integrate with band setup flow
* Style to approximate spec
* Fix a few logic and syntax errors encountered along the way
---
 web/app/assets/javascripts/band_setup.js      | 55 ++++++++++++++++++-
 .../dialog/instrumentSelectorDialog.js        | 49 ++++++++---------
 .../assets/javascripts/instrumentSelector.js  | 23 ++++----
 web/app/assets/javascripts/ui_helper.js       |  1 +
 .../dialogs/instrumentSelectorDialog.css.scss | 44 +++++++++++++++
 web/app/views/api_bands/show.rabl             |  4 ++
 web/app/views/clients/_band_setup.html.slim   |  2 +-
 .../_instrumentSelectorDialog.html.haml       |  5 +-
 .../views/users/_instrument_selector.html.erb |  2 +-
 9 files changed, 143 insertions(+), 42 deletions(-)
 create mode 100644 web/app/assets/stylesheets/dialogs/instrumentSelectorDialog.css.scss

diff --git a/web/app/assets/javascripts/band_setup.js b/web/app/assets/javascripts/band_setup.js
index 252039d2d..15a869dc1 100644
--- a/web/app/assets/javascripts/band_setup.js
+++ b/web/app/assets/javascripts/band_setup.js
@@ -9,6 +9,8 @@
   // accounts_profiles.js
 
   context.JK.BandSetupScreen = function (app) {
+    var NONE_SPECIFIED = 'None specified'
+    var ui = new context.JK.UIHelper(JK.app)
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var inviteMusiciansUtil = null;
@@ -27,6 +29,7 @@
     var concertCount=null;    
     var currentStep = 0;
     var STEPS_COUNT=5;
+    var $selectedInstruments=[]
 
     function navBack() {
       if (currentStep>0) {
@@ -136,7 +139,8 @@
       $("#play-commitment").val('1')
       $("#hourly-rate").val("0.0")
       $("#gig-minimum").val("0.0")      
-      resetGenres();
+      resetGenres();      
+      renderDesiredExperienceLabel([])
 
       $(friendInput)
         .unbind('blur')
@@ -188,7 +192,7 @@
     }
 
     function buildBand() {
-      var band = {};
+      var band = {instruments:[]};
       band.id = (isNewBand()) ? null : bandId;
       band.name = $("#band-name").val();
       band.website = $("#band-website").val();
@@ -216,9 +220,29 @@
       } else {
         band.validate_genres = false
       }
+
+      
+      $.each($selectedInstruments, function(index, instrument) {
+        var h = {}
+        h.instrument_id = instrument.id
+        h.proficiency_level = instrument.level
+        band.instruments.push(h)        
+      })
+
       return band;
     }
 
+    function renderDesiredExperienceLabel(selectedInstruments) {
+      $selectedInstruments=selectedInstruments
+      var instrumentText=""
+      $.each($selectedInstruments, function(index, instrument) {
+        if (instrumentText.length!=0) {instrumentText += ", "}
+        instrumentText += instrument.name
+      })
+
+      $("#desired-experience-label").html(($selectedInstruments && $selectedInstruments.length > 0) ? instrumentText : NONE_SPECIFIED)
+    }
+
     function showProfile(band_id) {
       context.location = "/client#/bandProfile/" + band_id;
     }
@@ -318,6 +342,11 @@
       renderCurrentPage()
     }
 
+    function loadDesiredExperience() {
+
+    }
+
+    
     function loadBandDetails() {
       rest.getBand(bandId).done(function (band) {
         $("#band-name").val(band.name);
@@ -366,6 +395,16 @@
 
         renderOptionalControls();
 
+        $.each(band.instruments, function(index, instrument) {
+          var h = {}
+          h.id = instrument.instrument_id
+          h.level = instrument.proficiency_level
+          h.approve = true
+          $selectedInstruments.push(h)
+        })
+
+        renderDesiredExperienceLabel($selectedInstruments)
+
       });
     }
 
@@ -593,11 +632,23 @@
         invitationDialog.showFacebookDialog();
       });
 
+      $('a#choose-desired-experience').on("click", chooseExperience)
+
       $('#band-setup').on('ifToggled', 'input[type="radio"].dependent-master', renderOptionalControls);
       
       $(friendInput).focus(function() { $(this).val(''); })
     }
 
+    function chooseExperience(e) {      
+      e.stopPropagation()        
+      ui.launchInstrumentSelectorDialog("new member(s)", $selectedInstruments, function(selectedInstruments) {          
+        $selectedInstruments = selectedInstruments        
+        renderDesiredExperienceLabel($selectedInstruments)
+        return false
+      })
+      return false      
+    }
+
     function initialize(invitationDialogInstance, friendSelectorDialog) {
       inviteMusiciansUtil = new JK.InviteMusiciansUtil(app);
       inviteMusiciansUtil.initialize(friendSelectorDialog);
diff --git a/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js b/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
index b77c6fc1b..3346eef65 100644
--- a/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
+++ b/web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
@@ -11,27 +11,33 @@
     var $btnSelect = $screen.find(".btn-select-instruments");
     var $instructions = $screen.find('.instructions');
     var $instruments = $screen.find('.instruments');    
-
+    var $instrumentSelectorContainer = $screen.find('.instrument-selector-container')
+    var instrumentSelector = new JK.InstrumentSelector(app, $instrumentSelectorContainer);
+    var $callback = callback
+    var selectedInstruments = instruments
     function beforeShow(data) {
+      instrumentSelector.initialize(false)      
+      instrumentSelector.render($instrumentSelectorContainer)            
+      instrumentSelector.setSelectedInstruments(selectedInstruments)
     }
 
     function afterShow(data) {
-      var instrumentList = context.JK.instruments;
+      // var instrumentList = context.JK.instruments;
 
-      $instruments.empty();
+      // $instruments.empty();
 
-      if (instrumentList) {
-        $.each(instrumentList, function(index, val) {        
-          $instruments.append('<li>');
-          var checked = '';
-          if (instruments && $.inArray(val.id, instruments) > -1) {
-            checked = 'checked';
-          }
+      // if (instrumentList) {
+      //   $.each(instrumentList, function(index, val) {        
+      //     $instruments.append('<li>');
+      //     var checked = '';
+      //     if (instruments && $.inArray(val.id, selectedInstruments) > -1) {
+      //       checked = 'checked';
+      //     }
 
-          $instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
-          $instruments.append('</li>');
-        });
-      }
+      //     $instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
+      //     $instruments.append('</li>');
+      //   });
+      // }
     }
 
     function afterHide() {
@@ -45,17 +51,10 @@
     function events() {
       $btnSelect.unbind("click").bind("click", function(evt) {
         evt.preventDefault();
-        var selectedInstruments = [];
-        $instruments.find('input[type=checkbox]:checked').each(function(index) {
-          selectedInstruments.push($(this).val());
-        });
-
-        if (callback) {
-          callback(selectedInstruments);
-        }
-
-        app.layout.closeDialog(dialogId);
 
+        selectedInstruments = instrumentSelector.getSelectedInstruments()        
+        $callback(selectedInstruments)
+        app.layout.closeDialog(dialogId);        
         return false;
 
       });
@@ -70,7 +69,7 @@
 
       app.bindDialog(dialogId, dialogBindings);
 
-      $instructions.html('Select one or more instruments for ' + type + ':');
+      $instructions.html('Select the instruments and expertise you need for ' + type + ':');
 
       events();
     }
diff --git a/web/app/assets/javascripts/instrumentSelector.js b/web/app/assets/javascripts/instrumentSelector.js
index 57d6d6e51..51e740b75 100644
--- a/web/app/assets/javascripts/instrumentSelector.js
+++ b/web/app/assets/javascripts/instrumentSelector.js
@@ -4,18 +4,19 @@
 
     context.JK = context.JK || {};
     context.JK.InstrumentSelectorDeferred = null;
-    context.JK.InstrumentSelector = (function(app) {
+    context.JK.InstrumentSelector = (function(app, parentSelector) {
 
       var logger = context.JK.logger;
       var rest = new context.JK.Rest();
       var _instruments = [];  // will be list of structs: [ {label:xxx, value:yyy}, {...}, ... ]
       var _rsvp = false;
-      var _parentSelector = null;
+      if (typeof(_parentSelector)=="undefined") {_parentSelector=null}
+      var _parentSelector = parentSelector;
       var deferredInstruments = null;
       var self = this;
 
       function reset() {
-        $('input[type=checkbox]', _parentSelector).attr('checked', '');
+        $('input[type="checkbox"]', _parentSelector).attr('checked', '');
         if (_rsvp) {
           $('select.rsvp_count option', _parentSelector).eq(0).prop('selected', true);
           $('select.rsvp_level option', _parentSelector).eq(0).prop('selected', true);
@@ -88,7 +89,7 @@
         var $selectedVal = $('input[type="checkbox"]:checked', _parentSelector);
         $.each($selectedVal, function (index, value) {
           var id = $(value).attr('session-instrument-id');
-          var name = $('label[for="' + $(value).attr('id') + '"]', _parentSelector).text();
+          var name = $('label[for="' + $(value).attr('id') + '"]', _parentSelector).text().trim();
           if (_rsvp) {
             var count = $('select[session-instrument-id="' + id + '"].rsvp-count', _parentSelector).val();
             var rsvp_level = $('select[session-instrument-id="' + id + '"].rsvp-level', _parentSelector).val();
@@ -99,16 +100,16 @@
             selectedInstruments.push({id: id, name: name, level: level});
           }
         });
+        
         return selectedInstruments;
       }
 
       function setSelectedInstruments(instrumentList) {
         if (!instrumentList) {
           return;
-        }
-
-        $.each(instrumentList, function (index, value) {
-          $('input[type=checkbox][id="' + value.id + '"]')
+        }        
+        $.each(instrumentList, function (index, value) {          
+          $('input[type="checkbox"][session-instrument-id="' + value.id + '"]')
             .attr('checked', 'checked')
             .iCheck({
               checkboxClass: 'icheckbox_minimal',
@@ -116,11 +117,11 @@
               inheritClass: true
             });
           if (_rsvp) {
-            $('select[session-instrument-id="' + value.value + '"].rsvp-count', _parentSelector).val(value.count);
-            $('select[session-instrument-id="' + value.value + '"].rsvp-level', _parentSelector).val(value.level);
+            $('select[session-instrument-id="' + value.id + '"].rsvp-count', _parentSelector).val(value.count);
+            $('select[session-instrument-id="' + value.id + '"].rsvp-level', _parentSelector).val(value.level);
           }
           else {
-            $('select[session-instrument-id="' + value.value + '"]').val(value.level);
+            $('select[session-instrument-id="' + value.id + '"]').val(value.level);
           }
         });
       }
diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js
index c68ed7c09..11fb08af1 100644
--- a/web/app/assets/javascripts/ui_helper.js
+++ b/web/app/assets/javascripts/ui_helper.js
@@ -89,6 +89,7 @@
     this.launchRsvpCreateSlotDialog = launchRsvpCreateSlotDialog;
     this.launchSessionStartDialog = launchSessionStartDialog;
     this.launchGenreSelectorDialog = launchGenreSelectorDialog;
+    this.launchInstrumentSelectorDialog = launchInstrumentSelectorDialog;
     this.launchRecordingSelectorDialog = launchRecordingSelectorDialog;
 
     return this;
diff --git a/web/app/assets/stylesheets/dialogs/instrumentSelectorDialog.css.scss b/web/app/assets/stylesheets/dialogs/instrumentSelectorDialog.css.scss
new file mode 100644
index 000000000..59760670d
--- /dev/null
+++ b/web/app/assets/stylesheets/dialogs/instrumentSelectorDialog.css.scss
@@ -0,0 +1,44 @@
+@import "client/common";
+
+#instrument-selector-dialog {
+
+  min-height:initial;
+
+
+  .dialog-inner {    
+    .content-body {
+      max-height: auto;
+      .content-body-scroller {
+        height: 350px;
+        overflow: scroll;
+        background-color:#c5c5c5;
+        border: 1px inset;
+      }
+      border: 1px solid #222;
+      margin: 4px 4px 8px 4px;
+    }  
+
+    .instructions {
+      font-size:16px;
+    }
+
+    .dropdown {
+      box-shadow:0 0 0 0;
+    }  
+  }
+
+  .action-buttons {
+    margin-bottom:10px;
+  }
+
+  .instruments {
+
+  }
+
+  label {
+    display:inline;
+    color: black;
+    font-size:16px;
+  }
+
+}
\ No newline at end of file
diff --git a/web/app/views/api_bands/show.rabl b/web/app/views/api_bands/show.rabl
index d398dbbd3..dde9f8760 100644
--- a/web/app/views/api_bands/show.rabl
+++ b/web/app/views/api_bands/show.rabl
@@ -18,6 +18,10 @@ child :users => :musicians do
   end
 end
 
+child :instruments => :instruments do
+  attributes :id, :instrument_id, :proficiency_level
+end
+
 child :genres => :genres do
   attributes :id, :description
   #partial('api_genres/index', :object => @band.genres)
diff --git a/web/app/views/clients/_band_setup.html.slim b/web/app/views/clients/_band_setup.html.slim
index 694eec75e..4a9e2c3f2 100644
--- a/web/app/views/clients/_band_setup.html.slim
+++ b/web/app/views/clients/_band_setup.html.slim
@@ -109,7 +109,7 @@
               td.new-member-dependent 
                 label for="desired-experience" 
                   | Desired Experience &nbsp;
-                  a.select-desired-experience select
+                  a#choose-desired-experience select
               td.new-member-dependent 
                 label for="play-commitment" Play Commitment
               td.new-member-dependent
diff --git a/web/app/views/dialogs/_instrumentSelectorDialog.html.haml b/web/app/views/dialogs/_instrumentSelectorDialog.html.haml
index ac6e44c2d..85ea6f938 100644
--- a/web/app/views/dialogs/_instrumentSelectorDialog.html.haml
+++ b/web/app/views/dialogs/_instrumentSelectorDialog.html.haml
@@ -2,14 +2,15 @@
   .content-head
     = image_tag "content/icon_checkmark_circle.png", {:width => 20, :height => 20, :class => 'content-icon' }
     %h1
-      = 'select instrument'
+      = 'select instruments & expertise'
   .dialog-inner
     %strong
       .instructions
     %br{:clear => "all"}/
     .content-body 
       .content-body-scroller
-        %ul.instruments.three-column-list-container
+        .instrument-selector-container
+          =render "users/instrument_selector"
 
   .right.action-buttons
     %a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL
diff --git a/web/app/views/users/_instrument_selector.html.erb b/web/app/views/users/_instrument_selector.html.erb
index 0b8c1d180..3101f6473 100644
--- a/web/app/views/users/_instrument_selector.html.erb
+++ b/web/app/views/users/_instrument_selector.html.erb
@@ -2,7 +2,7 @@
 <% Instrument.standard_list.each do |instrument| %>
     <tr>
       <td><input name="<%= instrument.id %>" type="checkbox" /><%= instrument.description %></td>
-      <td align="right" width="50%"><select class='proficiency_selector'><option value="1">Beginner</option><option value="2">Intermediate</option><option value="3">Expert</option></select></td>
+      <td align="right" width="50%"><select class='proficiency_selector'<option value="1">Beginner</option><option value="2">Intermediate</option><option value="3">Expert</option></select></td>
     </tr>
 <% end %>
 </table>
\ No newline at end of file