JSFormWizard: (function() {
      /**
       * This class is responsible for constructing a form from an object of
       * context variables and values. It knows how to map types of variables
       * to their respective form fields and how to show selected checkboxes
       * and values.
       *
       * authored by: Dayne Jones
       * April 2017
       */
      getColorPicker = function(name, context, selectedColor) {
        var colors = ['#FFFFFF', '#64B3DF', '#ACD373', '#EFD26C', '#FD7F54', '#E95050', '#766ACF', '#EC85CC', '#000000'];
        var color_picker_string = '';
        var customSelected = false;

        if (selectedColor && colors.indexOf(selectedColor) === -1) {
          customSelected = true;
        }

        var getIsChecked = function(i) {
          // determines whether an input should be checked
          return (colors[i] === selectedColor ? 'checked' : '');
        };

        for (var i=0; i<colors.length; i++) {
          color_picker_string += '<label class="color-picker">' +
            '<input type="checkbox" data-type="color" name="' + name + '_color' +
            '" class="custom" value="' + colors[i] + '"' + getIsChecked(i) + '><span></span></label>';
        }

        var getCustomSelectedColor = function() {
          // returns the custom color only if a custom color is selected
          return (customSelected ? selectedColor : '#000');
        };

        var getCustomSelected = function() {
          // determines whether a custom color is selected
          return (customSelected ? 'checked' : '');
        };

        color_picker_string += '<label class="color-picker">' +
            '<input type="checkbox" data-type="color" name="' + name + '_color' +
            '" class="custom custom-color" value="' + getCustomSelectedColor() + '"' +
             getCustomSelected() + '><span></span></label>' +
            '<div class="popover-box popover-arrow left">' +
            '<input type="text" data-type="color" class="new" value="#"></div></label>';

        return color_picker_string;
      };

      getTextField = function(name, context) {
        return '<fieldset class="text-fieldset">' +
          getTextFieldInner(name, context) +
        '</fieldset>';
      };

      getFontOptions = function(value) {
        var fontOptions = {
          'Arial, sans-serif': 'Arial',
          'Comic Sans MS, cursive, sans-serif': 'Comic Sans',
          'Courier New, Courier, monospace': 'Courier',
          'Georgia, serif': 'Georgia',
          'Impact, Charcoal, sans-serif': 'Impact',
          'Lucida Sans Unicode, Lucida Grande, sans-serif': 'Lucida',
          'Palatino Linotype, Palatino, serif': 'Palantino',
          'Tahoma, Geneva, sans-serif': 'Tahoma',
          'Times New Roman, Times, serif': 'Times New Roman',
          'Trebuchet MS, Helvetica, sans-serif': 'Trebuchet',
          'Verdana, Geneva, sans-serif': 'Verdana',
          'inherit': 'Inherit From Your Page'
        };

        var fontString = '';
        if (!value) {
            value = 'inherit';
        }
        for (var font in fontOptions) {
          if (fontOptions.hasOwnProperty(font)) {
            fontString = fontString + '<option ' + (value === font ? 'selected' : '' ) + ' value="' + font + '">' + fontOptions[font] + '</option>';
          }
        };

        return fontString;
      };

      getTextFieldInner = function(name, context) {
        var fontSize = context.style ? context.style['font-size'].replace('px', '') : '';
        var fontFamily = context.style ? context.style['font-family'] : '';
        var fontWeight = context.style ? context.style['font-weight'] : '';
        var fontStyle = context.style ? context.style['font-style'] : '';
        var textDecoration = context.style ? context.style['text-decoration'] : '';
        var selectedColor = context.style ? context.style.color : '';
        var displayName = getDisplayName(name);
        return '<h5 for="' + name + '">' + displayName + '</h5>' +
               '<input type="text" data-type="text" name="' + name + '" value="' + context.value + '">' +
               '<h5>Text Color</h5>' +
               getColorPicker(name, context, selectedColor) +
               '<h5 for="' + name + '_fontSize">Font Size</h5>' +
               '<input data-type="fontSize" type="number" min="1" max="100" name="' + name + '_fontSize" value="' + fontSize + '">' +
               '<h5 for="' + name + '_fontFamily">Font Family</h5>' +
               '<select data-type="fontFamily" name="' + name + '_fontFamily" value="' + fontFamily + '">' +
                 getFontOptions(fontFamily) +
               '</select>' +
               '<h5>Font Style</h5>' +
               '<input type="checkbox" data-type="fontWeight" id="' + name + '_fontWeight"' + (fontWeight ? 'checked' : '' ) + ' name="' + name + '_fontWeight"' + (fontWeight ? 'checked' : '' ) + '>' +
               '<label class="font-stylelbl style-bold" for="' + name + '_fontWeight">B</label>' +
               '<input data-type="fontStyle" type="checkbox" id="' + name + '_fontStyle"' + (fontStyle ? 'checked' : '' ) + ' name="' + name + '_fontStyle"' + (fontStyle ? 'checked' : '' ) + '>' +
               '<label class="font-stylelbl style-italic" for="' + name + '_fontStyle">I</label>' +
               '<input type="checkbox" data-type="textDecoration" id="' + name + '_textDecoration"' + (textDecoration ? 'checked' : '' ) + ' name="' + name + '_textDecoration"' + (textDecoration ? 'checked' : '' ) + '>' +
               '<label class="font-stylelbl style-underline" for="' + name + '_textDecoration">U</label>';
      };

      getButtonHrefField = function(name, context) {
        var button_id = name.replace('button_href_', '');
        return '<fieldset data-button-id="' + button_id + '" class="button-href-fieldset" id="id_' + name + '">' +
                '<h5>Link URL</h5>' +
               '<input type="text" data-type="text" name="' + name + '" value="' + context.value + '">' +
             '</fieldset>';
      };

      getButtonClassField = function(name, context) {
        var displayName = getDisplayName(name);
        var button_id = name.replace('button_class_', '');
        var borderRadius = context.style && context.style['border-radius'] ? context.style['border-radius'].replace('px', '') : '0';
        var selectedColor = context.style ? context.style['background-color'] : '';
        return '<fieldset data-button-id="' + button_id + '" class="button-class-fieldset" id="id_' + name + '">' +
                 '<input type="hidden" name="' + name + '" value="' + name.replace('_class', '') + '">' +
                 '<h5>Rounded Corners</h5>' +
                 '<input data-type="borderRadius" id="' + name + '_borderRadius" type="number"' +
                   'name="' + name + '_borderRadius" min="0" max="500" value="' + borderRadius + '" />' +
                 '<h5>Background Color</h5>' +
                 getColorPicker(name, context, selectedColor) +
               '</fieldset>';
      }

      getButtonField = function(name, context) {
        return '<fieldset class="button-fieldset">' +
               getTextFieldInner(name, context) +
               '</fieldset>';
      };

      getImageField = function(name, context) {
        var displayName = getDisplayName(name);
        var formAction = CONFIG.api_url + 'behavioral_targeting/campaign/' + Abandonment.campaign.id + '/upload_image';

        return '<fieldset class="image-fieldset">' +
              '<h5 for="' + name + '">' + displayName + '</h5>' +
              '<input id="id_' + name +  '_file" accept="image/*" class="hidden ajax-file-input" data-site-id="' + Api.getSiteId() + '"' +
              'data-action="' + formAction + '" name="' + name + '_file" type="file">' +
              '<img class="ajax-image-tag" src="' + context.value + '">' +
              '<input class="ajax-picture-url" data-type="image" placeholder="Image URL" id="id_' + name + '" name="' + name + '" value="' + context.value + '" type="text">' +
              '<button data-input-id="id_' + name + '_file" class="btn-primary btn-large black ajax-image-upload">Upload Image</button>' +
          '</fieldset>';
      };

      getVideoField = function(name, context) {
        var displayName = getDisplayName(name);
        return '<fieldset class="video-fieldset">' +
               '<h5 for="' + name + '">' + displayName + ' (youtube ID only)</h5>' +
               '<input type="text" data-type="video" name="' + name + '" placeholder="YouTube URL" value="' + context.value + '">' +
          '</fieldset>';
      };

      getDisplayName = function(name) {
        return name.slice(0, 1).toUpperCase() + name.slice(1).split('_')[0] + ' value';
      };

      getFormFields = function(extra_context, editor_view) {
        var fields = [],
          variable;
        for (variable in extra_context) {
          var field;

          if (extra_context.hasOwnProperty(variable)) {
            if (variable.indexOf('text') !== -1) {
              field = getTextField(variable, extra_context[variable]);
            } else if (variable.indexOf('button_class') !== -1) {
              field = getButtonClassField(variable, extra_context[variable]);
            } else if (variable.indexOf('button_href') !== -1) {
              field = getButtonHrefField(variable, extra_context[variable]);
            } else if (variable.indexOf('button') !== -1) {
              field = getButtonField(variable, extra_context[variable]);
            } else if (variable.indexOf('image') !== -1) {
              field = getImageField(variable, extra_context[variable]);
            } else if (variable.indexOf('video') !== -1) {
              field = getVideoField(variable, extra_context[variable]);
            }
            fields.push(field);
          }
        }

        return fields;
      };

      return {
        getFormFields: getFormFields
      }
    }()),