(function ($, undefined) {

    $(function () {

        var container = $('.js-meta-tag-preset-container'),
                prototype = container.data('prototype'),
                codemirrors = {};



        // Add Meta Tag Presets
        container.data('index', container.find('.meta-tag-preset').length + 1);
        $('.js-meta-tag-preset-add').on('click', function () {
            var index = container.data('index');
            var n_item = $(prototype.replace(/__name__/g, index));
            container.data('index', index + 1);
            container.append(n_item);
            n_item.find('input[type="checkbox"]').each(updateCheckboxHideShow);
            n_item.find('select').each(updateSelectHideShow);
            updateDataTextFrom(n_item);

        });

        // Delete Meta Tag Presets
        container.on('click', '.js-meta-tag-preset-del', function () {
            var $this = $(this),
                    confirm_message = $this.attr('data-confirm'),
                    item = $this.parents('.meta-tag-preset').first();
            if (confirm(confirm_message)) {
                item.remove();
            }
        });

        /**
         * Update text of item when value changes
         * 
         * @param {DOMElement} scope Scope to search of elements
         * 
         * @returns {undefined}
         */
        function updateDataTextFrom(scope) {

            if (scope === undefined) {
                scope = $('body');
            }

            $(scope).find('*[data-text-from]').each(function () {
                var el = $(this),
                    from = $('#' + el.attr('data-text-from'));

                from.on('click change blur keyup', function() {
                    el.text($(this).val());
                });
            });
        }
        updateDataTextFrom();

        /**
         * Update display of element based on select value
         *
         * @returns {undefined}
         */
        function updateSelectHideShow()
        {
            var id = $(this).attr('id'),
                    selected = $(this).val();
            $('*[data-select-update="' + id + '"][data-select-value]').each(function () {
                var $this = $(this),
                        val = $this.attr('data-select-value');
                if (val == selected) {
                    $this.find('input,select,textarea').removeAttr('disabled');
                    $this.removeClass('hide');
                } else {
                    $this.find('input,select,textarea').attr('disabled', 'disabled');
                    $this.addClass('hide');
                }
            });
        }
        $('select').each(updateSelectHideShow);
        container.on('click change blur', 'select', updateSelectHideShow);

        /**
         * Show/Hide contents based on checkbox
         *
         * @returns {undefined}
         */
        function updateCheckboxHideShow() {
            var id = $(this).attr('id'),
                    selected = $(this).is(':checked');
            if (selected) {
                $('*[data-show-on="' + id + '"]').toggleClass('hide', false);
                $('*[data-show-on="' + id + '"]').find('input,select,textarea').removeAttr('disabled');
                $('*[data-hide-on="' + id + '"]').toggleClass('hide', true);
                $('*[data-hide-on="' + id + '"]').find('input,select,textarea').attr('disabled', 'disabled');
            } else {
                $('*[data-show-on="' + id + '"]').toggleClass('hide', true);
                $('*[data-show-on="' + id + '"]').find('input,select,textarea').attr('disabled', 'disabled');
                $('*[data-hide-on="' + id + '"]').toggleClass('hide', false);
                $('*[data-hide-on="' + id + '"]').find('input,select,textarea').removeAttr('disabled');
            }
        }
        ;

        $('input[type="checkbox"]').each(updateCheckboxHideShow);
        container.on('click', 'input[type="checkbox"]', updateCheckboxHideShow);

        /**
         * Enable/Disable CodeMirror on input fields
         * @returns {undefined}
         */
        function updateCodeMirror() {
            var $this = $(this),
                    checked = $this.is(':checked'),
                    textarea_id = $this.attr('data-toggle-codemirror'),
                    textarea = $('#' + textarea_id);

            if (checked && codemirrors[textarea_id] == undefined) {
                codemirrors[textarea_id] = CodeMirror.fromTextArea(textarea[0], {
                    theme: "monokai",
                    mode: {name: "javascript"}
                });
                codemirrors[textarea_id].setSize('100%', '175px');
            } else if (codemirrors[textarea_id] != undefined) {
                codemirrors[textarea_id].toTextArea();
                codemirrors[textarea_id] = undefined;
            }
        }

        $('input[type="checkbox"][data-toggle-codemirror]').each(updateCodeMirror);
        container.on('click', 'input[type="checkbox"][data-toggle-codemirror]', updateCodeMirror);

        // Refresh the appearance of code mirror
        container.find('.panel').on('shown.bs.collapse', function () {
            $(this).find('input[type="checkbox"][data-toggle-codemirror]').each(function() {
                var $this = $(this),
                    textarea_id = $this.attr('data-toggle-codemirror');
                if (codemirrors[textarea_id] !== undefined) {
                    codemirrors[textarea_id].refresh();
                }
            });
        });
        
    });

})(jQuery);