(function ($) {
    $(function () {
        var APP = window.metaslider.app.MetaSlider;

        var layerEditor = {

            // show the spinner while slides are being added
            checkSaveRequest: function() {
                if (jQuery.active < 1) {
                    $('.spinner').addClass('spinner-off').hide();
                }

                setTimeout(layerEditor.checkSaveRequest, 1000); 
            },

            checkForSelectedLayer: function() {
                if ($(".metaslider-active").length == 0) {
                    alert(metasliderpro.noLayerSelected);
                }
            },

            createNewLayer: function() {
                $('.metaslider-active').removeClass('metaslider-active');
                var rand_id = Math.floor((Math.random()*999999999)+1);

                var content = $("<div class='content' id='layer_content_" + rand_id + "'>" + metasliderpro.newLayer + "</div>")
                                    .css({
                                        'color' : 'white',
                                        'padding' : '5px'
                                    })
                                    .attr('data-padding', '5');


                var content_wrap = $("<div class='ms_content_wrap' />")
                                        .css({
                                            'height': '100%',
                                            'background' : 'rgba(142, 142, 142, 0.50)'
                                        })
                                        .html(content);

                var animation_out = $("<div class='animation_out animated disabled'/>")
                                        .attr('data-animation', 'disabled')
                                        .attr('data-animation-delay', '0')
                                        .css({
                                            'height' : '100%',
                                            'width' : '100%'
                                        })
                                        .html(content_wrap);

                var animation_in = $("<div class='animation_in animated disabled' />")
                                        .attr('data-animation', 'disabled')
                                        .attr('data-animation-delay', '0')
                                        .css({
                                            'width': '100%',
                                            'height': '100%'
                                        })
                                        .html(animation_out);

                var layer = $("<div class='layer metaslider-active' />")
                                .css({
                                        'width': '120px',
                                        'height': '40px',
                                        'top': '5px',
                                        'left': '5px',
                                        'position': 'absolute'
                                })
                                .attr('data-width', '120')
                                .attr('data-height', '40')
                                .html(animation_in);

                $("#htmlOverlay").append(layer);

                layerEditor.makeLayerEditable(layer);
            },

            updateLayerAnimationDelay: function() {
                var anim_in_delay_ms = parseFloat($('#animation_in_delay').val()) * 1000;
                var anim_out_delay_ms = parseFloat($('#animation_out_delay').val()) * 1000;
                var total_delay = anim_out_delay_ms + anim_in_delay_ms;

                $(".metaslider-active .animation_in")
                    .attr('data-animation-delay', $('#animation_in_delay').val(), 10)
                    .attr('style',
                        'animation-delay: '+ anim_in_delay_ms +'ms; '+
                        '-moz-animation-delay: '+ anim_in_delay_ms +'ms; '+
                        '-webkit-animation-delay: '+ anim_in_delay_ms +'ms;'
                    );

                $(".metaslider-active .animation_out")
                    .attr('data-animation-delay', $('#animation_out_delay').val(), 10)
                    .attr('style',
                        'animation-delay: '+ total_delay +'ms; '+
                        '-moz-animation-delay: '+ total_delay +'ms; '+
                        '-webkit-animation-delay: '+ total_delay +'ms;'
                    );
            },

            save: function(editor_id) {
                $('.spinner').removeClass('spinner-off').show();
                $('#' + editor_id).val(layerEditor.get_html());
                $('#ms-save').click();
            },

            save_on_close: function(editor_id) {
                var decoded = $('#' + editor_id).val();
                var new_decoded = layerEditor.get_html();

                if (decoded != new_decoded) {
                    if (confirm(metasliderpro.saveChanges)) {
                        layerEditor.save(editor_id);
                    }
               }
            },

            render: function(image_url, editor_id, width, height) {
                var layer_color_bg = $("<input class='px-1' type='text' id='layerBgColor' />");
                var layer_editor = $("<div class='layer_editor' />");
                var layer_config = $("<div />");

                // load HTML
                var html = $($('#' + editor_id).val());

                var add_layer_button = $("<button class='mr-2 mb-3 inline-flex items-center justify-center px-4 py-2 border border-orange font-medium rounded-md transition ease-in-out duration-150 md:w-auto md:text-sm md:leading-5 bg-white hover:border-orange-darker hover:text-orange-darker active:border-orange-darkest active:text-orange-darkest text-orange addLayer'>")
                                                .html('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 p-0.5 text-orange"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg> ' 
                                                    + metasliderpro.newLayer
                                                )
                                                .bind('click', function() {
                                                    layerEditor.createNewLayer();
                                                });

                var slide_info = $('<span class="layerSlideshowInfo mx-5 font-medium inline-block"><span class="dashicons dashicons-info leading-4"></span>' + 
                                APP.sprintf(metasliderpro.info, width, height) 
                                + '</span>');

                var spinner = $("<span class='spinner mb-3'></span>");

                var save_button = $("<button class='mb-3 inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md transition ease-in-out duration-150 md:w-auto md:text-sm md:leading-5 bg-orange hover:bg-orange-darker active:bg-orange-darkest text-white save'>")
                                        .html('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 p-0.5 text-white"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>' 
                                            + metasliderpro.save
                                        )
                                        .bind('click', function() {
                                            layerEditor.save(editor_id);
                                        });

                var container = $("<div />")
                                    .attr('class', 'ms-layer-container')
                                    .css('position', 'relative')
                                    .css('overflow', 'auto');

                var html_overlay = $("<div />")
                                        .attr('id', 'htmlOverlay')
                                        .css({
                                            'position': 'absolute',
                                            'top': '0',
                                            'left': '0',
                                            'width': width + 'px',
                                            'height': height + 'px'
                                        })
                                        .html(html);

                var img = $("<img class='slide' />")
                                .attr('src', image_url)
                                .attr('width', width)
                                .attr('height', height)
                                .css('display', 'block');

                var toolbar_wrapper = $("<div class='toolbar_wrapper' />");

                var wysiwyg_buttons = $("<div id='wysiwyg_buttons' />");

                var animation_toolbar = $("<div id='animation_toolbar'><b>" + metasliderpro.animation + ":</b> </div>");

                var style_toolbar = $("<div id='style_toolbar'></div>");

                var layer_padding = $("<input class='px-1' id='layer_padding' type='number' step='1' min='0' max='99' value='0' size='3' />" + metasliderpro.px + "&nbsp;")
                                        .on('change', function() {
                                            $('.metaslider-active .content').attr('data-padding', $(this).val());
                                            $('.metaslider-active .content').css('padding', $(this).val() + 'px');
                                        });

                var snap_to_grid = $("<input class='px-1' type='checkbox' />")
                                        .attr('checked', 'checked')
                                        .change(function() {
                                            if ($(this).is(':checked')) {
                                                $(".layer").each(function() {
                                                    $(this).resizable({
                                                        grid: 5
                                                    })
                                                    .draggable({
                                                        grid: [5,5]
                                                    });
                                                });
                                            } else {
                                                $(".layer").each(function() {
                                                   $(this).resizable({
                                                        grid: false
                                                    })
                                                    .draggable({
                                                        grid: false
                                                    });
                                                });
                                            }
                                        }).wrap("<div class='ms-switch-button mr-0 ml-2'></div>");

                // Build the switch button style for the checkbox
                var snap_to_grid_switch = $("<div class='ms-switch-button mr-0 ml-2'>");
                var snap_to_grid_lbl = $("<label>");
                var snap_to_grid_span = $("<span>");

                snap_to_grid_lbl.append(snap_to_grid, snap_to_grid_span);
                snap_to_grid_switch.append(snap_to_grid_lbl);

                var snap_to_grid_label = $("<label id='snapToGrid'>" + metasliderpro.snapToGrid + "</label>")
                                                .css('float', 'right')
                                                .append(snap_to_grid_switch);

                var in_animations = [' ',
                    'flash','bounce','shake','tada',
                    'swing','wobble','wiggle','pulse','flip','flipInX',
                    'flipInY','fadeIn','fadeInUp','fadeInDown','fadeInLeft',
                    'fadeInRight','fadeInUpBig','fadeInDownBig','fadeInLeftBig',
                    'fadeInRightBig','bounceIn','bounceInDown','bounceInUp',
                    'bounceInLeft','bounceInRight','rotateIn','rotateInDownLeft',
                    'rotateInDownRight','rotateInUpLeft','rotateInUpRight',
                    'lightSpeedIn','hinge','rollIn'
                ];

                var out_animations = [' ',
                    'flash','bounce','shake',
                    'tada','swing','wobble','wiggle','pulse',
                    'flip','rollOut','lightSpeedOut','rotateOut',
                    'rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft',
                    'rotateOutUpRight','bounceOut','bounceOutDown','bounceOutUp',
                    'bounceOutLeft','bounceOutRight','flipOutY','flipOutX',
                    'fadeOut','fadeOutUp','fadeOutDown','fadeOutLeft',
                    'fadeOutRight','fadeOutUpBig','fadeOutDownBig','fadeOutLeftBig',
                    'fadeOutRightBig','hinge'
                ];

                var animation_in_delay = $("<input class='px-1' id='animation_in_delay' type='number' max='99' min='0' step='0.1' size='3' value='0' />")
                                                .change(function() {
                                                    layerEditor.checkForSelectedLayer();
                                                    layerEditor.updateLayerAnimationDelay();
                                                });

                var animation_out_delay = $("<input class='px-1' id='animation_out_delay' type='number' max='99' min='0' step='0.1' size='3' value='0' />")
                                                .change(function() {
                                                    layerEditor.checkForSelectedLayer();
                                                    layerEditor.updateLayerAnimationDelay();
                                                });

                var animation_in_options = $("<select id='animation_in' />")
                                                .change(function() {
                                                    layerEditor.checkForSelectedLayer();
                                                    var selected = $('#animation_in :selected').val();
                                                    var animation_in = $(".metaslider-active .animation_in");
                                                    animation_in.removeClass(animation_in.data('animation'));
                                                    animation_in.addClass(selected);
                                                    animation_in.attr('data-animation', selected);
                                                });

                var animation_out_options = $("<select id='animation_out' />")
                                                .change(function() {
                                                    layerEditor.checkForSelectedLayer();
                                                    var selected = $('#animation_out :selected').val();
                                                    var animation_out = $(".metaslider-active .animation_out");
                                                    animation_out.removeClass(animation_out.data('animation'));
                                                    animation_out.addClass(selected);
                                                    animation_out.attr('data-animation', selected);
                                                });

                for (i=0;i<in_animations.length;i++){
                   $('<option/>').val(in_animations[i]).html(in_animations[i]).appendTo(animation_in_options);
                }

                for (i=0;i<out_animations.length;i++){
                   $('<option/>').val(out_animations[i]).html(out_animations[i]).appendTo(animation_out_options);
                }

                html_overlay.after(img);

                animation_toolbar
                    .append(metasliderpro.wait)
                    .append(animation_in_delay)
                    .append(metasliderpro.secondsAnd)
                    .append(animation_in_options)
                    .append(metasliderpro.thenWait)
                    .append(animation_out_delay)
                    .append(metasliderpro.secondsAnd)
                    .append(animation_out_options);

                style_toolbar
                    .append("<b>" + metasliderpro.padding + ":</b>")
                    .append(layer_padding)
                    .append("&nbsp;&nbsp;<b>" + metasliderpro.background + ":</b>")
                    .append(layer_color_bg)
                    .append(slide_info)
                    .append(snap_to_grid_label);

                toolbar_wrapper
                    .append(wysiwyg_buttons)
                    .append(animation_toolbar)
                    .append(style_toolbar);

                layer_color_bg
                    .spectrum({
                        preferredFormat: "rgb",
                        showInput: true,
                        showAlpha: true,
                        change: function(color) {
                            $('.metaslider-active .content_wrap, .metaslider-active .ms_content_wrap').css('background-color', color.toRgbString());
                        }
                    });

                container
                    .append(html_overlay)
                    .append(img);

                return layer_editor
                        .append(add_layer_button)
                        .append(save_button)
                        .append(spinner)
                        .append(toolbar_wrapper)
                        .append(container);
            },

            get_html: function() {

                var html = "";
                var layers = $('#htmlOverlay').clone();

                $('.layer', layers).each(function() {
                    var layer = $(this);
                    var content = $('.content', layer);
                    var id = content.attr('id');

                    // getData returns formatted HTML
                    content.html(CKEDITOR.instances[id].getData());

                    // remove drag handle
                    $('.drag_handle', layer).remove();
                    $('.delete_button', layer).remove();

                    // clean up
                    content.removeAttr('tabindex');
                    content.removeAttr('spellcheck');
                    content.removeAttr('contenteditable');
                    content.removeAttr('title');
                    content.removeAttr('aria-describedby');
                    content.removeAttr('role');
                    content.removeAttr('aria-label');
                    content.removeClass('cke_editable_inline cke_contents_ltr cke_show_borders cke_editable cke_focus');

                    layer.removeClass('ui-resizable');
                    layer.removeClass('ui-draggable');
                    layer.removeClass('metaslider-active');
                    layer.css('cursor', '');
                    layer.css('background-position', '');
                    layer.css('background-repeat', '');
                    $('.ui-resizable-handle', layer).remove();
                });

                return layers.html();
            },

            init: function() {
                CKEDITOR.disableAutoInline = true;
                CKEDITOR.config.allowedContent = true;
                CKEDITOR.config.language = 'en';
                CKEDITOR.config.skin = 'ms-moono';

                layerEditor.checkSaveRequest();

                // Style secondary CKEditor buttons
                $('#cboxClose')
                    .addClass('capitalize inline-flex items-center justify-center px-4 py-2 border border-orange font-medium rounded-md transition ease-in-out duration-150 md:w-auto md:text-sm md:leading-5 bg-white hover:border-orange-darker hover:text-orange-darker active:border-orange-darkest active:text-orange-darkest text-orange');

                $('.layer').each(function() {
                    layerEditor.makeLayerEditable($(this));
                }); 
            },

            makeLayerEditable: function(layer) {
                var delete_button = $("<div class='delete_button'>X</div>").click(function() {
                    if (confirm(metasliderpro.areYouSure)) {
                        layer.remove();
                    }
                });

                layer
                    .prepend(delete_button)
                    .append("<div class='drag_handle'>X</div>")
                    .resizable({
                        handles: "se",
                        containment: "#htmlOverlay",
                        grid: 5,
                        stop: function(event, ui) {
                            var width = ui.size.width;
                            $(this).attr('data-width', width);
                            var height = ui.size.height;
                            $(this).attr('data-height', height);
                        }
                    })
                    .draggable({
                        containment: "#htmlOverlay",
                        handle: ".drag_handle",
                        grid: [5,5],
                        stop: function(event, ui) {
                            var top = ui.position.top;
                            $(this).attr('data-top', top);
                            var left = ui.position.left;
                            $(this).attr('data-left', left);
                        }
                    });

                $('.content', layer)
                    .attr('contenteditable', 'true')
                    .focus(function() {
                        $('.metaslider-active').removeClass('metaslider-active');
                        $(this).parent().parent().parent().parent().addClass('metaslider-active');
                        $("#animation_out_delay").val($('.animation_out', layer).data('animation-delay'));
                        $("#animation_in_delay").val($('.animation_in', layer).data('animation-delay'));
                        $("#animation_out").val($('.animation_out', layer).data('animation'));
                        $("#animation_in").val($('.animation_in', layer).data('animation'));
                        $("#layer_padding").val($('.content', layer).data('padding'));
                        $("#layerBgColor").spectrum("set", $('.content_wrap, .ms_content_wrap', layer).css('background-color'));
                    });

                CKEDITOR.inline($('.content', layer).attr('id'));
            }
        };
        $('.metaslider').on('metaslider/attachment/updated', '.slide', function(event, data) {
            if(data.img_url) {
                $(this).find('.openLayerEditor').data('thumb', data.img_url);
            }
        });
		$(".metaslider table#metaslider-slides-list").on('metaslider/size-has-changed', function(event, new_size) {
            $('.openLayerEditor').data('width', new_size.width).data('height', new_size.height);
        });
        // launch the layer editor
        $('.metaslider').on('click', '.openLayerEditor', function(e) {
            e.preventDefault();
            $('#colorbox').removeAttr('tabindex');

            var button = $(this);

            if (!button.data('height')) {
                return alert(metasliderpro.setHeight);
            }

            if (!button.data('width')) {
                return alert(metasliderpro.setWidth);
            }
            
            var width = parseInt(button.data('width'), 10) < 850 ? 850 : parseInt(button.data('width'), 10);

            var bg_url = button.closest('.slide').find('.update-image').data('cropped-img-url') || button.data('thumb');

            var colorbox = jQuery.colorbox({
                html: layerEditor.render(bg_url, button.data('editor_id'), button.data('width'), button.data('height')),
                transition: "elastic",
                innerHeight: parseInt(button.data('height'), 10) + 210 + 'px',
                innerWidth: width + 'px',
                scrolling: true,
                className: 'layerEditorCbox',
                onCleanup: function() {
                    layerEditor.save_on_close(button.data('editor_id'));
                },
                onComplete: function() {
                    layerEditor.init();

                    // fix for RTL languages when layer editor is > 100% wide
                    if (jQuery('html').attr('dir') == 'rtl' && jQuery('#colorbox').css('left') == '0px') {
                        jQuery('#colorbox').css('left', 'auto');
                    }
                }
            });
        });
    });
}(jQuery));