;(function(factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = factory(require('jquery'), window, document)
    } else {
        factory(jQuery, window, document)
    }
})(function($, window, document, undefined) {
    var calls = 0

    function Chocolat(element, settings) {
        var that = this

        this.settings = settings
        this.elems = {}
        this.element = element

        this._cssClasses = [
            'chocolat-open',
            'chocolat-in-container',
            'chocolat-cover',
            'chocolat-zoomable',
            'chocolat-zoomed',
        ]

        if (!this.settings.setTitle && element.data('chocolat-title')) {
            this.settings.setTitle = element.data('chocolat-title')
        }

        this.element.find(this.settings.imageSelector).each(function() {
            that.settings.images.push({
                title: $(this).attr('title'),
                src: $(this).attr(that.settings.imageSource),
                height: false,
                width: false,
            })
        })

        this.element.find(this.settings.imageSelector).each(function(i) {
            $(this)
                .off('click.chocolat')
                .on('click.chocolat', function(e) {
                    that.init(i)
                    e.preventDefault()
                })
        })

        return this
    }

    $.extend(Chocolat.prototype, {
        init: function(i) {
            if (!this.settings.initialized) {
                this.setDomContainer()
                this.markup()
                this.events()
                this.settings.lastImage = this.settings.images.length - 1
                this.settings.initialized = true
            }

            this.settings.afterInitialize.call(this)

            return this.load(i)
        },

        preload: function(i) {
            var def = $.Deferred()

            if (typeof this.settings.images[i] === 'undefined') {
                return
            }
            var imgLoader = new Image()
            imgLoader.onload = function() {
                def.resolve(imgLoader)
            }
            imgLoader.src = this.settings.images[i].src

            return def
        },

        load: function(i) {
            var that = this
            if (this.settings.fullScreen) {
                this.openFullScreen()
            }

            if (this.settings.currentImage === i) {
                return
            }

            this.elems.overlay.fadeIn(this.settings.duration)
            this.elems.wrapper.fadeIn(this.settings.duration)
            this.elems.domContainer.addClass('chocolat-open')

            this.settings.timer = setTimeout(function() {
                if (typeof that.elems != 'undefined') {
                    $.proxy(that.elems.loader.fadeIn(), that)
                }
            }, this.settings.duration)

            var deferred = this.preload(i)
                .then(function(imgLoader) {
                    return that.place(i, imgLoader)
                })
                .then(function(imgLoader) {
                    return that.appear(i)
                })
                .then(function(imgLoader) {
                    that.zoomable()
                    that.settings.afterImageLoad.call(that)
                })

            var nextIndex = i + 1
            if (typeof this.settings.images[nextIndex] != 'undefined') {
                this.preload(nextIndex)
            }

            return deferred
        },

        place: function(i, imgLoader) {
            var that = this
            var fitting

            this.settings.currentImage = i
            this.description()
            this.pagination()
            this.arrows()

            this.storeImgSize(imgLoader, i)
            fitting = this.fit(i, that.elems.wrapper)

            return this.center(fitting.width, fitting.height, fitting.left, fitting.top, 0)
        },

        center: function(width, height, left, top, duration) {
            return this.elems.content
                .css('overflow', 'visible')
                .animate(
                    {
                        width: width,
                        height: height,
                        left: left,
                        top: top,
                    },
                    duration
                )
                .promise()
        },

        appear: function(i) {
            var that = this
            clearTimeout(this.settings.timer)

            this.elems.loader.stop().fadeOut(300, function() {
                that.elems.img.attr('src', that.settings.images[i].src)
            })
        },

        fit: function(i, container) {
            var height
            var width

            var imgHeight = this.settings.images[i].height
            var imgWidth = this.settings.images[i].width
            var holderHeight = $(container).height()
            var holderWidth = $(container).width()
            var holderOutMarginH = this.getOutMarginH()
            var holderOutMarginW = this.getOutMarginW()

            var holderGlobalWidth = holderWidth - holderOutMarginW
            var holderGlobalHeight = holderHeight - holderOutMarginH
            var holderGlobalRatio = holderGlobalHeight / holderGlobalWidth
            var holderRatio = holderHeight / holderWidth
            var imgRatio = imgHeight / imgWidth

            if (this.settings.imageSize == 'cover') {
                if (imgRatio < holderRatio) {
                    height = holderHeight
                    width = height / imgRatio
                } else {
                    width = holderWidth
                    height = width * imgRatio
                }
            } else if (this.settings.imageSize == 'native') {
                height = imgHeight
                width = imgWidth
            } else {
                if (imgRatio > holderGlobalRatio) {
                    height = holderGlobalHeight
                    width = height / imgRatio
                } else {
                    width = holderGlobalWidth
                    height = width * imgRatio
                }
                if (
                    this.settings.imageSize === 'default' &&
                    (width >= imgWidth || height >= imgHeight)
                ) {
                    width = imgWidth
                    height = imgHeight
                }
            }

            return {
                height: height,
                width: width,
                top: (holderHeight - height) / 2,
                left: (holderWidth - width) / 2,
            }
        },

        change: function(signe) {
            this.zoomOut(0)
            this.zoomable()

            var requestedImage = this.settings.currentImage + parseInt(signe)
            if (requestedImage > this.settings.lastImage) {
                if (this.settings.loop) {
                    return this.load(0)
                }
            } else if (requestedImage < 0) {
                if (this.settings.loop) {
                    return this.load(this.settings.lastImage)
                }
            } else {
                return this.load(requestedImage)
            }
        },

        arrows: function() {
            if (this.settings.loop) {
                $([this.elems.left[0], this.elems.right[0]]).addClass('active')
            } else if (this.settings.linkImages) {
                // right
                if (this.settings.currentImage == this.settings.lastImage) {
                    this.elems.right.removeClass('active')
                } else {
                    this.elems.right.addClass('active')
                }
                // left
                if (this.settings.currentImage === 0) {
                    this.elems.left.removeClass('active')
                } else {
                    this.elems.left.addClass('active')
                }
            } else {
                $([this.elems.left[0], this.elems.right[0]]).removeClass('active')
            }
        },

        description: function() {
            var that = this
            this.elems.description.html(that.settings.images[that.settings.currentImage].title)
        },

        pagination: function() {
            var that = this
            var last = this.settings.lastImage + 1
            var position = this.settings.currentImage + 1

            this.elems.pagination.html(position + ' ' + that.settings.separator2 + last)
        },

        storeImgSize: function(img, i) {
            if (typeof img === 'undefined') {
                return
            }
            if (!this.settings.images[i].height || !this.settings.images[i].width) {
                this.settings.images[i].height = img.height
                this.settings.images[i].width = img.width
            }
        },

        close: function() {
            if (this.settings.fullscreenOpen) {
                this.exitFullScreen()
                return
            }

            var els = [this.elems.overlay[0], this.elems.loader[0], this.elems.wrapper[0]]
            var that = this
            var def = $.when($(els).fadeOut(200)).done(function() {
                that.elems.domContainer.removeClass('chocolat-open')
            })
            this.settings.currentImage = false

            return def
        },

        destroy: function() {
            this.element.removeData()
            this.element.find(this.settings.imageSelector).off('click.chocolat')

            if (!this.settings.initialized) {
                return
            }
            if (this.settings.fullscreenOpen) {
                this.exitFullScreen()
            }
            this.settings.currentImage = false
            this.settings.initialized = false
            this.elems.domContainer.removeClass(this._cssClasses.join(' '))
            this.elems.wrapper.remove()
        },

        getOutMarginW: function() {
            var left = this.elems.left.outerWidth(true)
            var right = this.elems.right.outerWidth(true)
            return left + right
        },

        getOutMarginH: function() {
            return this.elems.top.outerHeight(true) + this.elems.bottom.outerHeight(true)
        },

        markup: function() {
            this.elems.domContainer.addClass('chocolat-open ' + this.settings.className)
            if (this.settings.imageSize == 'cover') {
                this.elems.domContainer.addClass('chocolat-cover')
            }
            if (this.settings.container !== window) {
                this.elems.domContainer.addClass('chocolat-in-container')
            }

            this.elems.wrapper = $('<div/>', {
                class: 'chocolat-wrapper',
                id: 'chocolat-content-' + this.settings.setIndex,
            }).appendTo(this.elems.domContainer)

            this.elems.overlay = $('<div/>', {
                class: 'chocolat-overlay',
            }).appendTo(this.elems.wrapper)

            this.elems.loader = $('<div/>', {
                class: 'chocolat-loader',
            }).appendTo(this.elems.wrapper)

            this.elems.content = $('<div/>', {
                class: 'chocolat-content',
            }).appendTo(this.elems.wrapper)

            this.elems.img = $('<img/>', {
                class: 'chocolat-img',
                src: '',
            }).appendTo(this.elems.content)

            this.elems.top = $('<div/>', {
                class: 'chocolat-top',
            }).appendTo(this.elems.wrapper)

            this.elems.left = $('<div/>', {
                class: 'chocolat-left',
            }).appendTo(this.elems.wrapper)

            this.elems.right = $('<div/>', {
                class: 'chocolat-right',
            }).appendTo(this.elems.wrapper)

            this.elems.bottom = $('<div/>', {
                class: 'chocolat-bottom',
            }).appendTo(this.elems.wrapper)

            this.elems.close = $('<span/>', {
                class: 'chocolat-close',
            }).appendTo(this.elems.top)

            this.elems.fullscreen = $('<span/>', {
                class: 'chocolat-fullscreen',
            }).appendTo(this.elems.bottom)

            this.elems.description = $('<span/>', {
                class: 'chocolat-description',
            }).appendTo(this.elems.bottom)

            this.elems.pagination = $('<span/>', {
                class: 'chocolat-pagination',
            }).appendTo(this.elems.bottom)

            this.elems.setTitle = $('<span/>', {
                class: 'chocolat-set-title',
                html: this.settings.setTitle,
            }).appendTo(this.elems.bottom)

            this.settings.afterMarkup.call(this)
        },

        openFullScreen: function() {
            var wrapper = this.elems.wrapper[0]

            if (wrapper.requestFullscreen) {
                this.settings.fullscreenOpen = true
                wrapper.requestFullscreen()
            } else if (wrapper.mozRequestFullScreen) {
                this.settings.fullscreenOpen = true
                wrapper.mozRequestFullScreen()
            } else if (wrapper.webkitRequestFullscreen) {
                this.settings.fullscreenOpen = true
                wrapper.webkitRequestFullscreen()
            } else if (wrapper.msRequestFullscreen) {
                wrapper.msRequestFullscreen()
                this.settings.fullscreenOpen = true
            } else {
                this.settings.fullscreenOpen = false
            }
        },

        exitFullScreen: function() {
            if (document.exitFullscreen) {
                document.exitFullscreen()
                this.settings.fullscreenOpen = false
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen()
                this.settings.fullscreenOpen = false
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen()
                this.settings.fullscreenOpen = false
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen()
                this.settings.fullscreenOpen = false
            } else {
                this.settings.fullscreenOpen = true
            }
        },

        events: function() {
            var that = this

            $(document)
                .off('keydown.chocolat')
                .on('keydown.chocolat', function(e) {
                    if (that.settings.initialized) {
                        if (e.keyCode == 37) {
                            that.change(-1)
                        } else if (e.keyCode == 39) {
                            that.change(1)
                        } else if (e.keyCode == 27) {
                            that.close()
                        }
                    }
                })
            // this.elems.wrapper.find('.chocolat-img')
            //     .off('click.chocolat')
            //     .on('click.chocolat', function(e) {
            //         var currentImage = that.settings.images[that.settings.currentImage];
            //         if(currentImage.width > $(that.elems.wrapper).width() || currentImage.height > $(that.elems.wrapper).height() ){
            //             that.toggleZoom(e);
            //         }
            // });

            this.elems.wrapper
                .find('.chocolat-right')
                .off('click.chocolat')
                .on('click.chocolat', function() {
                    that.change(+1)
                })

            this.elems.wrapper
                .find('.chocolat-left')
                .off('click.chocolat')
                .on('click.chocolat', function() {
                    return that.change(-1)
                })

            $([this.elems.overlay[0], this.elems.close[0]])
                .off('click.chocolat')
                .on('click.chocolat', function() {
                    return that.close()
                })

            this.elems.fullscreen.off('click.chocolat').on('click.chocolat', function() {
                if (that.settings.fullscreenOpen) {
                    that.exitFullScreen()
                    return
                }

                that.openFullScreen()
            })

            if (that.settings.backgroundClose) {
                this.elems.overlay.off('click.chocolat').on('click.chocolat', function() {
                    return that.close()
                })
            }
            this.elems.wrapper.off('click.chocolat').on('click.chocolat', function(e) {
                return that.zoomOut(e)
            })

            this.elems.wrapper
                .find('.chocolat-img')
                .off('click.chocolat')
                .on('click.chocolat', function(e) {
                    if (
                        that.settings.initialZoomState === null &&
                        that.elems.domContainer.hasClass('chocolat-zoomable')
                    ) {
                        e.stopPropagation()
                        return that.zoomIn(e)
                    }
                })

            this.elems.wrapper.mousemove(function(e) {
                if (that.settings.initialZoomState === null) {
                    return
                }
                if (that.elems.img.is(':animated')) {
                    return
                }

                var pos = $(this).offset()
                var height = $(this).height()
                var width = $(this).width()

                var currentImage = that.settings.images[that.settings.currentImage]
                var imgWidth = currentImage.width
                var imgHeight = currentImage.height

                var coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top]

                var mvtX = 0
                if (imgWidth > width) {
                    var paddingX = that.settings.zoomedPaddingX(imgWidth, width)
                    mvtX = coord[0] / (width / 2)
                    mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX
                }

                var mvtY = 0
                if (imgHeight > height) {
                    var paddingY = that.settings.zoomedPaddingY(imgHeight, height)
                    mvtY = coord[1] / (height / 2)
                    mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY
                }

                var animation = {
                    'margin-left': -mvtX + 'px',
                    'margin-top': -mvtY + 'px',
                }
                if (typeof e.duration !== 'undefined') {
                    $(that.elems.img)
                        .stop(false, true)
                        .animate(animation, e.duration)
                } else {
                    $(that.elems.img)
                        .stop(false, true)
                        .css(animation)
                }
            })
            $(window).on('resize', function() {
                if (!that.settings.initialized || that.settings.currentImage === false) {
                    return
                }
                that.debounce(50, function() {
                    var fitting = that.fit(that.settings.currentImage, that.elems.wrapper)
                    that.center(fitting.width, fitting.height, fitting.left, fitting.top, 0)
                    that.zoomable()
                })
            })
        },

        zoomable: function() {
            var currentImage = this.settings.images[this.settings.currentImage]
            var wrapperWidth = this.elems.wrapper.width()
            var wrapperHeight = this.elems.wrapper.height()

            var isImageZoomable =
                this.settings.enableZoom &&
                (currentImage.width > wrapperWidth || currentImage.height > wrapperHeight)
                    ? true
                    : false
            var isImageStretched =
                this.elems.img.width() > currentImage.width ||
                this.elems.img.height() > currentImage.height

            if (isImageZoomable && !isImageStretched) {
                this.elems.domContainer.addClass('chocolat-zoomable')
            } else {
                this.elems.domContainer.removeClass('chocolat-zoomable')
            }
        },

        zoomIn: function(e) {
            this.settings.initialZoomState = this.settings.imageSize
            this.settings.imageSize = 'native'

            var event = $.Event('mousemove')
            event.pageX = e.pageX
            event.pageY = e.pageY
            event.duration = this.settings.duration
            this.elems.wrapper.trigger(event)

            this.elems.domContainer.addClass('chocolat-zoomed')
            var fitting = this.fit(this.settings.currentImage, this.elems.wrapper)
            return this.center(
                fitting.width,
                fitting.height,
                fitting.left,
                fitting.top,
                this.settings.duration
            )
        },

        zoomOut: function(e, duration) {
            if (this.settings.initialZoomState === null || this.settings.currentImage === false) {
                return
            }
            duration = duration || this.settings.duration

            this.settings.imageSize = this.settings.initialZoomState
            this.settings.initialZoomState = null
            this.elems.img.animate({ margin: 0 }, duration)

            this.elems.domContainer.removeClass('chocolat-zoomed')
            var fitting = this.fit(this.settings.currentImage, this.elems.wrapper)
            return this.center(fitting.width, fitting.height, fitting.left, fitting.top, duration)
        },

        setDomContainer: function() {
            // if container == window
            // domContainer = body
            if (this.settings.container === window) {
                this.elems.domContainer = $('body')
            } else {
                this.elems.domContainer = $(this.settings.container)
            }
        },

        debounce: function(duration, callback) {
            clearTimeout(this.settings.timerDebounce)
            this.settings.timerDebounce = setTimeout(function() {
                callback()
            }, duration)
        },

        api: function() {
            var that = this
            return {
                open: function(i) {
                    i = parseInt(i) || 0
                    return that.init(i)
                },

                close: function() {
                    return that.close()
                },

                next: function() {
                    return that.change(1)
                },

                prev: function() {
                    return that.change(-1)
                },

                goto: function(i) {
                    // open alias
                    return that.open(i)
                },
                current: function() {
                    return that.settings.currentImage
                },

                place: function() {
                    return that.place(that.settings.currentImage, that.settings.duration)
                },

                destroy: function() {
                    return that.destroy()
                },

                set: function(property, value) {
                    that.settings[property] = value
                    return value
                },

                get: function(property) {
                    return that.settings[property]
                },

                getElem: function(name) {
                    return that.elems[name]
                },
            }
        },
    })

    var defaults = {
        container: window, // window or jquery object or jquery selector, or element
        imageSelector: '.chocolat-image',
        className: '',
        imageSize: 'default', // 'default', 'contain', 'cover' or 'native'
        initialZoomState: null,
        fullScreen: false,
        loop: false,
        linkImages: true,
        duration: 300,
        setTitle: '',
        separator2: '/',
        setIndex: 0,
        firstImage: 0,
        lastImage: false,
        currentImage: false,
        initialized: false,
        timer: false,
        timerDebounce: false,
        images: [],
        enableZoom: true,
        imageSource: 'href',
        afterInitialize: function() {},
        afterMarkup: function() {},
        afterImageLoad: function() {},
        zoomedPaddingX: function(canvasWidth, imgWidth) {
            return 0
        },
        zoomedPaddingY: function(canvasHeight, imgHeight) {
            return 0
        },
    }

    $.fn.Chocolat = function(options) {
        return this.each(function() {
            calls++
            var settings = $.extend(true, {}, defaults, options, { setIndex: calls })

            if (!$.data(this, 'chocolat')) {
                $.data(this, 'chocolat', new Chocolat($(this), settings))
            }
        })
    }

    return $.fn.Chocolat
})