From 8ad9923f081a888f01661520fa5e0dfcf4433bd0 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Thu, 10 Mar 2016 15:24:53 +0000
Subject: [PATCH 01/11] Add first draft of the location wizard

---
 src/main/webapp/assets/css/base.css           |  31 ++
 src/main/webapp/assets/js/view/home.js        |  25 +-
 .../webapp/assets/js/view/location-wizard.js  | 497 ++++++++++++++++++
 .../webapp/assets/tpl/home/summaries.html     |   3 +-
 .../location-configuration.html               |  20 +
 .../location-provisioning.html                |  30 ++
 .../tpl/location-wizard/location-type.html    |  40 ++
 .../assets/tpl/location-wizard/modal.html     |  36 ++
 8 files changed, 679 insertions(+), 3 deletions(-)
 create mode 100644 src/main/webapp/assets/js/view/location-wizard.js
 create mode 100644 src/main/webapp/assets/tpl/location-wizard/location-configuration.html
 create mode 100644 src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
 create mode 100644 src/main/webapp/assets/tpl/location-wizard/location-type.html
 create mode 100644 src/main/webapp/assets/tpl/location-wizard/modal.html

diff --git a/src/main/webapp/assets/css/base.css b/src/main/webapp/assets/css/base.css
index a80f35b47..be100e2c8 100644
--- a/src/main/webapp/assets/css/base.css
+++ b/src/main/webapp/assets/css/base.css
@@ -1486,3 +1486,34 @@ textarea.param-value {
     color: transparent;
     text-shadow: 0 0 5px rgba(0,0,0,0.5);
 }
