', {
+ class: 'zen-forms' + (settings.theme == 'dark' ? '' : ' light-theme')
+ }).hide().appendTo('body').fadeIn(200);
+
+ // ESC to exit. Thanks @ktmud
+ $('body').on('keydown', function (event) {
+
+ if (event.which == 27)
+ App.env.destroy($elements);
+
+ });
+
+ return App.Environment;
+
+ }, // create
+
+ /**
+ * Update orginal inputs with new values and destroy Environment
+ */
+ destroy: function ($elements) {
+
+ // Callback: zf-destroy
+ App.Form.trigger('zf-destroy', App.Environment);
+
+ $('body').off('keydown');
+
+ // Update orginal inputs with new values
+ $elements.each(function (i) {
+
+ var $el = $('#zen-forms-input' + i);
+
+ if ($el.length) {
+ $(this).val($el.val());
+ }
+
+ });
+
+ Utils.bodyWrap();
+
+ // Hide and remove Environment
+ App.Environment.fadeOut(200, function () {
+
+ App.env.wrapper = null;
+
+ App.Environment.remove();
+
+ });
+
+ // Callback: zf-destroyed
+ App.Form.trigger('zf-destroyed');
+
+ }, // destroy
+
+ /**
+ * Append inputs, textareas to Environment
+ */
+ add: function ($elements) {
+
+ var $el, $label, value, id, ID, label;
+
+ $elements.each(function (i) {
+
+ App.env.wrapper = App.env.createObject('div', {
+ class: 'zen-forms-input-wrap'
+ }).appendTo(App.Environment);
+
+ $el = $(this);
+
+ value = $el.val();
+
+ id = $el.attr('id');
+
+ ID = 'zen-forms-input' + i;
+
+ label = $el.data('label') || $("label[for=" + id + "]").text() || $el.attr('placeholder') || '';
+
+ // Exclude specified elements
+ if ($.inArray( $el.attr('type'), ['checkbox', 'radio', 'submit']) == -1) {
+
+ if ($el.is('input') )
+ App.env.addInput($el, ID, value);
+ else if ($el.is('select') )
+ App.env.addSelect($el, ID);
+ else
+ App.env.addTextarea($el, ID, value);
+
+ $label = App.env.addObject('label', {
+ for: ID,
+ text: label
+ });
+
+ if ($el.is('select') )
+ $label.prependTo(App.env.wrapper);
+
+ }
+
+ });
+
+ // Callback: zf-initialized
+ App.Form.trigger('zf-initialized', App.Environment);
+
+ }, // add
+
+ addInput: function ($input, ID, value) {
+
+ return App.env.addObject('input', {
+ id: ID,
+ value: value,
+ class: 'input',
+ type: $input.attr('type')
+ });
+
+ }, // addInput
+
+ addTextarea: function ($textarea, ID, value) {
+
+ return App.env.addObject('textarea', {
+ id: ID,
+ text: value,
+ rows: 5,
+ class: 'input'
+ });
+
+ }, // addTextarea
+
+ addSelect: function ($orginalSelect, ID) {
+
+ var $select = App.env.addObject('select', {
+ id: ID,
+ class: 'select'
+ }),
+ $options = $orginalSelect.find('option'),
+ $customSelect = App.env.addObject('div', {
+ class: 'custom-select-wrap',
+ html: '
'
+ }).children();
+
+ $select.append($options.clone());
+
+ $.each($options, function (i, option) {
+
+ App.env.createObject('a', {
+ href: '#',
+ html: '
' + $(option).text() + '' ,
+ 'data-value': $(option).attr('value'),
+ class: $(option).prop('selected') ? 'selected' : ''
+ }).appendTo($customSelect);
+
+ });
+
+ $select.val($orginalSelect.val());
+
+ Utils.customSelect($select, $customSelect);
+
+ return $customSelect;
+
+ }, // addSelect
+
+ /**
+ * Wrapper for creating jQuery objects
+ */
+ createObject: function (type, params, fn, fnMethod) {
+
+ return $('<'+type+'>', params).on(fnMethod || 'click', fn);
+
+ }, // createObject
+
+ /**
+ * Wrapper for adding jQuery objects to wrapper
+ */
+ addObject: function (type, params, fn, fnMethod) {
+
+ return App.env.createObject(type, params, fn, fnMethod).appendTo(App.env.wrapper || App.Environment);
+
+ }, // addObject
+
+ switchTheme: function () {
+
+ App.Environment.toggleClass('light-theme');
+
+ } // switchTheme
+
+ }, // env
+
+ zen: function ($elements) {
+
+ // Create environment
+ App.env.create();
+
+ // Add wrapper div for close and theme buttons
+ App.env.wrapper = App.env.createObject('div', {
+ class: 'zen-forms-header'
+ }).appendTo(App.Environment);
+
+ // Add close button
+ App.env.addObject('a', {
+ class: 'zen-forms-close-button',
+ html: '
Exit Zen Mode'
+ }, function () {
+ App.env.destroy($elements);
+ });
+
+ // Add theme switch button
+ App.env.addObject('a', {
+ class: 'zen-forms-theme-switch',
+ html: '
Switch theme'
+ }, function () {
+ App.env.switchTheme();
+ });
+
+ // Add inputs and textareas from form
+ App.env.add($elements);
+
+ // Additional select functionality
+ Utils.manageSelects();
+
+ // Select first input
+ Utils.focusFirst();
+
+ // Add .empty class for empty inputs
+ Utils.watchEmpty();
+
+ } // zen
+
+ }; // App
+
+ App.Form = $(this);
+
+ var $elements = App.Form.is('form') ? App.Form.find('input, textarea, select') : App.Form;
+
+ $(settings.trigger).on('click', function (event) {
+
+ event.preventDefault();
+
+ App.zen($elements);
+
+ });
+
+ // Command: destroy
+ App.Form.on('destroy', function () {
+ App.env.destroy($elements);
+ });
+
+ // Command: init
+ App.Form.on('init', function () {
+ App.zen($elements);
+ });
+
+ return this;
+
+ };
+
+})(jQuery);