mag-jquery.js

/**
 * mag-jquery
 */

/**
 * @external jQuery
 * @see {@link https://api.jquery.com/jQuery/}
 */

/**
 * @external HTMLElement
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement}
 */

(function (root, factory) {
  'use strict'; // eslint-disable-line semi

  var name = 'Magnificent'
  if (typeof define === 'function' && define.amd) {
    define(['./mag', './mag-analytics', 'jquery', 'hammerjs', 'prevent-ghost-click', 'jquery-bridget'],
      function (mag, MagnificentAnalytics, jQuery, Hammer) {
        return (root[name] = factory(mag, MagnificentAnalytics, jQuery, Hammer, root.PreventGhostClick))
      }
    )
  } else if (typeof exports === 'object') {
    module.exports = factory(require('./mag'), require('./mag-analytics'),
      require('jquery'), require('hammerjs'), require('prevent-ghost-click'),
      require('jquery-bridget')
    )
  } else {
    root[name] = factory(root.Mag, root.MagnificentAnalytics,
      root.jQuery, root.Hammer, root.PreventGhostClick
    )
  }
}(this, function (Mag, MagnificentAnalytics, $, Hammer, PreventGhostClick) {
  'use strict'; // eslint-disable-line semi

  $(':root').addClass('mag-js')

  var normalizeOffsets = function (e, $target) {
    $target = $target || $(e.target)
    var offset = $target.offset()
    return {
      x: e.pageX - offset.left,
      y: e.pageY - offset.top
    }
  }

  var ratioOffsets = function (e, $target) {
    $target = $target || $(e.target)
    var normOff = normalizeOffsets(e, $target)
    return {
      x: normOff.x / $target.width(),
      y: normOff.y / $target.height()
    }
  }

  var ratioOffsetsFor = function ($target, x, y) {
    return {
      x: x / $target.width(),
      y: y / $target.height()
    }
  }

  var cssPerc = function (frac) {
    return (frac * 100) + '%'
  }

  var toCSS = function (pt, mode, id) {
    if (mode === '3d') {
      return toCSSTransform3d(pt, id)
    }

    if (mode === '2d') {
      return toCSSTransform2d(pt, id)
    }

    // mode === 'position'
    return toCSSPosition(pt, id)
  }

  var toCSSPosition = function (pt, id) {
    var css = {}

    if (pt.x !== undefined) css.left = cssPerc(pt.x)
    if (pt.y !== undefined) css.top = cssPerc(pt.y)
    if (pt.w !== undefined) css.width = cssPerc(pt.w)
    if (pt.h !== undefined) css.height = cssPerc(pt.h)

    return css
  }

  var toCSSTransform2d = function (pt, id) {
    var css = {}
    var left
    var top
    var width
    var height

    var x = pt.x
    var y = pt.y
    var w = pt.w
    var h = pt.h

    x += (w - 1) * (0.5 - x) / w
    y += (h - 1) * (0.5 - y) / h

    if (x !== undefined) left = cssPerc(x)
    if (y !== undefined) top = cssPerc(y)
    if (w !== undefined) width = w
    if (h !== undefined) height = h

    var transform = ''

    if (width) transform += ' scaleX(' + width + ')'
    if (height) transform += ' scaleY(' + height + ')'
    if (left) transform += ' translateX(' + left + ')'
    if (top) transform += ' translateY(' + top + ')'

    css['-webkit-transform'] = transform
    css['-moz-transform'] = transform
    css['-ms-transform'] = transform
    css['-o-transform'] = transform
    css.transform = transform

    return css
  }

  var toCSSTransform3d = function (pt, id) {
    var css = {}
    var left
    var top
    var width
    var height

    var x = pt.x
    var y = pt.y
    var w = pt.w
    var h = pt.h

    x += (w - 1) * (0.5 - x) / w
    y += (h - 1) * (0.5 - y) / h

    if (x !== undefined) left = cssPerc(x)
    if (y !== undefined) top = cssPerc(y)
    if (w !== undefined) width = w
    if (h !== undefined) height = h

    var transform = ''
    transform += ' scale3d(' +
      (width !== undefined ? width : 0) + ',' +
      (height !== undefined ? height : 0) +
      ',1)'
    transform += ' translate3d(' +
      (left !== undefined ? left : 0) + ',' +
      (top !== undefined ? top : 0) +
      ',0)'

    css['-webkit-transform'] = transform
    css['-moz-transform'] = transform
    css['-ms-transform'] = transform
    css['-o-transform'] = transform
    css.transform = transform

    css.width = '100%'
    css.height = '100%'
    css.position = 'absolute'
    css.top = '0'
    css.left = '0'

    return css
  }

  /**
   * Magnificent constructor.
   *
   * @alias module:mag-jquery
   *
   * @class
   * @param {external:HTMLElement|external:jQuery} element - DOM element to embellish.
   * @param {MagnificentOptions} options - Options to override defaults.
   */
  var Magnificent = function (element, options) {
    this.element = $(element)
    this.options = $.extend(true, {}, this.options, options)
    this._init()
  }

  /**
   * Default options.
   *
   * @typedef MagnificentOptions
   *
   *  Mode:<br>
   * @property {string} mode
   *  <dl>
   *    <dt>"inner"</dt><dd><i>(default)</i> Zoom region embedded in thumbnail.</dd>
   *    <dt>"outer"</dt><dd>Zoom region independent of thumbnail.</dd>
   *  </dl>
   * @property {string|boolean} position - What interaction(s) position zoomed region.
   *  <dl>
   *    <dt>"mirror"</dt><dd><i>(default)</i> Zoomed region follows mouse/pointer.</dd>
   *    <dt>"drag"</dt><dd>Drag to move.</dd>
   *    <dt>"joystick"</dt><dd>Weird joystick interaction to move.</dd>
   *    <dt>false</dt><dd>No mouse/touch.</dd>
   *  </dl>
   * @property {string} positionEvent - Controls what event(s) cause positioning.
   *  <dl>
   *    <dt>"move"</dt><dd><i>(default)</i> On move (e.g. mouseover).</dd>
   *    <dt>"hold"</dt><dd>On hold (e.g. while mousedown).</dd>
   *  </dl>
   * @property {string} theme - Themes apply a style to the widgets.
   *  <dl>
   *    <dt>"default"</dt><dd><i>(default)</i> Default theme.</dd>
   *  </dl>
   * @property {string} initialShow
   *  <dl>
   *    <dt>"thumb"</dt><dd><i>(default)</i> Whether to show thumbnail or zoomed first,
   *      e.g. in "inner" mode.</dd>
   *  </dl>
   * @property {number} zoomRate - Rate at which to adjust zoom, from (0,∞). Default = 0.2.
   * @property {number} zoomMin - Minimum zoom level allowed, from (0,∞). Default = 2.
   * @property {number} zoomMax - Maximum zoom level allowed, from (0,∞). Default = 10.
   * @property {number} dragRate - Rate at which to drag, from (0,∞). Default = 0.2.
   * @property {number} ratio - Ratio of outer (w/h) to inner (w/h) container ratios. Default = 1.
   * @property {boolean} constrainLens - Whether lens position is constrained. Default = true.
   * @property {boolean} constrainZoomed - Whether zoomed position is constrained. Default = false.
   * @property {boolean} toggle - Whether toggle display of zoomed vs. thumbnail upon interaction. Default = true.
   * @property {boolean} smooth - Whether the zoomed region should gradually approach target, rather than immediately. Default = true.
   * @property {string} cssMode - CSS mode to use for scaling and translating. Either '3d', '2d', or 'position'. Default = '3d'.
   * @property {number} renderIntervalTime - Milliseconds for render loop interval. Adjust for performance vs. frame rate. Default = 20.
   * @property {MagModel} initial - Initial settings for model - focus, lens, zoom, etc.
   */
  Magnificent.prototype.options = {
    mode: 'inner',
    position: 'mirror',
    positionEvent: 'move',
    theme: 'default',
    initialShow: 'thumb',
    constrainLens: true,
    constrainZoomed: false,
    zoomMin: 1,
    zoomMax: 10,
    zoomRate: 0.2,
    dragRate: 0.2,
    ratio: 1,
    toggle: true,
    smooth: true,
    renderIntervalTime: 20,
    cssMode: '3d',
    eventNamespace: 'magnificent',
    dataNamespace: 'magnificent'
  }

  /**
   * Default toggle implementation.
   *
   * @param {boolean} enter - Whether entering, rather leaving.
   */
  Magnificent.prototype.toggle = function (enter) {
    if (enter) {
      this.$zoomedContainer.fadeIn()
      if (this.$lens) {
        this.$lens.fadeIn()
      }
    } else {
      this.$zoomedContainer.fadeOut()
      if (this.$lens) {
        this.$lens.fadeOut()
      }
    }
  }

  Magnificent.prototype.compute = function () {
    var that = this
    that.mag.compute()
    that.$el.trigger('compute', that)
  }

  Magnificent.prototype.render = function () {
    var that = this
    var lens, zoomed
    var $lens = this.$lens
    var $zoomed = this.$zoomed
    if ($lens) {
      lens = this.modelLazy.lens
      var lensCSS = toCSS(lens, that.options.cssMode, that.id)
      $lens.css(lensCSS)
    }
    zoomed = this.modelLazy.zoomed
    var zoomedCSS = toCSS(zoomed, that.options.cssMode, that.id)
    $zoomed.css(zoomedCSS)

    this.$el.trigger('render', that)
  }

  Magnificent.prototype.eventName = function (name) {
    name = name || ''
    var namespace = this.options.eventNamespace
    return name + (namespace ? ('.' + namespace) : '')
  }

  Magnificent.prototype.dataName = function (name) {
    name = name || ''
    var namespace = this.options.dataNamespace
    return (namespace ? (namespace + '.') : '') + name
  }

  Magnificent.prototype._init = function () {
    var that = this

    that.intervals = {}

    var $el = this.$el = this.element

    this.$originalEl = $el.clone()

    var options = this.options

    var id = $el.attr('mag-thumb') || $el.attr('data-mag-thumb')
    this.id = id

    if ($.isFunction(options.toggle)) {
      this.toggle = options.toggle
    }

    var $lens = this.$lens

    var ratio = options.ratio

    var initial = options.initial || {}
    var zoom = typeof initial.zoom !== 'undefined' ? initial.zoom : 2
    var focus = typeof initial.focus !== 'undefined' ? initial.focus : {
      x: 0.5,
      y: 0.5
    }
    var lens = typeof initial.lens !== 'undefined' ? initial.lens : {
      w: 0,
      h: 0
    }

    var model = this.model = {
      focus: focus,
      zoom: zoom,
      lens: lens,
      ratio: ratio
    }

    var mag = this.mag = new Mag({
      zoomMin: options.zoomMin,
      zoomMax: options.zoomMax,
      constrainLens: options.constrainLens,
      constrainZoomed: options.constrainZoomed,
      model: model
    })

    var modelLazy = this.modelLazy = {
      focus: {
        x: model.focus.x,
        y: model.focus.y
      },
      zoom: model.zoom,
      lens: {
        w: model.lens.w,
        h: model.lens.h
      },
      ratio: ratio
    }

    var magLazy = this.magLazy = new Mag({
      zoomMin: options.zoomMin,
      zoomMax: options.zoomMax,
      constrainLens: options.constrainLens,
      constrainZoomed: options.constrainZoomed,
      model: modelLazy
    })

    mag.compute()
    magLazy.compute()

    var $zoomedChildren
    var $thumbChildren
    var $zoomed
    var $zoomedContainer

    $thumbChildren = $el.children()

    $el.empty()
    $el.addClass('mag-host')

    if (!options.zoomedContainer) {
      options.zoomedContainer = $('[mag-zoom="' + that.id + '"], [data-mag-zoom="' + that.id + '"]')
    }

    if (options.zoomedContainer) {
      $zoomedContainer = $(options.zoomedContainer)

      that.$originalZoomedContainer = $zoomedContainer.clone()

      $zoomedChildren = $zoomedContainer.children()
      $zoomedContainer.empty()

      if (options.mode === 'inner') {
        $zoomedContainer.remove()
      }
    }

    if (options.mode === 'outer' && typeof options.showLens === 'undefined') {
      options.showLens = true
    }

    if (!$zoomedChildren || !$zoomedChildren.length) {
      $zoomedChildren = $thumbChildren.clone()
    }

    if (options.mode) {
      $el.attr('mag-mode', options.mode)
      $el.attr('data-mag-mode', options.mode)
    }

    if (options.theme) {
      $el.attr('mag-theme', 'default')
      $el.attr('data-mag-theme', 'default')
    }

    if (options.position) {
      $el.attr('mag-position', options.position)
      $el.attr('data-mag-position', options.position)
    } else if (options.position === false) {
      options.positionEvent = false
    }

    if (options.positionEvent) {
      $el.attr('mag-position-event', options.positionEvent)
      $el.attr('data-mag-position-event', options.positionEvent)
    }

    $el.attr('mag-toggle', options.toggle)
    $el.attr('data-mag-toggle', options.toggle)

    if (options.showLens) {
      $lens = this.$lens = $('<div class="mag-lens"></div>')
      $el.append($lens)
    }

    var $noflow = $('<div class="mag-noflow" mag-theme="' + options.theme + '"></div>')
    $el.append($noflow)

    if (options.mode === 'inner') {
      $zoomedContainer = $noflow
    } else if (options.mode === 'outer') {
      if (!options.zoomedContainer) {
        throw new Error("Required 'zoomedContainer' option.")
      }
      $zoomedContainer = $(options.zoomedContainer)
    } else {
      throw new Error("Invalid 'mode' option.")
    }

    $zoomedContainer.attr('mag-theme', options.theme)
    $zoomedContainer.attr('data-mag-theme', options.theme)
    $zoomedContainer.addClass('mag-zoomed-container')
    $zoomedContainer.addClass('mag-zoomed-bg')

    var $thumb = $('<div class="mag-thumb"></div>')
    $thumb.html($thumbChildren)
    $el.append($thumb)

    $zoomed = this.$zoomed = $('<div class="mag-zoomed"></div>')
    $zoomed.html($zoomedChildren)
    $zoomedContainer.append($zoomed)

    $zoomedContainer.attr('mag-toggle', options.toggle)
    $zoomedContainer.attr('data-mag-toggle', options.toggle)

    var $zone = $('<div class="mag-zone"></div>')
    var zone = $zone.get(0)
    $el.append($zone)

    this.$el = $el
    this.$zone = $zone
    this.$noflow = $noflow
    this.$thumb = $thumb
    this.$zoomed = $zoomed
    this.$zoomedContainer = $zoomedContainer

    that.proxyToZone($zoomedContainer)
    if (options.mode === 'outer') {
      that.proxyToZone($thumb)
    }

    if (options.toggle) {
      if (options.initialShow === 'thumb') {
        $zoomedContainer.hide()
        if ($lens) {
          $lens.hide()
        }
      } else if (options.initialShow === 'zoomed') {
        //
      } else {
        throw new Error("Invalid 'initialShow' option.")
      }

      $el.on(that.eventName('mouseenter'), function () {
        that.toggle(true)
      })

      $el.on(that.eventName('mouseleave'), function () {
        that.toggle(false)
      })
    }

    that.render()

    var lazyRate = 0.25
    var renderIntervalTime = options.renderIntervalTime
    var dragRate = options.dragRate
    var zoomRate = options.zoomRate

    var approach = function (enabled, thresh, rate, dest, src, props, srcProps) {
      srcProps = srcProps || props
      if (!$.isArray(props)) {
        props = [props]
        srcProps = [srcProps]
      }
      for (var i = 0, m = props.length; i < m; ++i) {
        var prop = props[i]
        var srcProp = srcProps[i]
        var diff = src[srcProp] - dest[prop]
        if (enabled && Math.abs(diff) > thresh) {
          dest[prop] += diff * rate
        } else {
          dest[prop] += diff
        }
      }
    }

    var renderLoop = function () {
      approach(options.smooth, 0.01, lazyRate, modelLazy.focus, model.focus, 'x')
      approach(options.smooth, 0.01, lazyRate, modelLazy.focus, model.focus, 'y')
      approach(options.smooth, 0.05, lazyRate, modelLazy, model, 'zoom')

      that.magLazy.compute()

      that.render()
    }

    var adjustForMirror = function (focus) {
      model.focus.x = focus.x
      model.focus.y = focus.y
      that.compute()
    }

    if (options.position === 'mirror') {
      if (options.positionEvent === 'move') {
        lazyRate = 0.2

        $zone.on(that.eventName('mousemove'), function (e, e2) {
          e = typeof e2 === 'object' ? e2 : e
          var ratios = ratioOffsets(e, $zone)
          adjustForMirror(ratios)
        })
      } else if (options.positionEvent === 'hold') {
        lazyRate = 0.2

        $zone.on(that.eventName('dragstart'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          dragging = true
          $el.addClass('mag--dragging')
        })

        $zone.on(that.eventName('dragend'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          dragging = false
          $el.removeClass('mag--dragging')
        })

        $zone.on(that.eventName('drag'), function (e, dd, e2) {
          // console.log('drag', arguments, JSON.stringify(dd))
          e = typeof e2 === 'object' ? e2 : e
          var offset = $zone.offset()
          var ratios = ratioOffsetsFor($zone, e.pageX - offset.left, e.pageY - offset.top)
          adjustForMirror(ratios)
        })
      } else {
        throw new Error("Invalid 'positionEvent' option.")
      }
    } else if (options.position === 'drag') {
      var startFocus

      if (options.mode === 'inner') {
        $zone.on(that.eventName('dragstart'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          e.preventDefault()
          dragging = true
          $el.addClass('mag--dragging')
          startFocus = {
            x: model.focus.x,
            y: model.focus.y
          }
        })

        $zone.on(that.eventName('dragend'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          dragging = false
          $el.removeClass('mag--dragging')
          startFocus = undefined
        })

        $zone.on(that.eventName('drag'), function (e, dd, e2) {
          // console.log('drag', arguments, JSON.stringify(dd))
          e = typeof e2 === 'object' ? e2 : e

          // Modified plugin to improve touch functionality
          if (e.originalEvent) {
            if (e.originalEvent.scale !== 1) {
              return
            }
          }
          // End of modification

          ratios = ratioOffsetsFor($zone, dd.originalX - dd.offsetX, dd.originalY - dd.offsetY)

          ratios = {
            x: ratios.x / model.zoom,
            y: ratios.y / model.zoom
          }

          var focus = model.focus

          focus.x = startFocus.x + ratios.x
          focus.y = startFocus.y + ratios.y

          that.compute()
        })
      } else {
        $zone.on(that.eventName('dragstart'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          dragging = true
          $el.addClass('mag--dragging')
          startFocus = {
            x: model.focus.x,
            y: model.focus.y
          }
        })

        $zone.on(that.eventName('dragend'), function (e, dd, e2) {
          e = typeof e2 === 'object' ? e2 : e
          dragging = false
          $el.removeClass('mag--dragging')
          startFocus = undefined
        })

        $zone.on(that.eventName('drag'), function (e, dd, e2) {
          // console.log('drag', arguments, JSON.stringify(dd))
          var offset = $zone.offset()
          ratios = ratioOffsetsFor($zone, e.pageX - offset.left, e.pageY - offset.top)

          var focus = model.focus

          focus.x = ratios.x
          focus.y = ratios.y

          that.compute()
        })

        $zone.on(that.eventName('click'), function (e) {
          var offset = $zone.offset()
          ratios = ratioOffsetsFor($zone, e.pageX - offset.left, e.pageY - offset.top)

          var focus = model.focus

          focus.x = ratios.x
          focus.y = ratios.y

          that.compute()
        })
      }
    } else if (options.position === 'joystick') {
      var joystickIntervalTime = 50

      var dragging = false

      var ratios = {
        x: model.focus.x,
        y: model.focus.y
      }

      if (options.positionEvent === 'move') {
        dragging = true
        lazyRate = 0.5

        $zone.on(that.eventName('mousemove'), function (e) {
          ratios = ratioOffsets(e, $zone)
        })
      } else if (options.positionEvent === 'hold') {
        lazyRate = 0.5

        $zone.drag('start', function () {
          dragging = true
          $el.addClass('mag--dragging')
        })

        $zone.drag('end', function () {
          dragging = false
          $el.removeClass('mag--dragging')
        })

        $zone.drag(function (e, dd) {
          var offset = $zone.offset()
          ratios = ratioOffsetsFor($zone, e.pageX - offset.left, e.pageY - offset.top)
        })
      } else {
        throw new Error("Invalid 'positionEvent' option.")
      }

      that.intervals.joystick = setInterval(function () {
        if (!dragging) return

        var focus = model.focus

        var adjustedDragRate = dragRate
        focus.x += (ratios.x - 0.5) * adjustedDragRate
        focus.y += (ratios.y - 0.5) * adjustedDragRate
        that.compute()
      }, joystickIntervalTime)
    } else if (options.position === false) {
      // assume manual programmatic positioning
    } else {
      throw new Error("Invalid 'position' option.")
    }

    if (options.position) {
      $zone.on(that.eventName('mousewheel'), function (e, e2) {
        e = typeof e2 === 'object' ? e2 : e
        // console.log('mousewheel', {
        //   deltaX: e.deltaX,
        //   deltaY: e.deltaY,
        //   deltaFactor: e.deltaFactor
        // })
        e.preventDefault()

        var rate = zoomRate
        var zoom = model.zoom
        var delta = (e.deltaY + e.deltaX) / 2
        // if (e.deltaFactor) {
        //   delta *= e.deltaFactor
        // }
        delta *= rate
        delta += 1
        zoom *= delta
        model.zoom = zoom
        that.compute()
      })

      if (PreventGhostClick) {
        PreventGhostClick(zone)
      }

      if (Hammer) {
        var hammerEl = zone
        var $hammerEl = $zone
        var hammerOptions = {}
        var hammertime = new Hammer(hammerEl, hammerOptions)

        // Register custom destroy event listener to queue Hammer destroy.
        that.$el.on(that.eventName('destroy'), function () {
          hammertime.destroy()
        })

        $hammerEl.data(that.dataName('hammer'))

        hammertime.get('pinch').set({ enable: true })

        hammertime.on('pinch', function (e) {
          e.preventDefault()

          that.toggle(true)

          var zoom = model.zoom
          var scale = e.scale || (e.originalEvent && e.originalEvent.scale)
          zoom *= scale
          model.zoom = zoom
          that.compute()
        })

        // if (options.position === 'mirror') {
        if (options.mode === 'inner') {
          var pinch = hammertime.get('pinch')
          var pan = hammertime.get('pan')

          pinch.recognizeWith(pan)

          hammertime.on('pan', function (e) {
            e.preventDefault()
            // console.log('pan', e)

            that.toggle(true)

            var rate = -0.0005

            model.focus.x += rate * e.deltaX
            model.focus.y += rate * e.deltaY
          })
        }
      }
    }

    that.intervals.renderLoop = setInterval(renderLoop, renderIntervalTime)
  }

  Magnificent.prototype.proxyToZone = function ($el) {
    var that = this
    var $zone = that.$zone
    /*
      Proxy events from container to zone for weird IE 9-10 behavior despite z-index.
     */
    var proxyEvents = [
      'mousemove',
      // 'mouseenter',
      // 'mouseleave',
      // 'mouseover',
      // 'mouseout',
      'click',
      'touchstart',
      'touchend',
      'touchmove',
      'touchcancel',
      'mousewheel',
      'draginit',
      'dragstart',
      'drag',
      'dragend'
    ]
    var nsProxyEvents = $.map(proxyEvents, function (name) {
      return that.eventName(name)
    })
    $el.on(nsProxyEvents.join(' '), function (e) {
      var args = Array.prototype.slice.call(arguments)
      // console.log(['a', args[0], args[1], args[2], args[3], args[4], args[5]])
      e.triggered = true
      args.push(e)
      args.unshift(that.eventName(e.type))
      // console.log(['b', args[0], args[1], args[2], args[3], args[4], args[5]])
      $zone.trigger.apply($zone, args)
    })
  }

  Magnificent.prototype.destroy = function () {
    var that = this
    // Trigger custom destroy event for any listeners.
    that.$el.trigger(that.eventName('destroy'))

    $.each(that.intervals, function (key, interval) {
      clearInterval(interval)
    })

    // Unbind and replace elements with originals.

    that.off()

    if (that.$originalZoomedContainer && that.$zoomedContainer) {
      // Replace
      that.$zoomedContainer.after(that.$originalZoomedContainer)
      that.$zoomedContainer.remove()
    }

    // Replace
    that.$el.after(that.$originalEl)
    that.$el.remove()
  }

  Magnificent.prototype.off = function () {
    var that = this

    if (that.$originalZoomedContainer && that.$zoomedContainer) {
      // Turn off all events.
      that.$zoomedContainer.off(that.eventName())
    }

    // Turn off all events.
    that.$el.off(that.eventName())

    return this
  }

  Magnificent.prototype.zoomBy = function (factor) {
    this.model.zoom *= 1 + factor
    this.compute()
  }

  Magnificent.prototype.zoomTo = function (zoom) {
    this.model.zoom = zoom
    this.compute()
  }

  Magnificent.prototype.moveBy = function (shift) {
    if (typeof shift.x !== 'undefined') {
      if (!shift.absolute) {
        shift.x /= this.model.zoom
      }
      this.model.focus.x += shift.x
    }
    if (typeof shift.y !== 'undefined') {
      if (!shift.absolute) {
        shift.y /= this.model.zoom
      }
      this.model.focus.y += shift.y
    }
    this.compute()
  }

  Magnificent.prototype.moveTo = function (coords) {
    if (typeof coords.x !== 'undefined') {
      this.model.focus.x = coords.x
    }
    if (typeof coords.y !== 'undefined') {
      this.model.focus.y = coords.y
    }
    this.compute()
  }

  $.bridget('mag', Magnificent)

  if (MagnificentAnalytics) {
    MagnificentAnalytics.track('mag-jquery.js')
  }

  return Magnificent
}))