HOME

Mini Shell 1.0
DIR:/home/psrcpvtltd.com/www/wp-content/plugins/content-maker/js/
Current File : //home/psrcpvtltd.com/www/wp-content/plugins/content-maker/js/cma.main.js
/**
 * EVENT HANLDERS AND SETTINGS
 * 
 * Script that registers event handlers for page builder.
 *
 */

jQuery(function ($) {

    /*
     * Setting new options for UnderscoreJS templates
     * 
     */
    CMA.templatesOptions = {
        evaluate: /<#([\s\S]+?)#>/g,
        interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
        escape: /\{\{([^\}]+?)\}\}(?!\})/g,
        variable: 'data'
    };

    /**
     * Function that will store Layout object as JSON
     * in HTML after each change in layout
     *
     */
    CMA.saveLayoutDataInHTML = function () {

        var layoutData;

        if (typeof (CMA.layout) == "undefined" || !CMA.layout) {
            if (typeof (CMA.data[0]) != "undefined") {
                layoutData = CMA.data;
                try {
                    CMA.layout = JSON.parse(CMA.data[0]);
                } catch (e) {
                    // LOGGING ERROR
                    console.log('JSON object not valid! ' + e) /* RemoveLogging:skip */;
                    CMA.layout = {};
                    layoutData = "{}";
                    alert('ERROR! \nContent is not available. Please use Revisions to restore the content.');
                }

            } else {
                layoutData = "{}";
            }

        } else {
            layoutData = JSON.stringify(CMA.layout);
        }
        if ($('#cma-layout-data').length > 0) {
            $('#cma-layout-data').val(layoutData);
        } else {
            $('<input>').attr({
                type: 'hidden',
                id: 'cma-layout-data',
                name: 'cma_layout_data',
                value: JSON.stringify(layoutData)
            }).appendTo('form#post');
        }
    }

    CMA.saveLayoutDataInHTML();

    /**
     * Function that will fetch dialog fields and return promise object
     *
     * @param data
     * @param dialog
     *
     */
    CMA.fetchHTMLForms = function (data, dialog) {
        var promise = $.ajax({
            type: "post",
            dataType: "html",
            url: ajaxurl,
            data: data
        })
                .done(function (response) {
                    dialog.html(response).addClass('options-loaded');
                })
                .fail(function () {
                    return false;
                });

        return promise;
    }

    /* **************************************
     * SECTION: DIALOG OPTIONS
     ****************************************/

    /**
     * Get options from dialog
     * 
     * @param dialog
     */
    CMA.getDialogOptions = function (dialog) {
        var options = {};

        dialog.find('*[name]').not('.shortcode-group-count').each(function () {

            // check that this is option element with predefined name
            if (!$(this).is('*[name^="elements"]'))
                return;

            var re = /[^[\]]+(?=])/g;
            var nameParts = new Array();
            // parse the name and get the parts
            for (var m = re.exec($(this).attr('name')); m; m = re.exec($(this).attr('name'))) {
                nameParts.push(m[0]);
            }

            // this is regular shortcode or widget options
            if (nameParts.length == 2) {
                if ($(this).attr('type') == 'checkbox') {
                    if ($(this).prop('checked')) {
                        options[nameParts[1]] = 1;
                    } else {
                        options[nameParts[1]] = 0;
                    }

                } else if ($(this).attr('type') == 'radio') {
                    if ($(this).prop('checked')) {
                        options[nameParts[1]] = $(this).val();
                    }
                } else if ($(this).data('type') == 'wysiwyg') {
                    options[nameParts[1]] = _.escape($(this).val());
                } else {
                    options[nameParts[1]] = $(this).val();
                }
                //this is group option - one level, option must be grouped in array
            } else if (nameParts.length == 4) {
                var grpName = nameParts[1];
                var optName = nameParts[3];
                var grpId = Number(nameParts[2]);
                var option = {};
                if (typeof (options[grpName]) == "undefined")
                    options[grpName] = {};
                if (typeof (options[grpName][grpId]) == "undefined")
                    options[grpName][grpId] = {};
                option[optName] = $(this).val();

                if ($(this).attr('type') == 'checkbox') {
                    if ($(this).prop('checked')) {
                        options[grpName][grpId][optName] = 1;
                    } else {
                        options[grpName][grpId][optName] = 0;
                    }

                } else if ($(this).data('type') == 'wysiwyg') {
                    options[grpName][grpId][optName] = _.escape($(this).val());
                } else if ($(this).attr('type') == 'radio') {
                    if ($(this).prop('checked')) {
                        options[grpName][grpId][optName] = $(this).val();
                    }
                } else {
                    options[grpName][grpId][optName] = $(this).val();
                }
                //this is group option - two levels, option must be grouped in array
            } else if (nameParts.length == 6) {
                var grpName = nameParts[1];
                var grpId = Number(nameParts[2]);
                var subGrpName = nameParts[3];
                var subGrpId = Number(nameParts[4]);
                var optName = nameParts[5];

                var option = {};

                if (typeof (options[grpName]) == "undefined")
                    options[grpName] = {};

                if (typeof (options[grpName][grpId]) == "undefined")
                    options[grpName][grpId] = {};

                if (typeof (options[grpName][grpId][subGrpName]) == "undefined")
                    options[grpName][grpId][subGrpName] = {};

                if (typeof (options[grpName][grpId][subGrpName][subGrpId]) == "undefined")
                    options[grpName][grpId][subGrpName][subGrpId] = {};

                option[optName] = $(this).val();

                if ($(this).attr('type') == 'checkbox') {
                    if ($(this).prop('checked')) {
                        options[grpName][grpId][subGrpName][subGrpId][optName] = 1;
                    } else {
                        options[grpName][grpId][subGrpName][subGrpId][optName] = 0;
                    }

                } else if ($(this).data('type') == 'wysiwyg') {
                    options[grpName][grpId][subGrpName][subGrpId][optName] = _.escape($(this).val());
                } else if ($(this).attr('type') == 'radio') {
                    if ($(this).prop('checked')) {
                        options[grpName][grpId][subGrpName][subGrpId][optName] = $(this).val();
                    }
                } else {
                    options[grpName][grpId][subGrpName][subGrpId][optName] = $(this).val();
                }

            }

        });
        return options;
    }


    /**
     * Function that will fill dialog options fields
     *
     * @param dialog
     * @param data
     *
     */
    CMA.fillDialogOptionFields = function (dialog, data) {
        if (typeof (data.options) != "undefined" && data.options) {
            for (opt in data.options) {

                // if this is value for group options
                if (typeof (data.options[opt]) == 'object') {

                    // get group options
                    var groupOptions = data.options[opt];

                    // count number of duplicates we need to create to group
                    var duplicatesNum = _.size(data.options[opt]) - 1;

                    // create duplicates for group
                    if (duplicatesNum > 0) {
                        for (var i = 0; i < duplicatesNum; i++) {
                            var group = dialog.find('> .option-container > .shortcode-options-group:last');
                            var duplicate = CMA.duplicateOptionsGroup(group);
                            duplicate.insertAfter(group);
                        }
                    }

                    // set value to every element
                    for (var id in groupOptions) {

                        var option = groupOptions[id];

                        for (var opt in option) {

                            // subgroup
                            if (typeof (option[opt]) == 'object') {
                                var subGroup = option[opt];

                                // count number of duplicates we need to create to subgroup
                                var duplicatesNumSubGroup = _.size(subGroup) - 1;

                                // create duplicates for group
                                if (duplicatesNumSubGroup > 0) {
                                    for (var i = 0; i < duplicatesNumSubGroup; i++) {

                                        // get element index
                                        var index = parseInt(id);

                                        // create selector based on index
                                        var selector = ".option-container > .shortcode-options-group:not(.subgroup):nth-child(" + index + ") .shortcode-options-group:last";

                                        // find, duplicate and insert element
                                        var subGroupElement = dialog.find(selector);
                                        var duplicateSubGroup = CMA.duplicateOptionsGroup(subGroupElement, true);
                                        duplicateSubGroup.insertAfter(subGroupElement);
                                    }
                                }

                                // fill in field values in HTML
                                for (var subId in subGroup) {
                                    var subOptions = subGroup[subId];

                                    for (var subOpt in subOptions) {
                                        var field = dialog.find('*[name$="[' + id + '][' + opt + '][' + subId + '][' + subOpt + ']"]');
                                        var fieldValue = subOptions[subOpt];

                                        CMA.setDialogFieldValueInHTML(field, fieldValue);
                                    }
                                }
                                // element is not in subgroup
                            } else {
                                var field = dialog.find('*[name$="[' + id + '][' + opt + ']"]');
                                var fieldValue = option[opt];

                                CMA.setDialogFieldValueInHTML(field, fieldValue);

                            }
                        }
                    }
                    // element is not in group
                } else {
                    var field = dialog.find('*[name$="[' + opt + ']"]');
                    var fieldValue = data.options[opt];

                    CMA.setDialogFieldValueInHTML(field, fieldValue);


                }
            }
        }
    }

    /**
     * Function that will set dialog field values in HTML
     *
     * @param field
     * @param fieldValue
     *
     */

    CMA.setDialogFieldValueInHTML = function (field, fieldValue) {

        if (field.attr('type') == 'checkbox') {
            field.prop('checked', Boolean(fieldValue));
        } else if (field.attr('type') == 'radio') {
            field.filter(function () {
                return $(this).attr('value') === fieldValue;
            }).prop('checked', true);
        } else {
            // if this is 'image' field
            if (field.data('type') == 'image') {
                var optionContainer = field.closest('.option-container');
                CMA.setImageOptionValue(optionContainer, fieldValue);

            } else if (field.data('type') == 'imageradio') {
                field.siblings('.cma-image-radio-container').find('img[data-value="' + fieldValue + '"]').addClass('active');
            } else if (field.data('type') == 'wysiwyg') {
                var unescapedValue = _.unescape(fieldValue);
                field.val(unescapedValue);
            } else {
                field.val(fieldValue);
            }
        }
    }


    /**
     * Set image preview for 'image' options field
     *
     * @param attachment
     *
     */
    CMA.setImageOptionValue = function (optionContainer, attachment) {

        if (attachment == "") {
            return;
        }

        // set loading icon
        optionContainer.find('.shortcode-options-thumbs').addClass('loading');

        var attachmentIds = '';
        var thumbsContainer = optionContainer.find('.shortcode-options-thumb-container .shortcode-options-thumbs');
        thumbsContainer.empty();

        var generateImageHTML = function (attachment) {
            $.each(attachment, function (i, val) {

                // append image
                thumbsContainer.append(function () {
                    var image = $('<div></div>');
                    image.append(
                            $('<img class="shortcode-options-thumb-preview"/>')
                            .attr({
                                'src': val.src,
                                'data-id': val.id
                            })
                            )
                            .append(
                                    $('<a class="shortcode-options-thumb-remove">x</a></div>')
                                    .on('click', function (e) {
                                        $(e.target).parent().remove();
                                        var attachmentIds = '';
                                        optionContainer.find('.shortcode-options-thumb-preview').each(function () {
                                            attachmentIds += $(this).data('id') + ',';
                                        });
                                        optionContainer.find('.shortcode-options-thumb-id').val(attachmentIds);

                                    })
                                    );

                    attachmentIds += val.id + ',';
                    return image;
                });
            });

            thumbsContainer.sortable({
                items: '> div',
                tolerance: 'pointer',
                stop: function () {
                    var attachmentIds = '';
                    optionContainer.find('.shortcode-options-thumb-preview').each(function () {
                        attachmentIds += $(this).data('id') + ',';
                    });
                    optionContainer.find('.shortcode-options-thumb-id').val(attachmentIds);
                }
            });
            optionContainer.find('.shortcode-options-thumb-id').val(attachmentIds);

            //remove loading animation                
            thumbsContainer.removeClass('loading');
        }

        if (typeof (attachment) === 'string') {
            $.ajax({
                type: "POST",
                url: ajaxurl,
                data: {
                    'action': 'cma_options_widget',
                    'attachments': attachment
                }
            })
                    .done(function (data) {
                        var attachment = JSON.parse(data);
                        generateImageHTML(attachment);
                    });
        } else {
            generateImageHTML(attachment);
        }


    }

    /**
     * Set dialog vertical position when created
     *
     * @param dialog
     *
     */
    CMA.setDialogVerticalPosition = function (dialog) {
        var dialogContainer = dialog.closest('.ui-dialog');
        // get dialog height and vertical scroll
        var windowHeight = $(window).height();
        var dialogHeight = dialogContainer.height();
        var verticalScroll = $('body').scrollTop();

        // calculate and apply new position
        var topPosition = Math.round((windowHeight - dialogHeight) / 2) + verticalScroll;
        dialogContainer.css('top', topPosition + "px");
    }

    /*
     * Dialog Image upload field handle     
     * 
     */

    jQuery(document).on('rowsdialogdone', '.ui-dialog', function (e, row) {
        if ($(this).find('.cma-image-radio-container img.active').length > 0) {
            var newSize = $(this).find('.cma-image-radio-container img.active').data('value');
            CMA.changeGridsNumber(row, newSize);
        }
    });

    /*
     * Dialog: Image upload field handle     
     * 
     */

    var frame;
    $(document).on('click', '.shortcode-options-thumb-button', function (e) {
        e.preventDefault();
        var optionContainer = $(e.target).closest('.option-container');
        var attachmentParams = new Array();
        if (!frame) {
            frame = wp.media({
                className: 'media-frame cma-media-frame',
                multiple: true,
                title: 'Choose Images',
                button: {text: 'Use Images'}
            });
        }
        frame.open();
        frame.off('select');

        frame.on('select', function () {
            var attachment = frame.state().get('selection').toJSON();
            $.each(attachment, function (i, val) {
                if (typeof (val.sizes) != "undefined") {
                    if (typeof (val.sizes.thumbnail) != "undefined") {
                        var imageUrl = val.sizes.thumbnail.url;
                    } else if (typeof (val.sizes.medium) != "undefined") {
                        var imageUrl = val.sizes.medium.url;
                    } else if (typeof (val.sizes.full) != "undefined") {
                        var imageUrl = val.sizes.full.url;
                    }
                } else {
                    var imageUrl = val.url;
                }

                attachmentParams.push({id: val.id, src: imageUrl});
            });
            CMA.setImageOptionValue(optionContainer, attachmentParams);
        });
    });


    /*
     * Dialog Image radio field handle     
     * 
     */

    $(document).on('click', '.cma-image-radio-container img', function () {
        $(this).siblings().removeClass('active').end().addClass('active');
        var value = $(this).data('value');
        $(this).closest('.option-container').find('.cma-image-radio-value').val(value);
    });


    /*
     * Init Color Picker and Icon Picker element when dialog with options is created
     * 
     */

    $(document).on('rowsdialogcreated gridsdialogcreated elementsdialogcreated sectionsdialogopen', '.ui-dialog', function () {
        $(this).find('.cma-color-picker').wpColorPicker();
        $(this).find('.cma-icon-picker').fontIconPicker();
    });

    /*
     * Init plugin for creating tags and autocomplete on text field
     * 
     */

    $(document).on('rowsdialogcreated gridsdialogcreated elementsdialogcreated sectionsdialogcreated', '.ui-dialog', function () {
        $(this).find('input[type="text"]').each(function () {
            if ($(this).data('role') == 'tagsinput') {
                $(this).initializeTagsAutocompleteForTextField();
            }
        });
    });

    /**
     * Initialize Autocomplete and Tags plugin on text fields that has options
     * 
     */
    $.fn.initializeTagsAutocompleteForTextField = function () {
        var inputField = $(this);
        var optionsList = new Array();
        var optionsListFull = new Array();
        var autocomplete_container_id = $(this).attr('id') + '-autocomplete';

        // get list of options
        $("#" + autocomplete_container_id + " option").each(function (index) {
            var item = {id: index, name: $(this).val(), desc: $(this).text()};

            optionsList.push($(this).val());
            optionsListFull[$(this).val()] = $(this).text();
        });

        // initialize text field tags
        var tagEdit = inputField.tagEditor({
            forceLowercase: false,
            placeholder: 'Click for options...',
            delimiter: ", ",
            autocomplete: {
                delay: 0, // show suggestions immediately
                position: {collision: 'flip'}, // automatic menu position up/down
                source: optionsList,
                minLength: 0,
                create: function (event, ui) {

                    // render different html for every option
                    $(this).autocomplete("instance")._renderItem = function (ul, item) {
                        // We append a custom formatted list item to the suggestion list
                        return $("<li></li>").data("item.autocomplete", item).append(
                                '<a>' + item.label + ' | ' + item.value + '</a>').appendTo(ul);
                    };

                    // open dialog on click
                    $(this).autocomplete("search", "");
                },
                // prepare options for displaying
                response: function (event, ui) {

                    // setup key/value scheme for options
                    $.each(ui['content'], function (index, value) {
                        ui['content'][index]['label'] = optionsListFull[value['value']];
                    });

                    return ui;
                }
            }
        });

    }

    /**
     * Parse HTML name attribute and returns array of values
     * 
     * @param {type} attribute
     * @returns {Array|CMA.getNameAttributeParts.nameParts}
     */
    CMA.getNameAttributeParts = function (attribute) {
        var re = /[^[\]]+(?=])/g;
        var nameParts = new Array();
        // parse the name and get the parts
        for (var m = re.exec(attribute); m; m = re.exec(attribute)) {
            nameParts.push(m[0]);
        }

        return nameParts;
    }


    /*
     * Check for element show/hide conditions on open
     * 
     */

    $(document).on('rowsdialogopens gridsdialogopens elementsdialogopen sectionsdialogopen optionsdialogopen', '.ui-dialog', function () {

        // array of fields that have condition
        var allConditions = new Array();

        // find all fields that have "has-condition" class
        $(this).find('.has-condition').each(function () {
            var conditionHolder = $(this);

            // get field that needs to be watched for changes
            var optCondition = $(this).data('cond');

            if ($.isArray(optCondition[0])) {
                for (var cond in optCondition) {
                    var optionId = optCondition[cond][0];
                    var option = $('*[name^="elements"][name$="[' + optionId + ']"]');

                    // store element id
                    option.data('cond-my-id', optionId);

                    // split name attribute and create array
                    var nameParts = CMA.getNameAttributeParts($(this).attr('name'));
                    var fieldName = nameParts[nameParts.length - 1];

                    // create nested array if it's not created already
                    if (typeof (allConditions[optionId]) == 'undefined') {
                        allConditions[optionId] = new Array();
                    }

                    // store in array if it doesn't exist                    
                    if ($.inArray(fieldName, allConditions[optionId]) == -1) {
                        allConditions[optionId].push(fieldName);
                    }

                }
            } else {
                var optionId = optCondition[0];
                var option = $('*[name^="elements"][name$="[' + optionId + ']"]');

                // store element id
                option.data('cond-my-id', optionId);

                // split name attribute and create array
                var nameParts = CMA.getNameAttributeParts($(this).attr('name'));
                var fieldName = nameParts[nameParts.length - 1];

                // create nested array if it's not created already
                if (typeof (allConditions[optionId]) == 'undefined') {
                    allConditions[optionId] = new Array();
                }

                // store in array if it doesn't exist                    
                if ($.inArray(fieldName, allConditions[optionId]) == -1) {
                    allConditions[optionId].push(fieldName);
                }

            }


        }).each(function () {
            // call function that will evaluate field value
            CMA.evaluateOptionConditional($(this), true, false, allConditions);
        });

        // for each element in array bind event handler that will watch for 
        // changes and call function that will evaluate new value
        for (var key in allConditions) {

            var selector = '*[name^="elements"][name$="[' + key + ']"]';

            // on value change, evaluate value and change option visibility
            $(document).on('change', selector, function () {

                var conditionId = $(this).data('cond-my-id');

                // go through all conditions and evaluate values
                for (var dependentField in allConditions[conditionId]) {
                    var $field = $('*[name^="elements"][name$="[' + allConditions[conditionId][dependentField] + ']"]');

                    CMA.evaluateOptionConditional($field, false, false, allConditions, allConditions[conditionId][dependentField]);
                }

            });
        }
    });

    /**
     * Evaluate condition and show/ hide element
     * 
     * @param {type} conditionHolder
     * @param {type} dialogOpen
     * @param {type} dependencyCheck
     * @param {type} allConditions
     * @param {type} currentCondition
     * @returns {undefined}
     */
    CMA.evaluateOptionConditional = function (conditionHolder, dialogOpen, dependencyCheck, allConditions, currentCondition) {
        var condition = false;
        var optCondition = conditionHolder.data('cond');

        // check if there are multiple conditions, array of array
        if ($.isArray(optCondition[0])) {
            for (var cond in optCondition) {

                // get conditions from element data attribute
                var optionId = optCondition[cond][0];
                var optionOperation = optCondition[cond][1];
                var optionValue = optCondition[cond][2];

                var conditionResult = cma_evaluate_condition(optionId, optionOperation, optionValue);

                // if condition is negative, don't check other conditions
                if (!conditionResult) {
                    cma_change_field_visibility(conditionResult, optionId, allConditions, dependencyCheck);

                    break;
                    // if condition is positive and if this is last condition - sends final condition
                } else if (conditionResult && ($(optCondition).get(-1)[0] == optionId)) {
                    cma_change_field_visibility(conditionResult, optionId, allConditions, dependencyCheck);
                }

            }
        } else {
            // get conditions from element data attribute
            var optionId = optCondition[0];
            var optionOperation = optCondition[1];
            var optionValue = optCondition[2];

            var conditionResult = cma_evaluate_condition(optionId, optionOperation, optionValue);
            cma_change_field_visibility(conditionResult, optionId, allConditions, dependencyCheck);
        }

        /**
         * Verify if condition is complex i.e. condition is divided with pipe "|"
         * 
         * @param {type} complexValue
         * @returns {Boolean}
         */
        function cma_is_complex_condition(complexValue) {

            if (isNaN(complexValue) && complexValue.indexOf("|") >= 0) {
                return true;
            } else {
                return false;
            }
        }

        /**
         * Check if defined condition on field is true or false
         * 
         * @param {type} optionId
         * @param {type} optionOperation
         * @param {type} optionValue
         * @returns {Boolean}
         */
        function cma_evaluate_condition(optionId, optionOperation, optionValue) {
            var condition = false;

            // get element we will evaluate
            var option = conditionHolder.closest('.ui-dialog-content').find('*[name^="elements"][name$="[' + optionId + ']"]');

            // check element type
            if (option.attr('type') === 'radio') {
                var value = option.filter(function () {
                    return $(this).prop('checked');
                }).val();
            } else if (option.attr('type') === 'checkbox') {
                var value = option.prop('checked') ? '1' : '0';
            } else {
                var value = option.val();
            }

            // evaluate values
            if (optionOperation === '==' || optionOperation === '=') {
                if (cma_is_complex_condition(optionValue)) {
                    var condition_values = optionValue.split('|');
                    if ($.inArray(value, condition_values) != -1) {
                        condition = true;
                    }

                } else {
                    if (value == optionValue)
                        condition = true;
                }

            } else if (optionOperation === '!=') {
                if (cma_is_complex_condition(optionValue)) {
                    var condition_values = optionValue.split('|');
                    if ($.inArray(value, condition_values) == -1) {
                        condition = true;
                    }
                } else {
                    if (value != optionValue)
                        condition = true;
                }
            } else if (optionOperation === '<') {
                if (value < optionValue)
                    condition = true;
            } else if (optionOperation === '>') {
                if (value > optionValue)
                    condition = true;
            }

            return condition;
        }

        /**
         * Change visibility of the field based on condition being true or false
         * 
         * @param {type} condition
         * @param {type} optionId
         * @param {type} allConditions
         * @param {type} dependencyCheck
         * @returns {undefined}
         */
        function cma_change_field_visibility(condition, optionId, allConditions, dependencyCheck) {

            // check if option that will be hidden has dependencies e.g. elements that must be hidden based on change of current element
            if (typeof (optionId) !== 'undefined' && typeof (allConditions[currentCondition] !== 'undefined') && !dependencyCheck) {

                for (var dependentField in allConditions[currentCondition]) {
                    var dependendOptions = conditionHolder.closest('.ui-dialog-content').find('*[name^="elements"][name$="[' + allConditions[currentCondition][dependentField] + ']"]');

                }

            }

            // show/hide based on element value
            if (condition) {

                // if we are checking conditions when dialog is created, 
                // speed up animations so they are not visible to user
                if (dialogOpen) {
                    conditionHolder.closest('.option-container').show();
                } else {
                    conditionHolder.closest('.option-container').fadeIn();
                }

                // hide dependent options
                if (dependendOptions && !dependencyCheck) {
                    CMA.evaluateOptionConditional(dependendOptions, null, true, allConditions);
                }

            } else {

                // if we are checking conditions when dialog is created, 
                // speed up animations so they are not visible to user
                if (dialogOpen) {
                    conditionHolder.closest('.option-container').hide();
                } else {
                    conditionHolder.closest('.option-container').fadeOut();
                }

                // hide dependent options
                if (dependendOptions && !dependencyCheck) {
                    dependendOptions.closest('.option-container').hide();
                }
            }
        }






    }

    /*
     * Handle special options section
     * 
     */

    $(document).on('elementsdialogopen', '.ui-dialog', function () {
        $(this).on('click', '.cma-element-additional-options h4', function () {
            $(this).parent().toggleClass('opened').find('.option-container').toggle(500);
        });
    });


    /* **************************************
     * SECTION: MAIN DIALOG CREATION EVENTS
     ****************************************/

    // The button for adding a element
    $('#cma-main-controls .add-element')
            .click(function () {
                var dialog = CMA.createMainDialog();
                dialog.dialog('open');
                return false;
            });


    // Create main dialog for adding elements 
    CMA.createMainDialog = function () {

        var data = {};
        data.translations = CMA.i10n.templates['mainDialog'];
        data.elements = CMA.availableElements;

        // fetch and render template
        var mainDialogTemplate = $("#cma-tpl-main-dialog").html();
        var mainDialogTemplate = _.template(mainDialogTemplate, data, CMA.templatesOptions);
        var $mainDialogTemplate = $(mainDialogTemplate);
        var dialog = $mainDialogTemplate.dialog({
            dialogClass: 'cma-admin-dialog add-content-dialog',
            autoOpen: false,
            resizable: false,
            draggable: false,
            modal: false,
            title: $mainDialogTemplate.attr('data-title'),
            minWidth: 960,
            maxHeight: Math.round($(window).height() * 0.85),
            create: function () {
                var dialog = $(this);
                // Handle filtering in the main dialog
                dialog.find('#elements-text-filter-input')
                        .keyup(function (e) {
                            var value = $(this).val().toLowerCase();

                            // Filter the elements
                            $('#elements-dialog .available-elements .element')
                                    .show()
                                    .each(function () {
                                        if (value == '')
                                            return;

                                        if ($(this).find('h3').html().toLowerCase().indexOf(value) == -1) {
                                            $(this).hide();
                                        }
                                    })
                        })
                        .click(function () {
                            $(this).keyup()
                        });

                // Filter by content type
                $('.elements-content-filter').on('click', 'a', function () {
                    var filterItems = $(this).data('type');
                    if (filterItems == 'all') {
                        $('#elements-dialog .available-elements .element').fadeIn();
                    } else {
                        $('#elements-dialog .available-elements .element')
                                .fadeIn()
                                .each(function () {
                                    if ($(this).data('type') != filterItems) {
                                        $(this).hide();
                                    }
                                })

                    }
                });

                // handle clicking on element
                dialog.find('.element').on('click', function () {
                    var element = CMA.createElement($(this).attr('data-name'), null, $(this).data('type'));
                    CMA.addElementToGrid(element, null, null);

                    // Close main dialog
                    dialog.dialog('close');

                    // open element dialog
                    var elementDialog = CMA.initElementDialog(element);
                    elementDialog.dialog('open');

                    // save to HTML
                    CMA.saveLayoutDataInHTML();
                });
            },
            open: function () {
                var overlay = $('<div class="cma-ui-widget-overlay ui-front"></div>').css('z-index', 1000);
                $(this).data('overlay', overlay).closest('.ui-dialog').before(overlay);
                $('#elements-text-filter-input').val('').keyup();
            },
            close: function () {
                $(this).data('overlay').remove();
                $('#cma-elements-container .element.new-element').show().removeClass('new-element');
            }
        })
                .on('keydown', function (e) {
                    if (e.keyCode === $.ui.keyCode.ESCAPE) {
                        $(this).dialog('close');
                    }
                })
                .find('.element').disableSelection().end();

        return dialog;
    }


    /* **************************************
     * SECTION: HANDLE CONTENT MAKERS TAB
     ****************************************/

    // Handle switching between the content maker and other tabs
    $('#wp-content-editor-tools')
            .find('.wp-switch-editor')
            .click(function () {
                var $$ = $(this);
                $('#wp-content-editor-container, #post-status-info').show();
                $('#content-maker').hide();
                $('#wp-content-wrap').removeClass('cma-active');
                $('#cma-active').val('0');

                $('#content-resize-handle').show();
            }).end()
            .prepend(
                    $('<a id="content-cma" class="hide-if-no-js wp-switch-editor switch-to-cma">' + $('#content-maker .hndle span').html() + '</a>')
                    .click(function () {
                        var $$ = $(this);
                        // This is so the inactive tabs don't show as active
                        $('#wp-content-wrap').removeClass('tmce-active html-active');

                        // Hide all the standard content editor stuff
                        $('#wp-content-editor-container, #post-status-info').hide();

                        // Show content maker and the inside div
                        $('#content-maker').show().find('> .inside').show();
                        $('#wp-content-wrap').addClass('cma-active');
                        $('#cma-active').val('1');

                        // Triggers full refresh
                        $(window).resize();
                        $('#content-resize-handle').hide();

                        return false;
                    })
                    );

    $('#wp-content-editor-tools .wp-switch-editor').click(function () {
        // This fixes an occasional tab switching glitch
        var $$ = $(this);
        var p = $$.attr('id').split('-');
        $('#wp-content-wrap').addClass(p[1] + '-active');
    });

    // Move the content maker box into a tab of the content editor
    $('#content-maker')
            .insertAfter('#wp-content-editor-container')
            .addClass('wp-editor-container')
            .hide()
            .find('.handlediv').remove()
            .end()
            .find('.hndle').html('').append(
            $('#cma-main-controls')
            );

    // When the tab for content maker is clicked, trigger a window resize to set up the columns
    $('#content-cma').click(function () {
        $(window).resize();
    });

    if ($('#cma-active').val() == '1' && typeof CMA.data[0] != 'undefined')
        $('#content-cma')[0].click();

    // Click again after the content maker have been set up
    setTimeout(function () {
        if ($('#cma-active').val() == '1' && typeof CMA.data[0] != 'undefined')
            $('#content-cma')[0].click();
        $('#content-maker .hndle').unbind('click');
        $('#content-maker .grid').eq(0).click();
    }, 150);


    /* **************************************
     * SECTION: PREBUILT LAYOUTS
     ****************************************/

    // Button for adding prebuilt layouts
    $('#cma-main-controls .insert-prebuilt')
            .click(function () {
                var dialog = CMA.createPrebuiltLayoutsDialog();
                dialog.dialog('open');
                return false;
            });

    // Create prebuilt layout dialog 
    CMA.createPrebuiltLayoutsDialog = function () {
        var data = {};
        data.translations = CMA.i10n.templates['prebuiltLayouts'];
        data.layouts = CMA.availableLayouts;

        // fetch and render template
        var prebuiltTemplate = $("#cma-tpl-prebuilt-layouts").html();
        var prebuiltLayouts = _.template(prebuiltTemplate, data, CMA.templatesOptions);
        var $prebuiltLayouts = $(prebuiltLayouts);

        var dialog = $(prebuiltLayouts).dialog({
            dialogClass: 'cma-admin-dialog prebuilt-layout-dialog',
            autoOpen: false,
            resizable: false,
            draggable: false,
            modal: false,
            title: CMA.i10n.templates['prebuiltLayouts'].insert,
            minWidth: 600,
            height: 450,
            open: function () {
                var overlay = $('<div class="cma-ui-widget-overlay ui-front"></div>').css('z-index', 1000);
                $(this).data('overlay', overlay).closest('.ui-dialog').before(overlay);
            },
            close: function () {
                $(this).data('overlay').remove();
            },
            buttons: [
                {
                    text: CMA.i10n.templates.prebuiltLayouts.btnInsert,
                    click: function () {
                        var dataToImport;

                        var dialog = $(this).closest('.ui-dialog');
                        if (dialog.hasClass('cma-ajax-loading'))
                            return;

                        // add loading animation
                        dialog.addClass('cma-ajax-loading');

                        // if value isn't selected, close dialog
                        var s = $('#cma-prebuilt-input').find(':selected');
                        if (s.attr('data-id') == null) {
                            $('#cma-prebuilt-dialog').dialog('close');
                            return;
                        }

                        // get row index
                        var rowIndex = $(dialog).find('.cma-prebuilt-row-index').val();

                        var rowIds = rowIndex.split(',');

                        // send request
                        $.get(ajaxurl, {action: 'cma_prebuilt_layout', layout_id: s.attr('data-id'), layout_type: s.attr('data-type')}, function (data) {

                            // disable animation
                            dialog.removeClass('cma-ajax-loading');

                            if (typeof data.name != 'undefined') {

                                if (rowIds[0] != "") {
                                    var layout = JSON.parse(data.data);

                                    // loop through all selected rows
                                    for (var rowKey in rowIds) {

                                        // array starts from 0 so, decrease index
                                        var rowId = parseInt(rowIds[rowKey]) - 1;

                                        // check that row index exists
                                        if (layout['rows'][rowId] != "undefined") {

                                            // get rows count
                                            var rowsCount = CMA.layout['rows'].length;

                                            // add new rows to main layout object
                                            CMA.layout['rows'].push(layout['rows'][rowId]);

                                            // check if rows is in section
                                            if (parseInt(layout['rows'][rowId]['section'])) {

                                                // section id in layout we imported from
                                                var sectionId = layout['rows'][rowId]['section'];

                                                // new section id
                                                var newSectionId = ++CMA.sectionIndex;

                                                // add section options
                                                CMA.layout['sections'][newSectionId] = layout['sections'][sectionId];

                                                // set new section id in row options
                                                CMA.layout['rows'][rowsCount]['section'] = CMA.sectionIndex;

                                            }
                                        }
                                    }

                                    // load prebuilt layout                                
                                    CMA.loadLayout(CMA.layout, true);
                                } else {

                                    // confirm that all content will be removed
                                    if (confirm(CMA.i10n.messages.confirmLayout)) {

                                        // clear rows in layout and in CMA.layout object
                                        CMA.clearRows();

                                        // parse and save new JSON data
                                        CMA.layout = JSON.parse(data.data);

                                        // load prebuilt layout                                
                                        CMA.loadLayout(CMA.layout, false);
                                    } else {
                                        return;
                                    }
                                }

                                CMA.saveLayoutDataInHTML();
                                $('#cma-prebuilt-dialog').dialog('close');

                            }
                        });

                    }
                }
            ]

        });

        return dialog;
    }


    /* **************************************
     * SECTION: PAGE OPTIONS DIALOG
     ****************************************/

    // The button for adding a element
    $('#cma-main-controls .page-options')
            .click(function () {
                var dialog = CMA.createOptionsDialog();
                dialog.dialog('open');
                return false;
            });


    // Create main dialog for adding elements 
    CMA.createOptionsDialog = function () {
        var dialog;
        var promise;

        dialog = $('<div class="page-options-dialog dialog-form"></div>')
                .dialog({
                    dialogClass: 'cma-admin-dialog',
                    autoOpen: false,
                    modal: false, // Disable modal so we don't mess with media editor. We'll create our own overlay.
                    draggable: false,
                    resizable: false,
                    title: CMA.i10n.templates.pageOptions.title,
                    minWidth: 760,
                    maxHeight: Math.round($(window).height() * 0.85),
                    create: function (event, ui) {
                        var currentDialog = $(this);
                        var nonce = $('#_cma_nonce').val();

                        var data = {action: "cma_page_options_form"}
                        promise = CMA.fetchHTMLForms(data, currentDialog);
                        promise.done(function (response) {

                            // populate dialog option fields
                            if (!_.isEmpty(data))
                                CMA.fillDialogOptionFields(currentDialog, CMA.layout);

                            // calculate new vertical position for dialog
                            CMA.setDialogVerticalPosition(currentDialog);

                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('optionsdialogcreated');
                        });

                    },
                    open: function () {
                        var currentDialog = $(this);

                        promise.done(function (response) {
                            // trigger event so we can hook up onto it and change form
                            currentDialog.trigger('optionsdialogopen');
                        });

                        var overlay = $('<div class="cma-ui-widget-overlay ui-front"></div>').css('z-index', 1000);
                        currentDialog.data('overlay', overlay).closest('.ui-dialog').before(overlay);
                    },
                    close: function () {
                        // trigger event so we can hook up onto it and change form
                        $(this).trigger('optionsdialogclose');

                        var pageOptions = CMA.getDialogOptions($(this));
                        CMA.layout.options = pageOptions;

                        CMA.saveLayoutDataInHTML();
                        $(this).data('overlay').remove();

                        $(this).trigger('optionsdialogcloseafter');

                    },
                    buttons: [{text: CMA.i10n.buttons['done'], click: function () {
                                dialog.dialog('close');
                            }}]
                })
                .keypress(function (e) {
                    if (e.keyCode == $.ui.keyCode.ENTER) {
                        if ($(this).closest('.ui-dialog').find('textarea:focus').length > 0)
                            return;

                        // This is the same as clicking the add button
                        $(this).closest('.ui-dialog').find('.ui-dialog-buttonpane .cma-ui-button:eq(0)').click();
                        e.preventDefault();
                        return false;
                    }
                    else if (e.keyCode === $.ui.keyCode.ESCAPE) {
                        $(this).closest('.ui-dialog').dialog('close');
                    }
                });

        return dialog;
    }

    /*
     * CREATE SORTABLE ROWS
     * 
     * jQuery Sortable for sorting rows in layout
     */

    $('#cma-elements-container').sortable({
        items: '> .row-container',
        handle: '.row-handle',
        tolerance: 'pointer',
        start: function (event, ui) {
            $(this).attr('data-prevpos', ui.item.index());
        },
        stop: function (event, ui) {
            var oldPosition = $(this).attr('data-prevpos');
            CMA.changeRowPosition(oldPosition, ui.item.index());
            $('#cma-elements-container .elements-container').trigger('refreshcells');
            ui.item.refreshSectionIds(oldPosition).rowToSection(true);
        },
        update: function (event, ui) {
            ui.item.parent().refreshSectionsClasses();
        }
    });

    /*
     * ADDING NEW ROW TO LAYOUT
     * 
     * Handle clicking on button with grids.
     */

    $('#cma-main-controls #grid-buttons .grids-add-button').each(function () {
        var gridSize = $(this).data('value');
        $(this).click(function () {
            var grids = $(this).data('value');
            if (gridSize != '0') {
                window.CMA.createRow(grids);
            } else {
                window.CMA.activateSectionMode();
            }
            return false;
        });
    });


    /*
     * LOADING LAYOUT
     * 
     * Loading existing layout or creating default row - 100%
     */

    if (CMA.data[0] != "null" && CMA.data[0]) {
        CMA.saveLayoutDataInHTML();
        CMA.loadLayout(CMA.layout);

    } else {
        CMA.layout = {};
        CMA.createRow(1);
    }


    /* **************************************
     * SECTION: OPTIONS GROUPS
     ****************************************/

    // handle duplicating group
    $(document).on('click', '.duplicate-options-group', function (e) {
        e.preventDefault();
        var group = $(this).prevAll('.shortcode-options-group:first');
        if (group.hasClass('subgroup')) {
            var duplicate = window.CMA.duplicateOptionsGroup(group, true);
        } else {
            var duplicate = window.CMA.duplicateOptionsGroup(group);
        }

        duplicate.insertBefore($(this));
        $(this).prevAll('.shortcode-group-count:first').val(function (i, val) {
            return Number(val) + 1;
        });
    });

    // handle removing group
    $(document).on('click', '.remove-options-group', function (e) {
        e.preventDefault();
        if ($(this).prevAll('.shortcode-options-group').length > 1) {
            $(this).prevAll('.shortcode-options-group:first').remove();
            $(this).prevAll('.shortcode-group-count:first').val(function (i, val) {
                return Number(val) - 1;
            });
        }
    });


    /*
     * Handle using wordpress Media library
     */
    var _tmpInsert = wp.media.editor.insert;

    wp.media.editor.insert = function (h) {
        // Check that Content Maker tab is active and that no dialogs are open.
        if ($('#cma-active').val() == '0')
            return _tmpInsert(h);
        if ($('.cma-admin-dialog:visible').length > 0)
            return _tmpInsert(h);

        var element = CMA.createElement('cma_wysiwyg', null, 'shortcode');

        if (element) {
            var dialog = CMA.initElementDialog(element);

            dialog.on('elementsdialogcreated', function () {
                dialog.find('*[name$="[editor]"]').text(h);
                dialog.dialog('open');
            });

            CMA.addElementToGrid(element, null, null);

            // open element dialog
            var elementDialog = CMA.initElementDialog(element);
            elementDialog.dialog('open');
        } else {
            _tmpInsert(h);
        }
    }


    /*
     * Functions fired on Resize and Submit event
     */

    $('#content-maker .handlediv').click(function () {
        // Trigger the resize to reorganise the columns
        setTimeout(function () {
            $(window).resize();
        }, 150);
    });

    $(window).resize(function () {
        // When the window is resized, we want to center all dialogs
        $('.cma-admin-dialog').filter(':data(dialog)').dialog('option', 'position', 'center');
    });

    $(window).bind('resize', function (event) {
        // ui-resizable elements trigger resize
        if ($(event.target).hasClass('ui-resizable'))
            return;

        // Resize all the grid containers
        $('#cma-elements-container .row-container').rowsResizeGrids();
    });


    /*
     * SUBMIT BUTTON
     * 
     * Prevent submittion if there is already some content in Editor
     * and ask user to confirm submittion
     * 
     */

    (function ($) {

        if (CMA.settings['dev-mode'])
            return;

        // get text on submit button
        var publishBtn = $("form#post #publish");

        // create new button, append it and add onClick event listener
        var newSubmitBtn = jQuery('<input/>').attr({
            type: 'button',
            value: publishBtn.val(),
            "class": 'sb_publish ' + publishBtn.attr('class')
        }).on('click', function (e) {

            var cancel = false;

            // check if Content Maker tab is active
            if ($('#cma-active').val() == '1') {

                // get content from textarea
                var content = $('#content').val();

                // if content in texarea is empty look in Tinymce editor
                if (!_.isEmpty(content)) {
                    if (typeof (CMA.settings.generate_html) == "undefined" || CMA.settings.generate_html == "0") {
                        if (!confirm(CMA.i10n.messages.contentExists)) {
                            cancel = true;
                        }
                    }
                } else {
                    if (tinymce.editors && typeof (tinymce.editors.content) != "undefined") {
                        var editorContent = tinymce.editors.content.getContent();
                        if (!_.isEmpty(editorContent)) {
                            if (typeof (CMA.settings.generate_html) == "undefined" || CMA.settings.generate_html == "0") {
                                if (!confirm(CMA.i10n.messages.contentExists)) {
                                    cancel = true;
                                }
                            }
                        }
                    }

                }
            }

            // submit if there user allowed submission
            if (!cancel) {
                $("form#post #publish").click();
            }
        });

        // append new button
        $("form#post #publish").hide().after(newSubmitBtn);

    })(jQuery);

    /*
     * STATIC MENU
     * 
     * Adds custom class that makes menu sticky
     * 
     */

    (function ($) {
        // initial position of menu
        var origOffsetY = $('#content-maker .hndle').offset();

        // recalculate element position when switiching to CMA
        $('#content-cma').click(function () {
            origOffsetY = $('.hndle').offset();
        });

        // calculate position and add class "sticky"
        function scroll() {

            if ($('#cma-active').val() != '1')
                return;

            if ($(window).scrollTop() >= origOffsetY.top) {
                $('#content-maker .hndle').addClass('sticky').width($('.inside').width());
                $('.inside').addClass('sticky-padding');
            } else {
                $('#content-maker .hndle').removeClass('sticky').width('');
                $('.inside').removeClass('sticky-padding');
            }
        }

        document.onscroll = scroll;

    })(jQuery);

    /*
     * HELPER FUNCTION FOR ESCAPING HTML
     * 
     * Escaping HTML for WYSIWYG editor.
     * 
     */

    CMA.escapeHTML = function (text) {

        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };

        return text.replace(/[&<>"']/g, function (m) {
            return map[m];
        });

    };

    /*
     * HELPER FUNCTION FOR ESCAPING HTML
     * 
     * Escaping HTML for WYSIWYG editor.
     * 
     */

    CMA.escapeHTML = function (text) {

        var map = {
            '&amp;': '&',
            '&lt;': '<',
            '&gt;': '>',
            '&quot;': '"',
            "&#039;": "'"
        };

        return text.replace(/[&<>"']/g, function (m) {
            return map[m];
        });

    };

    /**
     * YOAST SEO COMPATIBILITY
     * 
     * Add Content Maker's content to YOAST so we can amek analysis of the content
     *
     * @param data The data to modify
     */

    addEventListener("load", function () {
        // Wait for YoastSEO to be loaded
        setTimeout(function () {
            new YoastContentMaker();
        }, 0);
    });

    YoastContentMaker = function () {

        if(typeof(YoastSEO) == "undefined") return;
        
        YoastSEO.app.registerPlugin('yoastContentMaker', {status: 'ready'});

        /**
         * @param modification    {string}    The name of the filter
         * @param callable        {function}  The callable
         * @param pluginName      {string}    The plugin that is registering the modification.
         * @param priority        {number}    (optional) Used to specify the order in which the callables
         *                                    associated with a particular filter are called. Lower numbers
         *                                    correspond with earlier execution.
         */
        YoastSEO.app.registerModification('content', this.myContentModification, 'yoastContentMaker', 5);
    }

    jQuery(document).on('rowsdialogcloseafter gridsdialogcloseafter elementsdialogcloseafter sectionsdialogcloseafter optionsdialogcloseafter', '.ui-dialog', function () {

        // render HTML base on currect options
        if (CMA.settings.generate_html == '1' && typeof(YoastSEO) != "undefined") {
            jQuery.post(ajaxurl, {action: 'cma_render_page_html', data: CMA.layout, page_id: CMA.helpers.pageId}, function (data) {
                // store HTML data
                CMA.layoutHTML = data;



                // trigger event for reload
                YoastSEO.app.pluginReloaded('yoastContentMaker');
            });
        }
    });



    /**
     * Add generated HTML instead of shortcodes to the content.
     *
     * @param data The data to modify
     */
    YoastContentMaker.prototype.myContentModification = function (data) {

        if ($(".elements-dialog").dialog("isOpen") !== true) {
            // check if HTML exists and return HTML instead of shortcodes
            if (typeof (CMA.layoutHTML) == "undefined") {

                return data;
            } else {

                return CMA.layoutHTML;
            }
        } else {

            return true;
        }

    };
});