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('
');
+ var checked = '';
+ if (instruments && $.inArray(val.id, instruments) > -1) {
+ checked = 'checked';
+ }
+
+ $instruments.append('' + val.description);
+ $instruments.append('');
+ });
+ }
+ }
+
+ 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