\n\t\t\t\t${Akamai.Util\n\t\t\t\t\t\t.map(json.urls, function(url) { return Spin360._renderImg(url, finalOptions); })\n\t\t\t\t\t\t.join(\"\\n\")\n\t\t\t\t}\n\t\t\t
\n\t\t`);\n\t};\n\n\t/**\n\t * Defines the global default options for all Spin360s on the page\n\t * @static\n\t * @property {Boolean} autoplay.enabled - Enable autoplay (default: false)\n\t * @property {Integer} autoplay.delay - Delay in milliseconds after initialization before spinning begins (default: 1000)\n\t * @property {Boolean} controls.arrows - Render controls to spin left and right (default: false)\n\t * @property {Boolean} controls.play - Render controls to enable and disable automatic spinning (default: false)\n\t * @property {String} controls.text.left - Left rotation control title and text (default: \"Rotate Left\")\n\t * @property {String} controls.text.right - Right rotation control title and text (default: \"Rotate Right\")\n\t * @property {String} controls.text.play - Spin control title and text (default: \"Spin Object\")\n\t * @property {Array} images.widths - list of available widths for an image (to be combined with image.widthParam), Default: [\"320\",\"640\",\"800\",\"1024\",\"2048\",\"5000\"]\n\t * @property {String} images.sizes - value for image sizes attribute. Default is set dynamically to viewer width when rendered with JS, and updated dynamically. Values: `100vw`, `200px`, `(min-width:1000px) 500px, 100vw`.\n\t * @property {String} images.policy - query param value for policy, appended to &policy= per image url when specified. Values: `foo`. Default: undefined.\n\t * @property {String} images.widthParam - query string name to use for setting each url width. Default urls will be ?imwidth=320 for example. Values: `imwidth` (default), `w`, `width`, etc.\n\t * @property {Integer} interval - The full rotation interval in milliseconds, determines physics, (default: 3000)\n\t * @property {Boolean} reverse - Reverse the direction of the spin (default: false)\n\t * @property {Float} sensitivity - The speed at which the object rotates relative to user input (default: 1). At the default value of `1` the object will complete a full 360 rotation when you drag across the entire width of the spin360 component. To require less effort to complete a rotation, change this value to a higher number. For example, setting `sensitivity: 2` would complete a full 360 rotation by dragging halfway (ex. from the center to the edge).\n\t */\n\tSpin360.defaultOptions = {\n\t\tautoplay: {\n\t\t\tenabled: false,\n\t\t\tdelay: 1000\n\t\t},\n\n\t\tcontrols: {\n\t\t\tarrows: false,\n\t\t\tplay: false,\n\t\t\ttext: {\n\t\t\t\tleft: \"Rotate Left\",\n\t\t\t\tright: \"Rotate Right\",\n\t\t\t\tplay: \"Spin Object\"\n\t\t\t}\n\t\t},\n\n\t\t// unsupported, the number of frame images to create using the configured\n\t\t// template\n\t\tframes: 72,\n\t\timages: Akamai.Image.defaultConfig,\n\t\tinterval: 3000,\n\t\treverse: false,\n\n\t\tsensitivity: 1,\n\n\t\t// unsupported, template used to generate urls when only one image is\n\t\t// present in the 360 viewer\n\t\ttemplate: undefined\n\t};\n\n\t/**\n\t * Goto to a particular frame of the spining image\n\t * @method\n\t * @param {Integer} index - the frame to advance to\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tSpin360.prototype.goto = function(index, callback){\n\t\tthis._comp.goto(index);\n\t\t// NOTE goto must come before the callback because the callback will be\n\t\t// used to trigger the `next` and `previous` events. The order should be\n\t\t// maintained consistently as `goto` -> `next`/`previous`\n\t\tthis._trigger(\"goto\");\n\t\tif(callback){ callback(); }\n\t};\n\n\t/**\n\t * Return the current frame index\n\t * @method\n\t * @returns {Integer}\n\t */\n\tSpin360.prototype.getIndex = function(){\n\t\treturn this._comp.index;\n\t};\n\n\t// Extend Carousel with Advanceable interface\n\tAkamai.Advanceable.extend(Spin360);\n\n\t/**\n\t * Go to the next frame\n\t * @method\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tSpin360.prototype.next;\n\t// required for JSDocs\n\n\t/**\n\t * Go to the previous frame\n\t * @method\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tSpin360.prototype.previous;\n\t// required for JSDocs\n\n\t/**\n\t * Begin the automatic rotation of the images\n\t * @todo support passing in an interval or speed?\n\t * @method\n\t * @fires Akamai.Spin360#akamai-spin360-play\n\t * @returns {undefined}\n\t */\n\tSpin360.prototype.play = function(){\n\t\tthis._comp.autoRotate();\n\t};\n\n\t/**\n\t * Stop the automatic rotation of the images\n\t * @method\n\t * @fires Akamai.Spin360#akamai-spin360-pause\n\t * @returns {undefined}\n\t */\n\tSpin360.prototype.pause = function(){\n\t\tthis._comp.stopAutoRotate();\n\t};\n\n\tSpin360.prototype.getElement = function(){\n\t\treturn this._$el[0];\n\t};\n\n\tSpin360.States = {\n\t\tPlaying: 0,\n\t\tPaused: 1\n\t};\n\n\t/**\n\t * Return the current state of the spin360\n\t * @example \n\t\t\t\t
\n\t\t`;\n\t};\n\t\n\tvar ex = (typeof exports === 'undefined') ? window : exports;\n\tex.Akamai = ex.Akamai || {};\n\tex.Akamai.MagnifierImplEnlarge = MagnifierImplEnlarge;\n})();\n(function(){\n\tfunction ClickTracker(element, handler){\n\t\tvar self = this;\n\t\tself.element = element;\n\t\tself.handler = handler;\n\t\tthis.reset();\n\t}\n\n\tClickTracker.prototype.onDown = function(e){\n\t\tif (e.target == this.element) {\n\t\t\tif (this.isDown) {\n\t\t\t\tthis.reset();\n\t\t\t} else {\n\t\t\t\tthis.down.x = e.clientX;\n\t\t\t\tthis.down.y = e.clientY;\n\t\t\t\tthis.down.timestamp = new Date();\n\t\t\t\tthis.isDown = true;\n\t\t\t}\n\t\t}\n\t};\n\n\tClickTracker.prototype.onMove = function(){\n\t\tthis.isMoved = true;\n\t};\n\n\tClickTracker.prototype.onUp = function(e){\n\t\tif (this.isDown) {\n\t\t\tthis.up.x = e.clientX;\n\t\t\tthis.up.y = e.clientY;\n\t\t\tthis.up.timestamp = new Date();\n\n\t\t\tif (!this.isMoved && (this.down.x === this.up.x && this.down.y === this.up.y && (this.up.timestamp.getTime() - this.down.timestamp.getTime() <= 500))) {\n\t\t\t\tthis.handler();\n\t\t\t}\n\t\t}\n\n\t\tthis.reset();\n\t};\n\n\tClickTracker.prototype.reset = function(x, y){\n\t\tthis.down = {\n\t\t\tx: -Infinity,\n\t\t\ty: -Infinity,\n\t\t\ttimestamp: new Date(0)\n\t\t};\n\n\t\tthis.isDown = false;\n\t\tthis.isMoved = false;\n\n\t\tthis.up = {\n\t\t\tx: Infinity,\n\t\t\ty: Infinity,\n\t\t\ttimestamp: new Date()\n\t\t};\n\t};\n\n\tfunction MagnifierImplScroller(element, options){\n\t\tthis._$el = $(element);\n\t\tthis._options = options;\n\t\tthis._container = this._$el.get(0);\n\t\tthis._content = this._$el.children().get(0);\n\t\tthis._imgCast = $(this._content).find('div').get(0);\n\t\tthis._zoomInBtn = this._$el.find(\"a.scroller-zoom-in\").get(0);\n\t\tthis._zoomOutBtn = this._$el.find(\"a.scroller-zoom-out\").get(0);\n\t\tthis._magnification = 1;\n\n\t\tvar self = this;\n\n\t\t// Initialize Scroller\n\t\tthis.scroller = new Scroller(this._renderer(), {\n\t\t\tzooming: options.enabled,\n\t\t\tminZoom: 1,\n\t\t\tmaxZoom: options.magnification,\n\t\t\tanimationDuration: options.animationDuration\n\t\t});\n\n\t\tvar rect = this._container.getBoundingClientRect();\n\t\tthis.scroller.setPosition(rect.left + this._container.clientLeft, rect.top + this._container.clientTop);\n\n\t\tthis._installEventHandlers();\n\t\tthis._updateButtonStates();\n\t\tsetTimeout(function(){\n\t\t\tself._onResize();\n\t\t});\n\t}\n\n\tMagnifierImplScroller.prototype = Object.create(Akamai.MagnifierImpl.prototype);\n\tMagnifierImplScroller.prototype.constructor = MagnifierImplScroller;\n\n\tMagnifierImplScroller.prototype.updateOptions = function(options){\n\t\tvar rect = this._container.getBoundingClientRect();\n\t\tthis.scroller.setPosition(rect.left + this._container.clientLeft, rect.top + this._container.clientTop);\n\t\tthis._onResize();\n\t\tthis._zoomBy(1 / this._options.magnification, false);\n\t};\n\n\tMagnifierImplScroller.prototype.zoomIn = function(){\n\t\tthis._zoomBy(this._options.incrementalZoomFactor);\n\t};\n\n\tMagnifierImplScroller.prototype.cyclicZoom = function(){\n\t\tvar self = this;\n\t\tif (this._magnification >= this._options.magnification) {\n\t\t\tthis._zoomBy(1 / this._options.magnification);\n\t\t} else {\n\t\t\tthis.zoomIn();\n\t\t}\n\t};\n\n\tMagnifierImplScroller.prototype.zoomOut = function(){\n\t\tthis._zoomBy(1 / this._options.incrementalZoomFactor);\n\t};\n\n\tMagnifierImplScroller.prototype.isMagnified = function(){\n\t\treturn this._magnification > 1;\n\t};\n\n\tMagnifierImplScroller.prototype.toggleZoom = function(){\n\t\tthrow new Error('zoom toggle behavior is undefined in scroller mode');\n\t};\n\n\tMagnifierImplScroller.render = function(options, dataAttr, fallbackSrc, largestSrc, srcSet){\n\t\treturn `\n\t\t\t\n\t\t\t\t\t![](\"${fallbackSrc}\"\n\t\t\t\t\t\tsrcset=\"${srcSet}\"\n\t\t\t\t\t\tsizes=\"${options.image.sizes}\")
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t${options.buttonText}\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t`;\n\t};\n\n\tMagnifierImplScroller.prototype._zoomBy = function(magnification, animate){\n\t\tvar self = this, magnification = Number(magnification);\n\n\t\tif (typeof(animate) === \"undefined\") {\n\t\t\tanimate = this._options.animateZoom;\n\t\t}\n\n\t\tif (magnification === 1 || \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// if we are magnifying by 1 OR\n\t\t\t(this._magnification === 1 && magnification < 1) || \t\t\t\t\t\t\t// fully zoomed out and still attempting a zoom out OR\n\t\t\t(this._magnification === this._options.magnification && magnification > 1)) {\t// fully zoomed in and still attempting a zoom in\n\t\t\treturn;\n\t\t}\n\n\t\tthis.scroller.zoomTo(this._magnification * magnification, this._options.animateZoom);\n\n\t\tsetTimeout(function(){\n\t\t\tself._onZoom();\n\t\t}, this._options.animationDuration);\n\t}\n\n\tMagnifierImplScroller.prototype._onZoom = function(){\n\t\tvar oldMagnification = this._magnification;\n\n\t\tthis._magnification = Number(this.scroller.getValues().zoom.toFixed(2));\n\t\tthis._updateButtonStates();\n\n\t\tif (oldMagnification > this._magnification) {\n\t\t\tthis._$el.trigger(\"scroller.after-zoom-out\");\n\t\t} else if (oldMagnification < this._magnification) {\n\t\t\tthis._$el.trigger(\"scroller.after-zoom-in\");\n\t\t}\n\t};\n\n\tMagnifierImplScroller.prototype._renderer = function(){\n\t\tvar docStyle = document.documentElement.style, self = this;\n\n\t\tvar engine;\n\t\tif (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {\n\t\t\tengine = 'presto';\n\t\t} else if ('MozAppearance' in docStyle) {\n\t\t\tengine = 'gecko';\n\t\t} else if ('WebkitAppearance' in docStyle) {\n\t\t\tengine = 'webkit';\n\t\t} else if (typeof navigator.cpuClass === 'string') {\n\t\t\tengine = 'trident';\n\t\t}\n\n\t\tvar vendorPrefix = {\n\t\t\ttrident: 'ms',\n\t\t\tgecko: 'Moz',\n\t\t\twebkit: 'Webkit',\n\t\t\tpresto: 'O'\n\t\t}[engine];\n\n\t\tvar helperElem = document.createElement(\"div\");\n\t\tvar undef;\n\n\t\tvar perspectiveProperty = vendorPrefix + \"Perspective\";\n\t\tvar transformProperty = vendorPrefix + \"Transform\";\n\n\t\tif (helperElem.style[perspectiveProperty] !== undef) {\n\t\t\treturn function(left, top, zoom) {\n\t\t\t\tself._content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';\n\t\t\t};\n\n\t\t} else if (helperElem.style[transformProperty] !== undef) {\n\t\t\treturn function(left, top, zoom) {\n\t\t\t\tself._content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px) scale(' + zoom + ')';\n\t\t\t};\n\n\t\t} else {\n\t\t\treturn function(left, top, zoom) {\n\t\t\t\tself._content.style.marginLeft = left ? (-left/zoom) + 'px' : '';\n\t\t\t\tself._content.style.marginTop = top ? (-top/zoom) + 'px' : '';\n\t\t\t\tself._content.style.zoom = zoom || '';\n\t\t\t};\n\t\t}\n\t};\n\n\tMagnifierImplScroller.prototype._onResize = function(){\n\t\tthis.scroller.setDimensions(this._container.clientWidth, this._container.clientHeight, this._container.clientWidth, this._container.clientHeight);\n\t};\n\n\tMagnifierImplScroller.prototype._installEventHandlers = function(){\n\t\tvar self = this, clickTracker = new ClickTracker(this._imgCast, function(){\n\t\t\tself.cyclicZoom();\n\t\t});\n\n\t\twindow.addEventListener(\"resize\", function(e){\n\t\t\tself._onResize(e);\n\t\t}, false);\n\n\t\tthis._zoomInBtn.addEventListener(\"click\", function(e) {\n\t\t\te.preventDefault();\n\t\t\tself.zoomIn();\n\t\t}, false);\n\n\t\tthis._zoomOutBtn.addEventListener(\"click\", function(e) {\n\t\t\te.preventDefault();\n\t\t\tself.zoomOut();\n\t\t}, false);\n\n\t\tif ('ontouchstart' in window) {\n\t\t\tself._container.addEventListener(\"touchstart\", function(e) {\n\t\t\t\t// Don't react if initial down happens on one of the zoom buttons\n\t\t\t\tif (e.touches[0].target == self._$el.find('a.scroller-zoom-in').get(0) || e.touches[0].target == self._$el.find('a.scroller-zoom-out').get(0)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Don't react if initial down happens on a form element\n\t\t\t\tif (e.touches[0] && e.touches[0].target && e.touches[0].target.tagName.match(/input|textarea|select/i)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tself.scroller.doTouchStart(e.touches, e.timeStamp);\n\n\t\t\t\tfor (var i = 0; i < e.touches.length; i++) {\n\t\t\t\t\tclickTracker.onDown(e.touches[i]);\n\t\t\t\t}\n\n\t\t\t\te.preventDefault();\n\t\t\t}, false);\n\n\t\t\tdocument.addEventListener(\"touchmove\", function(e) {\n\t\t\t\tself.scroller.doTouchMove(e.touches, e.timeStamp, e.scale);\n\t\t\t\tclickTracker.onMove();\n\t\t\t}, false);\n\n\t\t\tdocument.addEventListener(\"touchend\", function(e) {\n\t\t\t\tself.scroller.doTouchEnd(e.timeStamp);\n\n\t\t\t\t// handle any zoom that may have occured\n\t\t\t\tself._onZoom();\n\n\t\t\t\tfor (var i = 0; i < e.changedTouches.length; i++) {\n\t\t\t\t\tclickTracker.onUp(e.changedTouches[i]);\n\t\t\t\t}\n\t\t\t}, false);\n\n\t\t\tdocument.addEventListener(\"touchcancel\", function(e) {\n\t\t\t\tself.scroller.doTouchEnd(e.timeStamp);\n\t\t\t\t// handle any zoom that may have occured\n\t\t\t\tself._onZoom();\n\n\t\t\t\tfor (var i = 0; i < e.changedTouches.length; i++) {\n\t\t\t\t\tclickTracker.onUp(e.changedTouches[i]);\n\t\t\t\t}\n\t\t\t}, false);\n\t\t} else {\n\t\t\tself._container.addEventListener(\"mousedown\", function(e) {\n\t\t\t\tif (e.target.tagName.match(/input|textarea|select/i)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (self.scroller.__clientWidth === 0) {\n\t\t\t\t\tself._onResize();\n\t\t\t\t}\n\t\t\t\tself.scroller.doTouchStart([{\n\t\t\t\t\tpageX: e.pageX,\n\t\t\t\t\tpageY: e.pageY\n\t\t\t\t}], e.timeStamp);\n\n\t\t\t\tclickTracker.onDown(e);\n\t\t\t}, false);\n\n\t\t\tdocument.addEventListener(\"mousemove\", function(e) {\n\t\t\t\tif (!clickTracker.isDown) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tself.scroller.doTouchMove([{\n\t\t\t\t\tpageX: e.pageX,\n\t\t\t\t\tpageY: e.pageY\n\t\t\t\t}], e.timeStamp);\n\n\t\t\t\tclickTracker.onMove();\n\t\t\t}, false);\n\n\t\t\tdocument.addEventListener(\"mouseup\", function(e) {\n\t\t\t\tif (!clickTracker.isDown) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tself.scroller.doTouchEnd(e.timeStamp);\n\t\t\t\tclickTracker.onUp(e);\n\t\t\t}, false);\n\n\t\t\t// self._container.addEventListener(navigator.userAgent.indexOf(\"Firefox\") > -1 ? \"DOMMouseScroll\" : \"mousewheel\", function(e) {\n\t\t\t// \te.preventDefault();\n\t\t\t// \tself.scroller.doMouseZoom(e.detail ? (e.detail * -120) : e.wheelDelta, e.timeStamp, e.pageX, e.pageY);\n\t\t\t// }, false);\n\t\t}\n\t};\n\n\tMagnifierImplScroller.prototype._updateButtonStates = function(){\n\t\tif (this._magnification === 1) {\n\t\t\t$(this._$el).addClass('scroller-zoom-out-max');\n\t\t\t$(this._$el).removeClass('scroller-zoom-in-max');\n\t\t} else if (this._magnification === this._options.magnification) {\n\t\t\t$(this._$el).addClass('scroller-zoom-in-max');\n\t\t\t$(this._$el).removeClass('scroller-zoom-out-max');\n\t\t} else {\n\t\t\t$(this._$el).removeClass('scroller-zoom-in-max');\n\t\t\t$(this._$el).removeClass('scroller-zoom-out-max');\n\t\t}\n\t};\n\n\tvar ex = (typeof exports === 'undefined') ? window : exports;\n\tex.Akamai = ex.Akamai || {};\n\tex.Akamai.MagnifierImplScroller = MagnifierImplScroller;\n})();\n(function(exports, $){\n\t/**\n\t * Image magnifier\n\t * @class\n\t * @alias Akamai.Magnifier\n\t * @param {HTMLElement} element - the DOM element representing the component markup\n\t * @param {Object} options - configuration options\n\t */\n\tvar Magnifier = Akamai.Util.component(\"Magnifier\", function(element, options){\n\t\t// compat with enlarge `disabled` option\n\t\tthis._options.disabled = !this._options.enabled;\n\t\tif (this._options.mode === Magnifier.MODE_ANIMATED_ZOOM) {\n\t\t\tthis._impl = new Akamai.MagnifierImplScroller(element, options);\n\t\t} else {\n\t\t\tthis._impl = new Akamai.MagnifierImplEnlarge(element, options);\n\t\t}\n\t});\n\n\tMagnifier.prototype._updateOptions = function(options){\n\t\tif( !options ) {\n\t\t\tthis._options = this._originalOptions;\n\t\t}\n\n\t\tthis._options = Akamai.Util.extend(true, this._options, options);\n\n\t\t// compat with enlarge `disabled` option\n\t\tthis._options.disabled = !this._options.enabled;\n\n\t\t// push the final options down to the dom element so that CSS that keys off\n\t\t// of the attributes can apply when JS config is used\n\t\tAkamai.Util.setDataAttrOptions(this._$el, Magnifier.defaultOptions, this._options, \"Magnifier\");\n\n\t\tthis._impl.updateOptions(this._options);\n\t};\n\n\t// Used in preflight to \"rename\" events based on the child component events\n\tMagnifier._componentEventMapping = {\n\t\t\"enlarge.after-zoom-in\": \"in\",\n\t\t\"enlarge.after-zoom-out\": \"out\",\n\t\t\"scroller.after-zoom-in\": \"in\",\n\t\t\"scroller.after-zoom-out\": \"out\"\n\t};\n\n\tMagnifier.MODE_HOVER_ZOOM = 'hoverzoom';\n\tMagnifier.MODE_ANIMATED_ZOOM = 'animatedzoom';\n\n\t/**\n\t * Defines the global default options for all Magnifiers on the page\n\t * @static\n\t * @property {String} mode - Set what mode to run the magnifier in. There are two modes available: `hoverzoom` and `animatedzoom`. The `hoverzoom` mode provides the ability to magnify and pan the image by just hovering your mouse over the image. It also provides a `flyout` option where a clip of the zoomed in image is displayed on a separate widget floating somewhere around (configurable) the image. The `animatedzoom` mode only does inline magnification but provides smooth animation between magnification levels, it also allows for incremental zooming.\n\t * @property {Boolean} button - Whether to show a button for toggling magnification (default: true)\n\t * @property {Boolean} enabled - Enabled/disable magnification (default: true, breakpoints supported)\n\t * @property {Integer} magnification - The scale factor to magnify the image: `2`, `3` (default), `4`, `4.5`, etc\n\n\t * @property {Array} image.widths - List of available widths for an image (to be combined with image.widthParam) - (default: [\"320\",\"640\",\"800\",\"1024\",\"2048\",\"5000\"])\n\t * @property {String} image.sizes - Value for image sizes attribute. Default is set dynamically to viewer width when rendered with JS, and updated dynamically. Values: `100vw` (default), `200px`, `(min-width:1000px) 500px, 100vw` - (default: `100vw`, breakpoints supported)\n\t * @property {String} image.policy - Query param value for policy, appended to &policy= per image url when specified. Values: `foo`. (default: undefined)\n\n\t * @property {Integer} delay - Only applicable in `hoverzoom` mode. The time delay in milliseconds between mouse hover and magnification (default: 300, breakpoints supported)\n\t * @property {String} buttonText - Only applicable in `hoverzoom` mode. Text for the zoom button. Also used for its title attribute. (default: \"Toggle Image Magnification\")\n\t * @property {Integer} flyout.width - Only applicable in `hoverzoom` mode. Width of the flyout image (default: 200)\n\t * @property {Integer} flyout.height - Only applicable in `hoverzoom` mode. Height of the flyout image (default: 200)\n\t * @property {Boolean} hoverZoomWithoutClick - Only applicable in `hoverzoom` mode. Zoom starts on mouse hover with no click needed (default: true; false will require a click to hover-zoom)\n\t * @property {String} placement - Only applicable in `hoverzoom` mode. Placement of the magnified image: `inline` , `flyoutloupe`, `flyouttopleft`,`flyoutbottomleft` ,`flyouttopright` and `flyoutbottomright` - (default: inline, breakpoins supported)\n\n\t * @property {Float} incrementalZoomFactor - Only applicable in `animatedzoom` mode. A number by which to incrementally zoom up until the specified `magnification`, default `3`. For example a `magnification` of `4` and an `incrementalZoomFactor` of `2` will zoom the image in `2` steps\n\t * @property {Boolean} animateZoom - Only applicable in `animatedzoom` mode. Animates the magnification process. Default `true`\n\t * @property {Integer} animationDuration - Only applicable in `animatedzoom` mode. If `animateZoom` is true, this specifies the length of the animation in milliseconds. Default `250`\n\t * @property {String} zoomInBtnText - Only applicable in `animatedzoom` mode. Hover text to display on the zoom in button. Default `Zoom In`\n\t * @property {String} zoomOutBtnText - Only applicable in `animatedzoom` mode. Hover text to display on the zoom out button. Default `Zoom Out`\n\t */\n\tMagnifier.defaultOptions = {\n\t\t// general options\n\t\tmode: Magnifier.MODE_HOVER_ZOOM,\n\t\tbutton: true,\n\t\tenabled: true,\n\t\tmagnification: 3,\n\n\t\t// image options\n\t\timage: Akamai.Image.defaultConfig,\n\n\t\t// hoverzoom options\n\t\tdelay: 300,\n\t\tbuttonText: \"Toggle Image Magnification\",\n\t\tflyout: {\n\t\t\twidth: 200,\n\t\t\theight: 200\n\t\t},\n\t\thoverZoomWithoutClick: true,\n\t\tplacement: \"inline\",\n\n\t\t// animatedzoom options\n\t\tincrementalZoomFactor: 3,\n\t\tanimateZoom: true,\n\t\tanimationDuration: 250,\n\t\tzoomInBtnText: 'Zoom In',\n\t\tzoomOutBtnText: 'Zoom Out'\n\t};\n\n\t// srcset stuff\n\tAkamai.Sourceable.extendStatic(Magnifier);\n\n\tMagnifier.render = function(json, options){\n\t\tvar finalOptions = Akamai.Util.options(Magnifier.defaultOptions, options);\n\t\tvar dataAttr = Magnifier._dataAttr;\n\t\tvar fallbackSrc = Magnifier._fallbackSrc(json.url, finalOptions.image);\n\t\tvar largestSrc = Magnifier._largestSrc(json.url, finalOptions.image);\n\t\tvar srcSet = Magnifier._srcset(json.url, finalOptions.image)\n\t\tvar sizes = finalOptions.image.sizes;\n\t\tvar impl = (finalOptions.mode === Magnifier.MODE_ANIMATED_ZOOM) ? Akamai.MagnifierImplScroller : Akamai.MagnifierImplEnlarge;\n\t\treturn impl.render(finalOptions, dataAttr, fallbackSrc, largestSrc, srcSet, sizes);\n\t};\n\n\t/**\n\t * Enter magnifier mode\n\t * @method\n\t * @fires Akamai.Magnifier#akamai-magnifier-in\n\t * @returns {undefined}\n\t */\n\tMagnifier.prototype.in = function(){\n\t\tthis._impl.zoomIn();\n\t};\n\n\t/**\n\t * Exit magnifier mode\n\t * @method\n\t * @fires Akamai.Magnifier#akamai-magnifier-out\n\t * @returns {undefined}\n\t */\n\tMagnifier.prototype.out = function(){\n\t\tthis._impl.zoomOut();\n\t};\n\n\t/**\n\t * Return the current state of the magnifier\n\t * @method\n\t * @returns {Boolean}\n\t */\n\tMagnifier.prototype.isMagnified = function(){\n\t\treturn this._impl.isMagnified();\n\t};\n\n\t/**\n\t * Toggle the state of the magnifier\n\t * @method\n\t * @fires Akamai.Magnifier#akamai-magnifier-in\n\t * @fires Akamai.Magnifier#akamai-magnifier-out\n\t * @returns {undefined}\n\t */\n\tMagnifier.prototype.toggle = function(){\n\t\tthis._impl.toggleZoom();\n\t};\n\n\t/**\n\t * Triggered when the magnifier has completed it transition to\n\t * a new index due to user interaction or a call to {@link Akamai.Carouse#in}.\n\t *\n\t * @event Akamai.Magnifier#akamai-magnifier-in\n\t */\n\n\t/**\n\t * Triggered when the magnifier has completed it transition to\n\t * a new index due to user interaction or a call to {@link Akamai.Carouse#out}.\n\t *\n\t * @event Akamai.Magnifier#akamai-magnifier-out\n\t */\n\n\t/**\n\t * Triggered when initialization finishes\n\t * {@link Akamai.Magnifier}.\n\t *\n\t * @event Akamai.Magnifier#akamai-magnifier-init\n\t */\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.Magnifier = Magnifier;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\tvar VideoImpl = Akamai.Util.component(\"VideoImpl\", function(element, options){\n\t\tthrow new Error('Not allowed to instantiate VideoImpl');\n\t});\n\n\tVideoImpl.render = function(json, options){\n\t\tthrow new Error('VideoImpl.render not implemented');\n\t};\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.VideoImpl = VideoImpl;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\tvar VideoImplPristine = Akamai.Util.component(\"VideoImplPristine\", function(element, options){\n\t});\n\n\tVideoImplPristine.prototype = Object.create(Akamai.VideoImpl.prototype);\n\tVideoImplPristine.prototype.constructor = VideoImplPristine;\n\n\tVideoImplPristine.render = function(json, options){\n\t\tvar finalOptions = Akamai.Util.options(Akamai.Video.defaultOptions, options);\n\n\t\tvar url = json.url;\n\t\tvar poster = json.poster || \"\";\n\t\tvar mime = (json.mime) ? 'type=\"' + json.mime + '\"' : '';\n\n\t\tvar attrs = [\n\t\t\tfinalOptions.loop ? \"loop\" : \"\",\n\t\t\tfinalOptions.autoplay ? \"autoplay\" : \"\",\n\t\t\tfinalOptions.controls ? \"controls\" : \"\",\n\t\t\tfinalOptions.muted ? \"muted\" : \"\",\n\t\t\t\"playsinline\"\n\t\t];\n\n\t\treturn Akamai.Util.trim(`\n\t\t\t\n\t\t\t\t\t![](\"${fallbackSrc}\"\n\t\t\t\t\tsrcset=\"${srcSet}\"\n\t\t\t\t\tsizes=\"${options.image.sizes}\")
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t${options.zoomInBtnText}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t${options.zoomOutBtnText}\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t`);\n\t};\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.VideoImplPristine = VideoImplPristine;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\tvar VideoImplIm = Akamai.Util.component(\"VideoImplIm\", function(element, options){\n\t\tvar finalOptions = Akamai.Util.options(Akamai.Video.defaultOptions, options);\n\t\tVideoImplIm._validateOptions(finalOptions);\n\t});\n\n\tVideoImplIm.prototype = Object.create(Akamai.VideoImpl.prototype);\n\tVideoImplIm.prototype.constructor = VideoImplIm;\n\n\tVideoImplIm._validateOptions = function(options){\n\t\tif (!Array.isArray(options.sizes) || options.sizes.length !== 3) {\n\t\t\tthrow new Error('Akamai.Video sizes must have three entries');\n\t\t}\n\n\t\tif (options.sizes.some(function (size) {\n\t\t\treturn isNaN(size);\n\t\t})) {\n\t\t\tthrow new Error('Akamai.VideoImplIm all sizes must be numbers');\n\t\t}\n\t}\n\n\tVideoImplIm.render = function(json, options){\n\t\tvar finalOptions = Akamai.Util.options(Akamai.Video.defaultOptions, options);\n\t\tVideoImplIm._validateOptions(finalOptions);\n\n\t\tvar url = json.url;\n\t\tvar poster = json.poster || \"\";\n\t\tvar width;\n\n\t\tvar viewPortWidth = window.innerWidth;\n\n\t\tif (viewPortWidth < 992) {\n\t\t\twidth = finalOptions.sizes[0];\n\t\t} else if (viewPortWidth < 1200) {\n\t\t\twidth = finalOptions.sizes[1];\n\t\t} else {\n\t\t\twidth = finalOptions.sizes[2];\n\t\t}\n\n\t\tvar attrs = [\n\t\t\tfinalOptions.loop ? \"loop\" : \"\",\n\t\t\tfinalOptions.autoplay ? \"autoplay\" : \"\",\n\t\t\tfinalOptions.controls ? \"controls\" : \"\",\n\t\t\tfinalOptions.muted ? \"muted\" : \"\",\n\t\t\t\"playsinline\"\n\t\t];\n\n\t\tvar joiner = url.indexOf('?') === -1 ? '?' : '&';\n\n\t\treturn Akamai.Util.trim(`\n\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t`);\n\t};\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.VideoImplIm = VideoImplIm;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\t/**\n\t * Video component\n\t * @class\n\t * @alias Akamai.Video\n\t * @param {HTMLElement} element - the DOM element representing the component markup\n\t * @param {Object} options - configuration options\n\t */\n\tvar Video = Akamai.Util.component(\"Video\", function(element, options){\n\t\t// TODO\n\t\tthis._comp = this._$el.length && undefined;\n\t\tthis._$videoElement = this._$el.find(\"video\");\n\t\tthis._videoElement = this._$videoElement[0];\n\n\t\tif( !this._videoElement ){\n\t\t\tthrow new Error( \"Akamai.Video requires a child HTML Video element\" );\n\t\t}\n\n\t\tif( !this._videoElement.play || !this._videoElement.pause ){\n\t\t\tthis._unsupportedAPI = true;\n\t\t\tthis._unsupported();\n\t\t\treturn;\n\t\t}\n\n\t\t// get the initial state (could be autoplaying on render)\n\t\tthis._setState(this._videoElement.paused ? Video.States.Paused : Video.States.Playing);\n\n\t\t// state bindings\n\t\tthis._$el\n\t\t\t.bind(\"akamai-video-play\", function(){\n\t\t\t\tthis._setState(Video.States.Playing);\n\t\t\t}.bind(this))\n\t\t\t.bind(\"akamai-video-pause\", function(){\n\t\t\t\tthis._setState(Video.States.Paused);\n\t\t\t}.bind(this));\n\n\t\tthis._createPlayButton();\n\t});\n\n\tVideo.MODE_IM = 'im';\n\tVideo.MODE_PRISTINE = 'pristine';\n\n\tVideo._componentEventMapping = {\n\t\t\"play\": {\n\t\t\tto: \"play\",\n\t\t\tselector: \"video\"\n\t\t},\n\n\t\t\"pause\": {\n\t\t\tto: \"pause\",\n\t\t\tselector: \"video\"\n\t\t},\n\n\t\t\"seeked\": {\n\t\t\tto: \"seek\",\n\t\t\tselector: \"video\"\n\t\t }\n\t};\n\n\tVideo.prototype._updateOptions = function(options){\n\t\tif( !options ) {\n\t\t\tthis._options = this._originalOptions;\n\t\t}\n\n\t\tthis._options = Akamai.Util.extend(true, this._options, options);\n\n\t\t// push the final options down to the dom element so that CSS that keys off\n\t\t// of the attributes can apply when JS config is used\n\t\tAkamai.Util.setDataAttrOptions(this._$el, Video.defaultOptions, this._options, \"Video\");\n\n\t\t// TODO see Magnifier for example\n\t};\n\n\t/**\n\t * Defines the global default options for all Spin360s on the page\n\t * @static\n\t * @property {Boolean} autoplay - Automatically play the video on load (default: false)\n\t * @property {Boolean} controls - Display the video controls (default: true)\n\t * @property {Boolean} loop - Restart the video when it reaches the end (default: false)\n\t * @property {Boolean} muted - Mute the video (default: true)\n\t * @property {String} mode - What video component to use. `im` will let you use any size pristine video and will automatically request & generate the right size when the page is loaded. `pristine` just passes through the original video into the video player and this is what will always play on the users device. Default: `pristine`\n\t * @property {Array} sizes - Video sizes (widths) to use for different screen widths. Defaults: [1920 (large screens), 1280 (tablet), 854 (mobile), ]\n\t */\n\tVideo.defaultOptions = {\n\t\tautoplay: false,\n\t\tcontrols: true,\n\t\tloop: false,\n\t\tmuted: true,\n\t\tmode: Video.MODE_PRISTINE,\n\t\tsizes: [854, 1280, 1920]\n\t};\n\n\tVideo.render = function(json, options){\n\t\tvar impl = (options && options.mode === Video.MODE_IM) ? Akamai.VideoImplIm : Akamai.VideoImplPristine;\n\t\treturn impl.render(json, options);\n\t};\n\n\tVideo.States = {\n\t\tPlaying: 0,\n\t\tPaused: 1\n\t};\n\n\tVideo.prototype._unsupported = function(){\n\t\tif( this._unsupportedAPI ){\n\t\t\tAkamai.Util.log(\"Video: video API not supported\", 'error');\n\t\t}\n\n\t\treturn this._unsupportedAPI;\n\t};\n\n\t/**\n\t * Play the video, idempotent\n\t * @method\n\t * @fires Akamai.Video#akamai-video-play\n\t * @returns {undefined}\n\t */\n\tVideo.prototype.play = function(){\n\t\tif( this._unsupported() ) { return; }\n\t\tthis._videoElement.play();\n\t};\n\n\t/**\n\t * Pause the video\n\t * @method\n\t * @fires Akamai.Video#akamai-video-pause\n\t * @returns {undefined}\n\t */\n\tVideo.prototype.pause = function(){\n\t\tif( this._unsupported() ) { return; }\n\t\tthis._videoElement.pause();\n\t};\n\n\t/**\n\t * Return the current state of the video\n\t * @example \n\t\t\t\t${Carousel.renderMapping[item.type].render(item, options[mappedType])}\n\t\t\t
\n\t\t`;\n\t};\n\n\tCarousel._renderThumbnailAnchor = function(item, data, i, options) {\n\t\tvar thumbUrl = \"\";\n\t\tvar altText = item.alt || \"\";\n\n\t\t// use the video poster, the canonical url, or the first in a sequence\n\t\tif( item.type === 'video' ){\n\t\t\tthumbUrl = item.poster || data.reduce(function(acc, i){\n\t\t\t\treturn acc || Carousel._thumbUrl(i);\n\t\t\t}, \"\");\n\t\t} else {\n\t\t\tthumbUrl = Carousel._thumbUrl(item);\n\t\t}\n\n\t\t// TODO this sucks\n\t\toptions.images.policy = options.thumbnail.policy;\n\n\t\tvar src = Carousel._fallbackSrc( thumbUrl, options.images );\n\t\tvar srcset = Carousel._srcset( thumbUrl, options.images );\n\t\tvar sizes = options.images.sizes;\n\n\t\t// if there's a thumbnail policy, the thumbnails will be fresh image requests,\n\t\t// so they should have better sizes attribute values\n\t\tif( options.thumbnail.policy ){\n\t\t\tsizes = options.thumbnail.sizes;\n\t\t}\n\n\t\tvar attrs = [\n\t\t\t`${Carousel._dataAttr}-thumb-type=\"${item.type}\"`,\n\t\t\titem.type == \"video\" && !item.poster ? \"${Carousel._dataAttr}-thumb-noposter\" : \"\"\n\t\t];\n\n\t\treturn `\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t`;\n\t};\n\n\tCarousel.prototype._setAspectAttributes = function( $el ){\n\t\tvar orientationAttr = `${Carousel._dataAttr}-aspectratio-orientation`;\n\t\tif( $el.height() > $el.width() ) {\n\t\t\t$el.attr( orientationAttr, \"portrait\" );\n\t\t} else if( $el.height() < $el.width() ) {\n\t\t\t$el.attr( orientationAttr, \"landscape\" );\n\t\t} else {\n\t\t\tif ($el.parent().height() >= $el.parent().width()) {\n\t\t\t\t$el.attr( orientationAttr, \"landscape\" );\n\t\t\t} else {\n\t\t\t\t$el.attr( orientationAttr, \"portrait\" );\n\t\t\t}\n\t\t}\n\t};\n\n\tCarousel.prototype._setAspectRatio = function(){\n\t\tvar value = this._options.aspectratio || 0;\n\t\tvar $items = this._$el.find( \".snapper_item\" );\n\t\t$items.css( \"padding-top\", (value / $items.length) + \"%\" );\n\t};\n\n\tCarousel.prototype._bindAspectAttributes = function(){\n\t\tif( this._options.aspectratio === false ){\n\t\t\treturn;\n\t\t}\n\n\t\tvar value = this._options.aspectratio || 0;\n\t\tvar self = this;\n\t\tvar $items = this._$el.find( \".snapper_item\" );\n\n\t\t$items.each(function(){\n\t\t\tvar loadBound;\n\t\t\tvar $item = $(this);\n\n\t\t\tvar $loadable = $item.find( \"img, video\" ).eq(0);\n\n\t\t\t$loadable.bind(\"load loadedmetadata\", loadBinding = function(){\n\t\t\t\tclearTimeout(loadBound);\n\n\t\t\t\tif( $item.is(`[${Akamai.Spin360._dataAttr}]`) ){\n\t\t\t\t\t// TODO it's not always a canvas, sometimes it's a collection of\n\t\t\t\t\t// images based on settings\n\t\t\t\t\tself._setAspectAttributes( $item.find( \"canvas\" ) );\n\t\t\t\t}\telse{\n\t\t\t\t\tself._setAspectAttributes( $loadable );\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tloadBound = setTimeout(loadBinding, 5000);\n\t\t});\n\n\t\t$items.eq(0).find( \"img,video\" ).eq(0).bind( \"load loadedmetadata\", function(){\n\t\t\tself._trigger( \"first-media-load\" );\n\t\t});\n\t};\n\n\tCarousel.render = function(data, options){\n\t\toptions = options || {};\n\n\t\t// establish the extended default options for the carousel\n\t\tvar carouselOptions = Akamai.Util.options(Carousel.defaultOptions, options);\n\n\t\tvar templateAttrs = [\n\t\t\t`${Carousel._dataAttr}`,\n\t\t\t`${Carousel._dataAttr}-item-count=\"${(data || []).length}\"`,\n\t\t\t`data-snapper-deeplinking=\"false\"`,\n\t\t\tcarouselOptions.arrows ? \"data-snapper-nextprev\" : \"\"\n\t\t];\n\n\t\tCarousel.counter++;\n\n\t\t// TODO can we do something about the `enlarge_pane` class here, seems it\n\t\t// could be conditioned on at least one regular image type in the json\n\t\t// TODO options should dictate `data-snapper-nextprev`\n\t\treturn Akamai.Util.trim(`\n\t\t\t\n\t\t\t\t\t${Akamai.Util.map(data, function(item, i){\n\t\t\t\t\t\treturn Carousel._renderThumbnailAnchor(item, data, i, options);\n\t\t\t\t\t}).join(\"\\n\")}\n\t\t\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t`);\n\t};\n\n\t/**\n\t * Instantiate Carousels by looking for children matching\n\t * [data-akamai-carousel] in `element` param\n\t * @method\n\t * @static\n\t * @param {HTMLElement} element - the element to search in for\n\t * @returns {Akamai.Carousel[]}\n\t */\n\n\n\t/**\n\t * @method\n\t * @returns {Akamai.Spin360[]}\n\t */\n\tCarousel.prototype.getSpin360s = function(){\n\t\treturn this._spins;\n\t};\n\n\t/**\n\t * @method\n\t * @returns {Akamai.Magnifier[]}\n\t */\n\tCarousel.prototype.getMagnifiers = function(){\n\t\treturn this._magnifiers;\n\t};\n\n\t/**\n\t * @method\n\t * @returns {Akamai.Video[]}\n\t */\n\tCarousel.prototype.getVideos = function(){\n\t\treturn this._videos;\n\t};\n\n\t/**\n\t * Go to a particular slide.\n\t *\n\t * Note that the state of the DOM on the page and thus the index of the\n\t * carousel will not be up-to-date until the {@link\n\t * Akamai.Carousel#akamai-carousel-goto} event has been fired. That is,\n\t * calling this method and the calling `getIndex` will not necessarily result\n\t * in an updated index value. Either bind to the event or supply a callback.\n\t *\n\t * @method\n\t * @fires Akamai.Carousel#akamai-carousel-goto\n\t * @param {Integer} index - The zero-based slide index to go to\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.goto = function(index, callback){\n\t\tthis._$el.snapper( \"goto\", index, callback );\n\t};\n\n\tCarousel._itemAttr = `${Carousel._dataAttr}-item`;\n\tCarousel._activeItemAttr = `${Carousel._itemAttr}-active`;\n\n\t/**\n\t * Add an attribute to all carousel items,\n\t * and additionally maintain an active attribute on the active carousel item\n\t *\n\t * @method\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype._activeItemAttributes = function(){\n\t\tvar attrAllItems = this.constructor._itemAttr;\n\t\tvar attrActiveItem = this.constructor._activeItemAttr;\n\n\t\tthis._$el\n\t\t\t.find( \".snapper_item\" )\n\t\t\t.attr( attrAllItems, true )\n\t\t\t.removeAttr( attrActiveItem )\n\t\t\t.eq( this.getIndex() ).attr( attrActiveItem, true );\n\t};\n\n\t/**\n\t * Return the current slide index\n\t * @method\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.getIndex = function(){\n\t\treturn this._$el.snapper( \"getIndex\" );\n\t};\n\n\t// Extend Carousel with Advanceabl interface\n\tAkamai.Advanceable.extend(Carousel);\n\n\t/**\n\t * Advance to the next item\n\t * @method\n\t * @fires Akamai.Carousel#akamai-carousel-next\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.next;\n\t// required for JSDocs, implementation in Advanceable\n\n\t/**\n\t * Retreat to the previous item\n\t * @method\n\t * @fires Akamai.Carousel#akamai-carousel-previous\n\t * @param {Function?} callback - callback invoked after the action has completed in the DOM\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.previous;\n\t// required for JSDocs, implementation in Advanceable\n\n\t/**\n\t * Start automatic advancement of the carousel items\n\t * @method\n\t * @fires Akamai.Carousel#akamai-carousel-start-slideshow\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.startSlideshow\t= function(){\n\t\tthis._$el.one(\"mousedown touchstart\", this.stopSlideshow.bind(this));\n\n\t\tthis.next(function(){\n\t\t\tthis._trigger(\"start-slideshow\");\n\t\t\tthis._slideshowTimer = setTimeout(function(){\n\t\t\t\tthis.startSlideshow();\n\n\t\t\t\t// TODO remove || when default options are added\n\t\t\t}.bind(this), this._options.slideshow.interval );\n\t\t}.bind(this));\n\t};\n\n\t/**\n\t * Start automatic advancement of the carousel items\n\t * @method\n\t * @fires Akamai.Carousel#akamai-carousel-stop-slideshow\n\t * @returns {undefined}\n\t */\n\tCarousel.prototype.stopSlideshow = function(){\n\t\tclearTimeout(this._slideshowTimer);\n\t\tthis._slideshowTimer = undefined;\n\t\tthis._trigger(\"stop-slideshow\");\n\t};\n\n\t/**\n\t * Triggered when the carousel has completed it transition to\n\t * a new index due to user interaction or a call to {@link Akamai.Carousel#goto}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-goto\n\t */\n\n\t/**\n\t * Triggered when the carousel has completed it transition to\n\t * a new index due to user interaction or a call to {@link Akamai.Carousel#next}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-next\n\t */\n\n\t/**\n\t * Triggered when the carousel has completed it transition to\n\t * a new index due to user interaction or a call to {@link Akamai.Carousel#previous}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-previous\n\t */\n\n\t/**\n\t * Triggered when the carousel has started the slide show due to a call to\n\t * {@link Akamai.Carousel#startSlideshow}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-start-slideshow\n\t */\n\n\t/**\n\t * Triggered when the carousel has stoped the slide show due to a call to\n\t * {@link Akamai.Carousel#stopSlideshow}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-stop-slideshow\n\t */\n\n\t/**\n\t * Triggered when initialization finishes\n\t * {@link Akamai.Carousel}.\n\t *\n\t * @event Akamai.Carousel#akamai-carousel-init\n\t */\n\n\tCarousel.prototype.refresh = function(){\n\t\tthis._$el.snapper(\"updateWidths\");\n\t};\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.Carousel = Carousel;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\t/**\n\t * Image Fullscreen\n\t * @class\n\t * @alias Akamai.Fullscreen\n\t * @param {HTMLElement} element - the DOM element representing the component markup\n\t * @param {Object} options - configuration options\n\t */\n\n\t// TODO JSDocs\n\t// TODO Tests\n\tvar Fullscreen = Akamai.Util.component(\"Fullscreen\", function(element, options){\n\t\tif( this._options.enabled ) {\n\t\t\tthis._init();\n\t\t}\n\t});\n\n\tFullscreen.prototype._init = function(){\n\t\tthis._$fullscreen = this._$el;\n\n\t\t// parent container does not allow widths to be set (Firefox, fullscreen), so we’ll adjust the children\n\t\tthis.addButton();\n\n\t\tthis._fullscreenApiKeys = Fullscreen._keys();\n\n\t\tif( this._options.native ) {\n\t\t\tthis._useNativeApi = !!this._fullscreenApiKeys;\n\t\t} else {\n\t\t\tthis._useNativeApi = false;\n\t\t}\n\n\t\t// Fullscreen API is disabled and the fallback behavior is active\n\t\tthis._fullscreenFallbackEnabled = false;\n\t\tthis._$placeholder = $( \"\n\t\t\t\t\t
\n\n\t\t\t\t${Carousel._renderThumbnails(data, carouselOptions)}\n\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t${Akamai.Util.map(data, function(item, i){\n\t\t\t\t\t\t\t\t\treturn Carousel._renderItem(item, i, carouselOptions);\n\t\t\t\t\t\t\t\t}).join(\"\\n\")}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\" );\n\n\t\tthis._isFullscreen = false;\n\t\tthis.addEvents();\n\t};\n\n\tFullscreen.classes = {\n\t\tbtn: \"akamai-fullscreen-btn\",\n\t\tbtnContainer: \"akamai-fullscreen-btncontainer\",\n\t\tenterBtn: \"akamai-fullscreen-btn-enter\",\n\t\texitBtn: \"akamai-fullscreen-btn-exit\",\n\t\tactive: \"akamai-fullscreen-active\",\n\t\tfallback: \"akamai-fullscreen-fallback\"\n\t};\n\n\tFullscreen.attr = {\n\t\twidth: \"data-akamai-fullscreen-width\",\n\t\tenterBtn: \"data-akamai-fullscreen-btn\",\n\t\texitBtn: \"data-akamai-fullscreen-exit-btn\"\n\t};\n\n\tFullscreen.defaultOptions = {\n\t\tenabled: false,\n\t\tnative: false\n\t};\n\n\tFullscreen.prototype.addButton = function(){\n\t\tthis._$widthAdjust = this._$fullscreen.children().filter(\".focused\");\n\n\t\tif( !this._$widthAdjust.length ) {\n\t\t\tthis._$widthAdjust = this._$fullscreen\n\t\t\t\t.children()\n\t\t\t\t.eq(0);\n\t\t}\n\n\t\tif( this._$widthAdjust.attr(Fullscreen.attr.width) === null ){\n\t\t\tthis._$widthAdjust.attr( Fullscreen.attr.width, \"\" );\n\t\t}\n\n\t\tif( this._$widthAdjust.find(\"[\" + Fullscreen.attr.enterBtn + \"]\").length ){\n\t\t\treturn;\n\t\t}\n\n\t\t// buttons parent\n\t\tthis._$buttonContainer = this._$widthAdjust;\n\t\tthis._$buttonContainer.addClass( Fullscreen.classes.btnContainer );\n\n\t\tthis._$buttonContainer.append(this.render());\n\t};\n\n\tFullscreen.prototype.addEvents = function() {\n\t\tthis._$fullscreen.on( \"click\", function( e ) {\n\t\t\tvar $target = $( e.target );\n\t\t\tif( !$target.is(\"[\" + Fullscreen.attr.enterBtn + \"]\") ){\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.enter();\n\t\t\te.preventDefault();\n\t\t}.bind( this ));\n\n\t\tthis._$fullscreen.on( \"click\", function( e ) {\n\t\t\tvar $target = $( e.target );\n\n\t\t\tif( !$target.is( \"[\" + Fullscreen.attr.exitBtn + \"]\" ) ){\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.exit();\n\t\t\te.preventDefault();\n\t\t}.bind( this ));\n\n\t\tif( this._useNativeApi ) {\n\t\t\tdocument.addEventListener( this._fullscreenApiKeys.onchange, function() {\n\t\t\t\t// exiting fullscreen using native method (ESC or menu option)\n\t\t\t\tif( !document[ this._fullscreenApiKeys.element ] ) {\n\t\t\t\t\tthis._exit();\n\t\t\t\t}\n\t\t\t}.bind( this ), false );\n\t\t}\n\n\t\t// ESC to close\n\t\t$( document ).on( \"keydown\", function( e ) {\n\t\t\tvar code = e.keyCode || e.which;\n\t\t\tif( code === 27 ) {\n\t\t\t\tthis._exit();\n\t\t\t}\n\t\t}.bind( this ));\n\t};\n\n\tFullscreen.prototype.render = function() {\n\t\treturn Akamai.Util.trim(`\n\t\t\t\n\t\t\t\n\t\t`);\n\t};\n\n\tFullscreen._keyLookup = [\n\t\t{\n\t\t\tenter: \"requestFullscreen\",\n\t\t\texit: \"exitFullscreen\",\n\t\t\telement: \"fullscreenElement\",\n\t\t\tonchange: \"fullscreenchange\"\n\t\t},\n\t\t{\n\t\t\tenter: \"webkitRequestFullscreen\",\n\t\t\texit: \"webkitExitFullscreen\",\n\t\t\telement: \"webkitFullscreenElement\",\n\t\t\tonchange: \"webkitfullscreenchange\"\n\t\t},\n\t\t{\n\t\t\tenter: \"webkitRequestFullScreen\",\n\t\t\texit: \"webkitCancelFullScreen\",\n\t\t\telement: \"webkitCurrentFullScreenElement\",\n\t\t\tonchange: \"webkitfullscreenchange\"\n\t\t},\n\t\t{\n\t\t\tenter: \"mozRequestFullScreen\",\n\t\t\texit: \"mozCancelFullScreen\",\n\t\t\telement: \"mozFullScreenElement\",\n\t\t\tonchange: \"mozfullscreenchange\"\n\t\t},\n\t\t{\n\t\t\tenter: \"msRequestFullscreen\",\n\t\t\texit: \"msExitFullscreen\",\n\t\t\telement: \"msFullscreenElement\",\n\t\t\tonchange: \"MSFullscreenChange\"\n\t\t}\n\t];\n\n\tFullscreen._keys = function( el ) {\n\t\tvar keys = Fullscreen._keyLookup;\n\n\t\tvar el = document.body;\n\t\tfor( var j = 0, k = keys.length; j < k; j++ ) {\n\t\t\tif( keys[ j ].enter in el ) {\n\t\t\t\treturn keys[ j ];\n\t\t\t}\n\t\t}\n\t};\n\n\tFullscreen.prototype._maximizePlacement = function(){\n\t\tthis._fullscreenFallbackEnabled = true;\n\t\tthis._$fullscreen.addClass( Fullscreen.classes.fallback );\n\t\tthis._$placeholder.insertAfter( this._$fullscreen );\n\t\tthis._$fullscreen.appendTo( document.body );\n\t};\n\n\tFullscreen.prototype._restorePlacement = function(){\n\t\tif( !this._fullscreenFallbackEnabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._fullscreenFallbackEnabled = false;\n\t\tthis._$fullscreen.removeClass( Fullscreen.classes.fallback );\n\t\tthis._$fullscreen.insertAfter( this._$placeholder );\n\t\tthis._$placeholder.remove();\n\t};\n\n\tFullscreen.prototype._adjustWidth = function() {\n\t\tthis._$fullscreen.css( \"width\", \"auto !important\" );\n\t\t// wish this could go into the change event above, but alas the dimensions don’t measure right\n\t\tvar widthSmall = this._$fullscreen.width();\n\t\tvar heightSmall = this._$fullscreen.height();\n\n\t\tvar viewportWidth = this._useNativeApi ? window.screen.width : Math.max( document.documentElement.clientWidth, window.innerWidth || 0 );\n\t\tvar viewportHeight = this._useNativeApi ? window.screen.height : Math.max( document.documentElement.clientHeight, window.innerHeight || 0 );\n\n\t\t// calculate the maximum width we can use to fill the viewportHeight\n\t\tvar widthBig = widthSmall * viewportHeight / heightSmall;\n\n\t\t// if the width is bigger than the maximum, just set to 100% (won’t fill the entire height, but that’s ok)\n\t\tif( widthBig > viewportWidth ) {\n\t\t\twidthBig = \"100%\";\n\t\t}\n\n\t\tthis._$widthAdjust.width( widthBig );\n\t};\n\n\tFullscreen.prototype._revertWidth = function() {\n\t\tthis._$widthAdjust.css( \"width\", \"\" );\n\t};\n\n\t/**\n\t * Enter full screen mode\n\t * @method\n\t * @returns {undefined}\n\t */\n\tFullscreen.prototype.enter = function(){\n\t\tvar activeIndex = this._$fullscreen[0].shoestringData.Viewer._carousels[0].getIndex();\n\t\tthis._$fullscreen.addClass( Fullscreen.classes.active );\n\n\n\t\tif( this._useNativeApi ) {\n\t\t\tthis._$fullscreen[ 0 ][ this._fullscreenApiKeys.enter ]();\n\t\t\tthis._adjustWidth();\n\t\t} else {\n\t\t\tthis._adjustWidth();\n\t\t\tthis._maximizePlacement();\n\t\t}\n\t\tthis._isFullscreen = true;\n\t\tthis._$fullscreen[0].shoestringData.Viewer._carousels[0].goto(activeIndex);\n\t\tthis._trigger(\"enter\");\n\t};\n\n\tFullscreen.prototype._exit = function(){\n\t\tvar activeIndex = this._$fullscreen[0].shoestringData.Viewer._carousels[0].getIndex();\n\t\tthis._$fullscreen.removeClass( Fullscreen.classes.active );\n\n\t\tif( !this._useNativeApi ) {\n\t\t\tthis._restorePlacement();\n\t\t}\n\n\t\tthis._revertWidth();\n\t\tthis._isFullscreen = false;\n\t\tthis._$fullscreen[0].shoestringData.Viewer._carousels[0].goto(activeIndex);\n\t\tthis._trigger(\"exit\");\n\t};\n\n\t/**\n\t * Exits full screen mode\n\t * @method\n\t * @returns {undefined}\n\t */\n\tFullscreen.prototype.exit = function(){\n\t\tif( this._useNativeApi ) {\n\t\t\t// note some close behavior happens in the onchange event handler above\n\t\t\tdocument[ this._fullscreenApiKeys.exit ]();\n\t\t}\n\n\t\tthis._exit();\n\t};\n\n\tFullscreen.prototype.isFullscreen = function(){\n\t\treturn this._isFullscreen;\n\t};\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.Fullscreen = Fullscreen;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\t/**\n\t * Akamai Viewer omni-component\n\t * @class\n\t * @alias Akamai.Viewer\n\t * @param {HTMLElement} element - the DOM element representing the component markup\n\t * @param {Object} options - configuration options\n\t *\n\t * @example Instatiation \n\t * var element = document.querySelector( \"[data-akamai-viewer]\" );\n\t * var viewer = Akamai.Viewer( element );\n\t */\n\tvar Viewer = Akamai.Util.component(\"Viewer\", true, function(element, options){\n\t\t// try to update the carousel and magnifier sizes options to the width of\n\t\t// the viewer for more accurate srcset selection\n\t\tthis._updateSizesOptions(true);\n\t\tthis._onResizeComplete(this._updateSizesOptions.bind(this));\n\n\t\t// move all the flattened component options (spin, zoom, video) onto the carousel\n\t\tthis._options.carousel =\n\t\t\tViewer._extendCarouselOptions(this._options);\n\n\t\tthis._withData(function(data){\n\t\t\tif( data ) {\n\t\t\t\t// check all of the urls agains the hostname and whitelist\n\t\t\t\tthis._checkJSONUrls(data);\n\n\t\t\t\t// prevent XSS / injection attacks by escaping string values\n\t\t\t\tdata = Akamai.Util.escapeJSONVals(data);\n\n\t\t\t\t// store escaped data for later reference\n\t\t\t\tthis._options.items.data = data;\n\t\t\t}\n\n\t\t\tthis._tagMapping = {};\n\n\t\t\t// TODO if the element is empty and/or options has `items` render into element\n\t\t\tif( this._$el.children().length == 0 && data ) {\n\t\t\t\tthis._tagMapping = this.constructor._tagSplit(data, this._options.items);\n\t\t\t\tthis._$el.append(this.constructor.render(data, this._options, true));\n\t\t\t}\n\n\t\t\t// intantiate all child carousels\n\t\t\tthis._carousels = Akamai.Carousel.createMany(element, this._options.carousel);\n\t\t\tthis._fullscreen = new Akamai.Fullscreen(element, this._options.fullscreen);\n\n\t\t\t// on enter and exit of fullscreen resolve the breakpoints and update options\n\t\t\tthis._$el.bind( \"akamai-fullscreen-enter akamai-fullscreen-exit\", function(){\n\t\t\t\tthis._updateOptions(this._resolveBreakpointOptions());\n\t\t\t}.bind(this));\n\n\t\t\t// use the breakpoints to set match media listeners\n\t\t\tthis._setBreakpoints();\n\n\t\t\t// have to trigger init explicitly for async constructors\n\t\t\tthis._trigger(\"init\");\n\t\t}.bind(this), function(msg){\n\t\t\tthrow new Error(msg);\n\t\t});\n\t});\n\n\tViewer.prototype._updateSizesOptions = function(localUpdateOnly){\n\t\t// update sizes option to something more specific if possible\n\t\tvar elWidth = this._$el.width();\n\t\tif( elWidth && elWidth > 0 ){\n\t\t\telWidth += \"px\";\n\t\t\tthis._options = Akamai.Util.extend(true, this._options, {\n\t\t\t\tcarousel: {\n\t\t\t\t\timages: {\n\t\t\t\t\t\tsizes: elWidth\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\tif( !localUpdateOnly ){\n\t\t\tthis._updateOptions(this._options);\n\t\t}\n\t};\n\n\tViewer.prototype._withData = function(after, fail){\n\t\tif(!this._options.items.uri){\n\t\t\tif( this._exceedsLimit(this._options.items.data, fail)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tafter(this._options.items.data);\n\t\t}\n\n\t\telse if (typeof(this._options.items.uri) !== 'undefined' && this._options.items.uri.length > 0)\n\t\t{\n\t\t\t$.get(this._options.items.uri, function(data){\n\t\t\t\t// make sure the data gets sorted out regardless of `get` impl\n\t\t\t\tdata = (typeof data === \"string\" ? JSON.parse(data) : data);\n\n\t\t\t\tif( this._exceedsLimit(data.items, fail) ){\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tafter(data.items);\n\t\t\t}.bind(this));\n\t\t}\n\t};\n\n\t// value in kibibytes\n\tViewer.prototype._exceedsLimit = function(data, fail){\n\t\t// TODO some tests don't provide data\n\t\tif( !data ) { return false; }\n\n\t\t// 1 unicode character = 4 bytes\n\t\t// length = # of chars\n\t\t// kibibyte = 1024 bytes\n\t\t// # of chars * 4 / 1024\n\t\tvar kb = JSON.stringify(data).length * 4 / 1024;\n\n\t\tif( kb > this._options.items.limit ) {\n\t\t\tfail = fail || function(){};\n\t\t\tfail(`JSON data size exceeds ${this._options.items.limit} KiB. Limit can be configured with items.limit Akamai.Viewer options.`);\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tViewer.prototype._setBreakpoints = function(){\n\t\tthis._breakpoints = this._reduceBreakpoints(this._options.breakpoints || {});\n\t\tthis._fullscreenBreakpoints =\n\t\t\tthis._reduceBreakpoints(this._options.fullscreenBreakpoints || {});\n\n\t\tthis._bindBreakpoints();\n\t};\n\n\tViewer.prototype._reduceBreakpoints = function(breakpoints){\n\t\tvar bps = [];\n\n\t\tfor( var bp in breakpoints ){\n\t\t\tif(breakpoints.hasOwnProperty(bp)){\n\t\t\t\ttry {\n\t\t\t\t\tbps.push(parseInt(bp, 10));\n\t\t\t\t} catch(e){\n\t\t\t\t\tAkamai.Util.log(e, 'error');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tbps.sort(function(a, b){ return b < a;});\n\n\t\treturn bps;\n\t};\n\n\tViewer.prototype._bindBreakpoints = function(){\n\t\t[this._breakpoints, this._fullscreenBreakpoints].forEach(function(bps){\n\t\t\t// bind using the minwidth and the next breakpoint as the maxwidth\n\t\t\t// adds a range from 0 to the first breakpoint and from the last\n\t\t\t// breakpoint to a very large number\n\t\t\tif(!bps.length) { return; }\n\n\t\t\tfor( var i = -1; i < bps.length; i++ ){\n\t\t\t\tthis._bindMatchMedia(bps[i], bps[i+1]);\n\t\t\t}\n\t\t}.bind(this));\n\t};\n\n\t// bind a callback to run after resize completes\n\tViewer.prototype._onResizeComplete = function( callback ){\n\t\tvar cbtimer;\n\t\tvar self = this;\n\t\twindow.addEventListener( \"resize\", function(){\n\t\t\tclearTimeout( cbtimer );\n\t\t\tcbtimer = setTimeout( callback, 500 );\n\t\t});\n\t};\n\n\tViewer.prototype._bindMatchMedia = function(minWidth, maxWidth){\n\t\tminWidth = minWidth || 0;\n\n\t\t// large number so we can use one media query template\n\t\tmaxWidth = maxWidth || 1000000000;\n\n\t\tif( window.matchMedia ){\n\t\t\t// bind using the minwidth and maxwidth so we get the events at the boundaries\n\t\t\t// so we can asses which set of options applies.\n\t\t\tvar query = `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`;\n\n\t\t\t// create a media list to bind to\n\t\t\tvar initList = window.matchMedia(query);\n\n\t\t\tif(initList && initList.addListener) {\n\t\t\t\t// handle a match on instantiation\n\t\t\t\tthis._mediaMatch(initList, minWidth, true);\n\n\t\t\t\t// bind for later changes in whether the media query matches\n\t\t\t\tinitList.addListener(function(list){\n\t\t\t\t\tthis._mediaMatch(list, minWidth);\n\t\t\t\t}.bind(this));\n\t\t\t}\n\t\t}\n\t};\n\n\tViewer.prototype._mediaMatch = function(list, minWidth, ignoreDefault){\n\t\t// If there is a match for the breakpoint (we're in the bp range)\n\t\t// Then set the options based on that breakpoint\n\t\t// Else if there is not a match and the client width is below the\n\t\t// breakpoint that's being disabled, then use the original options\n\t\tif(list.matches){\n\t\t\tvar resolvedOptions = this._resolveBreakpointOptions(minWidth);\n\t\t\tthis._updateOptions(resolvedOptions);\n\t\t}\n\t};\n\n\t// TODO a ton of duplication with bindMatchmedia\n\tViewer.prototype._getCurrentMinWidth = function(bps){\n\t\t// bind using the minwidth and the next breakpoint as the maxwidth\n\t\t// adds a range from 0 to the first breakpoint and from the last\n\t\t// breakpoint to a very large number\n\t\tfor( var i = -1; i < bps.length; i++ ){\n\t\t\tminWidth = bps[i] || 0;\n\t\t\tmaxWidth = bps[i+1] || 100000000;\n\n\t\t\tif( window.matchMedia ){\n\t\t\t\t// bind using the minwidth and maxwidth so we get the events at the boundaries\n\t\t\t\t// so we can asses which set of options applies.\n\t\t\t\tvar query = `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`;\n\n\t\t\t\t// create a media list to bind to\n\t\t\t\tvar initList = window.matchMedia(query);\n\n\t\t\t\tif(initList && initList.matches) {\n\t\t\t\t\treturn minWidth;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tViewer.prototype._resolveBreakpointOptions = function(minWidth){\n\t\t// TODO bind on the reduce callback was not working\n\t\tvar self = this;\n\t\tvar bps, bpConfig;\n\n\t\tif( this._fullscreen.isFullscreen() ) {\n\t\t\tbps = this._fullscreenBreakpoints;\n\t\t\tbpConfig = self._options.fullscreenBreakpoints;\n\t\t} else {\n\t\t\tbps = this._breakpoints;\n\t\t\tbpConfig = self._options.breakpoints;\n\t\t}\n\n\t\tif(!minWidth){\n\t\t\tminWidth = self._getCurrentMinWidth(bps);\n\t\t}\n\n\t\t// There may be no matching breakpoints when this method is called to\n\t\t// resolve the current options. If that's the case then we need to default\n\t\t// to the top level options\n\t\tif(!bps.length){ return self._originalOptions; }\n\n\t\treturn bps.reduce(function(acc, bp){\n\t\t\tvar cloned = Akamai.Util.extend(true, {}, acc);\n\t\t\tvar ptions;\n\n\n\t\t\tif(bp <= minWidth){\n\t\t\t\tcloned = Akamai.Util.extend(true, cloned, bpConfig[bp]);\n\t\t\t}\n\n\t\t\treturn cloned;\n\t\t}, Akamai.Util.extend(true, {}, this._originalOptions));\n\t};\n\n\tViewer._extendCarouselOptions = function(options){\n\t\t// clone the carousel options for the given breakpoint\n\t\tvar clonedCarousel = Akamai.Util.extend(true, {}, options.carousel || {});\n\n\t\t// TODO shared code with constructor\n\t\t// extend the cloned options with the breakpoint options so that all the\n\t\t// child component config is attached to the carousel config (also happens\n\t\t// in the constructor )\n\t\treturn Akamai.Util.extend(true, clonedCarousel, {\n\t\t\tmagnifier: options.magnifier,\n\t\t\tspin360: options.spin360,\n\t\t\tvideo: options.video,\n\t\t\tfullscreen: options.fullscreen\n\t\t});\n\t};\n\n\tViewer.prototype._updateOptions = function(options){\n\t\tthis._options = Akamai.Util.extend(true, this._options, options);\n\n\t\t// extend the carousel options for the given breakpoint\n\t\tvar carouselOptions = Viewer._extendCarouselOptions(options);\n\n\t\t// push the final options down to the dom element so that CSS that keys off\n\t\t// of the attributes can apply when JS config is used\n\t\tAkamai.Util.setDataAttrOptions(this._$el, Viewer.defaultOptions, options, \"Viewer\");\n\n\t\t// pass the new options down to all child carousels\n\t\tthis._carousels.forEach(function(comp){\n\t\t\tcomp._updateOptions(carouselOptions);\n\t\t}.bind(this));\n\t};\n\n\tViewer.prototype._checkJSONUrls = function(obj){\n\t\tvar hostnames = this._options.items.hostnames;\n\n\t\treturn Akamai.Util.mapJSONVals(obj,function(val, key){\n\t\t\tif(key === \"url\" && !this._urlHostnameMatch(val)){\n\t\t\t\tthrow new Error(`The URL \\`${val}\\` does not match this page's hostname or the whitelist defined in Akamai.Viewer option \\`hostnames\\` which is:\n\n${hostnames.length ? hostnames.join(\"\\n\") : \"No hostnames\"}\n`);\n\t\t\t}\n\n\t\t\treturn val;\n\t\t}.bind(this));\n\t};\n\n\tViewer.prototype._urlHostnameMatch = function(url){\n\t\tvar parser = document.createElement('a');\n\t\tparser.href = url;\n\n\t\treturn parser.hostname === \"\" || parser.hostname === window.location.hostname ||\n\t\t\tthis._options.items.hostnames.indexOf(parser.hostname) >= 0;\n\t};\n\n\t/**\n\t * Defines the global default options for all Viewers on the page\n\t * @static\n\t * @property {Object} breakpoints - configuration changes for child components at breakpoints (no default)\n\t * @property {Object} fullscreenBreakpoints - configuration changes for child components at breakpoints when in fullscreen mode (no default)\n\t * @property {Object[]} items.data - array of items from the Akamai JSON (default: undefined)\n\t * @property {String} items.defaultTag - (default: \"akamai-untagged\")\n\t * @property {String[]} items.hostnames - whitelist of URL hostnames to check for in JSON, (default: empty array)\n\t * @property {Integer} items.limit - size limit of JSON data in kibibytes (default: 100)\n\t * @property {String} items.renderAll - (default: false)\n\t * @property {String[]} items.tags - Set of tags to match against the Akamai JSON data (default: undefined)\n\t * @property {String} items.uri - URI at which to retrieve the Akamai JSON (default: undefined)\n\t * @property {Object} carousel - child {@link Akamai.Carousel} options\n\t * @property {Object} magnifier - child {@link Akamai.Magnifier} options\n\t * @property {Object} spin360 - child {@link Akamai.Spin360} options\n\t * @property {Object} video - child {@link Akamai.Video} options\n\t * @property {Object} fullscreen - child {@link Akamai.Fullscreen} options\n\t */\n\tViewer.defaultOptions = {\n\t\tbreakpoints: {},\n\t\titems: {\n\t\t\tdata: undefined,\n\t\t\tdefaultTag: \"akamai-untagged\",\n\t\t\thostnames: [],\n\t\t\tlimit: 100,\n\t\t\trenderAll: false,\n\t\t\ttags: undefined,\n\t\t\turi: undefined\n\t\t},\n\t\tcarousel: Akamai.Carousel.defaultOptions,\n\t\tmagnifier: Akamai.Magnifier.defaultOptions,\n\t\tspin360: Akamai.Spin360.defaultOptions,\n\t\tvideo: Akamai.Video.defaultOptions,\n\t\tfullscreen: Akamai.Fullscreen.defaultOptions\n\t};\n\n\tViewer._tagSplit = function(data, options){\n\t\tvar items = options;\n\n\t\t// set all items without a tag to the default\n\t\tdata = data.map(function(item){\n\t\t\titem.tags = (item.tags && item.tags.length) ? item.tags : [items.defaultTag];\n\t\t\treturn item;\n\t\t});\n\n\t\t// if the tags option was set, filter items out that don't match\n\t\tif( items.tags ) {\n\t\t\tdata = items.data.filter(function(item){\n\t\t\t\treturn item.tags.reduce(function(acc, tag){\n\t\t\t\t\treturn acc || items.tags.indexOf(tag) >= 0;\n\t\t\t\t}, false);\n\t\t\t});\n\t\t}\n\n\t\t// from the filtered get the first (may be default tag)\n\t\tvar def = data[0].tags[0];\n\n\t\t// create a mapping from tags to items in the set\n\t\tvar tagMapping = data.reduce(function(acc, item){\n\t\t\t(item.tags || []).forEach(function(tag){\n\t\t\t\tacc[tag] = acc[tag] || [];\n\t\t\t\tacc[tag].push(item);\n\t\t\t});\n\n\t\t\treturn acc;\n\t\t}, {});\n\n\t\t// set the first (default) object to the first tag\n\t\ttagMapping[Viewer._firstRenderTag] = tagMapping[def];\n\n\t\treturn tagMapping;\n\t};\n\n\tViewer._firstRenderTag = \"akamai-first-render\";\n\tViewer._tagAttr = `${Viewer._dataAttr}-tag`;\n\n\tViewer._renderTag = function(data, options){\n\t\t// get the first item and it's tag\n\t\t// NOTE this assumes that the data has been normalized to have a default tag\n\t\tvar tag = data[0].tags[0];\n\n\t\t// TODO shoestring doesn't treat html correctly unless the leading `<` has\n\t\t// no whitepsace in front of it:\n\t\t// shoestring/issues/94\n\t\treturn Akamai.Util.trim(`\n\t\t\t
\n\t\t\t\t${Akamai.Carousel.render(data, options)}\n\t\t\t
\n\t\t`);\n\t};\n\n\t/**\n\t * Takes standard options including an `items` attribute and renders HTML\n\t * that conforms to the component expectations\n\t * @method\n\t * @static\n\t * @params {Object[]} json - Akamai JSON data\n\t * @params {Object} options - options object with an `items` attribute, see default options\n\t * @params {Boolean} options.items - configuration for how the items should be\n\t * rendered, see {@link Akamai.Viewer.defaultOptions} default options items sub-configuration\n\t * @returns { String }\n\t */\n\tViewer.render = function(json, options, unwrapped){\n\t\t// NOTE we do not extend the default options here because it has no bearing\n\t\t// on the rendering of the Viewer markup or child markup. This is contrast\n\t\t// to the carousel which does extend the passed options with defaults so the\n\t\t// markup can make use of them\n\t\tvar data = Viewer._tagSplit(json, options.items);\n\t\tvar carouselOptions = Viewer._extendCarouselOptions(options);\n\n\t\tvar childMarkup;\n\n\t\tif( options.items.renderAll ) {\n\t\t\tchildMarkup = data.map(function(acc, datum){\n\t\t\t\treturn Viewer._renderTag(datum, carouselOptions);\n\t\t\t}).join(\" \");\n\t\t} else {\n\t\t\tchildMarkup = Viewer._renderTag(data[Viewer._firstRenderTag], carouselOptions);\n\t\t}\n\n\t\tvar wrapped = `\n\t\t\t\n\t\t\t\t${childMarkup}\n\t\t\t
\n\t\t`;\n\n\t\treturn unwrapped ? childMarkup : wrapped ;\n\t};\n\n\t/**\n\t * Accessor for child carousel components.\n\t * @method\n\t * @returns { Akamai.Carousel[] }\n\t */\n\tViewer.prototype.getCarousels = function(){\n\t\treturn this._carousels;\n\t};\n\n\t/**\n\t * Set the visible carousel based on the tag. Note the method activity does\n\t * not complete until all the images from the relevant viewer have loaded, use\n\t * the `akamai-viewer-switch-tag` event\n\t * @method\n\t * @fires Akamai.Viewer#akamai-viewer-switch-tag\n\t * @params {String} tag - The tag corresponding to the desired carousel\n\t * @returns {undefined}\n\t */\n\tViewer.prototype.switchTag = function(tag){\n\t\tvar tags = this.getTags();\n\n\t\t// if the passed tag isn't in the data set return early and log an error in\n\t\t// the console\n\t\tif( tags.indexOf(tag) == -1){\n\t\t\tAkamai.Util.log(`tag: ${tag} is not present in the data for this viewer`, 'error');\n\t\t\treturn;\n\t\t}\n\n\t\tvar selector = `[${this.constructor._tagAttr}=\"${tag}\"]`;\n\n\t\t// try to find an existing element with the tag\n\t\tvar $taggedViewer = this._$el.find(selector);\n\n\t\t// if there's no element append the newly rendered tag markup\n\t\tif( !$taggedViewer.length ){\n\t\t\t// make sure the config takes into account the current breakpoint\n\t\t\tvar options = this._resolveBreakpointOptions();\n\t\t\tvar carouselOptions = Viewer._extendCarouselOptions(options);\n\n\t\t\t// create the markup that will be inserted\n\t\t\tvar $markup = $(this.constructor._renderTag(this._tagMapping[tag], carouselOptions, true));\n\t\t\tvar $imgs = $markup.find(\"img\");\n\t\t\tvar imgCount = $imgs.length;\n\t\t\tvar loaded = 0;\n\n\t\t\t// hide the new carousel initially\n\t\t\t$markup.css(\"display\", \"none\");\n\n\t\t\t$imgs.bind(\"load\", function(){\n\t\t\t\tif( ++loaded !== imgCount ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// TODO namespace?\n\t\t\t\t$imgs.unbind(\"load\");\n\n\t\t\t\tvar carousels = Akamai.Carousel.createMany($markup[0], carouselOptions);\n\n\t\t\t\tcarousels.forEach(function(c){\n\t\t\t\t\t// TODO figure out why the carousel constructor doesn't apply the\n\t\t\t\t\t// active index class we want on instantiation, likely due to the fact\n\t\t\t\t\t// that the carousel is hidden so the \"getIndex\" calc is broken\n\t\t\t\t\t// mark the carousel item as active\n\t\t\t\t\tc.goto(c.getIndex());\n\t\t\t\t});\n\n\t\t\t\t// create and store the new carousels (should be one)\n\t\t\t\tthis._carousels = this._carousels.concat(carousels);\n\t\t\t\tthis._showViewer($markup, carousels);\n\t\t\t}.bind(this));\n\n\t\t\t// append the new markup to the existing viewer\n\t\t\tthis._$el.append($markup);\n\t\t} else {\n\t\t\tthis._showViewer($taggedViewer);\n\t\t}\n\t};\n\n\t// TODO should be handled in CSS\n\tViewer.prototype._showViewer = function($viewer, carousels){\n\t\tthis._$el\n\t\t\t.find(`[${this.constructor._tagAttr}]`)\n\t\t\t.css(\"display\", \"none\")\n\t\t\t.removeClass(\"focused\");\n\n\t\t$viewer\n\t\t\t.css(\"display\", \"block\")\n\t\t\t.addClass(\"focused\");\n\n\t\tif( carousels ){\n\t\t\tcarousels.map(function(c) { c.refresh(); });\n\t\t}\n\n\t\t// TODO the placement here seems arbitrary, probably belongs in `_showViewer`\n\t\t// TODO also sucks to be so tightly coupled\n\t\tthis._fullscreen.addButton();\n\n\t\tthis._trigger( \"switch-tag\" );\n\t};\n\n\t/**\n\t * Accessor for tags derived from Akamai JSON data\n\t * @method\n\t * @returns { String[] }\n\t */\n\tViewer.prototype.getTags = function(){\n\t\tif( this._tags ) {\n\t\t\treturn this._tags;\n\t\t};\n\n\t\tvar tags = [];\n\n\t\t// map and store all the carousel tags\n\t\tfor(var tag in this._tagMapping){\n\t\t\tif(this._tagMapping.hasOwnProperty(tag) && tag !== Viewer._firstRenderTag ) {\n\t\t\t\t// otherwise grab the list of tags\n\t\t\t\ttags.push(tag);\n\t\t\t}\n\t\t}\n\n\t\treturn this._tags = tags;\n\t};\n\n\t/**\n\t * Triggered when the viewer switches tag views. This includes waiting for\n\t * images to load for carousels dedicated to previously unviewed tags.\n\t * {@link Akamai.Viewer#switchTag}.\n\t *\n\t * @event Akamai.Viewer#akamai-viewer-switch-tag\n\t */\n\n\t/**\n\t * Triggered when initialization finishes\n\t * {@link Akamai.Viewer}.\n\t *\n\t * @event Akamai.Viewer#akamai-viewer-init\n\t */\n\n\texports.Akamai = exports.Akamai || {};\n\texports.Akamai.Viewer = Viewer;\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n\n(function(exports, $){\n\t$.fn.akamaiViewer = function(options){\n\t\tthis.each(function(i, element){\n\t\t\tnew Akamai.Viewer(element, options);\n\t\t});\n\t};\n})(typeof exports === 'undefined'? window : exports, this.jQuery);\n"]}