(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);
        });

        // 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 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);


    });

})(jQuery);