+
+/* Location wizard */
+.location-type {
+    width: 160px;
+    height: 200px;
+    float: left;
+    text-align: center;
+    border: 3px solid #EEE;
+    position: relative;
+    margin: 4px;
+}
+.location-type:hover {
+    border-color: #CCC;
+}
+.location-type.selected {
+    border-color: #793;
+}
+.location-type div {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 150px;
+    padding: 5px;
+}
+.location-type .fa {
+    font-size: 60px;
+    margin-bottom: 20px;
+}
+.location-type .location-type-title {
+    font-size: 30px;
+}
diff --git a/src/main/webapp/assets/js/view/home.js b/src/main/webapp/assets/js/view/home.js
index ae2ba3a99..375e670c5 100644
--- a/src/main/webapp/assets/js/view/home.js
+++ b/src/main/webapp/assets/js/view/home.js
@@ -24,6 +24,7 @@ define([
     "jquery", "underscore", "backbone",
     "view/viewutils", 
     "view/application-add-wizard",
+    "view/location-wizard",
     "view/ha-summary",
     "model/location",
     "text!tpl/home/applications.html",
@@ -31,7 +32,7 @@ define([
     "text!tpl/home/app-entry.html",
     "bootstrap", "brooklyn-utils"
 ], function ($, _, Backbone, ViewUtils,
-        AppAddWizard, HASummary, Location,
+        AppAddWizard, LocationWizard , HASummary, Location,
         ApplicationsHtml, HomeSummariesHtml, AppEntryHtml) {
 
     var HomeView = Backbone.View.extend({
@@ -40,7 +41,8 @@ define([
             'click #add-new-application':'createApplication',
             'click #reload-brooklyn-properties': 'reloadBrooklynProperties',
             'click #clear-ha-node-records': 'clearHaNodeRecords',
-            'click .addApplication':'createApplication'
+            'click .addApplication':'createApplication',
+            'click .addLocation': 'createLocation'
         },
         
         initialize:function () {
@@ -153,6 +155,25 @@ define([
             }
         },
 
+        createLocation:function () {
+            if (this._modal) {
+                this._modal.close()
+            }
+            var that = this;
+            if (this.options.offline || (this.options.cautionOverlay && this.options.cautionOverlay.warningActive)) {
+                // don't show wizard
+            } else {
+                var wizard = new LocationWizard();
+                this._modal = wizard;
+                this.$(".add-app #modal-container").html(wizard.render().el);
+                this.$(".add-app #modal-container .modal")
+                    .on("hidden",function () {
+                        wizard.close();
+                        that.options.locations.fetch({reset:true});
+                    }).modal('show');
+            }
+        },
+
         reloadBrooklynProperties: function() {
             var self = this;
             // indicate submitted
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
new file mode 100644
index 000000000..0e9cacb57
--- /dev/null
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -0,0 +1,497 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+define([
+    'underscore', 'backbone', 'jquery', 'brooklyn-utils', 'model/location',
+    'text!tpl/location-wizard/modal.html',
+    'text!tpl/location-wizard/location-type.html',
+    'text!tpl/location-wizard/location-configuration.html',
+    'text!tpl/location-wizard/location-provisioning.html',
+    'text!tpl/app-add-wizard/edit-config-entry.html',
+], function(_, Backbone, $, Util, Location, ModalHtml, LocationTypeHtml, LocationConfigurationHtml, LocationProvisioningHtml, EditConfigEntryHtml) {
+    var Wizard = Backbone.View.extend({
+        className:'modal hide fade',
+        template: _.template(ModalHtml),
+        events: {
+            'click .location-wizard-previous': 'previousStep',
+            'click .location-wizard-next': 'nextStep',
+            'click .location-wizard-inject': 'inject',
+            'click .location-wizard-save': 'save',
+            'click .location-wizard-save-and-reset': 'saveAndReset'
+        },
+
+        initialize: function () {
+            this.type = '';
+            this.step = 0;
+            this.location = new Location.Model;
+
+            this.steps = [
+                {
+                    title: 'No locations defined',
+                    subtitle: 'You currently have no location to deploy applications to'
+                },
+                {
+                    title: 'Location type',
+                    subtitle: 'Select the location type you want to add',
+                    view: new LocationType({wizard: this})
+                },
+                {
+                    title: '<%= type %> Location - Configuration',
+                    subtitle: 'Required information about your location',
+                    view: new LocationConfiguration({wizard: this})
+                },
+                {
+                    title: '<%= type %> Location - Provisioning',
+                    subtitle: 'Provisioning information about your location',
+                    view: new LocationProvisioning({wizard: this}),
+                    actions: [
+                        {
+                            label: 'Inject in YAML',
+                            class: 'location-wizard-inject'
+                        },
+                        {
+                            label: 'Save and add another',
+                            class: 'location-wizard-save-and-reset'
+                        },
+                        {
+                            label: 'Save',
+                            class: 'location-wizard-save'
+                        }
+                    ]
+                }
+            ];
+        },
+
+        render: function() {
+            this.$el.html(this.template({}));
+
+            this.renderStep();
+
+            return this;
+        },
+
+        renderStep: function() {
+            var step = this.steps[this.step];
+
+            this.$('.location-wizard-title').html(_.template(step.title)({type: this.capitalize(this.type)}));
+            this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type}));
+
+            if (_.isObject(step.view)) {
+                this.$('.modal-body').html(step.view.render().el);
+            }
+
+            // Render prev / next buttons
+            var prev =  this.$('.location-wizard-previous');
+            var next =  this.$('.location-wizard-next');
+            if (this.step == 0) {
+                prev.hide();
+            } else {
+                prev.show();
+            }
+            if (this.step == this.steps.length - 1) {
+                next.hide();
+            } else {
+                next.show();
+            }
+            this.$('.trail').html('Step ' + (this.step + 1) + ' of ' + this.steps.length);
+
+            // Render actions buttons
+            var actionContainer = this.$('.location-wizard-actions').empty();
+            if (_.isArray(step.actions)) {
+                _.each(step.actions, function(element, index, list) {
+                    actionContainer.append($('<button>').addClass(element.class).html(element.label));
+                });
+            }
+        },
+
+        previousStep: function() {
+            if (this.step > 0) {
+                this.step--;
+                this.renderStep();
+            }
+        },
+
+        nextStep: function() {
+            if (this.step < this.steps.length - 1) {
+                this.step++;
+                this.renderStep();
+                this.enableNextStep(false);
+            }
+        },
+
+        enableNextStep: function(enabled) {
+            if (enabled) {
+                this.$('.location-wizard-next').removeAttr('disabled');
+            } else {
+                this.$('.location-wizard-next').attr('disabled', 'disabled');
+            }
+        },
+
+        capitalize: function(text) {
+            return text && text.charAt(0).toUpperCase() + text.slice(1);
+        },
+
+        inject: function() {
+            // TODO: Inject YAML location into the composer
+        },
+
+        save: function(callback) {
+            var that = this;
+
+            var view = this.steps[this.step].view;
+            if (view instanceof LocationProvisioning) {
+                view.setProvisioningProperties();
+            }
+
+            this.location.save()
+                .done(function (data) {
+                    if (_.isFunction(callback)) {
+                        callback();
+                    } else {
+                        that.$('.close').click();
+                    }
+                })
+                .fail(function (response) {
+                    that.showFailure(Util.extractError(response));
+                });
+        },
+
+        saveAndReset: function() {
+            var that = this;
+            this.save(function() {
+                that.step = 1;
+                that.renderStep();
+            });
+        },
+
+        showFailure: function(text) {
+            if (!text) text = "Failure performing the specified action";
+            this.$('div.error-message .error-message-text').html(_.escape(text));
+            this.$('div.error-message').slideDown(250).delay(10000).slideUp(500);
+        }
+
+    });
+
+    var LocationType = Backbone.View.extend({
+        className: 'location-wizard-body',
+        template: _.template(LocationTypeHtml),
+        wizard: null,
+
+        render: function() {
+            this.$el.html(this.template({}));
+
+            if (this.options.wizard.type != null) {
+                var that = this;
+                this.$('.location-type').each(function() {
+                    if ($(this).data('type') === that.options.wizard.type) {
+                        $(this).addClass('selected');
+                        that.options.wizard.enableNextStep(true);
+                    }
+                });
+            }
+
+            var that = this;
+            this.$('.location-type').click(function() {
+                var type = $(this).data('type');
+                $(this).toggleClass('selected');
+                that.options.wizard.type = $(this).hasClass('selected') ? type : '';
+                that.options.wizard.enableNextStep(that.options.wizard.type !== '');
+
+                that.$('.location-type').each(function() {
+                    if ($(this).data('type') != type) {
+                        $(this).removeClass('selected');
+                    }
+                });
+            });
+
+            return this;
+        }
+    });
+
+    var LocationConfiguration = Backbone.View.extend({
+        className: 'location-wizard-body',
+        template: _.template(LocationConfigurationHtml),
+        fields: {
+            cloud: [
+                {
+                    id: 'name',
+                    label: 'location ID',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'displayName',
+                    label: 'location name',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'spec',
+                    label: 'Cloud type',
+                    type: 'select',
+                    values: {
+                        'jclouds:aws': 'Amazon',
+                        'jclouds:softlayer': 'Softlayer',
+                        'jclouds:openstack': 'Openstack',
+                        other: 'Other'
+                    }
+                },
+                {
+                    id: 'region',
+                    label: 'Cloud region',
+                    type: 'text',
+                    require: {
+                        spec: [
+                            'jclouds:aws', 'jclouds:softlayer'
+                        ]
+                    },
+                    disable: {
+                        spec: [
+                            'jclouds:openstack'
+                        ]
+                    }
+                },
+                {
+                    id: 'endpoint',
+                    label: 'Cloud endpoint',
+                    type: 'text',
+                    require: {
+                        spec: [
+                            'jclouds:openstack'
+                        ]
+                    },
+                    disable: {
+                        spec: [
+                            'jclouds:aws', 'jclouds:softlayer'
+                        ]
+                    }
+                },
+                {
+                    id: 'identity',
+                    label: 'Identity',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'credential',
+                    label: 'Credential',
+                    type: 'text',
+                    require: true
+                }
+            ],
+            localhost: [
+                {
+                    id: 'name',
+                    label: 'location ID',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'displayName',
+                    label: 'location name',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'user',
+                    label: 'User',
+                    type: 'text'
+                },
+                {
+                    id: 'password',
+                    label: 'Password',
+                    type: 'password'
+                },
+                {
+                    id: 'publicKeyFile',
+                    label: 'Private key',
+                    type: 'textarea'
+                },
+                {
+                    id: 'publicKeyPassphrase',
+                    label: 'Private key passphrase',
+                    type: 'test'
+                }
+            ],
+            byon: [
+                {
+                    id: 'name',
+                    label: 'location ID',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'displayName',
+                    label: 'location name',
+                    type: 'text',
+                    require: true
+                },
+                {
+                    id: 'user',
+                    label: 'User',
+                    type: 'text'
+                },
+                {
+                    id: 'password',
+                    label: 'Password',
+                    type: 'password'
+                },
+                {
+                    id: 'publicKeyFile',
+                    label: 'Private key',
+                    type: 'textarea'
+                },
+                {
+                    id: 'publicKeyPassphrase',
+                    label: 'Private key passphrase',
+                    type: 'test'
+                },
+                {
+                    id: 'hosts',
+                    label: 'Hosts',
+                    type: 'textarea',
+                    list: true,
+                    require: true
+                }
+            ]
+        },
+        wizard: null,
+        type: null,
+
+        render: function() {
+            this.$el.html(this.template());
+
+            var that = this;
+            var fields = this.fields[this.options.wizard.type];
+            _.each(fields, function(field, index) {
+                that.$('.tab-content').append(that.generateField(field));
+            });
+
+            if (_.contains(['localhost', 'byon'], this.options.wizard.type)) {
+                this.options.wizard.location.set('spec', this.options.wizard.type);
+            }
+
+            return this;
+        },
+
+        generateField: function(field) {
+            var that = this;
+            var location = this.options.wizard.location;
+
+            var input = $('<input>').attr('type', field.type);
+            if (field.type === 'textarea') {
+                input = $('<textarea>');
+            } else if (field.type === 'select') {
+                input = $('<select>');
+                _.each(field.values, function(value, key) {
+                    input.append($('<option>').attr('value', key).html(value));
+                });
+            }
+            input.data('list', _.isBoolean(field.list) ? field.list : false);
+            input.data('require', _.isBoolean(field.require) ? field.require : false);
+
+            // Handle dependencies between fields
+            if (_.isObject(field, 'require')) {
+                _.each(field.require, function (object, key) {
+                    that.$('#' + key).change(function () {
+                        that.$('#' + field.id).data('require', _.contains(object, $(this).val()));
+                    });
+                });
+            }
+
+            if (_.isObject(field, 'disable')) {
+                _.each(field.disable, function (object, key) {
+                    that.$('#' + key).change(function () {
+                        if (_.contains(object, $(this).val())) {
+                            that.$('#' + field.id).attr('disabled', 'disabled')
+                        } else {
+                            that.$('#' + field.id).removeAttr('disabled');
+                        }
+                    });
+                });
+            }
+
+            var html = $('<div>').addClass('control-group')
+                .append($('<label>').addClass('control-label deploy-label').attr('for', field.id).html(field.label))
+                .append(input.attr({
+                    id: field.id,
+                    name: field.id
+                }));
+
+            input.change(function() {
+                if (_.contains(['name', 'spec'], $(this).attr('name'))) {
+                    location.set($(this).attr('name'), $(this).val());
+                } else {
+                    var config = {};
+                    config[$(this).attr('name')] = $(this).data('list') ? $(this).val().split("\n") : $(this).val();
+                    location.set('config', _.extend(location.get('config'), config));
+                }
+                that.checkRequired();
+            }).trigger("change");
+
+
+            return html;
+        },
+
+        checkRequired: function() {
+            var valid = true;
+            this.$('input,textarea').each(function() {
+                if ($(this).data('require')) {
+                    valid = valid && $(this).val() !== '';
+                }
+            });
+
+            this.options.wizard.enableNextStep(valid);
+        }
+    });
+
+    var LocationProvisioning = Backbone.View.extend({
+        className: 'location-wizard-body',
+        template: _.template(LocationProvisioningHtml),
+        events: {
+            'click #remove-config': 'removeProvisioningProperty',
+            'click #add-config': 'addProvisioningProperty'
+        },
+        wizard: null,
+
+        render: function() {
+            this.$el.html(this.template({}));
+            return this;
+        },
+
+        setProvisioningProperties: function() {
+            var config = {};
+            $('.app-add-wizard-config-entry').each(function() {
+                config[$(this).find('input[name=key]').val()] = $(this).find('input[name=value]').val();
+            });
+            this.options.wizard.location.set('config', _.extend(this.options.wizard.location.get('config'), config));
+        },
+
+        addProvisioningProperty:function (event) {
+            var $row = _.template(EditConfigEntryHtml, {});
+            $(event.currentTarget).parent().prev().append($row);
+        },
+
+        removeProvisioningProperty:function (event) {
+            $(event.currentTarget).parent().parent().remove();
+        }
+    });
+
+    return Wizard;
+});
\ No newline at end of file
diff --git a/src/main/webapp/assets/tpl/home/summaries.html b/src/main/webapp/assets/tpl/home/summaries.html
index 856251354..3a8d201de 100644
--- a/src/main/webapp/assets/tpl/home/summaries.html
+++ b/src/main/webapp/assets/tpl/home/summaries.html
@@ -33,6 +33,7 @@
   <div class="roundedSummary"><div class="roundedSummaryText">
     <span class="big"><%- locations.size() %></span> location<%- locations.size()==1 ? "" : "s" %> configured<br/>
     <!-- with <span class="big">14</span> active machines  -->
+    <button class="addLocation" type="button">add location</button>
   </div></div>
 
-  <button class="roundedSummary addApplication" type="button">add application</button>
+  <button class="roundedSummary addApplication" type="button">add application</button>
\ No newline at end of file
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-configuration.html b/src/main/webapp/assets/tpl/location-wizard/location-configuration.html
new file mode 100644
index 000000000..28875b55b
--- /dev/null
+++ b/src/main/webapp/assets/tpl/location-wizard/location-configuration.html
@@ -0,0 +1,20 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="tab-content"></div>
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html b/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
new file mode 100644
index 000000000..c0d4834b4
--- /dev/null
+++ b/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
@@ -0,0 +1,30 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="tab-content">
+    <div class="control-group">
+        <div class="app-add-wizard-create-entity-label-newline deploy-label">Configuration</div>
+        <table class="config-table controls" cellspacing="5">
+        </table>
+        <div>
+            <button id="add-config" class="btn btn-mini btn-info">
+                Add Configuration</button>
+        </div>
+    </div>
+</div>
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-type.html b/src/main/webapp/assets/tpl/location-wizard/location-type.html
new file mode 100644
index 000000000..b4a607f27
--- /dev/null
+++ b/src/main/webapp/assets/tpl/location-wizard/location-type.html
@@ -0,0 +1,40 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="tab-content">
+    <div class="location-type" data-type="cloud">
+        <div>
+            <i class="fa fa-cloud"></i>
+            <p class="location-type-title">Cloud</p>
+
+        </div>
+    </div>
+    <div class="location-type" data-type="localhost">
+        <div>
+            <i class="fa fa-laptop"></i>
+            <p class="location-type-title">Localhost</p>
+        </div>
+    </div>
+    <div class="location-type" data-type="byon">
+        <div>
+            <i class="fa fa-file-o"></i>
+            <p class="location-type-title">BYON</p>
+        </div>
+    </div>
+</div>
diff --git a/src/main/webapp/assets/tpl/location-wizard/modal.html b/src/main/webapp/assets/tpl/location-wizard/modal.html
new file mode 100644
index 000000000..786eee1d4
--- /dev/null
+++ b/src/main/webapp/assets/tpl/location-wizard/modal.html
@@ -0,0 +1,36 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal">x</button>
+    <h3 class="location-wizard-title">Title placeholder</h3>
+    <p class="location-wizard-subtitle">Instructions placeholder</p>
+</div>
+
+<div class="error-message label-message hide">
+    <div class="label-important">ERROR</div>  <span class="error-message-text">Failure performing specified action</span>
+</div>
+
+<div class="modal-body"></div>
+
+<div class="modal-footer">
+    <button type="button button-previous" class="btn btn-mini btn-info location-wizard-previous">Back</button>
+    <button type="button button-next" class="btn btn-mini btn-info location-wizard-next">Next</button>
+    <div class="location-wizard-actions"></div>
+</div>

From 4d25d3b4150e32f018136dc806827f8f0e0027a1 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Fri, 11 Mar 2016 12:10:51 +0000
Subject: [PATCH 02/11] Add better form validation, code structure and style

---
 .../webapp/assets/js/view/location-wizard.js  | 252 +++++++++++-------
 .../assets/tpl/location-wizard/modal.html     |   2 +-
 2 files changed, 153 insertions(+), 101 deletions(-)

diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 0e9cacb57..2a43e94f5 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -49,31 +49,32 @@ define([
                 {
                     title: 'Location type',
                     subtitle: 'Select the location type you want to add',
-                    view: new LocationType({wizard: this})
+                    view: LocationType
                 },
                 {
                     title: '<%= type %> Location - Configuration',
                     subtitle: 'Required information about your location',
-                    view: new LocationConfiguration({wizard: this})
+                    view: LocationConfiguration
                 },
                 {
                     title: '<%= type %> Location - Provisioning',
                     subtitle: 'Provisioning information about your location',
-                    view: new LocationProvisioning({wizard: this}),
-                    actions: [
-                        {
-                            label: 'Inject in YAML',
-                            class: 'location-wizard-inject'
-                        },
-                        {
-                            label: 'Save and add another',
-                            class: 'location-wizard-save-and-reset'
-                        },
-                        {
-                            label: 'Save',
-                            class: 'location-wizard-save'
-                        }
-                    ]
+                    view: LocationProvisioning
+                }
+            ];
+
+            this.actions = [
+                {
+                    label: 'Inject in YAML',
+                    class: 'location-wizard-inject'
+                },
+                {
+                    label: 'Save and add another',
+                    class: 'location-wizard-save-and-reset'
+                },
+                {
+                    label: 'Save',
+                    class: 'location-wizard-save'
                 }
             ];
         },
@@ -93,7 +94,8 @@ define([
             this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type}));
 
             if (_.isObject(step.view)) {
-                this.$('.modal-body').html(step.view.render().el);
+                this.currentView = new step.view({wizard: this});
+                this.$('.modal-body').html(this.currentView.render().el);
             }
 
             // Render prev / next buttons
@@ -106,6 +108,8 @@ define([
             }
             if (this.step == this.steps.length - 1) {
                 next.hide();
+            } else if (this.step == this.steps.length - 2 && this.type !== 'cloud') {
+                next.hide();
             } else {
                 next.show();
             }
@@ -113,15 +117,20 @@ define([
 
             // Render actions buttons
             var actionContainer = this.$('.location-wizard-actions').empty();
-            if (_.isArray(step.actions)) {
-                _.each(step.actions, function(element, index, list) {
-                    actionContainer.append($('<button>').addClass(element.class).html(element.label));
+            if ((this.type === 'cloud' && this.step === 3) || (this.type !== 'cloud' && this.step === 2)) {
+                _.each(this.actions, function(element, index, list) {
+                    actionContainer.append($('<button>').addClass('btn btn-mini btn-info ' + element.class).html(element.label));
                 });
             }
+
+            this.$('input').first().focus();
         },
 
         previousStep: function() {
             if (this.step > 0) {
+                if (this.currentView) {
+                    this.currentView.close();
+                }
                 this.step--;
                 this.renderStep();
             }
@@ -129,6 +138,9 @@ define([
 
         nextStep: function() {
             if (this.step < this.steps.length - 1) {
+                if (this.currentView) {
+                    this.currentView.close();
+                }
                 this.step++;
                 this.renderStep();
                 this.enableNextStep(false);
@@ -191,33 +203,46 @@ define([
     var LocationType = Backbone.View.extend({
         className: 'location-wizard-body',
         template: _.template(LocationTypeHtml),
+        events: {
+            'click .location-type': 'onSelectType'
+        },
+
         wizard: null,
 
+        initialize: function() {
+            this.wizard = this.options.wizard;
+        },
+
         render: function() {
-            this.$el.html(this.template({}));
+            this.$el.html(this.template());
 
-            if (this.options.wizard.type != null) {
-                var that = this;
-                this.$('.location-type').each(function() {
-                    if ($(this).data('type') === that.options.wizard.type) {
-                        $(this).addClass('selected');
-                        that.options.wizard.enableNextStep(true);
-                    }
-                });
+            var that = this;
+            this.$('.location-type').each(function () {
+                if ($(this).data('type') === that.wizard.type) {
+                    $(this).addClass('selected');
+                    that.wizard.enableNextStep(true);
+                }
+            });
+
+            return this;
+        },
+
+        onSelectType: function(event) {
+            var $elm = this.$(event.currentTarget);
+            var type = $elm.data('type');
+
+            $elm.toggleClass('selected');
+            this.wizard.type = $elm.hasClass('selected') ? type : '';
+            this.wizard.enableNextStep(this.wizard.type !== '');
+
+            if (this.wizard.location.get('spec') !== this.wizard.type) {
+                this.wizard.location = new Location.Model;
             }
 
-            var that = this;
-            this.$('.location-type').click(function() {
-                var type = $(this).data('type');
-                $(this).toggleClass('selected');
-                that.options.wizard.type = $(this).hasClass('selected') ? type : '';
-                that.options.wizard.enableNextStep(that.options.wizard.type !== '');
-
-                that.$('.location-type').each(function() {
-                    if ($(this).data('type') != type) {
-                        $(this).removeClass('selected');
-                    }
-                });
+            this.$('.location-type').each(function() {
+                if ($(this).data('type') != type) {
+                    $(this).removeClass('selected');
+                }
             });
 
             return this;
@@ -227,6 +252,11 @@ define([
     var LocationConfiguration = Backbone.View.extend({
         className: 'location-wizard-body',
         template: _.template(LocationConfigurationHtml),
+        events: {
+            'blur input, textarea': 'onChange',
+            'change select': 'onChange'
+        },
+
         fields: {
             cloud: [
                 {
@@ -246,7 +276,7 @@ define([
                     label: 'Cloud type',
                     type: 'select',
                     values: {
-                        'jclouds:aws': 'Amazon',
+                        'jclouds:aws-ec2': 'Amazon',
                         'jclouds:softlayer': 'Softlayer',
                         'jclouds:openstack': 'Openstack',
                         other: 'Other'
@@ -258,7 +288,7 @@ define([
                     type: 'text',
                     require: {
                         spec: [
-                            'jclouds:aws', 'jclouds:softlayer'
+                            'jclouds:aws-ec2', 'jclouds:softlayer'
                         ]
                     },
                     disable: {
@@ -278,7 +308,7 @@ define([
                     },
                     disable: {
                         spec: [
-                            'jclouds:aws', 'jclouds:softlayer'
+                            'jclouds:aws-ec2', 'jclouds:softlayer'
                         ]
                     }
                 },
@@ -372,28 +402,32 @@ define([
             ]
         },
         wizard: null,
-        type: null,
+
+        initialize: function() {
+            this.wizard = this.options.wizard;
+
+            if (_.contains(['localhost', 'byon'], this.wizard.type)) {
+                this.wizard.location.set('spec', this.wizard.type);
+            }
+        },
 
         render: function() {
             this.$el.html(this.template());
 
             var that = this;
-            var fields = this.fields[this.options.wizard.type];
+            var fields = this.fields[this.wizard.type];
             _.each(fields, function(field, index) {
                 that.$('.tab-content').append(that.generateField(field));
             });
 
-            if (_.contains(['localhost', 'byon'], this.options.wizard.type)) {
-                this.options.wizard.location.set('spec', this.options.wizard.type);
-            }
+            // Force the onChange event to run
+            this.$('input,textarea').blur();
+            this.$('select').change();
 
             return this;
         },
 
         generateField: function(field) {
-            var that = this;
-            var location = this.options.wizard.location;
-
             var input = $('<input>').attr('type', field.type);
             if (field.type === 'textarea') {
                 input = $('<textarea>');
@@ -403,61 +437,75 @@ define([
                     input.append($('<option>').attr('value', key).html(value));
                 });
             }
-            input.data('list', _.isBoolean(field.list) ? field.list : false);
-            input.data('require', _.isBoolean(field.require) ? field.require : false);
-
-            // Handle dependencies between fields
-            if (_.isObject(field, 'require')) {
-                _.each(field.require, function (object, key) {
-                    that.$('#' + key).change(function () {
-                        that.$('#' + field.id).data('require', _.contains(object, $(this).val()));
-                    });
-                });
+
+            var value = '';
+            if (_.contains(['name', 'spec'], field.id)) {
+                value = this.wizard.location.get(field.id);
+            } else {
+                value = this.wizard.location.get('config')[field.id];
             }
 
-            if (_.isObject(field, 'disable')) {
-                _.each(field.disable, function (object, key) {
-                    that.$('#' + key).change(function () {
-                        if (_.contains(object, $(this).val())) {
-                            that.$('#' + field.id).attr('disabled', 'disabled')
-                        } else {
-                            that.$('#' + field.id).removeAttr('disabled');
-                        }
-                    });
-                });
+            return $('<div>').addClass('control-group')
+                .append($('<label>')
+                    .addClass('control-label deploy-label')
+                    .attr('for', field.id)
+                    .html(field.label))
+                .append(input
+                    .val(value)
+                    .data('list', _.isBoolean(field.list) ? field.list : false)
+                    .data('require', _.isBoolean(field.require) ? field.require : false)
+                    .data('require-deps', _.isObject(field.require) ? field.require : undefined)
+                    .data('disable-deps', _.isObject(field.disable) ? field.disable : undefined)
+                    .attr({
+                        id: field.id,
+                        name: field.id
+                    }));
+        },
+
+        onChange: function(event) {
+            var that = this;
+            var enable = true;
+            var $elm = this.$(event.currentTarget);
+
+            // Update the location object based on the field values
+            if (_.contains(['name', 'spec'], $elm.attr('name'))) {
+                this.wizard.location.set($elm.attr('name'), $elm.val());
+            } else {
+                var config = {};
+                config[$elm.attr('name')] = $elm.data('list') ? $elm.val().split("\n") : $elm.val();
+                this.wizard.location.set('config', _.extend(this.wizard.location.get('config'), config));
             }
 
-            var html = $('<div>').addClass('control-group')
-                .append($('<label>').addClass('control-label deploy-label').attr('for', field.id).html(field.label))
-                .append(input.attr({
-                    id: field.id,
-                    name: field.id
-                }));
-
-            input.change(function() {
-                if (_.contains(['name', 'spec'], $(this).attr('name'))) {
-                    location.set($(this).attr('name'), $(this).val());
-                } else {
-                    var config = {};
-                    config[$(this).attr('name')] = $(this).data('list') ? $(this).val().split("\n") : $(this).val();
-                    location.set('config', _.extend(location.get('config'), config));
+            this.$('input, select, textarea').each(function() {
+                // Update the data-require attribute
+                if (_.isObject($(this).data('require-deps'))) {
+                    var require = true;
+                    _.each($(this).data('require-deps'), function(values, key) {
+                        require = require && _.contains(values, that.$('[name=' + key + ']').val());
+                    });
+                    $(this).data('require', require);
                 }
-                that.checkRequired();
-            }).trigger("change");
 
+                // Enable / disable field
+                if (_.isObject($(this).data('disable-deps'))) {
+                    var disable = true;
+                    _.each($(this).data('disable-deps'), function(values, key) {
+                        disable = disable && _.contains(values, that.$('[name=' + key + ']').val());
+                    });
+                    if (disable) {
+                        $(this).attr('disabled', 'disabled');
+                    } else {
+                        $(this).removeAttr('disabled');
+                    }
+                }
 
-            return html;
-        },
 
-        checkRequired: function() {
-            var valid = true;
-            this.$('input,textarea').each(function() {
+                // Enable / disable next button based on the require attribute
                 if ($(this).data('require')) {
-                    valid = valid && $(this).val() !== '';
+                    enable = enable && $(this).val() !== '';
                 }
+                that.wizard.enableNextStep(enable);
             });
-
-            this.options.wizard.enableNextStep(valid);
         }
     });
 
@@ -470,17 +518,21 @@ define([
         },
         wizard: null,
 
+        initialize: function() {
+            this.wizard = this.options.wizard;
+        },
+
         render: function() {
-            this.$el.html(this.template({}));
+            this.$el.html(this.template());
             return this;
         },
 
         setProvisioningProperties: function() {
             var config = {};
-            $('.app-add-wizard-config-entry').each(function() {
+            this.$('.app-add-wizard-config-entry').each(function() {
                 config[$(this).find('input[name=key]').val()] = $(this).find('input[name=value]').val();
             });
-            this.options.wizard.location.set('config', _.extend(this.options.wizard.location.get('config'), config));
+            this.wizard.location.set('config', _.extend(this.wizard.location.get('config'), config));
         },
 
         addProvisioningProperty:function (event) {
diff --git a/src/main/webapp/assets/tpl/location-wizard/modal.html b/src/main/webapp/assets/tpl/location-wizard/modal.html
index 786eee1d4..9a05ce4c6 100644
--- a/src/main/webapp/assets/tpl/location-wizard/modal.html
+++ b/src/main/webapp/assets/tpl/location-wizard/modal.html
@@ -32,5 +32,5 @@ <h3 class="location-wizard-title">Title placeholder</h3>
 <div class="modal-footer">
     <button type="button button-previous" class="btn btn-mini btn-info location-wizard-previous">Back</button>
     <button type="button button-next" class="btn btn-mini btn-info location-wizard-next">Next</button>
-    <div class="location-wizard-actions"></div>
+    <span class="location-wizard-actions"></span>
 </div>

From 90cfc6e58ebdb7ee58055a017d304dafe37c1c02 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Fri, 11 Mar 2016 16:09:18 +0000
Subject: [PATCH 03/11] Add location wizard within the catalog

---
 src/main/webapp/assets/css/base.css           | 24 ++++++++
 src/main/webapp/assets/js/view/catalog.js     | 52 +++---------------
 src/main/webapp/assets/js/view/home.js        | 12 +++-
 .../webapp/assets/js/view/location-wizard.js  | 55 ++++++++++---------
 .../webapp/assets/tpl/home/summaries.html     |  2 +-
 .../assets/tpl/location-wizard/modal.html     |  2 +-
 6 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/src/main/webapp/assets/css/base.css b/src/main/webapp/assets/css/base.css
index be100e2c8..c6b17bba4 100644
--- a/src/main/webapp/assets/css/base.css
+++ b/src/main/webapp/assets/css/base.css
@@ -1517,3 +1517,27 @@ textarea.param-value {
 .location-type .location-type-title {
     font-size: 30px;
 }
+#catalog-add-form .modal-header .close {
+    display: none;
+}
+#catalog-add-form .modal-body {
+    max-height: none;
+}
+#catalog-add-form .modal-body .tab-content {
+    min-height: 0;
+    background-color: transparent !important;
+    padding: 0;
+}
+#catalog-add-form .location-type {
+    border-color: #ddd;
+}
+
+#catalog-add-form .location-type:hover {
+    border-color: #CCC;
+}
+#catalog-add-form .location-type.selected {
+    border-color: #793;
+}
+#catalog-add-form .modal-footer {
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/view/catalog.js b/src/main/webapp/assets/js/view/catalog.js
index 5c3e2ce12..e10914b71 100644
--- a/src/main/webapp/assets/js/view/catalog.js
+++ b/src/main/webapp/assets/js/view/catalog.js
@@ -18,6 +18,7 @@
 */
 define([
     "underscore", "jquery", "backbone", "brooklyn",
+    "view/location-wizard",
     "model/location", "model/entity",
     "text!tpl/catalog/page.html",
     "text!tpl/catalog/details-entity.html",
@@ -30,6 +31,7 @@ define([
 
     "bootstrap", "jquery-form"
 ], function(_, $, Backbone, Brooklyn,
+        LocationWizard,
         Location, Entity,
         CatalogPageHtml, DetailsEntityHtml, DetailsGenericHtml, LocationDetailsHtml,
         AddCatalogEntryHtml, AddYamlHtml, AddLocationHtml, EntryHtml) {
@@ -184,51 +186,15 @@ define([
 
     // Could adapt to edit existing locations too.
     function newLocationForm(addView, addViewParent) {
-        // Renders with config key list
-        var body = new (Backbone.View.extend({
-            beforeClose: function() {
-                if (this.configKeyList) {
-                    this.configKeyList.close();
-                }
+        return new LocationWizard({
+            onLocationCreated: function(wizard, data) {
+                addViewParent.loadAccordionItem("locations", data.id);
             },
-            render: function() {
-                this.configKeyList = new Brooklyn.view.ConfigKeyInputPairList().render();
-                var template = _.template(AddLocationHtml);
-                this.$el.html(template);
-                this.$("#new-location-config").html(this.configKeyList.$el);
+            onFinish: function(wizard, data) {
+                addView.clearWithHtml( "Added: "+data.id+". Loading..." );
             },
-            showError: function (message) {
-                self.$(".catalog-save-error")
-                    .removeClass("hide")
-                    .find(".catalog-error-message")
-                    .html(message);
-            }
-        }));
-        var form = new Brooklyn.view.Form({
-            body: body,
-            model: Location.Model,
-            onSubmit: function (location) {
-                var configKeys = body.configKeyList.getConfigKeys();
-                if (!configKeys.displayName) {
-                    configKeys.displayName = location.get("name");
-                }
-                var submitButton = this.$(".catalog-submit-button");
-                // "loading" is an indicator to Bootstrap, not a string to display
-                submitButton.button("loading");
-                location.set("config", configKeys);
-                location.save()
-                    .done(function (data) {
-                        addView.clearWithHtml( "Added: "+data.id+". Loading..." ); 
-                        addViewParent.loadAccordionItem("locations", data.id);
-                    })
-                    .fail(function (response) {
-                        submitButton.button("reset");
-                        body.showError(Brooklyn.util.extractError(response));
-                    });
-            }
-        });
-
-        return form;
+            step: 1
+        }).render();
     }
 
     var Catalog = Backbone.Collection.extend({
diff --git a/src/main/webapp/assets/js/view/home.js b/src/main/webapp/assets/js/view/home.js
index 375e670c5..5c9db1dc1 100644
--- a/src/main/webapp/assets/js/view/home.js
+++ b/src/main/webapp/assets/js/view/home.js
@@ -41,7 +41,7 @@ define([
             'click #add-new-application':'createApplication',
             'click #reload-brooklyn-properties': 'reloadBrooklynProperties',
             'click #clear-ha-node-records': 'clearHaNodeRecords',
-            'click .addApplication':'createApplication',
+            'click .addApplication': 'createApplication',
             'click .addLocation': 'createLocation'
         },
         
@@ -163,7 +163,15 @@ define([
             if (this.options.offline || (this.options.cautionOverlay && this.options.cautionOverlay.warningActive)) {
                 // don't show wizard
             } else {
-                var wizard = new LocationWizard();
+                var wizard = new LocationWizard({
+                    onLocationCreated: function(wizard, data) {
+                        that.options.locations.fetch({reset:true});
+                    },
+                    onFinish: function(wizard) {
+                        that._modal.close();
+                    },
+                    isModal: true
+                });
                 this._modal = wizard;
                 this.$(".add-app #modal-container").html(wizard.render().el);
                 this.$(".add-app #modal-container .modal")
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 2a43e94f5..8fac452fa 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -26,7 +26,6 @@ define([
     'text!tpl/app-add-wizard/edit-config-entry.html',
 ], function(_, Backbone, $, Util, Location, ModalHtml, LocationTypeHtml, LocationConfigurationHtml, LocationProvisioningHtml, EditConfigEntryHtml) {
     var Wizard = Backbone.View.extend({
-        className:'modal hide fade',
         template: _.template(ModalHtml),
         events: {
             'click .location-wizard-previous': 'previousStep',
@@ -40,12 +39,11 @@ define([
             this.type = '';
             this.step = 0;
             this.location = new Location.Model;
+            this.onLocationCreated = _.isFunction(this.options.onLocationCreated) ? this.options.onLocationCreated : undefined;
+            this.onFinish = _.isFunction(this.options.onFinish) ? this.options.onFinish : undefined;
+            this.className = _.isBoolean(this.options.isModal) && this.options.isModal ? 'modal hide fade' : '';
 
             this.steps = [
-                {
-                    title: 'No locations defined',
-                    subtitle: 'You currently have no location to deploy applications to'
-                },
                 {
                     title: 'Location type',
                     subtitle: 'Select the location type you want to add',
@@ -80,7 +78,7 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template({}));
+            this.$el.addClass(this.className).html(this.template({}));
 
             this.renderStep();
 
@@ -93,6 +91,14 @@ define([
             this.$('.location-wizard-title').html(_.template(step.title)({type: this.capitalize(this.type)}));
             this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type}));
 
+            // Render actions buttons
+            var actionContainer = this.$('.location-wizard-actions').empty();
+            if ((this.type === 'cloud' && this.step === 2) || (this.type !== 'cloud' && this.step === 1)) {
+                _.each(this.actions, function(element, index, list) {
+                    actionContainer.append($('<button>').addClass('btn btn-mini btn-info location-wizard-action ' + element.class).html(element.label));
+                });
+            }
+
             if (_.isObject(step.view)) {
                 this.currentView = new step.view({wizard: this});
                 this.$('.modal-body').html(this.currentView.render().el);
@@ -113,15 +119,6 @@ define([
             } else {
                 next.show();
             }
-            this.$('.trail').html('Step ' + (this.step + 1) + ' of ' + this.steps.length);
-
-            // Render actions buttons
-            var actionContainer = this.$('.location-wizard-actions').empty();
-            if ((this.type === 'cloud' && this.step === 3) || (this.type !== 'cloud' && this.step === 2)) {
-                _.each(this.actions, function(element, index, list) {
-                    actionContainer.append($('<button>').addClass('btn btn-mini btn-info ' + element.class).html(element.label));
-                });
-            }
 
             this.$('input').first().focus();
         },
@@ -143,15 +140,14 @@ define([
                 }
                 this.step++;
                 this.renderStep();
-                this.enableNextStep(false);
             }
         },
 
-        enableNextStep: function(enabled) {
+        enableNextAction: function(enabled) {
             if (enabled) {
-                this.$('.location-wizard-next').removeAttr('disabled');
+                this.$('.location-wizard-action').removeAttr('disabled');
             } else {
-                this.$('.location-wizard-next').attr('disabled', 'disabled');
+                this.$('.location-wizard-action').attr('disabled', 'disabled');
             }
         },
 
@@ -173,10 +169,14 @@ define([
 
             this.location.save()
                 .done(function (data) {
+                    if (_.isFunction(that.onLocationCreated)) {
+                        that.onLocationCreated(that, data);
+                    }
+
                     if (_.isFunction(callback)) {
                         callback();
-                    } else {
-                        that.$('.close').click();
+                    } else if (_.isFunction(that.onFinish)) {
+                        that.onFinish(that, data);
                     }
                 })
                 .fail(function (response) {
@@ -187,7 +187,7 @@ define([
         saveAndReset: function() {
             var that = this;
             this.save(function() {
-                that.step = 1;
+                that.step = 0;
                 that.renderStep();
             });
         },
@@ -216,11 +216,13 @@ define([
         render: function() {
             this.$el.html(this.template());
 
+            this.wizard.enableNextAction(false);
+
             var that = this;
             this.$('.location-type').each(function () {
                 if ($(this).data('type') === that.wizard.type) {
                     $(this).addClass('selected');
-                    that.wizard.enableNextStep(true);
+                    that.wizard.enableNextAction(true);
                 }
             });
 
@@ -233,7 +235,7 @@ define([
 
             $elm.toggleClass('selected');
             this.wizard.type = $elm.hasClass('selected') ? type : '';
-            this.wizard.enableNextStep(this.wizard.type !== '');
+            this.wizard.enableNextAction(this.wizard.type !== '');
 
             if (this.wizard.location.get('spec') !== this.wizard.type) {
                 this.wizard.location = new Location.Model;
@@ -414,6 +416,8 @@ define([
         render: function() {
             this.$el.html(this.template());
 
+            this.wizard.enableNextAction(false);
+
             var that = this;
             var fields = this.fields[this.wizard.type];
             _.each(fields, function(field, index) {
@@ -504,7 +508,7 @@ define([
                 if ($(this).data('require')) {
                     enable = enable && $(this).val() !== '';
                 }
-                that.wizard.enableNextStep(enable);
+                that.wizard.enableNextAction(enable);
             });
         }
     });
@@ -524,6 +528,7 @@ define([
 
         render: function() {
             this.$el.html(this.template());
+            this.wizard.enableNextAction(true);
             return this;
         },
 
diff --git a/src/main/webapp/assets/tpl/home/summaries.html b/src/main/webapp/assets/tpl/home/summaries.html
index 3a8d201de..6b0237714 100644
--- a/src/main/webapp/assets/tpl/home/summaries.html
+++ b/src/main/webapp/assets/tpl/home/summaries.html
@@ -36,4 +36,4 @@
     <button class="addLocation" type="button">add location</button>
   </div></div>
 
-  <button class="roundedSummary addApplication" type="button">add application</button>
\ No newline at end of file
+  <button class="roundedSummary addApplication addApplication" type="button">add application</button>
\ No newline at end of file
diff --git a/src/main/webapp/assets/tpl/location-wizard/modal.html b/src/main/webapp/assets/tpl/location-wizard/modal.html
index 9a05ce4c6..cce87be82 100644
--- a/src/main/webapp/assets/tpl/location-wizard/modal.html
+++ b/src/main/webapp/assets/tpl/location-wizard/modal.html
@@ -31,6 +31,6 @@ <h3 class="location-wizard-title">Title placeholder</h3>
 
 <div class="modal-footer">
     <button type="button button-previous" class="btn btn-mini btn-info location-wizard-previous">Back</button>
-    <button type="button button-next" class="btn btn-mini btn-info location-wizard-next">Next</button>
+    <button type="button button-next" class="btn btn-mini btn-info location-wizard-next location-wizard-action">Next</button>
     <span class="location-wizard-actions"></span>
 </div>

From e011fe149764c723746ccfc00291cc75bbce44e5 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Tue, 15 Mar 2016 16:05:15 +0000
Subject: [PATCH 04/11] Add auto-complete for provisioning properties

---
 src/main/webapp/assets/css/base.css           |   27 +-
 .../webapp/assets/css/easy-autocomplete.css   |  320 ++++
 src/main/webapp/assets/css/styles.css         |    1 +
 src/main/webapp/assets/js/config.js           |    2 +
 .../js/libs/jquery.easy-autocomplete.js       | 1578 +++++++++++++++++
 src/main/webapp/assets/js/view/catalog.js     |   11 +-
 src/main/webapp/assets/js/view/home.js        |    9 +-
 .../webapp/assets/js/view/location-wizard.js  |  158 +-
 .../webapp/assets/tpl/home/summaries.html     |    7 +-
 .../location-provisioning-entry.html          |    7 +
 .../location-provisioning.html                |   11 +-
 .../tpl/location-wizard/location-type.html    |   30 +-
 12 files changed, 2085 insertions(+), 76 deletions(-)
 create mode 100755 src/main/webapp/assets/css/easy-autocomplete.css
 create mode 100755 src/main/webapp/assets/js/libs/jquery.easy-autocomplete.js
 create mode 100644 src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html

diff --git a/src/main/webapp/assets/css/base.css b/src/main/webapp/assets/css/base.css
index c6b17bba4..6ccd08b67 100644
--- a/src/main/webapp/assets/css/base.css
+++ b/src/main/webapp/assets/css/base.css
@@ -361,17 +361,16 @@ input[type="color"]:focus,.uneditable-input:focus {
     vertical-align: middle;
 }
 
-.addApplication {
+.addSummary {
     border: 1px solid #a1cb8c !important;
     color: #505050 !important;
     background: url(../images/addApplication-plus.png) no-repeat !important;
     padding: 10px 0px 0px 74px !important;
     width: 298px !important;
     height: 201px !important;
-    margin-right: 0;
 }
 
-.addApplication:hover {
+.addSummary:hover {
     border: 1px solid #58a82e !important;
     color: #58a82e !important;
     background: url(../images/addApplication-plus-hover.png) no-repeat
@@ -1488,6 +1487,9 @@ textarea.param-value {
 }
 
 /* Location wizard */
+.location-type-container {
+    overflow: hidden;
+}
 .location-type {
     width: 160px;
     height: 200px;
@@ -1517,16 +1519,22 @@ textarea.param-value {
 .location-type .location-type-title {
     font-size: 30px;
 }
+input.location-other {
+    margin-top: -10px;
+    margin-left: 10px;
+}
 #catalog-add-form .modal-header .close {
     display: none;
 }
 #catalog-add-form .modal-body {
     max-height: none;
+    overflow: visible;
 }
 #catalog-add-form .modal-body .tab-content {
     min-height: 0;
     background-color: transparent !important;
     padding: 0;
+    overflow: visible;
 }
 #catalog-add-form .location-type {
     border-color: #ddd;
@@ -1540,4 +1548,17 @@ textarea.param-value {
 }
 #catalog-add-form .modal-footer {
     background-color: transparent;
+}
+.easy-autocomplete {
+    display: inline;
+}
+.easy-autocomplete-container ul {
+    margin: 0
+}
+.easy-autocomplete-container ul .eac-category {
+    color: #fff;
+    background-color: rgba(120, 180, 70, 0.8);
+}
+button.remove-entry {
+    margin-top: -10px;
 }
\ No newline at end of file
diff --git a/src/main/webapp/assets/css/easy-autocomplete.css b/src/main/webapp/assets/css/easy-autocomplete.css
new file mode 100755
index 000000000..60a734845
--- /dev/null
+++ b/src/main/webapp/assets/css/easy-autocomplete.css
@@ -0,0 +1,320 @@
+/*
+ * easy-autocomplete
+ * jQuery plugin for autocompletion
+ * 
+ * @author Łukasz Pawełczak (http://github.com/pawelczak)
+ * @version 1.3.3
+ * Copyright MIT License: https://github.com/pawelczak/easy-autocomplete/blob/master/LICENSE.txt
+ */
+
+.easy-autocomplete {
+  position: relative;
+}
+/*.easy-autocomplete input {*/
+  /*border-color: #ccc;*/
+  /*border-radius: 4px;*/
+  /*border-style: solid;*/
+  /*border-width: 1px;*/
+  /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;*/
+  /*color: #555;*/
+  /*float: none;*/
+  /*padding: 6px 12px;*/
+/*}*/
+.easy-autocomplete input:hover, .easy-autocomplete input:focus {
+  box-shadow: none;
+}
+.easy-autocomplete a {
+  display: block;
+}
+.easy-autocomplete.eac-blue-light input:hover, .easy-autocomplete.eac-blue-light input:focus {
+  border-color: #66afe9;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.easy-autocomplete.eac-blue-light ul {
+  border-color: #66afe9;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.easy-autocomplete.eac-blue-light ul li, .easy-autocomplete.eac-blue-light ul .eac-category {
+  border-color: #66afe9;
+}
+.easy-autocomplete.eac-blue-light ul li.selected, .easy-autocomplete.eac-blue-light ul .eac-category.selected {
+  background-color: #ecf5fc;
+}
+.easy-autocomplete.eac-green-light input:hover, .easy-autocomplete.eac-green-light input:focus {
+  border-color: #41DB00;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
+}
+.easy-autocomplete.eac-green-light ul {
+  border-color: #41DB00;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
+}
+.easy-autocomplete.eac-green-light ul li, .easy-autocomplete.eac-green-light ul .eac-category {
+  border-color: #41DB00;
+}
+.easy-autocomplete.eac-green-light ul li.selected, .easy-autocomplete.eac-green-light ul .eac-category.selected {
+  background-color: #9eff75;
+}
+.easy-autocomplete.eac-red-light input:hover, .easy-autocomplete.eac-red-light input:focus {
+  border-color: #ff5b5b;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
+}
+.easy-autocomplete.eac-red-light ul {
+  border-color: #ff5b5b;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
+}
+.easy-autocomplete.eac-red-light ul li, .easy-autocomplete.eac-red-light ul .eac-category {
+  border-color: #ff5b5b;
+}
+.easy-autocomplete.eac-red-light ul li.selected, .easy-autocomplete.eac-red-light ul .eac-category.selected {
+  background-color: #ff8e8e;
+}
+.easy-autocomplete.eac-yellow-light input:hover, .easy-autocomplete.eac-yellow-light input:focus {
+  border-color: #ffdb00;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
+}
+.easy-autocomplete.eac-yellow-light ul {
+  border-color: #ffdb00;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
+}
+.easy-autocomplete.eac-yellow-light ul li, .easy-autocomplete.eac-yellow-light ul .eac-category {
+  border-color: #ffdb00;
+}
+.easy-autocomplete.eac-yellow-light ul li.selected, .easy-autocomplete.eac-yellow-light ul .eac-category.selected {
+  background-color: #ffe233;
+}
+.easy-autocomplete.eac-dark-light input:hover, .easy-autocomplete.eac-dark-light input:focus {
+  border-color: #333;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
+}
+.easy-autocomplete.eac-dark-light ul {
+  border-color: #333;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
+}
+.easy-autocomplete.eac-dark-light ul li, .easy-autocomplete.eac-dark-light ul .eac-category {
+  border-color: #333;
+}
+.easy-autocomplete.eac-dark-light ul li.selected, .easy-autocomplete.eac-dark-light ul .eac-category.selected {
+  background-color: #4d4d4d;
+  color: #fff;
+}
+.easy-autocomplete.eac-dark {
+  color: #fff;
+}
+.easy-autocomplete.eac-dark input {
+  background-color: #404040;
+  border-radius: 4px;
+  box-shadow: 0;
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-dark input:hover, .easy-autocomplete.eac-dark input:focus {
+  border-color: #333;
+  box-shadow: 0;
+}
+.easy-autocomplete.eac-dark ul {
+  border-color: #333;
+}
+.easy-autocomplete.eac-dark ul li, .easy-autocomplete.eac-dark ul .eac-category {
+  background-color: #404040;
+  border-color: #333;
+}
+.easy-autocomplete.eac-dark ul li.selected, .easy-autocomplete.eac-dark ul .eac-category.selected {
+  background-color: #737373;
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-dark-glass {
+  color: #fff;
+}
+.easy-autocomplete.eac-dark-glass input {
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+  box-shadow: 0;
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-dark-glass input:hover, .easy-autocomplete.eac-dark-glass input:focus {
+  border-color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0;
+}
+.easy-autocomplete.eac-dark-glass ul {
+  border-color: rgba(0, 0, 0, 0.8);
+}
+.easy-autocomplete.eac-dark-glass ul li, .easy-autocomplete.eac-dark-glass ul .eac-category {
+  background-color: rgba(0, 0, 0, 0.8);
+  border-color: rgba(0, 0, 0, 0.8);
+}
+.easy-autocomplete.eac-dark-glass ul li.selected, .easy-autocomplete.eac-dark-glass ul .eac-category.selected {
+  background-color: rgba(64, 64, 64, 0.8);
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-dark-glass ul li:last-child, .easy-autocomplete.eac-dark-glass ul .eac-category:last-child {
+  border-radius: 0 0 4px 4px;
+}
+.easy-autocomplete.eac-blue {
+  color: #fff;
+}
+.easy-autocomplete.eac-blue input {
+  background-color: #6d9ed1;
+  border-radius: 4px;
+  box-shadow: 0;
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-blue input::-webkit-input-placeholder {
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-blue input:-moz-placeholder {
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-blue input::-moz-placeholder {
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-blue input:-ms-input-placeholder {
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-blue input:hover, .easy-autocomplete.eac-blue input:focus {
+  border-color: #5A91CB;
+  box-shadow: 0;
+}
+.easy-autocomplete.eac-blue ul {
+  border-color: #5A91CB;
+}
+.easy-autocomplete.eac-blue ul li, .easy-autocomplete.eac-blue ul .eac-category {
+  background-color: #6d9ed1;
+  border-color: #5A91CB;
+}
+.easy-autocomplete.eac-blue ul li.selected, .easy-autocomplete.eac-blue ul .eac-category.selected {
+  background-color: #94b8dd;
+  color: #f6f6f6;
+}
+.easy-autocomplete.eac-yellow {
+  color: #333;
+}
+.easy-autocomplete.eac-yellow input {
+  background-color: #ffdb7e;
+  border-color: #333;
+  border-radius: 4px;
+  box-shadow: 0;
+  color: #333;
+}
+.easy-autocomplete.eac-yellow input:hover, .easy-autocomplete.eac-yellow input:focus {
+  border-color: #333;
+  box-shadow: 0;
+}
+.easy-autocomplete.eac-yellow ul {
+  border-color: #333;
+}
+.easy-autocomplete.eac-yellow ul li, .easy-autocomplete.eac-yellow ul .eac-category {
+  background-color: #ffdb7e;
+  border-color: #333;
+}
+.easy-autocomplete.eac-yellow ul li.selected, .easy-autocomplete.eac-yellow ul .eac-category.selected {
+  background-color: #ffe9b1;
+  color: #333;
+}
+.easy-autocomplete.eac-purple {
+  color: #333;
+}
+.easy-autocomplete.eac-purple input {
+  background-color: #d6d1e7;
+  border-color: #b8afd5;
+  box-shadow: 0;
+  color: #333;
+}
+.easy-autocomplete.eac-purple input:hover, .easy-autocomplete.eac-purple input:focus {
+  border-color: #333;
+  box-shadow: 0;
+}
+.easy-autocomplete.eac-purple ul {
+  border-color: #333;
+}
+.easy-autocomplete.eac-purple ul li, .easy-autocomplete.eac-purple ul .eac-category {
+  background-color: #d6d1e7;
+  border-color: #333;
+}
+.easy-autocomplete.eac-purple ul li.selected, .easy-autocomplete.eac-purple ul .eac-category.selected {
+  background-color: #ebe8f3;
+  color: #333;
+}
+.easy-autocomplete.eac-bootstrap input {
+  border-color: #ccc;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  color: #555;
+  padding: 6px 12px;
+}
+
+.easy-autocomplete-container {
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+.easy-autocomplete-container ul {
+  background: none repeat scroll 0 0 #ffffff;
+  border-top: 1px dotted #ccc;
+  display: none;
+  margin-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  position: relative;
+  top: -1px;
+}
+.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
+  background: inherit;
+  border-color: #ccc;
+  border-image: none;
+  border-style: solid;
+  border-width: 0 1px;
+  display: block;
+  font-size: 14px;
+  font-weight: normal;
+  padding: 4px 12px;
+}
+.easy-autocomplete-container ul li:last-child {
+  border-radius: 0 0 2px 2px;
+  border-width: 0 1px 1px;
+}
+.easy-autocomplete-container ul li.selected {
+  background: none repeat scroll 0 0 #ebebeb;
+  cursor: pointer;
+}
+.easy-autocomplete-container ul li.selected div {
+  font-weight: normal;
+}
+.easy-autocomplete-container ul li div {
+  display: block;
+  font-weight: normal;
+  word-break: break-all;
+}
+.easy-autocomplete-container ul li b {
+  font-weight: bold;
+}
+.easy-autocomplete-container ul .eac-category {
+  font-color: #aaa;
+  font-style: italic;
+}
+
+.eac-description .eac-item span {
+  color: #aaa;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
+.eac-icon-left .eac-item img {
+  margin-right: 4px;
+  max-height: 30px;
+}
+
+.eac-icon-right .eac-item {
+  margin-top: 8px;
+  min-height: 24px;
+  position: relative;
+}
+.eac-icon-right .eac-item img {
+  margin-left: 4px;
+  max-height: 30px;
+  position: absolute;
+  right: -4px;
+  top: -8px;
+}
+
+/*# sourceMappingURL=easy-autocomplete.css.map */
diff --git a/src/main/webapp/assets/css/styles.css b/src/main/webapp/assets/css/styles.css
index bfb5b4044..75878c605 100644
--- a/src/main/webapp/assets/css/styles.css
+++ b/src/main/webapp/assets/css/styles.css
@@ -18,4 +18,5 @@
 */
 @import url('bootstrap.css');
 @import url('jquery.dataTables.css');
+@import url('easy-autocomplete.css');
 @import url('base.css');
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/config.js b/src/main/webapp/assets/js/config.js
index 94d638522..9ddb2445b 100644
--- a/src/main/webapp/assets/js/config.js
+++ b/src/main/webapp/assets/js/config.js
@@ -36,6 +36,7 @@ require.config({
         "jquery-slideto":"util/jquery.slideto",
         "jquery-wiggle":"libs/jquery.wiggle.min",
         "jquery-ba-bbq":"libs/jquery.ba-bbq.min",
+        "jquery-easy-autocomplete": "libs/jquery.easy-autocomplete",
         
         "moment":"libs/moment",
         "handlebars":"libs/handlebars-1.0.rc.1",
@@ -79,6 +80,7 @@ require.config({
         "jquery-slideto": { deps: [ "jquery" ] },
         "jquery-wiggle": { deps: [ "jquery" ] },
         "jquery-ba-bbq": { deps: [ "jquery" ] },
+        "jquery-easy-autocomplete": { deps: [ "jquery" ] },
         "handlebars": { deps: [ "jquery" ] },
         "codemirror":{
             exports:"CodeMirror"
diff --git a/src/main/webapp/assets/js/libs/jquery.easy-autocomplete.js b/src/main/webapp/assets/js/libs/jquery.easy-autocomplete.js
new file mode 100755
index 000000000..ad30a5a1f
--- /dev/null
+++ b/src/main/webapp/assets/js/libs/jquery.easy-autocomplete.js
@@ -0,0 +1,1578 @@
+/*
+ * easy-autocomplete
+ * jQuery plugin for autocompletion
+ * 
+ * @author Łukasz Pawełczak (http://github.com/pawelczak)
+ * @version 1.3.3
+ * Copyright MIT License: https://github.com/pawelczak/easy-autocomplete/blob/master/LICENSE.txt
+ */
+
+/*
+ * EasyAutocomplete - Configuration 
+ */
+var EasyAutocomplete = (function(scope){
+
+	scope.Configuration = function Configuration(options) {
+		var defaults = {
+			data: "list-required",
+			url: "list-required",
+			dataType: "json",
+
+			listLocation: function(data) {
+				return data;
+			},
+
+			xmlElementName: "",
+
+			getValue: function(element) {
+				return element;
+			},
+
+			autocompleteOff: true,
+
+			placeholder: false,
+
+			ajaxCallback: function() {},
+
+			matchResponseProperty: false,
+
+			list: {
+				sort: {
+					enabled: false,
+					method: function(a, b) {
+						a = defaults.getValue(a);
+						b = defaults.getValue(b);
+						if (a < b) {
+							return -1;
+						}
+						if (a > b) {
+							return 1;
+						}
+						return 0;
+					}
+				},
+
+				maxNumberOfElements: 6,
+
+				hideOnEmptyPhrase: true,
+
+				match: {
+					enabled: false,
+					caseSensitive: false,
+					method: function(a, b) {
+						a = defaults.getValue(a);
+						b = defaults.getValue(b);
+
+						if (a === b){
+							return true;
+						}  
+						return false;
+					}
+				},
+
+				showAnimation: {
+					type: "normal", //normal|slide|fade
+					time: 400,
+					callback: function() {}
+				},
+
+				hideAnimation: {
+					type: "normal",
+					time: 400,
+					callback: function() {}
+				},
+
+				/* Events */
+				onClickEvent: function() {},
+				onSelectItemEvent: function() {},
+				onLoadEvent: function() {},
+				onChooseEvent: function() {},
+				onKeyEnterEvent: function() {},
+				onMouseOverEvent: function() {},
+				onMouseOutEvent: function() {},	
+				onShowListEvent: function() {},
+				onHideListEvent: function() {}
+			},
+
+			highlightPhrase: true,
+
+			theme: "",
+
+			cssClasses: "",
+
+			minCharNumber: 0,
+
+			requestDelay: 0,
+
+			adjustWidth: true,
+
+			ajaxSettings: {},
+
+			preparePostData: function(data, inputPhrase) {return data;},
+
+			loggerEnabled: true,
+
+			template: "",
+
+			categoriesAssigned: false,
+
+			categories: [{
+				maxNumberOfElements: 4
+			}]
+
+		};
+		
+
+		this.get = function(propertyName) {
+			return defaults[propertyName];
+		};
+
+		this.equals = function(name, value) {
+			if (isAssigned(name)) {
+				if (defaults[name] === value) {
+					return true;
+				}
+			} 
+			
+			return false;
+		};
+
+		this.checkDataUrlProperties = function() {
+			if (defaults.url === "list-required" && defaults.data === "list-required") {
+				return false;
+			}
+			return true;
+		};
+		this.checkRequiredProperties = function() {
+			for (var propertyName in defaults) {
+				if (defaults[propertyName] === "required") {
+					logger.error("Option " + propertyName + " must be defined");
+					return false;
+				}
+			}
+			return true;
+		};
+
+		this.printPropertiesThatDoesntExist = function(consol, optionsToCheck) {
+			printPropertiesThatDoesntExist(consol, optionsToCheck);
+		};
+
+
+		prepareDefaults();
+
+		mergeOptions();
+
+		if (defaults.loggerEnabled === true) {
+			printPropertiesThatDoesntExist(console, options);	
+		}
+
+		addAjaxSettings();
+
+		processAfterMerge();
+		function prepareDefaults() {
+
+			if (options.dataType === "xml") {
+				
+				if (!options.getValue) {
+
+					options.getValue = function(element) {
+						return $(element).text();
+					};
+				}
+
+				
+				if (!options.list) {
+
+					options.list = {};
+				} 
+
+				if (!options.list.sort) {
+					options.list.sort = {};
+				}
+
+
+				options.list.sort.method = function(a, b) {
+					a = options.getValue(a);
+					b = options.getValue(b);
+					if (a < b) {
+						return -1;
+					}
+					if (a > b) {
+						return 1;
+					}
+					return 0;
+				};
+
+				if (!options.list.match) {
+					options.list.match = {};
+				}
+
+				options.list.match.method = function(a, b) {
+					a = options.getValue(a);
+					b = options.getValue(b);
+
+					if (a === b){
+						return true;
+					}  
+					return false;
+				};
+
+			}
+			if (options.categories !== undefined && options.categories instanceof Array) {
+
+				var categories = [];
+
+				for (var i = 0, length = options.categories.length; i < length; i += 1) { 
+
+					var category = options.categories[i];
+
+					for (var property in defaults.categories[0]) {
+
+						if (category[property] === undefined) {
+							category[property] = defaults.categories[0][property];
+						}
+					}
+
+					categories.push(category);
+				}
+
+				options.categories = categories;
+			}
+		}
+
+		function mergeOptions() {
+
+			defaults = mergeObjects(defaults, options);
+
+			function mergeObjects(source, target) {
+				var mergedObject = source || {};
+
+				for (var propertyName in source) {
+					if (target[propertyName] !== undefined && target[propertyName] !== null) {
+
+						if (typeof target[propertyName] !== "object" || 
+								target[propertyName] instanceof Array) {
+							mergedObject[propertyName] = target[propertyName];
+						} else {
+							mergeObjects(source[propertyName], target[propertyName]);
+						}
+					}
+				}
+			
+				/* If data is an object */
+				if (target.data !== undefined && target.data !== null && typeof target.data === "object") {
+					mergedObject.data = target.data;
+				}
+
+				return mergedObject;
+			}
+		}	
+
+
+		function processAfterMerge() {
+			
+			if (defaults.url !== "list-required" && typeof defaults.url !== "function") {
+				var defaultUrl = defaults.url;
+				defaults.url = function() {
+					return defaultUrl;
+				};
+			}
+
+			if (defaults.ajaxSettings.url !== undefined && typeof defaults.ajaxSettings.url !== "function") {
+				var defaultUrl = defaults.ajaxSettings.url;
+				defaults.ajaxSettings.url = function() {
+					return defaultUrl;
+				};
+			}
+
+			if (typeof defaults.listLocation === "string") {
+				var defaultlistLocation = defaults.listLocation;
+
+				if (defaults.dataType.toUpperCase() === "XML") {
+					defaults.listLocation = function(data) {
+						return $(data).find(defaultlistLocation);
+					};
+				} else {
+					defaults.listLocation = function(data) {
+						return data[defaultlistLocation];
+					};	
+				}
+			}
+
+			if (typeof defaults.getValue === "string") {
+				var defaultsGetValue = defaults.getValue;
+				defaults.getValue = function(element) {
+					return element[defaultsGetValue];
+				};
+			}
+
+			if (options.categories !== undefined) {
+				defaults.categoriesAssigned = true;
+			}
+
+		}
+
+		function addAjaxSettings() {
+
+			if (options.ajaxSettings !== undefined && typeof options.ajaxSettings === "object") {
+				defaults.ajaxSettings = options.ajaxSettings;
+			} else {
+				defaults.ajaxSettings = {};	
+			}
+			
+		}
+
+		function isAssigned(name) {
+			if (defaults[name] !== undefined && defaults[name] !== null) {
+				return true;
+			} else {
+				return false;
+			}
+		}
+		function printPropertiesThatDoesntExist(consol, optionsToCheck) {
+			
+
+			checkPropertiesIfExist(defaults, optionsToCheck);
+
+			function checkPropertiesIfExist(source, target) {
+				for(var property in target) {
+					if (source[property] === undefined) {
+						consol.log("Property '" + property + "' does not exist in EasyAutocomplete options API.");		
+					}
+
+					if (typeof source[property] === "object" && !externalObject(property)) {
+						checkPropertiesIfExist(source[property], target[property]);
+					}
+				}	
+			}
+
+			function externalObject(property) {
+				var notTestedObjects = ["ajaxSettings", "template"];
+
+				Array.prototype.contains = function(obj) {
+					var i = this.length;
+				    while (i--) {
+				        if (this[i] === obj) {
+				            return true;
+				        }
+				    }
+				    return false;
+				};
+
+				return notTestedObjects.contains(property);
+			}
+		}
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+
+
+/*
+ * EasyAutocomplete - Logger 
+ */
+var EasyAutocomplete = (function(scope){
+	
+	scope.Logger = function Logger() {
+
+		this.error = function(message) {
+			console.log("ERROR: " + message);
+		};
+
+		this.warning = function(message) {
+			console.log("WARNING: " + message);
+		};
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+	
+
+/*
+ * EasyAutocomplete - Constans
+ */
+var EasyAutocomplete = (function(scope){	
+	
+	scope.Constans = function Constans() {
+		var constants = {
+			CONTAINER_CLASS: "easy-autocomplete-container",
+			CONTAINER_ID: "eac-container-",
+
+			WRAPPER_CSS_CLASS: "easy-autocomplete"
+		};
+
+		this.getValue = function(propertyName) {
+			return constants[propertyName];
+		};
+
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+
+/*
+ * EasyAutocomplete - ListBuilderService 
+ *
+ * @author Łukasz Pawełczak 
+ *
+ */
+var EasyAutocomplete = (function(scope) {
+
+	scope.ListBuilderService = function ListBuilderService(configuration, proccessResponseData) {
+
+
+		this.init = function(data) {
+			var listBuilder = [],
+				builder = {};
+
+			builder.data = configuration.get("listLocation")(data);
+			builder.getValue = configuration.get("getValue");
+			builder.maxListSize = configuration.get("list").maxNumberOfElements;
+
+				
+			listBuilder.push(builder);
+
+			return listBuilder;
+		};
+
+		this.updateCategories = function(listBuilder, data) {
+			
+			if (configuration.get("categoriesAssigned")) {
+
+				listBuilder = [];
+
+				for(var i = 0; i < configuration.get("categories").length; i += 1) {
+
+					var builder = convertToListBuilder(configuration.get("categories")[i], data);
+
+					listBuilder.push(builder);
+				}
+
+			} 
+
+			return listBuilder;
+		};
+
+		this.convertXml = function(listBuilder) {
+			if(configuration.get("dataType").toUpperCase() === "XML") {
+
+				for(var i = 0; i < listBuilder.length; i += 1) {
+					listBuilder[i].data = convertXmlToList(listBuilder[i]);
+				}
+			}
+
+			return listBuilder;
+		};
+
+		this.processData = function(listBuilder, inputPhrase) {
+
+			for(var i = 0, length = listBuilder.length; i < length; i+=1) {
+				listBuilder[i].data = proccessResponseData(configuration, listBuilder[i], inputPhrase);
+			}
+
+			return listBuilder;
+		};
+
+		this.checkIfDataExists = function(listBuilders) {
+
+			for(var i = 0, length = listBuilders.length; i < length; i += 1) {
+
+				if (listBuilders[i].data !== undefined && listBuilders[i].data instanceof Array) {
+					if (listBuilders[i].data.length > 0) {
+						return true;
+					}
+				} 
+			}
+
+			return false;
+		};
+
+
+		function convertToListBuilder(category, data) {
+
+			var builder = {};
+
+			if(configuration.get("dataType").toUpperCase() === "XML") {
+
+				builder = convertXmlToListBuilder();
+			} else {
+
+				builder = convertDataToListBuilder();
+			}
+			
+
+			if (category.header !== undefined) {
+				builder.header = category.header;
+			}
+
+			if (category.maxNumberOfElements !== undefined) {
+				builder.maxNumberOfElements = category.maxNumberOfElements;
+			}
+
+			if (configuration.get("list").maxNumberOfElements !== undefined) {
+
+				builder.maxListSize = configuration.get("list").maxNumberOfElements;
+			}
+
+			if (category.getValue !== undefined) {
+
+				if (typeof category.getValue === "string") {
+					var defaultsGetValue = category.getValue;
+					builder.getValue = function(element) {
+						return element[defaultsGetValue];
+					};
+				} else if (typeof category.getValue === "function") {
+					builder.getValue = category.getValue;
+				}
+
+			} else {
+				builder.getValue = configuration.get("getValue");	
+			}
+			
+
+			return builder;
+
+
+			function convertXmlToListBuilder() {
+
+				var builder = {},
+					listLocation;
+
+				if (category.xmlElementName !== undefined) {
+					builder.xmlElementName = category.xmlElementName;
+				}
+
+				if (category.listLocation !== undefined) {
+
+					listLocation = category.listLocation;
+				} else if (configuration.get("listLocation") !== undefined) {
+
+					listLocation = configuration.get("listLocation");
+				}
+
+				if (listLocation !== undefined) {
+					if (typeof listLocation === "string") {
+						builder.data = $(data).find(listLocation);
+					} else if (typeof listLocation === "function") {
+
+						builder.data = listLocation(data);
+					}
+				} else {
+
+					builder.data = data;
+				}
+
+				return builder;
+			}
+
+
+			function convertDataToListBuilder() {
+
+				var builder = {};
+
+				if (category.listLocation !== undefined) {
+
+					if (typeof category.listLocation === "string") {
+						builder.data = data[category.listLocation];
+					} else if (typeof category.listLocation === "function") {
+						builder.data = category.listLocation(data);
+					}
+				} else {
+					builder.data = data;
+				}
+
+				return builder;
+			}
+		}
+
+		function convertXmlToList(builder) {
+			var simpleList = [];
+
+			if (builder.xmlElementName === undefined) {
+				builder.xmlElementName = configuration.get("xmlElementName");
+			}
+
+
+			$(builder.data).find(builder.xmlElementName).each(function() {
+				simpleList.push(this);
+			});
+
+			return simpleList;
+		}
+
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+
+
+/*
+ * EasyAutocomplete - Data proccess module
+ *
+ * Process list to display:
+ * - sort 
+ * - decrease number to specific number
+ * - show only matching list
+ *
+ */
+var EasyAutocomplete = (function(scope) {
+
+	scope.proccess = function proccessData(config, listBuilder, phrase) {
+
+		var list = listBuilder.data,
+			inputPhrase = phrase;//TODO REFACTOR
+
+		list = findMatch(list, inputPhrase);
+		list = reduceElementsInList(list);
+		list = sort(list);
+
+		return list;
+
+
+		function findMatch(list, phrase) {
+			var preparedList = [],
+				value = "";
+
+			if (config.get("list").match.enabled) {
+
+				for(var i = 0, length = list.length; i < length; i += 1) {
+
+					value = config.get("getValue")(list[i]);
+					
+					if (!config.get("list").match.caseSensitive) {
+
+						if (typeof value === "string") {
+							value = value.toLowerCase();	
+						}
+						
+						phrase = phrase.toLowerCase();
+					}
+					if (value.search(phrase) > -1) {
+						preparedList.push(list[i]);
+					}
+					
+				}
+
+			} else {
+				preparedList = list;
+			}
+
+			return preparedList;
+		}
+
+		function reduceElementsInList(list) {
+			if (listBuilder.maxNumberOfElements !== undefined && list.length > listBuilder.maxNumberOfElements) {
+				list = list.slice(0, listBuilder.maxNumberOfElements);
+			}
+
+			return list;
+		}
+
+		function sort(list) {
+			if (config.get("list").sort.enabled) {
+				list.sort(config.get("list").sort.method);
+			}
+
+			return list;
+		}
+		
+	};
+
+	return scope;
+
+
+
+})(EasyAutocomplete || {});
+
+
+/*
+ * EasyAutocomplete - Template 
+ *
+ * 
+ *
+ */
+var EasyAutocomplete = (function(scope){
+
+	scope.Template = function Template(options) {
+
+
+		var genericTemplates = {
+			basic: {
+				type: "basic",
+				method: function(element) { return element; },
+				cssClass: ""
+			},
+			description: {
+				type: "description",
+				fields: {
+					description: "description"
+				},
+				method: function(element) {	return element + " - description"; },
+				cssClass: "eac-description"
+			},
+			iconLeft: {
+				type: "iconLeft",
+				fields: {
+					icon: ""
+				},
+				method: function(element) {
+					return element;
+				},
+				cssClass: "eac-icon-left"
+			},
+			iconRight: {
+				type: "iconRight",
+				fields: {
+					iconSrc: ""
+				},
+				method: function(element) {
+					return element;
+				},
+				cssClass: "eac-icon-right"
+			},
+			links: {
+				type: "links",
+				fields: {
+					link: ""
+				},
+				method: function(element) {
+					return element;
+				},
+				cssClass: ""
+			},
+			custom: {
+				type: "custom",
+				method: function() {},
+				cssClass: ""
+			}
+		},
+
+
+
+		/*
+		 * Converts method with {{text}} to function
+		 */
+		convertTemplateToMethod = function(template) {
+
+
+			var _fields = template.fields,
+				buildMethod;
+
+			if (template.type === "description") {
+
+				buildMethod = genericTemplates.description.method; 
+
+				if (typeof _fields.description === "string") {
+					buildMethod = function(elementValue, element) {
+						return elementValue + " - <span>" + element[_fields.description] + "</span>";
+					};					
+				} else if (typeof _fields.description === "function") {
+					buildMethod = function(elementValue, element) {
+						return elementValue + " - <span>" + _fields.description(element) + "</span>";
+					};	
+				}
+
+				return buildMethod;
+			}
+
+			if (template.type === "iconRight") {
+
+				if (typeof _fields.iconSrc === "string") {
+					buildMethod = function(elementValue, element) {
+						return elementValue + "<img class='eac-icon' src='" + element[_fields.iconSrc] + "' />" ;
+					};					
+				} else if (typeof _fields.iconSrc === "function") {
+					buildMethod = function(elementValue, element) {
+						return elementValue + "<img class='eac-icon' src='" + _fields.iconSrc(element) + "' />" ;
+					};
+				}
+
+				return buildMethod;
+			}
+
+
+			if (template.type === "iconLeft") {
+
+				if (typeof _fields.iconSrc === "string") {
+					buildMethod = function(elementValue, element) {
+						return "<img class='eac-icon' src='" + element[_fields.iconSrc] + "' />" + elementValue;
+					};					
+				} else if (typeof _fields.iconSrc === "function") {
+					buildMethod = function(elementValue, element) {
+						return "<img class='eac-icon' src='" + _fields.iconSrc(element) + "' />" + elementValue;
+					};
+				}
+
+				return buildMethod;
+			}
+
+			if(template.type === "links") {
+
+				if (typeof _fields.link === "string") {
+					buildMethod = function(elementValue, element) {
+						return "<a href='" + element[_fields.link] + "' >" + elementValue + "</a>";
+					};					
+				} else if (typeof _fields.link === "function") {
+					buildMethod = function(elementValue, element) {
+						return "<a href='" + _fields.link(element) + "' >" + elementValue + "</a>";
+					};
+				}
+
+				return buildMethod;
+			}
+
+
+			if (template.type === "custom") {
+
+				return template.method;
+			}
+
+			return genericTemplates.basic.method;
+
+		},
+
+
+		prepareBuildMethod = function(options) {
+			if (!options || !options.type) {
+
+				return genericTemplates.basic.method;
+			}
+
+			if (options.type && genericTemplates[options.type]) {
+
+				return convertTemplateToMethod(options);
+			} else {
+
+				return genericTemplates.basic.method;
+			}
+
+		},
+
+		templateClass = function(options) {
+			var emptyStringFunction = function() {return "";};
+
+			if (!options || !options.type) {
+
+				return emptyStringFunction;
+			}
+
+			if (options.type && genericTemplates[options.type]) {
+				return (function () { 
+					var _cssClass = genericTemplates[options.type].cssClass;
+					return function() { return _cssClass;};
+				})();
+			} else {
+				return emptyStringFunction;
+			}
+		};
+
+
+		this.getTemplateClass = templateClass(options);
+
+		this.build = prepareBuildMethod(options);
+
+
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+
+
+/*
+ * EasyAutocomplete - jQuery plugin for autocompletion
+ *
+ */
+var EasyAutocomplete = (function(scope) {
+
+	
+	scope.main = function Core($input, options) {
+				
+		var module = {
+				name: "EasyAutocomplete",
+				shortcut: "eac"
+			};
+
+		var consts = new scope.Constans(),
+			config = new scope.Configuration(options),
+			logger = new scope.Logger(),
+			template = new scope.Template(options.template),
+			listBuilderService = new scope.ListBuilderService(config, scope.proccess),
+			checkParam = config.equals,
+
+			$field = $input, 
+			$container = "",
+			elementsList = [],
+			selectedElement = -1,
+			requestDelayTimeoutId;
+
+		scope.consts = consts;
+
+		this.getConstants = function() {
+			return consts;
+		};
+
+		this.getConfiguration = function() {
+			return config;
+		};
+
+		this.getContainer = function() {
+			return $container;
+		};
+
+		this.getSelectedItemIndex = function() {
+			return selectedElement;
+		};
+
+		this.getItemData = function(index) {
+
+			if (elementsList.length < index || elementsList[index] === undefined) {
+				return -1;
+			} else {
+				return elementsList[index];
+			}
+		};
+
+		this.getSelectedItemData = function() {
+			return this.getItemData(selectedElement);
+		};
+
+		this.build = function() {
+			prepareField();
+		};
+
+		this.init = function() {
+			init();
+		};
+		function init() {
+
+			if ($field.length === 0) {
+				logger.error("Input field doesn't exist.");
+				return;
+			}
+
+			if (!config.checkDataUrlProperties()) {
+				logger.error("One of options variables 'data' or 'url' must be defined.");
+				return;
+			}
+
+			if (!config.checkRequiredProperties()) {
+				logger.error("Will not work without mentioned properties.");
+				return;
+			}
+
+
+			prepareField();
+			bindEvents();	
+
+		}
+		function prepareField() {
+
+				
+			if ($field.parent().hasClass(consts.getValue("WRAPPER_CSS_CLASS"))) {
+				removeContainer();
+				removeWrapper();
+			} 
+			
+			createWrapper();
+			createContainer();	
+
+			$container = $("#" + getContainerId());
+			if (config.get("placeholder")) {
+				$field.attr("placeholder", config.get("placeholder"));
+			}
+
+
+			function createWrapper() {
+				var $wrapper = $("<div>"),
+					classes = consts.getValue("WRAPPER_CSS_CLASS");
+
+			
+				if (config.get("theme") && config.get("theme") !== "") {
+					classes += " eac-" + config.get("theme");
+				}
+
+				if (config.get("cssClasses") && config.get("cssClasses") !== "") {
+					classes += " " + config.get("cssClasses");
+				}
+
+				if (template.getTemplateClass() !== "") {
+					classes += " " + template.getTemplateClass();
+				}
+				
+
+				$wrapper
+					.addClass(classes);
+				$field.wrap($wrapper);
+
+
+				if (config.get("adjustWidth") === true) {
+					adjustWrapperWidth();	
+				}
+				
+
+			}
+
+			function adjustWrapperWidth() {
+				var fieldWidth = $field.outerWidth();
+
+				$field.parent().css("width", fieldWidth);				
+			}
+
+			function removeWrapper() {
+				$field.unwrap();
+			}
+
+			function createContainer() {
+				var $elements_container = $("<div>").addClass(consts.getValue("CONTAINER_CLASS"));
+
+				$elements_container
+						.attr("id", getContainerId())
+						.prepend($("<ul>"));
+
+
+				(function() {
+
+					$elements_container
+						/* List show animation */
+						.on("show.eac", function() {
+
+							switch(config.get("list").showAnimation.type) {
+
+								case "slide":
+									var animationTime = config.get("list").showAnimation.time,
+										callback = config.get("list").showAnimation.callback;
+
+									$elements_container.find("ul").slideDown(animationTime, callback);
+								break;
+
+								case "fade":
+									var animationTime = config.get("list").showAnimation.time,
+										callback = config.get("list").showAnimation.callback;
+
+									$elements_container.find("ul").fadeIn(animationTime), callback;
+								break;
+
+								default:
+									$elements_container.find("ul").show();
+								break;
+							}
+
+							config.get("list").onShowListEvent();
+							
+						})
+						/* List hide animation */
+						.on("hide.eac", function() {
+
+							switch(config.get("list").hideAnimation.type) {
+
+								case "slide":
+									var animationTime = config.get("list").hideAnimation.time,
+										callback = config.get("list").hideAnimation.callback;
+
+									$elements_container.find("ul").slideUp(animationTime, callback);
+								break;
+
+								case "fade":
+									var animationTime = config.get("list").hideAnimation.time,
+										callback = config.get("list").hideAnimation.callback;
+
+									$elements_container.find("ul").fadeOut(animationTime, callback);
+								break;
+
+								default:
+									$elements_container.find("ul").hide();
+								break;
+							}
+
+							config.get("list").onHideListEvent();
+
+						})
+						.on("selectElement.eac", function() {
+							$elements_container.find("ul li").removeClass("selected");
+							$elements_container.find("ul li").eq(selectedElement).addClass("selected");
+
+							config.get("list").onSelectItemEvent();
+						})
+						.on("loadElements.eac", function(event, listBuilders, phrase) {
+			
+
+							var $item = "",
+								$listContainer = $elements_container.find("ul");
+
+							$listContainer
+								.empty()
+								.detach();
+
+							elementsList = [];
+							var counter = 0;
+							for(var builderIndex = 0, listBuildersLength = listBuilders.length; builderIndex < listBuildersLength; builderIndex += 1) {
+
+								var listData = listBuilders[builderIndex].data;
+
+								if (listData.length === 0) {
+									continue;
+								}
+
+								if (listBuilders[builderIndex].header !== undefined && listBuilders[builderIndex].header.length > 0) {
+									$listContainer.append("<div class='eac-category' >" + listBuilders[builderIndex].header + "</div>");
+								}
+
+								for(var i = 0, listDataLength = listData.length; i < listDataLength && counter < listBuilders[builderIndex].maxListSize; i += 1) {
+									$item = $("<li><div class='eac-item'></div></li>");
+									
+
+									(function() {
+										var j = i,
+											itemCounter = counter,
+											elementsValue = listBuilders[builderIndex].getValue(listData[j]);
+
+										$item.find(" > div")
+											.on("click", function() {
+
+												$field.val(elementsValue).trigger("change");
+
+												selectedElement = itemCounter;
+												selectElement(itemCounter);
+
+												config.get("list").onClickEvent();
+												config.get("list").onChooseEvent();
+											})
+											.mouseover(function() {
+
+												selectedElement = itemCounter;
+												selectElement(itemCounter);	
+
+												config.get("list").onMouseOverEvent();
+											})
+											.mouseout(function() {
+												config.get("list").onMouseOutEvent();
+											})
+											.html(template.build(highlight(elementsValue, phrase), listData[j]));
+									})();
+
+									$listContainer.append($item);
+									elementsList.push(listData[i]);
+									counter += 1;
+								}
+							}
+
+							$elements_container.append($listContainer);
+
+							config.get("list").onLoadEvent();
+						});
+
+				})();
+
+				$field.after($elements_container);
+			}
+
+			function removeContainer() {
+				$field.next("." + consts.getValue("CONTAINER_CLASS")).remove();
+			}
+
+			function highlight(string, phrase) {
+
+				if(config.get("highlightPhrase") && phrase !== "") {
+					return highlightPhrase(string, phrase);	
+				} else {
+					return string;
+				}
+					
+			}
+
+			function escapeRegExp(str) {
+				return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+ 			}
+
+			function highlightPhrase(string, phrase) {
+				var escapedPhrase = escapeRegExp(phrase);
+				return (string + "").replace(new RegExp("(" + escapedPhrase + ")", "gi") , "<b>$1</b>");
+			}
+
+
+
+		}
+		function getContainerId() {
+			
+			var elementId = $field.attr("id");
+
+			elementId = consts.getValue("CONTAINER_ID") + elementId;
+
+			return elementId;
+		}
+		function bindEvents() {
+
+			bindAllEvents();
+			
+
+			function bindAllEvents() {
+				if (checkParam("autocompleteOff", true)) {
+					removeAutocomplete();
+				}
+
+				bindKeyup();
+				bindKeydown();
+				bindKeypress();
+				bindFocus();
+				bindBlur();
+			}
+
+			function bindKeyup() {
+				$field
+				.off("keyup")
+				.keyup(function(event) {
+
+					switch(event.keyCode) {
+
+						case 27:
+
+							hideContainer();
+							loseFieldFocus();
+						break;
+
+						case 38:
+
+							event.preventDefault();
+
+							if(elementsList.length > 0 && selectedElement > 0) {
+
+								selectedElement -= 1;
+
+								$field.val(config.get("getValue")(elementsList[selectedElement]));
+
+								selectElement(selectedElement);
+
+							}						
+						break;
+
+						case 40:
+
+							event.preventDefault();
+
+							if(elementsList.length > 0 && selectedElement < elementsList.length - 1) {
+
+								selectedElement += 1;
+
+								$field.val(config.get("getValue")(elementsList[selectedElement]));
+
+								selectElement(selectedElement);
+								
+							}
+
+						break;
+
+						default:
+
+							if (event.keyCode > 40 || event.keyCode === 8) {
+
+								var inputPhrase = $field.val();
+
+								if (!(config.get("list").hideOnEmptyPhrase === true && event.keyCode === 8 && inputPhrase === "")) {
+
+									if (config.get("requestDelay") > 0) {
+										if (requestDelayTimeoutId !== undefined) {
+											clearTimeout(requestDelayTimeoutId);
+										}
+
+										requestDelayTimeoutId = setTimeout(function () { loadData(inputPhrase);}, config.get("requestDelay"));
+									} else {
+										loadData(inputPhrase);
+									}
+
+								} else {
+									hideContainer();
+								}
+								
+							}
+							
+
+						break;
+					}
+				
+
+					function loadData(inputPhrase) {
+
+
+						if (inputPhrase.length < config.get("minCharNumber")) {
+							return;
+						}
+
+
+						if (config.get("data") !== "list-required") {
+
+							var data = config.get("data");
+
+							var listBuilders = listBuilderService.init(data);
+
+							listBuilders = listBuilderService.updateCategories(listBuilders, data);
+							
+							listBuilders = listBuilderService.processData(listBuilders, inputPhrase);
+
+							loadElements(listBuilders, inputPhrase);
+
+							if ($field.parent().find("li").length > 0) {
+								showContainer();	
+							} else {
+								hideContainer();
+							}
+
+						}
+
+						var settings = createAjaxSettings();
+
+						if (settings.url === undefined || settings.url === "") {
+							settings.url = config.get("url");
+						}
+
+						if (settings.dataType === undefined || settings.dataType === "") {
+							settings.dataType = config.get("dataType");
+						}
+
+
+						if (settings.url !== undefined && settings.url !== "list-required") {
+
+							settings.url = settings.url(inputPhrase);
+
+							settings.data = config.get("preparePostData")(settings.data, inputPhrase);
+
+							$.ajax(settings) 
+								.done(function(data) {
+
+									var listBuilders = listBuilderService.init(data);
+
+									listBuilders = listBuilderService.updateCategories(listBuilders, data);
+									
+									listBuilders = listBuilderService.convertXml(listBuilders);
+									if (checkInputPhraseMatchResponse(inputPhrase, data)) {
+
+										listBuilders = listBuilderService.processData(listBuilders, inputPhrase);
+
+										loadElements(listBuilders, inputPhrase);	
+																				
+									}
+
+									if (listBuilderService.checkIfDataExists(listBuilders) && $field.parent().find("li").length > 0) {
+										showContainer();	
+									} else {
+										hideContainer();
+									}
+
+									config.get("ajaxCallback")();
+
+								})
+								.fail(function() {
+									logger.warning("Fail to load response data");
+								})
+								.always(function() {
+
+								});
+						}
+
+						
+
+						function createAjaxSettings() {
+
+							var settings = {},
+								ajaxSettings = config.get("ajaxSettings") || {};
+
+							for (var set in ajaxSettings) {
+								settings[set] = ajaxSettings[set];
+							}
+
+							return settings;
+						}
+
+						function checkInputPhraseMatchResponse(inputPhrase, data) {
+
+							if (config.get("matchResponseProperty") !== false) {
+								if (typeof config.get("matchResponseProperty") === "string") {
+									return (data[config.get("matchResponseProperty")] === inputPhrase);
+								}
+
+								if (typeof config.get("matchResponseProperty") === "function") {
+									return (config.get("matchResponseProperty")(data) === inputPhrase);
+								}
+
+								return true;
+							} else {
+								return true;
+							}
+
+						}
+
+					}
+
+
+				});
+			}
+
+			function bindKeydown() {
+				$field
+					.on("keydown", function(evt) {
+	        		    evt = evt || window.event;
+	        		    var keyCode = evt.keyCode;
+	        		    if (keyCode === 38) {
+	        		        suppressKeypress = true; 
+	        		        return false;
+	        		    }
+		        	})
+					.keydown(function(event) {
+
+						if (event.keyCode === 13 && selectedElement > -1) {
+
+							$field.val(config.get("getValue")(elementsList[selectedElement]));
+
+							config.get("list").onKeyEnterEvent();
+							config.get("list").onChooseEvent();
+
+							selectedElement = -1;
+							hideContainer();
+
+							event.preventDefault();
+						}
+					});
+			}
+
+			function bindKeypress() {
+				$field
+				.off("keypress");
+			}
+
+			function bindFocus() {
+				$field.focus(function() {
+
+					if ($field.val() !== "" && elementsList.length > 0) {
+						
+						selectedElement = -1;
+						showContainer();	
+					}
+									
+				});
+			}
+
+			function bindBlur() {
+				$field.blur(function() {
+					setTimeout(function() { 
+						
+						selectedElement = -1;
+						hideContainer();
+					}, 250);
+				});
+			}
+
+			function removeAutocomplete() {
+				$field.attr("autocomplete","off");
+			}
+
+		}
+
+		function showContainer() {
+			$container.trigger("show.eac");
+		}
+
+		function hideContainer() {
+			$container.trigger("hide.eac");
+		}
+
+		function selectElement(index) {
+			
+			$container.trigger("selectElement.eac", index);
+		}
+
+		function loadElements(list, phrase) {
+			$container.trigger("loadElements.eac", [list, phrase]);
+		}
+
+		function loseFieldFocus() {
+			$field.trigger("blur");
+		}
+
+
+	};
+
+
+	scope.easyAutocompleteHandles = [];
+
+	scope.inputHasId = function(input) {
+
+		if($(input).attr("id") !== undefined && $(input).attr("id").length > 0) {
+			return true;
+		} else {
+			return false;
+		}
+
+	};
+
+	scope.assignRandomId = function(input) {
+
+		var fieldId = "";
+
+		do {
+			fieldId = "eac-" + Math.floor(Math.random() * 10000);		
+		} while ($("#" + fieldId).length !== 0);
+		
+		elementId = scope.consts.getValue("CONTAINER_ID") + fieldId;
+
+		$(input).attr("id", fieldId);
+ 
+	};
+
+	return scope;
+
+})(EasyAutocomplete || {});
+
+
+$.fn.easyAutocomplete = function(options) {
+
+	return this.each(function() {
+		var $this = $(this),
+			eacHandle = new EasyAutocomplete.main($this, options);
+
+		if (!EasyAutocomplete.inputHasId($this)) {
+			EasyAutocomplete.assignRandomId($this);
+		}
+
+		eacHandle.init();
+
+		EasyAutocomplete.easyAutocompleteHandles[$this.attr("id")] = eacHandle;
+
+	});	
+};
+
+$.fn.getSelectedItemIndex = function() {
+
+	var inputId = $(this).attr("id");
+
+	if (inputId !== undefined) {
+		return EasyAutocomplete.easyAutocompleteHandles[inputId].getSelectedItemIndex();
+	}
+
+	return -1;
+};
+
+$.fn.getItemData = function(index) {
+
+	var inputId = $(this).attr("id");
+
+	if (inputId !== undefined && index > -1) {
+		return EasyAutocomplete.easyAutocompleteHandles[inputId].getItemData(index);
+	}
+
+	return -1;
+};
+
+$.fn.getSelectedItemData = function() {
+
+	var inputId = $(this).attr("id");
+
+	if (inputId !== undefined) {
+		return EasyAutocomplete.easyAutocompleteHandles[inputId].getSelectedItemData();
+	}
+
+	return -1;
+};
diff --git a/src/main/webapp/assets/js/view/catalog.js b/src/main/webapp/assets/js/view/catalog.js
index e10914b71..049335509 100644
--- a/src/main/webapp/assets/js/view/catalog.js
+++ b/src/main/webapp/assets/js/view/catalog.js
@@ -188,12 +188,11 @@ define([
     function newLocationForm(addView, addViewParent) {
         return new LocationWizard({
             onLocationCreated: function(wizard, data) {
-                addViewParent.loadAccordionItem("locations", data.id);
+                addViewParent.loadAccordionItem("locations", data.id, true);
             },
             onFinish: function(wizard, data) {
                 addView.clearWithHtml( "Added: "+data.id+". Loading..." );
-            },
-            step: 1
+            }
         }).render();
     }
 
@@ -473,7 +472,7 @@ define([
             this.loadAccordionItem("locations", id);
         },
 
-        loadAccordionItem: function (kind, id) {
+        loadAccordionItem: function (kind, id, noRedirect) {
             if (!this.accordion[kind]) {
                 console.error("No accordion for: " + kind);
             } else {
@@ -499,8 +498,8 @@ define([
                             }
                         }
                         // TODO could look in collection for any starting with ID
-                        if (model) {
-                            Backbone.history.navigate("/v1/catalog/"+kind+"/"+id);
+                        if (model && !noRedirect) {
+                            Backbone.history.navigate("/v1/catalog/" + kind + "/" + id);
                             activeDetailsView = kind;
                             accordion.activeCid = model.cid;
                             accordion.options.onItemSelected(kind, model);
diff --git a/src/main/webapp/assets/js/view/home.js b/src/main/webapp/assets/js/view/home.js
index 5c9db1dc1..dc8e084e6 100644
--- a/src/main/webapp/assets/js/view/home.js
+++ b/src/main/webapp/assets/js/view/home.js
@@ -163,20 +163,19 @@ define([
             if (this.options.offline || (this.options.cautionOverlay && this.options.cautionOverlay.warningActive)) {
                 // don't show wizard
             } else {
-                var wizard = new LocationWizard({
+                this._modal = new LocationWizard({
                     onLocationCreated: function(wizard, data) {
                         that.options.locations.fetch({reset:true});
                     },
                     onFinish: function(wizard) {
-                        that._modal.close();
+                        that.$(".add-app #modal-container .modal").modal('hide');
                     },
                     isModal: true
                 });
-                this._modal = wizard;
-                this.$(".add-app #modal-container").html(wizard.render().el);
+                this.$(".add-app #modal-container").html(this._modal.render().el);
                 this.$(".add-app #modal-container .modal")
                     .on("hidden",function () {
-                        wizard.close();
+                        that._modal.close();
                         that.options.locations.fetch({reset:true});
                     }).modal('show');
             }
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 8fac452fa..7cf516fef 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -18,19 +18,21 @@
  */
 
 define([
-    'underscore', 'backbone', 'jquery', 'brooklyn-utils', 'model/location',
+    'underscore', 'backbone', 'jquery',
+    'brooklyn-utils', 'model/location',
     'text!tpl/location-wizard/modal.html',
     'text!tpl/location-wizard/location-type.html',
     'text!tpl/location-wizard/location-configuration.html',
     'text!tpl/location-wizard/location-provisioning.html',
-    'text!tpl/app-add-wizard/edit-config-entry.html',
-], function(_, Backbone, $, Util, Location, ModalHtml, LocationTypeHtml, LocationConfigurationHtml, LocationProvisioningHtml, EditConfigEntryHtml) {
+    'text!tpl/location-wizard/location-provisioning-entry.html',
+
+    'jquery-easy-autocomplete'
+], function(_, Backbone, $, Util, Location, ModalHtml, LocationTypeHtml, LocationConfigurationHtml, LocationProvisioningHtml, LocationProvisioningEntry) {
     var Wizard = Backbone.View.extend({
         template: _.template(ModalHtml),
         events: {
             'click .location-wizard-previous': 'previousStep',
             'click .location-wizard-next': 'nextStep',
-            'click .location-wizard-inject': 'inject',
             'click .location-wizard-save': 'save',
             'click .location-wizard-save-and-reset': 'saveAndReset'
         },
@@ -62,10 +64,6 @@ define([
             ];
 
             this.actions = [
-                {
-                    label: 'Inject in YAML',
-                    class: 'location-wizard-inject'
-                },
                 {
                     label: 'Save and add another',
                     class: 'location-wizard-save-and-reset'
@@ -155,16 +153,11 @@ define([
             return text && text.charAt(0).toUpperCase() + text.slice(1);
         },
 
-        inject: function() {
-            // TODO: Inject YAML location into the composer
-        },
-
         save: function(callback) {
             var that = this;
 
-            var view = this.steps[this.step].view;
-            if (view instanceof LocationProvisioning) {
-                view.setProvisioningProperties();
+            if (this.currentView instanceof LocationProvisioning) {
+                this.currentView.setProvisioningProperties();
             }
 
             this.location.save()
@@ -188,6 +181,8 @@ define([
             var that = this;
             this.save(function() {
                 that.step = 0;
+                that.type = '';
+                that.location = new Location.Model;
                 that.renderStep();
             });
         },
@@ -279,8 +274,9 @@ define([
                     type: 'select',
                     values: {
                         'jclouds:aws-ec2': 'Amazon',
-                        'jclouds:softlayer': 'Softlayer',
+                        'jclouds:google-compute-engine': 'Google',
                         'jclouds:openstack': 'Openstack',
+                        'jclouds:softlayer': 'Softlayer',
                         other: 'Other'
                     }
                 },
@@ -290,7 +286,7 @@ define([
                     type: 'text',
                     require: {
                         spec: [
-                            'jclouds:aws-ec2', 'jclouds:softlayer'
+                            'jclouds:aws-ec2', 'jclouds:google-compute-engine', 'jclouds:softlayer'
                         ]
                     },
                     disable: {
@@ -351,12 +347,12 @@ define([
                     type: 'password'
                 },
                 {
-                    id: 'publicKeyFile',
+                    id: 'privateKeyFile',
                     label: 'Private key',
                     type: 'textarea'
                 },
                 {
-                    id: 'publicKeyPassphrase',
+                    id: 'privateKeyPassphrase',
                     label: 'Private key passphrase',
                     type: 'test'
                 }
@@ -385,12 +381,12 @@ define([
                     type: 'password'
                 },
                 {
-                    id: 'publicKeyFile',
+                    id: 'privateKeyFile',
                     label: 'Private key',
                     type: 'textarea'
                 },
                 {
-                    id: 'publicKeyPassphrase',
+                    id: 'privateKeyPassphrase',
                     label: 'Private key passphrase',
                     type: 'test'
                 },
@@ -440,6 +436,7 @@ define([
                 _.each(field.values, function(value, key) {
                     input.append($('<option>').attr('value', key).html(value));
                 });
+                $('<input>').attr('name', field.id + '-other').insertAfter(input);
             }
 
             var value = '';
@@ -449,7 +446,7 @@ define([
                 value = this.wizard.location.get('config')[field.id];
             }
 
-            return $('<div>').addClass('control-group')
+            var $div =  $('<div>').addClass('control-group')
                 .append($('<label>')
                     .addClass('control-label deploy-label')
                     .attr('for', field.id)
@@ -464,6 +461,15 @@ define([
                         id: field.id,
                         name: field.id
                     }));
+
+            if (field.type === 'select' && _.has(field.values, 'other')) {
+                $div.append($('<input>')
+                    .attr('name', field.id + '-other')
+                    .addClass('location-other')
+                    .hide());
+            }
+
+            return $div;
         },
 
         onChange: function(event) {
@@ -471,13 +477,25 @@ define([
             var enable = true;
             var $elm = this.$(event.currentTarget);
 
+            if ($elm.attr('name') === 'spec') {
+                if ($elm.val() === 'other') {
+                    this.$('input[name=spec-other]').show();
+                } else {
+                    this.$('input[name=spec-other]').hide();
+                }
+            }
+
             // Update the location object based on the field values
-            if (_.contains(['name', 'spec'], $elm.attr('name'))) {
-                this.wizard.location.set($elm.attr('name'), $elm.val());
-            } else {
-                var config = {};
-                config[$elm.attr('name')] = $elm.data('list') ? $elm.val().split("\n") : $elm.val();
-                this.wizard.location.set('config', _.extend(this.wizard.location.get('config'), config));
+            if ($elm.val() !== '') {
+                if (_.contains(['name', 'spec'], $elm.attr('name'))) {
+                    this.wizard.location.set($elm.attr('name'), $elm.val());
+                } else if ($elm.attr('name') === 'spec-other') {
+                    this.wizard.location.set('spec', $elm.val());
+                } else {
+                    var config = {};
+                    config[$elm.attr('name')] = $elm.data('list') ? $elm.val().split("\n") : $elm.val();
+                    this.wizard.location.set('config', _.extend(this.wizard.location.get('config'), config));
+                }
             }
 
             this.$('input, select, textarea').each(function() {
@@ -517,11 +535,45 @@ define([
         className: 'location-wizard-body',
         template: _.template(LocationProvisioningHtml),
         events: {
-            'click #remove-config': 'removeProvisioningProperty',
-            'click #add-config': 'addProvisioningProperty'
+            'click .remove-entry': 'removeEntry',
+            'click .add-entry': 'addEntry'
         },
         wizard: null,
 
+        vmOptions: [
+            'minCore',
+            'minRam',
+            'osFamily',
+            'osVersionRegex',
+            'os64Bit',
+            'imageId',
+            'imageNameRegex',
+            'hardwareId',
+            'inboundPorts',
+            'securityGroups',
+            'domainName',
+            'userMetadata',
+            'machineCreateAttempts',
+            'destroyOnFailure'
+        ],
+        osOptions: [
+            'user',
+            'password',
+            'loginUser',
+            'privateKeyFile',
+            'privateKeyPassphrase',
+            'publicKeyFile',
+            'openIptables',
+            'installDevUrandom',
+            'useJcloudsSshInit'
+
+        ],
+        templateOptions: [
+            'subnetId',
+            'mapNewVolumeToDeviceName',
+            'securityGroupIds'
+        ],
+
         initialize: function() {
             this.wizard = this.options.wizard;
         },
@@ -534,19 +586,51 @@ define([
 
         setProvisioningProperties: function() {
             var config = {};
-            this.$('.app-add-wizard-config-entry').each(function() {
-                config[$(this).find('input[name=key]').val()] = $(this).find('input[name=value]').val();
+            this.$('.control-group').each(function() {
+                if ($(this).find('input.entry-key').val() !== '' && $(this).find('input.entry-value').val() !== '') {
+                    config[$(this).find('input.entry-key').val()] = $(this).find('input.entry-value').val();
+                }
             });
             this.wizard.location.set('config', _.extend(this.wizard.location.get('config'), config));
         },
 
-        addProvisioningProperty:function (event) {
-            var $row = _.template(EditConfigEntryHtml, {});
-            $(event.currentTarget).parent().prev().append($row);
+        addEntry:function (event) {
+            var that = this;
+            var $entry = $(_.template(LocationProvisioningEntry, {}));
+            $(event.currentTarget).prev().append($entry);
+
+            setTimeout(function() {
+                $entry.find('input.entry-key').easyAutocomplete({
+                    list: {
+                        match: {
+                            enabled: true
+                        }
+                    },
+                    categories: [
+                        {
+                            listLocation: 'vmOptions',
+                            header: 'VM Creation'
+                        },
+                        {
+                            listLocation: 'osOptions',
+                            header: 'OS Setup'
+                        },
+                        {
+                            listLocation: 'templateOptions',
+                            header: 'Template Options'
+                        }
+                    ],
+                    data: {
+                        vmOptions: that.vmOptions,
+                        osOptions: that.osOptions,
+                        templateOptions: that.templateOptions
+                    }
+                });
+            }, 100);
         },
 
-        removeProvisioningProperty:function (event) {
-            $(event.currentTarget).parent().parent().remove();
+        removeEntry:function (event) {
+            $(event.currentTarget).parent().remove();
         }
     });
 
diff --git a/src/main/webapp/assets/tpl/home/summaries.html b/src/main/webapp/assets/tpl/home/summaries.html
index 6b0237714..3e5d46ad4 100644
--- a/src/main/webapp/assets/tpl/home/summaries.html
+++ b/src/main/webapp/assets/tpl/home/summaries.html
@@ -30,10 +30,13 @@
     templates available
   </div></div>
    -->
+  <% if (locations.size() > 0) { %>
   <div class="roundedSummary"><div class="roundedSummaryText">
     <span class="big"><%- locations.size() %></span> location<%- locations.size()==1 ? "" : "s" %> configured<br/>
     <!-- with <span class="big">14</span> active machines  -->
-    <button class="addLocation" type="button">add location</button>
   </div></div>
+  <% } else { %>
+  <button class="addSummary addLocation roundedSummary" type="button">add location</button>
+  <% } %>
 
-  <button class="roundedSummary addApplication addApplication" type="button">add application</button>
\ No newline at end of file
+  <button class="addSummary addApplication roundedSummary" type="button">add application</button>
\ No newline at end of file
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html b/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html
new file mode 100644
index 000000000..56eeb3e03
--- /dev/null
+++ b/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html
@@ -0,0 +1,7 @@
+<div class="control-group">
+    <input class="entry-key input-medium" type="text" placeholder="Key" />
+    <input class="entry-value input-medium" type="text" placeholder="Value" />
+    <button class="btn btn-info btn-mini remove-entry" type="button">
+        <i class="icon-minus-sign"></i>
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html b/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
index c0d4834b4..3585b242f 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-provisioning.html
@@ -18,13 +18,6 @@
 -->
 
 <div class="tab-content">
-    <div class="control-group">
-        <div class="app-add-wizard-create-entity-label-newline deploy-label">Configuration</div>
-        <table class="config-table controls" cellspacing="5">
-        </table>
-        <div>
-            <button id="add-config" class="btn btn-mini btn-info">
-                Add Configuration</button>
-        </div>
-    </div>
+    <div class="entries-group"></div>
+    <button class="btn btn-mini btn-info add-entry">Add Configuration</button>
 </div>
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-type.html b/src/main/webapp/assets/tpl/location-wizard/location-type.html
index b4a607f27..ccfa2ed27 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-type.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-type.html
@@ -18,23 +18,25 @@
 -->
 
 <div class="tab-content">
-    <div class="location-type" data-type="cloud">
-        <div>
-            <i class="fa fa-cloud"></i>
-            <p class="location-type-title">Cloud</p>
+    <div class="location-type-container">
+        <div class="location-type" data-type="cloud">
+            <div>
+                <i class="fa fa-cloud"></i>
+                <p class="location-type-title">Cloud</p>
 
+            </div>
         </div>
-    </div>
-    <div class="location-type" data-type="localhost">
-        <div>
-            <i class="fa fa-laptop"></i>
-            <p class="location-type-title">Localhost</p>
+        <div class="location-type" data-type="localhost">
+            <div>
+                <i class="fa fa-laptop"></i>
+                <p class="location-type-title">Localhost</p>
+            </div>
         </div>
-    </div>
-    <div class="location-type" data-type="byon">
-        <div>
-            <i class="fa fa-file-o"></i>
-            <p class="location-type-title">BYON</p>
+        <div class="location-type" data-type="byon">
+            <div>
+                <i class="fa fa-file-o"></i>
+                <p class="location-type-title">BYON</p>
+            </div>
         </div>
     </div>
 </div>

From 1785d6d287519214b53c7655bca1a09ae103c039 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Wed, 16 Mar 2016 12:30:01 +0000
Subject: [PATCH 05/11] Add location wizard into the YAML editor

---
 src/main/webapp/assets/js/router.js           |  1 +
 src/main/webapp/assets/js/view/editor.js      | 49 +++++++++++++++++--
 .../webapp/assets/js/view/location-wizard.js  | 10 ++--
 .../assets/tpl/editor/location-alert.html     | 34 +++++++++++++
 4 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 src/main/webapp/assets/tpl/editor/location-alert.html

diff --git a/src/main/webapp/assets/js/router.js b/src/main/webapp/assets/js/router.js
index aaccf7045..26722ac2c 100644
--- a/src/main/webapp/assets/js/router.js
+++ b/src/main/webapp/assets/js/router.js
@@ -183,6 +183,7 @@ define([
             var editorView = new EditorView({
                 collection: this.applications,
                 appRouter: this,
+                locations: this.locations,
                 type: type,
                 typeId: typeId,
                 content: content
diff --git a/src/main/webapp/assets/js/view/editor.js b/src/main/webapp/assets/js/view/editor.js
index 83200dfea..c5a24f3c3 100644
--- a/src/main/webapp/assets/js/view/editor.js
+++ b/src/main/webapp/assets/js/view/editor.js
@@ -17,8 +17,11 @@
  * under the License.
 */
 define([
-    "underscore", "jquery", "backbone", "model/catalog-application", "js-yaml", "brooklyn-yaml-completion-proposals", "codemirror",
+    "underscore", "jquery", "backbone", "model/catalog-application",
+    "model/location", "view/location-wizard", "view/viewutils",
+    "js-yaml", "brooklyn-yaml-completion-proposals", "codemirror",
     "text!tpl/editor/page.html",
+    "text!tpl/editor/location-alert.html",
 
     // no constructor
     "jquery-slideto",
@@ -26,7 +29,7 @@ define([
     "jquery-ba-bbq",
     "handlebars",
     "bootstrap"
-], function (_, $, Backbone, CatalogApplication, jsYaml, BrooklynCompletion, CodeMirror, EditorHtml) {
+], function (_, $, Backbone, CatalogApplication, Location, LocationWizard, ViewUtils, jsYaml, BrooklynCompletion, CodeMirror, EditorHtml, LocationAlertHtml) {
     var _DEFAULT_BLUEPRINT = 
         'name: Sample Blueprint\n'+
         'description: runs `sleep` for sixty seconds then stops triggering ON_FIRE in Brooklyn\n'+
@@ -64,6 +67,7 @@ define([
             'click #button-switch-catalog':'switchModeCatalog',
             'click #button-example':'populateExampleBlueprint',
             'click #button-docs':'openDocumentation',
+            'click .add-location':'createLocation'
         },
         editorTemplate:_.template(EditorHtml),
 
@@ -86,18 +90,36 @@ define([
                     vm.initializeEditor();
                 }
             });
+            this.options.locations.on('reset', this.renderLocationAlert, this);
+
+            ViewUtils.fetchRepeatedlyWithDelay(this, this.options.locations, { fetchOptions: { reset: true }, doitnow: true });
         },
         setMode: function(mode) {
             if (this.mode === mode) return;
             this.mode = mode;
             this.refresh();
         },
+        beforeClose:function () {
+            this.options.locations.off('reset', this.renderLocationAlert);
+        },
         render:function (eventName) {
-            this.$el.html(_.template(EditorHtml, {}));
+            this.$el
+                .append(_.template(LocationAlertHtml, {
+                    locations: this.options.locations
+                }))
+                .append(_.template(EditorHtml))
+                .find('#location-alert').hide();
             this.loadEditor();
             this.refresh();
             return this;
         },
+        renderLocationAlert: function(event) {
+            if (event.size() === 0) {
+                this.$('#location-alert').show();
+            } else {
+                this.$('#location-alert').hide();
+            }
+        },
         refresh: function() {
             $("#button-run", this.$el).html(this.mode==MODE_CATALOG ? "Add to Catalog" : "Deploy");
             if (this.mode==MODE_CATALOG) {
@@ -358,6 +380,27 @@ define([
             this.$('div.error-message .error-message-text').html(_.escape(_text));
             // flash the error, but make sure it goes away (we do not currently have any other logic for hiding this error message)
             this.$('div.error-message').slideDown(250).delay(10000).slideUp(500);
+        },
+        createLocation: function () {
+            if (this._modal) {
+                this._modal.close()
+            }
+            var that = this;
+            this._modal = new LocationWizard({
+                onLocationCreated: function(wizard, data) {
+                    that.options.locations.fetch({reset:true});
+                },
+                onFinish: function(wizard) {
+                    that.$(".add-app #modal-container .modal").modal('hide');
+                },
+                isModal: true
+            });
+            this.$(".modal-location #modal-container").html(this._modal.render().el);
+            this.$(".modal-location #modal-container .modal")
+                .on("hidden",function () {
+                    that._modal.close();
+                    that.options.locations.fetch({reset:true});
+                }).modal('show');
         }
     });
 
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 7cf516fef..a6ade8163 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -97,6 +97,10 @@ define([
                 });
             }
 
+            if (this.currentView) {
+                this.currentView.close();
+            }
+
             if (_.isObject(step.view)) {
                 this.currentView = new step.view({wizard: this});
                 this.$('.modal-body').html(this.currentView.render().el);
@@ -123,9 +127,6 @@ define([
 
         previousStep: function() {
             if (this.step > 0) {
-                if (this.currentView) {
-                    this.currentView.close();
-                }
                 this.step--;
                 this.renderStep();
             }
@@ -133,9 +134,6 @@ define([
 
         nextStep: function() {
             if (this.step < this.steps.length - 1) {
-                if (this.currentView) {
-                    this.currentView.close();
-                }
                 this.step++;
                 this.renderStep();
             }
diff --git a/src/main/webapp/assets/tpl/editor/location-alert.html b/src/main/webapp/assets/tpl/editor/location-alert.html
new file mode 100644
index 000000000..d4ff0234a
--- /dev/null
+++ b/src/main/webapp/assets/tpl/editor/location-alert.html
@@ -0,0 +1,34 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div id="location-alert">
+    <div class="row row-fluid">
+        <div class="span12">
+            <div class="alert alert-block fade in">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                <p><strong>Warning!</strong> There is no location defined yet. You should create one before deploying a blueprint</p>
+                <p><button class="btn btn-warning add-location">Create a location</button></p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal-location add-app">
+    <div id="modal-container"></div>
+</div>
\ No newline at end of file

From cea004a1c891f64adb03c82452ab4a15fb44c676 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Thu, 17 Mar 2016 10:56:40 +0000
Subject: [PATCH 06/11] Add "Edit YAML" button if user wants to manually edit
 the generated location

---
 src/main/webapp/assets/js/view/editor.js      |  2 +-
 .../webapp/assets/js/view/location-wizard.js  | 50 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/assets/js/view/editor.js b/src/main/webapp/assets/js/view/editor.js
index c5a24f3c3..db10181bb 100644
--- a/src/main/webapp/assets/js/view/editor.js
+++ b/src/main/webapp/assets/js/view/editor.js
@@ -80,7 +80,7 @@ define([
             } else if (this.options.type === MODE_CATALOG) {
                 this.setMode(MODE_CATALOG);
             } else {
-                console.log("unknown mode '"+this.option.type+"'; using '"+MODE_APP+"'");
+                console.log("unknown mode '"+this.options.type+"'; using '"+MODE_APP+"'");
                 this.setMode(MODE_APP);
             }
             this.options.catalog = new CatalogApplication.Collection();
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index a6ade8163..b7c6c6b7e 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -28,11 +28,18 @@ define([
 
     'jquery-easy-autocomplete'
 ], function(_, Backbone, $, Util, Location, ModalHtml, LocationTypeHtml, LocationConfigurationHtml, LocationProvisioningHtml, LocationProvisioningEntry) {
+    var _YAML_HEADER = [
+        'brooklyn.catalog:',
+        '  version: 0.0.1',
+        '  items:'
+    ];
+
     var Wizard = Backbone.View.extend({
         template: _.template(ModalHtml),
         events: {
             'click .location-wizard-previous': 'previousStep',
             'click .location-wizard-next': 'nextStep',
+            'click .location-wizard-edit': 'edit',
             'click .location-wizard-save': 'save',
             'click .location-wizard-save-and-reset': 'saveAndReset'
         },
@@ -64,6 +71,10 @@ define([
             ];
 
             this.actions = [
+                {
+                    label: 'Edit in YAML',
+                    class: 'location-wizard-edit'
+                },
                 {
                     label: 'Save and add another',
                     class: 'location-wizard-save-and-reset'
@@ -151,6 +162,45 @@ define([
             return text && text.charAt(0).toUpperCase() + text.slice(1);
         },
 
+        edit: function() {
+            var baseSpacing = '  ';
+
+            var content = [].concat(_YAML_HEADER);
+
+            content.push(baseSpacing + '- id: ' + this.location.get('name'));
+
+            baseSpacing += '  ';
+            content.push(baseSpacing + 'itemType: location');
+            content.push(baseSpacing + 'item:');
+
+            baseSpacing += '  ';
+            content.push(baseSpacing + 'type: ' + this.location.get('spec'));
+
+            var config = this.location.get('config');
+            if (_.keys(config).length > 0) {
+                content.push(baseSpacing + 'brooklyn.config:');
+                baseSpacing += '  ';
+
+                _.each(config, function(value, key) {
+                    if (_.isArray(value)) {
+                        content.push(baseSpacing + key + ':');
+                        _.each(value, function(valueValue) {
+                            content.push(baseSpacing + '- ' + valueValue);
+                        });
+                    } else if (_.isObject(value)) {
+                        content.push(baseSpacing + key + ':');
+                        _.each(value, function(valueValue, valueKey) {
+                            content.push(baseSpacing + '  ' + valueKey + ': ' + valueValue);
+                        });
+                    } else {
+                        content.push(baseSpacing + key + ': ' + value);
+                    }
+                });
+            }
+
+            Backbone.history.navigate("/v1/editor/catalog/_/"+ encodeURIComponent(content.join("\n")), {trigger: true});
+        },
+
         save: function(callback) {
             var that = this;
 

From 2851c1ef81bf03b148455755fdce1f43961f58c8 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Thu, 17 Mar 2016 12:30:22 +0000
Subject: [PATCH 07/11] Fix build issues

---
 .../location-provisioning-entry.html          | 19 +++++++++++++++++++
 src/test/javascript/config.txt                |  2 ++
 2 files changed, 21 insertions(+)

diff --git a/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html b/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html
index 56eeb3e03..ea1d731c0 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-provisioning-entry.html
@@ -1,3 +1,22 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
 <div class="control-group">
     <input class="entry-key input-medium" type="text" placeholder="Key" />
     <input class="entry-value input-medium" type="text" placeholder="Value" />
diff --git a/src/test/javascript/config.txt b/src/test/javascript/config.txt
index 5052f5ebf..87513b9d2 100644
--- a/src/test/javascript/config.txt
+++ b/src/test/javascript/config.txt
@@ -30,6 +30,7 @@
         "jquery-slideto":"js/util/jquery.slideto",
         "jquery-wiggle":"js/libs/jquery.wiggle.min",
         "jquery-ba-bbq":"js/libs/jquery.ba-bbq.min",
+        "jquery-easy-autocomplete": "js/libs/jquery.easy-autocomplete",
         "moment":"js/libs/moment",
         "handlebars":"js/libs/handlebars-1.0.rc.1",
         "brooklyn":"js/util/brooklyn",
@@ -76,6 +77,7 @@
         "jquery-slideto": { deps: [ "jquery" ] },
         "jquery-wiggle": { deps: [ "jquery" ] },
         "jquery-ba-bbq": { deps: [ "jquery" ] },
+        "jquery-easy-autocomplete": { deps: [ "jquery" ] },
         "handlebars": { deps: [ "jquery" ] },
         "bootstrap": { deps: [ "jquery" ] /* http://stackoverflow.com/questions/9227406/bootstrap-typeerror-undefined-is-not-a-function-has-no-method-tab-when-us */ }
     },

From 193c5b88af2d77ece02f90bd6d043ace80ed7b31 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Thu, 17 Mar 2016 12:46:15 +0000
Subject: [PATCH 08/11] Add source exclusion for licensing

---
 src/main/license/source-inclusions.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/license/source-inclusions.yaml b/src/main/license/source-inclusions.yaml
index d61d6d649..1c3040e52 100644
--- a/src/main/license/source-inclusions.yaml
+++ b/src/main/license/source-inclusions.yaml
@@ -43,4 +43,5 @@
 - id: codemirror.js
 - id: font-awesome-fonts
 - id: font-awesome-code
+- id: jquery.easy-autocomplete.js
 

From fd32f2d20e0358ea9711389f5474283974186c8e Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Thu, 17 Mar 2016 16:45:14 +0000
Subject: [PATCH 09/11] Add help texts on all steps of the location wizard.

---
 src/main/webapp/assets/css/base.css           |  4 +
 .../webapp/assets/js/view/location-wizard.js  | 95 ++++++++++++-------
 .../tpl/location-wizard/location-type.html    |  8 +-
 3 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/src/main/webapp/assets/css/base.css b/src/main/webapp/assets/css/base.css
index 6ccd08b67..8f05e5928 100644
--- a/src/main/webapp/assets/css/base.css
+++ b/src/main/webapp/assets/css/base.css
@@ -1490,6 +1490,10 @@ textarea.param-value {
 .location-type-container {
     overflow: hidden;
 }
+.help-text {
+    padding-top: 10px;
+    font-style: italic;
+}
 .location-type {
     width: 160px;
     height: 200px;
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index b7c6c6b7e..74374e27c 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -60,12 +60,11 @@ define([
                 },
                 {
                     title: '<%= type %> Location - Configuration',
-                    subtitle: 'Required information about your location',
                     view: LocationConfiguration
                 },
                 {
                     title: '<%= type %> Location - Provisioning',
-                    subtitle: 'Provisioning information about your location',
+                    subtitle: 'In many target locations, additional configuration may be supported. Enter any such options here. For information on available options consult the <a href="https://brooklyn.apache.org/v/latest/ops/locations/">Brooklyn documentation</a>. Alternatively you can skip this step.',
                     view: LocationProvisioning
                 }
             ];
@@ -98,7 +97,11 @@ define([
             var step = this.steps[this.step];
 
             this.$('.location-wizard-title').html(_.template(step.title)({type: this.capitalize(this.type)}));
-            this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type}));
+            if (_.has(step, 'subtitle')) {
+                this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type})).show();
+            } else {
+                this.$('.location-wizard-subtitle').hide();
+            }
 
             // Render actions buttons
             var actionContainer = this.$('.location-wizard-actions').empty();
@@ -247,6 +250,8 @@ define([
         className: 'location-wizard-body',
         template: _.template(LocationTypeHtml),
         events: {
+            'mouseenter .location-type': 'onDisplayHelp',
+            'mouseleave .location-type': 'onHideHelp',
             'click .location-type': 'onSelectType'
         },
 
@@ -272,6 +277,15 @@ define([
             return this;
         },
 
+        onDisplayHelp: function(event) {
+            var $elm = this.$(event.currentTarget);
+            this.$('.help-text').html($elm.data('help')).show();
+        },
+
+        onHideHelp: function(event) {
+            this.$('.help-text').html('').hide();
+        },
+
         onSelectType: function(event) {
             var $elm = this.$(event.currentTarget);
             var type = $elm.data('type');
@@ -306,19 +320,20 @@ define([
             cloud: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
-                    require: true
+                    help: 'Display name used throughout the web console'
                 },
                 {
                     id: 'spec',
-                    label: 'Cloud type',
+                    label: 'Cloud Provider',
                     type: 'select',
                     values: {
                         'jclouds:aws-ec2': 'Amazon',
@@ -330,13 +345,9 @@ define([
                 },
                 {
                     id: 'region',
-                    label: 'Cloud region',
+                    label: 'Cloud Region',
                     type: 'text',
-                    require: {
-                        spec: [
-                            'jclouds:aws-ec2', 'jclouds:google-compute-engine', 'jclouds:softlayer'
-                        ]
-                    },
+                    help: 'Some cloud providers have different regions for you to use. You can enter here this information',
                     disable: {
                         spec: [
                             'jclouds:openstack'
@@ -345,8 +356,9 @@ define([
                 },
                 {
                     id: 'endpoint',
-                    label: 'Cloud endpoint',
+                    label: 'Cloud Endpoint',
                     type: 'text',
+                    help: 'Cloud endpoint used by Brooklyn to communicate with their API',
                     require: {
                         spec: [
                             'jclouds:openstack'
@@ -360,13 +372,15 @@ define([
                 },
                 {
                     id: 'identity',
-                    label: 'Identity',
+                    label: 'Cloud Identity',
                     type: 'text',
+                    help: 'Alphanumerical string given by your cloud provider. It acts as a login',
                     require: true
                 },
                 {
                     id: 'credential',
-                    label: 'Credential',
+                    label: 'Cloud Credential',
+                    help: 'Alphanumerical string given by your cloud provider. It acts as a password',
                     type: 'text',
                     require: true
                 }
@@ -374,74 +388,87 @@ define([
             localhost: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
+                    help: 'Display name used throughout the web console',
                     require: true
                 },
                 {
                     id: 'user',
                     label: 'User',
-                    type: 'text'
+                    type: 'text',
+                    help: 'The user to use to connect to localhost'
                 },
                 {
                     id: 'password',
                     label: 'Password',
-                    type: 'password'
+                    type: 'password',
+                    help: 'The password to use to connect to localhost'
                 },
                 {
                     id: 'privateKeyFile',
-                    label: 'Private key',
-                    type: 'textarea'
+                    label: 'Private Key',
+                    type: 'textarea',
+                    help: 'Content of a private key file use to connect to localhost (the corresponding public key needs to be add into your <code>.authorized_key</code>code> file)'
                 },
                 {
                     id: 'privateKeyPassphrase',
-                    label: 'Private key passphrase',
-                    type: 'test'
+                    label: 'Private Key Passphrase',
+                    type: 'text',
+                    help: 'The passphrase to unlock the private key specified abve (if applicable)'
                 }
             ],
             byon: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
+                    help: 'Display name used throughout the web console',
                     require: true
                 },
                 {
                     id: 'user',
                     label: 'User',
-                    type: 'text'
+                    type: 'text',
+                    help: 'The user to use to connect to localhost'
                 },
                 {
                     id: 'password',
                     label: 'Password',
-                    type: 'password'
+                    type: 'password',
+                    help: 'The password to use to connect to localhost'
                 },
                 {
                     id: 'privateKeyFile',
-                    label: 'Private key',
-                    type: 'textarea'
+                    label: 'Private Key',
+                    type: 'textarea',
+                    help: 'Content of a private key file use to connect to localhost (the corresponding public key needs to be add into your <code>.authorized_key</code>code> file)'
                 },
                 {
                     id: 'privateKeyPassphrase',
-                    label: 'Private key passphrase',
-                    type: 'test'
+                    label: 'Private Key Passphrase',
+                    type: 'text',
+                    help: 'The passphrase to unlock the private key specified abve (if applicable)'
                 },
                 {
                     id: 'hosts',
                     label: 'Hosts',
                     type: 'textarea',
+                    help: 'List of host IP addresses, one per line',
                     list: true,
                     require: true
                 }
@@ -517,6 +544,10 @@ define([
                     .hide());
             }
 
+            if (_.has(field, 'help')) {
+                $div.append($('<p>').addClass('help-block').html($('<small>').html(field.help)));
+            }
+
             return $div;
         },
 
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-type.html b/src/main/webapp/assets/tpl/location-wizard/location-type.html
index ccfa2ed27..7f9a57c98 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-type.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-type.html
@@ -19,24 +19,24 @@
 
 <div class="tab-content">
     <div class="location-type-container">
-        <div class="location-type" data-type="cloud">
+        <div class="location-type" data-type="cloud" data-help="May be servers or cloud providers which provide access to servers">
             <div>
                 <i class="fa fa-cloud"></i>
                 <p class="location-type-title">Cloud</p>
-
             </div>
         </div>
-        <div class="location-type" data-type="localhost">
+        <div class="location-type" data-type="localhost" data-help="Current machine where Brooklyn is running">
             <div>
                 <i class="fa fa-laptop"></i>
                 <p class="location-type-title">Localhost</p>
             </div>
         </div>
-        <div class="location-type" data-type="byon">
+        <div class="location-type" data-type="byon" data-help="Set machines identified by their IP addresses, such as physical servers or vagrant boxes">
             <div>
                 <i class="fa fa-file-o"></i>
                 <p class="location-type-title">BYON</p>
             </div>
         </div>
     </div>
+    <p class="help-text muted"></p>
 </div>

From 3a49e64ce2e5ed49598c3b18c35488626974d9c4 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Fri, 18 Mar 2016 09:55:38 +0000
Subject: [PATCH 10/11] Swap localhost main type for advanced

---
 src/main/webapp/assets/js/view/catalog.js     |  1 +
 .../webapp/assets/js/view/location-wizard.js  | 98 +++++++++++--------
 .../tpl/location-wizard/location-type.html    | 12 +--
 3 files changed, 62 insertions(+), 49 deletions(-)

diff --git a/src/main/webapp/assets/js/view/catalog.js b/src/main/webapp/assets/js/view/catalog.js
index 049335509..0dfd3da43 100644
--- a/src/main/webapp/assets/js/view/catalog.js
+++ b/src/main/webapp/assets/js/view/catalog.js
@@ -191,6 +191,7 @@ define([
                 addViewParent.loadAccordionItem("locations", data.id, true);
             },
             onFinish: function(wizard, data) {
+                addViewParent.loadAccordionItem("locations", data.id);
                 addView.clearWithHtml( "Added: "+data.id+". Loading..." );
             }
         }).render();
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 74374e27c..375baa10d 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -105,7 +105,7 @@ define([
 
             // Render actions buttons
             var actionContainer = this.$('.location-wizard-actions').empty();
-            if ((this.type === 'cloud' && this.step === 2) || (this.type !== 'cloud' && this.step === 1)) {
+            if (this.step === 2 || (this.type === 'byon' && this.step === 1)) {
                 _.each(this.actions, function(element, index, list) {
                     actionContainer.append($('<button>').addClass('btn btn-mini btn-info location-wizard-action ' + element.class).html(element.label));
                 });
@@ -130,7 +130,7 @@ define([
             }
             if (this.step == this.steps.length - 1) {
                 next.hide();
-            } else if (this.step == this.steps.length - 2 && this.type !== 'cloud') {
+            } else if (this.step == this.steps.length - 2 && this.type === 'byon') {
                 next.hide();
             } else {
                 next.show();
@@ -385,7 +385,7 @@ define([
                     require: true
                 }
             ],
-            localhost: [
+            byon: [
                 {
                     id: 'name',
                     label: 'Location ID',
@@ -404,28 +404,36 @@ define([
                     id: 'user',
                     label: 'User',
                     type: 'text',
-                    help: 'The user to use to connect to localhost'
+                    help: 'The user to use to connect to the machines'
                 },
                 {
                     id: 'password',
                     label: 'Password',
                     type: 'password',
-                    help: 'The password to use to connect to localhost'
+                    help: 'The password to use to connect to the machines'
                 },
                 {
                     id: 'privateKeyFile',
                     label: 'Private Key',
                     type: 'textarea',
-                    help: 'Content of a private key file use to connect to localhost (the corresponding public key needs to be add into your <code>.authorized_key</code>code> file)'
+                    help: 'Content of a private key file use to connect to the machines (the corresponding public key needs to be add into your <code>.authorized_key</code>code> file)'
                 },
                 {
                     id: 'privateKeyPassphrase',
                     label: 'Private Key Passphrase',
                     type: 'text',
                     help: 'The passphrase to unlock the private key specified abve (if applicable)'
+                },
+                {
+                    id: 'hosts',
+                    label: 'Hosts',
+                    type: 'textarea',
+                    help: 'List of host IP addresses, one per line',
+                    list: true,
+                    require: true
                 }
             ],
-            byon: [
+            advanced: [
                 {
                     id: 'name',
                     label: 'Location ID',
@@ -438,38 +446,11 @@ define([
                     label: 'Location Name',
                     type: 'text',
                     help: 'Display name used throughout the web console',
-                    require: true
-                },
-                {
-                    id: 'user',
-                    label: 'User',
-                    type: 'text',
-                    help: 'The user to use to connect to localhost'
-                },
-                {
-                    id: 'password',
-                    label: 'Password',
-                    type: 'password',
-                    help: 'The password to use to connect to localhost'
                 },
                 {
-                    id: 'privateKeyFile',
-                    label: 'Private Key',
-                    type: 'textarea',
-                    help: 'Content of a private key file use to connect to localhost (the corresponding public key needs to be add into your <code>.authorized_key</code>code> file)'
-                },
-                {
-                    id: 'privateKeyPassphrase',
-                    label: 'Private Key Passphrase',
+                    id: 'spec',
+                    label: 'Parent Location',
                     type: 'text',
-                    help: 'The passphrase to unlock the private key specified abve (if applicable)'
-                },
-                {
-                    id: 'hosts',
-                    label: 'Hosts',
-                    type: 'textarea',
-                    help: 'List of host IP addresses, one per line',
-                    list: true,
                     require: true
                 }
             ]
@@ -479,7 +460,7 @@ define([
         initialize: function() {
             this.wizard = this.options.wizard;
 
-            if (_.contains(['localhost', 'byon'], this.wizard.type)) {
+            if (this.wizard.type === 'byon') {
                 this.wizard.location.set('spec', this.wizard.type);
             }
         },
@@ -503,15 +484,15 @@ define([
         },
 
         generateField: function(field) {
-            var input = $('<input>').attr('type', field.type);
+            var $input = $('<input>').attr('type', field.type);
             if (field.type === 'textarea') {
-                input = $('<textarea>');
+                $input = $('<textarea>');
             } else if (field.type === 'select') {
-                input = $('<select>');
+                $input = $('<select>');
                 _.each(field.values, function(value, key) {
-                    input.append($('<option>').attr('value', key).html(value));
+                    $input.append($('<option>').attr('value', key).html(value));
                 });
-                $('<input>').attr('name', field.id + '-other').insertAfter(input);
+                $('<input>').attr('name', field.id + '-other').insertAfter($input);
             }
 
             var value = '';
@@ -526,7 +507,7 @@ define([
                     .addClass('control-label deploy-label')
                     .attr('for', field.id)
                     .html(field.label))
-                .append(input
+                .append($input
                     .val(value)
                     .data('list', _.isBoolean(field.list) ? field.list : false)
                     .data('require', _.isBoolean(field.require) ? field.require : false)
@@ -548,6 +529,37 @@ define([
                 $div.append($('<p>').addClass('help-block').html($('<small>').html(field.help)));
             }
 
+            if (field.type === 'text' && field.id === 'spec') {
+                var locations = new Location.Collection;
+                locations.fetch({
+                    success: function (model) {
+                        $input.easyAutocomplete({
+                            list: {
+                                match: {
+                                    enabled: true
+                                }
+                            },
+                            categories: [
+                                {
+                                    listLocation: 'catalog',
+                                    header: 'Catalog Locations'
+                                },
+                                {
+                                    listLocation: 'spec',
+                                    header: 'Spec'
+                                }
+                            ],
+                            data: {
+                                catalog: _.map(model.models, function(item) {
+                                    return item.getIdentifierName();
+                                }),
+                                spec: ['localhost']
+                            }
+                        });
+                    }
+                });
+            }
+
             return $div;
         },
 
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-type.html b/src/main/webapp/assets/tpl/location-wizard/location-type.html
index 7f9a57c98..544105d3b 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-type.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-type.html
@@ -25,18 +25,18 @@
                 <p class="location-type-title">Cloud</p>
             </div>
         </div>
-        <div class="location-type" data-type="localhost" data-help="Current machine where Brooklyn is running">
-            <div>
-                <i class="fa fa-laptop"></i>
-                <p class="location-type-title">Localhost</p>
-            </div>
-        </div>
         <div class="location-type" data-type="byon" data-help="Set machines identified by their IP addresses, such as physical servers or vagrant boxes">
             <div>
                 <i class="fa fa-file-o"></i>
                 <p class="location-type-title">BYON</p>
             </div>
         </div>
+        <div class="location-type" data-type="advanced" data-help="Can be any location type available in Brooklyn">
+            <div>
+                <i class="fa fa-bolt"></i>
+                <p class="location-type-title">Advanced</p>
+            </div>
+        </div>
     </div>
     <p class="help-text muted"></p>
 </div>

From d6c47ff919b93b62cd03d62bf902ffc8bb0bd537 Mon Sep 17 00:00:00 2001
From: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Date: Fri, 18 Mar 2016 10:57:42 +0000
Subject: [PATCH 11/11] Fix small bugs within the location wizard

---
 src/main/webapp/assets/js/view/location-wizard.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index 375baa10d..12680a57d 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -166,6 +166,10 @@ define([
         },
 
         edit: function() {
+§            if (this.currentView instanceof LocationProvisioning) {
+                this.currentView.setProvisioningProperties();
+            }
+
             var baseSpacing = '  ';
 
             var content = [].concat(_YAML_HEADER);
@@ -606,7 +610,7 @@ define([
                         disable = disable && _.contains(values, that.$('[name=' + key + ']').val());
                     });
                     if (disable) {
-                        $(this).attr('disabled', 'disabled');
+                        $(this).attr('disabled', 'disabled').val('');
                     } else {
                         $(this).removeAttr('disabled');
                     }