/*
	Author: Jeremy Espinosa
	Filename: zoom.js
	Description: To apply zoom functionality to an image by hovering and touch/grab in mobile devices
	Dependencies:
		- jquery-zoom
	How to use:
		1. Add .js-image-zoom class to the parent of the image
		2. You may also override the default config by passing config object with these properties you can on https://www.jacklmoore.com/zoom/
	Sample HTML:
			<div class="zoom js-image-zoom">
				<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/01/12095439/shih_tzu_hero_puppy.jpg" class="w-100" alt="">
			</div>
*/

;(function($) {
    'use strict'

    B2C.zoom = {
        init: function(option) {
            // set default
            this._default = {
                target: '.js-image-zoom',
                config: {
                    magnify: 2,
                    duration: 150,
                    callback: this.callback || option.config.callback,
                    onZoomIn: this.onZoomIn || option.config.onZoomIn,
                    onZoomOut: this.onZoomOut || option.config.onZoomOut
                }
            }

            // combine the default and option pass
            this._option = $.extend(true, this._default, option)

            if (!$(this._option.target).length) return

            this.setZoomImage()

            // initialize the jquery zoom
            $(`${this._option.target}`).zoom(this._option.config)
        },

        callback: function() {
            // callback when image load
        },

        onZoomIn: function() {
            // default zoom in callback
        },

        onZoomOut: function() {
            // default zoom out callback
        },

        setZoomImage: function() {
            let zoomImage = $(this._option.target).data('zoom-image')

            this._option = $.extend(true, this._default, {
                url: zoomImage
            })
        }
    }

    // initialize zoom
    const defaultZoom = Object.create(B2C.zoom)

    defaultZoom.init()
})(jQuery)
