$(function() {
    /*

		Creative example - Customized layout
	    ====================================

	*/

    $('[data-fancybox="cl-group"]').fancybox({
        baseClass: "fancybox-custom-layout",
        infobar: false,
        touch: {
            vertical: false
        },
        buttons: ["close", "thumbs", "share"],
        animationEffect: "fade",
        transitionEffect: "fade",
        preventCaptionOverlap: false,
        idleTime: false,
        gutter: 0,
        // Customize caption area
        caption: function(instance) {
            return '<h3>home</h3><p>interiors, exteriors, and the humans that inhabit them.</p><p><a href="https://unsplash.com/collections/curated/162" target="_blank">unsplash.com</a></p>';
        }
    });

    /*

		Creative example - Product quick view
	    =====================================

	*/

    $(".quick_view").fancybox({
        baseClass: "quick-view-container",
        infobar: false,
        buttons: false,
        thumbs: false,
        margin: 0,
        touch: {
            vertical: false
        },
        animationEffect: false,
        transitionEffect: "slide",
        transitionDuration: 500,
        baseTpl: '<div class="fancybox-container" role="dialog">' +
            '<div class="quick-view-content">' +
            '<div class="quick-view-carousel">' +
            '<div class="fancybox-stage"></div>' +
            "</div>" +
            '<div class="quick-view-aside"></div>' +
            '<button data-fancybox-close class="quick-view-close">X</button>' +
            "</div>" +
            "</div>",

        onInit: function(instance) {
            /*

			    #1 Create bullet navigation links
			    =================================

			*/

            var bullets = '<ul class="quick-view-bullets">';

            for (var i = 0; i < instance.group.length; i++) {
                bullets += '<li><a data-index="' + i + '" href="javascript:;"><span>' + (i + 1) + "</span></a></li>";
            }

            bullets += "</ul>";

            $(bullets)
                .on("click touchstart", "a", function() {
                    var index = $(this).data("index");

                    $.fancybox.getInstance(function() {
                        this.jumpTo(index);
                    });
                })
                .appendTo(instance.$refs.container.find(".quick-view-carousel"));

            /*

			    #2 Add product form
			    ===================

			*/

            var $element = instance.group[instance.currIndex].opts.$orig;
            var form_id = $element.data("qw-form");

            instance.$refs.container.find(".quick-view-aside").append(
                // In this example, this element contains the form
                $("#" + form_id)
                .clone(true)
                .removeClass("hidden")
            );
        },

        beforeShow: function(instance) {
            /*
			    Mark current bullet navigation link as active
			*/

            instance.$refs.container
                .find(".quick-view-bullets")
                .children()
                .removeClass("active")
                .eq(instance.currIndex)
                .addClass("active");
        }
    });

    /*

	    Creative example - Confirm dialog

	    See demo on CodePen: https://codepen.io/fancyapps/full/Ebmqgv/
	    ===========================================================

	*/

    // Step 1: Create reusable jQuery plugin
    // =====================================

    $.fancyConfirm = function(opts) {
        opts = $.extend(
            true, {
                title: "Are you sure?",
                message: "",
                okButton: "OK",
                noButton: "Cancel",
                callback: $.noop
            },
            opts || {}
        );

        $.fancybox.open({
            type: "html",
            src: '<div class="fc-content p-5 rounded">' +
                '<h2 class="mb-3">' +
                opts.title +
                "</h2>" +
                "<p>" +
                opts.message +
                "</p>" +
                '<p class="text-right">' +
                '<a data-value="0" data-fancybox-close href="javascript:;" class="mr-2">' +
                opts.noButton +
                "</a>" +
                '<button data-value="1" data-fancybox-close class="btn btn-primary">' +
                opts.okButton +
                "</button>" +
                "</p>" +
                "</div>",
            opts: {
                animationDuration: 350,
                animationEffect: "material",
                modal: true,
                baseTpl: '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
                    '<div class="fancybox-bg"></div>' +
                    '<div class="fancybox-inner">' +
                    '<div class="fancybox-stage"></div>' +
                    "</div>" +
                    "</div>",
                afterClose: function(instance, current, e) {
                    var button = e ? e.target || e.currentTarget : null;
                    var value = button ? $(button).data("value") : 0;

                    opts.callback(value);
                }
            }
        });
    };

    // Step 2: Start using it!
    // =======================

    $("#test_confirm").click(function() {
        // Open customized confirmation dialog window
        $.fancyConfirm({
            title: "Use Google's location service?",
            message: "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running",
            okButton: "Agree",
            noButton: "Disagree",
            callback: function(value) {
                if (value) {
                    $("#test_confirm_rez").html("Let's do this!");
                } else {
                    $("#test_confirm_rez").html("Maybe later.");
                }
            }
        });
    });

    /*

		Creative example - Morphing modal window

	    See demo on CodePen: https://codepen.io/fancyapps/full/xPdvdp/
	    ==============================================================

	*/

    // Step 1: Create jQuery plugin
    // ============================

    $.fn.fancyMorph = function(opts) {
        var Morphing = function($btn, opts) {
            var self = this;

            self.opts = $.extend({
                    animationEffect: false,
                    infobar: false,
                    buttons: ["close"],
                    smallBtn: false,
                    touch: false,
                    baseClass: "fancybox-morphing",
                    afterClose: function() {
                        self.close();
                    }
                },
                opts
            );

            self.init($btn);
        };

        Morphing.prototype.init = function($btn) {
            var self = this;

            self.$btn = $btn.addClass("morphing-btn");

            self.$clone = $('<div class="morphing-btn-clone" />')
                .hide()
                .insertAfter($btn);

            // Add wrapping element and set initial width used for positioning
            $btn.wrap('<span class="morphing-btn-wrap"></span>').on("click", function(e) {
                e.preventDefault();

                self.start();
            });
        };

        Morphing.prototype.start = function() {
            var self = this;

            if (self.$btn.hasClass("morphing-btn_circle")) {
                return;
            }

            // Set initial width, because it is not possible to start CSS transition from "auto"
            self.$btn
                .width(self.$btn.width())
                .parent()
                .width(self.$btn.outerWidth());

            self.$btn
                .off(".fm")
                .on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
                    if (e.originalEvent.propertyName === "width") {
                        self.$btn.off(".fm");

                        self.animateBg();
                    }
                })
                .addClass("morphing-btn_circle");
        };

        Morphing.prototype.animateBg = function() {
            var self = this;

            self.scaleBg();

            self.$clone.show();

            // Trigger repaint
            self.$clone[0].offsetHeight;

            self.$clone
                .off(".fm")
                .on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
                    self.$clone.off(".fm");

                    self.complete();
                })
                .addClass("morphing-btn-clone_visible");
        };

        Morphing.prototype.scaleBg = function() {
            var self = this;

            var $clone = self.$clone;
            var scale = self.getScale();
            var $btn = self.$btn;
            var pos = $btn.offset();

            $clone.css({
                top: pos.top + $btn.outerHeight() * 0.5 - $btn.outerHeight() * scale * 0.5 - $(window).scrollTop(),
                left: pos.left + $btn.outerWidth() * 0.5 - $btn.outerWidth() * scale * 0.5 - $(window).scrollLeft(),
                width: $btn.outerWidth() * scale,
                height: $btn.outerHeight() * scale,
                transform: "scale(" + 1 / scale + ")"
            });
        };

        Morphing.prototype.getScale = function() {
            var $btn = this.$btn,
                radius = $btn.outerWidth() * 0.5,
                left = $btn.offset().left + radius - $(window).scrollLeft(),
                top = $btn.offset().top + radius - $(window).scrollTop(),
                windowW = $(window).width(),
                windowH = $(window).height();

            var maxDistHor = left > windowW / 2 ? left : windowW - left,
                maxDistVert = top > windowH / 2 ? top : windowH - top;

            return Math.ceil(Math.sqrt(Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2)) / radius);
        };

        Morphing.prototype.complete = function() {
            var self = this;
            var $btn = self.$btn;

            $.fancybox.open({
                src: $btn.data("src") || $btn.attr("href")
            }, self.opts);
        };

        Morphing.prototype.close = function() {
            var self = this;
            var $clone = self.$clone;

            self.scaleBg();

            $clone.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
                $clone.hide();

                self.$btn.removeClass("morphing-btn_circle");
            });

            $clone.removeClass("morphing-btn-clone_visible");

            $(window).off("resize.fm");
        };

        // Init
        this.each(function() {
            var $this = $(this);

            if (!$this.data("morphing")) {
                $this.data("morphing", new Morphing($this, opts));
            }
        });

        return this;
    };

    // Step 2: Start using it!
    // =======================

    $("[data-morphing]").fancyMorph({
        hash: "morphing"
    });
});