(function() { "use strict"; window.CcsInlineContent = (function() { var c = { specs: { specsArea: ".ccs-cc-inline-specifications", showButton: ".ccs-cc-inline-specs-more-btn[data-ccs-cc-inline-specs-show]", hideButton: ".ccs-cc-inline-specs-more-btn[data-ccs-cc-inline-specs-hide]", expandableSpecs: "[data-ccs-cc-inline-specs-expandable]" }, jumplinks: { enabled: "this param must be received from server.", jumplinkArea: "div[data-ccs-cc-inline-jumplink]", jumplinkAnchorId: "data-anchor-id", jumplinkHolder: "[data-ccs-jumplink-container]", jumplinkDescription: "Jump to: (hard code)", jumplinkItemClass: "ccs-cc-inline-jumplink-item", jumplinkSeparatorClass: "ccs-cc-inline-jumplink-separator", jumplinkContainerClass: "ccs-cc-inline-jumplink-container", jumplinkTextAttr: "data-ccs-cc-inline-jumplink", hidenJumplinksAttr: "data-ccs-jumplink-hidden" }, media: { ensureStyleLoaded: ".ccs-cc-inline-ensure-style-loaded", hiddenHrefLinks: "a[data-url]", clickableClass: "ccs-cc-inline-clickable", urlAttr: "data-url", jwplayerUrl: "this param must be received from server.", playerId: "ccs-cc-jwplayer", poweredByLogoUrl: "this param must be received from server.", ribbonImages: ".ccs-cc-inline-media-image a.ccs-cc-inline-media-thumbnail-desktop", ribbonVideos: ".ccs-cc-inline-media-video a", featureImage: ".ccs-cc-inline-feature-thumbnail a.ccs-cc-inline-feature-thumbnail-image", featureVideo: ".ccs-cc-inline-feature-thumbnail a.ccs-cc-inline-feature-thumbnail-video", mediaTypeAttr: "data-media-type", youtubeVideoKeyAttr: "data-youtube-video-key", zoomLogCallAttr: "data-zoom-log-call", playLogCallAttr: "data-play-log-call", stopLogCallAttr: "data-stop-log-call", video25LogCallAttr: "data-video25-log-call", video50LogCallAttr: "data-video50-log-call", video75LogCallAttr: "data-video75-log-call", video100LogCallAttr: "data-video100-log-call", videoWidth: 600, videoHeight: 400, ribbon: { rootElementSelector: ".ccs-cc-inline-mediaribbon", isRtl: false, thumbsContainer: ".ccs-cc-inline-mediaribbon-thumbscontainer", ribbonViewport: ".ccs-cc-inline-mediaribbon-viewport", navLeftArrow: ".ccs-cc-inline-mediaribbon-scrollleft span", navRightArrow: ".ccs-cc-inline-mediaribbon-scrollright span", navEnabledClass: "ccs-cc-inline-mediaribbon-btn-enabled", animationSpeed: 500, thumbOverlapingRatio: 0.85, minWipeLength: 20 } }, spritespin: { id: "this param must be received from server.", width: 480, height: 320, source: [], parentId: "this param must be received from server.", animate: true, fps: 15, rate: 3, preloadLayer: "div[data-preload-layer='true']", preloadContainer: "div[data-preload-container]", toolbox: { id: "this param must be received from server.", playPauseBtn: "span[data-play-pause='true']", defaultSliderHeight: 50, slider: "div[data-slider-ui=true]", attr: { slider: "data-slider-ui" }, css: { play: "ccs-cc-inline-video-play-icon", pause: "ccs-cc-inline-video-pause-icon" } } }, accordion: { header: "[data-ccs-cc-inline-acc-header]", content: "[data-ccs-cc-inline-acc-content]", accAttr: "data-ccs-cc-inline-acc", expandedClass: "ccs-cc-inline-acc-expanded" } }; function setupSpecifications() { var o = this.o.specs; var $specsArea = this.ep.find(o.specsArea); var $specsShowButton = $specsArea.find(o.showButton); var $specsHideButton = $specsArea.find(o.hideButton); var $expandableSpecs = $specsArea.find(o.expandableSpecs); $specsHideButton.find("a").click(function() { $expandableSpecs.hide("fast"); $specsShowButton.show(); $specsHideButton.hide(); }); $specsShowButton.find("a").click(function() { $expandableSpecs.show("fast"); $specsShowButton.hide(); $specsHideButton.show(); }); } function setupJumplinks() { var o = this.o.jumplinks; if (!o.enabled) return; var jumplinksHtml = o.jumplinkDescription; var $jumplinkAreas = this.ep.find(o.jumplinkArea); var jumplinkAreaCount = $jumplinkAreas.length; this.ep.find(o.jumplinkArea).each(function(index) { var $jumplinkArea = ccsJq(this); var text = $jumplinkArea.attr(o.jumplinkTextAttr); var anchorId = $jumplinkArea.attr("id"); jumplinksHtml += ccsJq("") .addClass(o.jumplinkItemClass) .attr("href", "#" + anchorId) .attr(o.jumplinkAnchorId, anchorId) .attr("title", text) .text(text) .wrap("
") .parent() .html(); if (index < jumplinkAreaCount - 1) { jumplinksHtml += "|"; } }); jumplinksHtml = "" + jumplinksHtml + ""; this.ep.find(this.o.jumplinks.jumplinkArea).each(function() { var $jumplinkArea = ccsJq(this); if (!$jumplinkArea.attr(o.hidenJumplinksAttr)) { $jumplinkArea.find(o.jumplinkHolder).append(jumplinksHtml); var anchorId = $jumplinkArea.attr("id"); var $currentJumplinkItem = $jumplinkArea.find("a[" + o.jumplinkAnchorId + "='" + anchorId + "']"); $currentJumplinkItem.prev("." + o.jumplinkSeparatorClass).remove(); $currentJumplinkItem.remove(); } }); var accOption = this.o.accordion; var self = this; this.ep.on( "click", "." + o.jumplinkItemClass, function(event) { var areaSelector = "#" + ccsJq(event.currentTarget).attr(o.jumplinkAnchorId); var $area = ccsJq(areaSelector); var $accHeader = $area.find(accOption.header); if ($accHeader.length > 0 && !$accHeader.hasClass(accOption.expandedClass)) { toggleAccSection.call(self, $accHeader, accOption, true); } } ); } function setupAccordion() { var o = this.o.accordion; var self = this; this.ep.on( "click", o.header, function(event) { var $accHeader = ccsJq(event.currentTarget); toggleAccSection.call(self, $accHeader, o); } ); } function toggleAccSection($accHeader, o, immediately) { $accHeader.toggleClass(o.expandedClass); var $accContent = this.ep .find(o.content + "[" + o.accAttr + "='" + $accHeader.attr(o.accAttr) + "']") .stop(); if (immediately) { $accContent.show(); } else { $accContent.slideToggle(); } } //#region Media content function setupMediaContent() { var o = this.o.media; initRibbon.call(this); restoreHref.call(this, o); initFancyboxForMedia.call( this, o.ribbonImages + "," + o.ribbonVideos, o); initFancyboxForMedia.call( this, o.featureImage + "," + o.featureVideo, o); } function restoreHref(o) { this.ep.find(o.hiddenHrefLinks).each(function() { var $link = ccsJq(this); var url = $link.attr(o.urlAttr); $link.attr("href", url); $link.addClass(o.clickableClass); }); } function addPoweredByLogo(o) { ccsJq("") .bind("contextMenu", function() { return false; }) .appendTo(this.inner); } function setJwPlayerFancyboxContent(o) { this.content = ""; this.width = o.videoWidth + 5; // added 5 px to prevent IE scrollbars this.height = o.videoHeight + 5; // added 5 px to prevent IE scrollbars this.padding = [10, 10, 10, 10]; this.autoHeight = false; this.autoWidth = false; } function runJwPlayer(o) { var $link = this.element; var trackVideoTime = { video25: { logCall: $link.attr(o.video25LogCallAttr) }, video50: { logCall: $link.attr(o.video50LogCallAttr) }, video75: { logCall: $link.attr(o.video75LogCallAttr) }, video100: { logCall: $link.attr(o.video100LogCallAttr) } }; var playLogCall = $link.attr(o.playLogCallAttr); var stopLogCall = $link.attr(o.stopLogCallAttr); jwplayer(o.playerId).setup({ file: this.href, flashplayer: o.jwplayerUrl, height: 400, width: 600, autostart: true, events: { onPlay: function() { eval(playLogCall); }, onPause: function() { eval(stopLogCall); }, onTime: function(evt) { logVideoViewTime(evt, trackVideoTime); } } }); } function runYoutubePlayer(fancybox, o) { var $link = fancybox.element; if (!YT || !YT.Player) { return; } var youtubeVideoKey = $link.attr(o.youtubeVideoKeyAttr); var player = new YT.Player(o.playerId, { videoId: youtubeVideoKey, width: o.videoWidth, height: o.videoHeight, playerVars: { rel: 0, autoplay: 1, wmode: "opaque" }, events: { "onStateChange": function(e) { onYouTubePlayerStateChange(e, o, $link); } } }); this.players[o.playerId] = player; } function onYouTubePlayerStateChange(e, o, $link) { var playerState = e.data; if (playerState == YT.PlayerState.PLAYING) { var playLogCall = $link.attr(o.playLogCallAttr); eval(playLogCall); } if (playerState == YT.PlayerState.PAUSED || playerState == YT.PlayerState.ENDED) { var stopLogCall = $link.attr(o.stopLogCallAttr); eval(stopLogCall); } } function logVideoViewTime(evt, trackVideoTime) { var duration = evt.duration; var position = evt.position; if (!trackVideoTime.isInitialized) { trackVideoTime.video25.time = duration * 0.25; trackVideoTime.video50.time = duration * 0.5; trackVideoTime.video75.time = duration * 0.75; trackVideoTime.video100.time = duration; trackVideoTime.isInitialized = true; } fireTimePointEvent(position, trackVideoTime.video25); fireTimePointEvent(position, trackVideoTime.video50); fireTimePointEvent(position, trackVideoTime.video75); fireTimePointEvent(position, trackVideoTime.video100); } function fireTimePointEvent(position, timePointEvent) { if (!timePointEvent.fired && checkPositionForCertainTimePoint(position, timePointEvent.time)) { eval(timePointEvent.logCall); timePointEvent.fired = true; } } function checkPositionForCertainTimePoint(position, timePoint) { var lowerBound = timePoint - 0.33; var upperBound = timePoint + 0.33; return position > lowerBound && position < upperBound; } function initFancyboxForMedia(mediaSelector, o) { var inlineContentObj = this; this.ep.find(mediaSelector).fancybox({ wrapCSS: "ccs-lightbox", openSpeed: 200, closeSpeed: 100, nextSpeed: 200, prevSpeed: 200, afterLoad: function(current, previous) { var currentMediaType = current.element.attr(o.mediaTypeAttr); if (currentMediaType === 'image') { eval(current.element.attr(o.zoomLogCallAttr)); } if (previous) { var previousMediaType = previous.element.attr(o.mediaTypeAttr); if (previousMediaType === "video") { onCloseFancyboxWithVideo.call(previous, o); } if (previousMediaType === "youtube") { onCloseFancyboxWithYoutube.call(inlineContentObj, previous, o); } } }, beforeLoad: function() { var mediaType = this.element.attr(o.mediaTypeAttr); if (mediaType === 'video' || mediaType === "youtube") { setJwPlayerFancyboxContent.call(this, o); } }, afterShow: function() { var mediaType = this.element.attr(o.mediaTypeAttr); if (mediaType === 'video') { runJwPlayer.call(this, o); } else if (mediaType === "youtube") { runYoutubePlayer.call(inlineContentObj, this, o); } }, beforeShow: function() { if (this.element.attr(o.mediaTypeAttr) === 'image') { addPoweredByLogo.call(this, o); } }, beforeClose: function() { var mediaType = this.element.attr(o.mediaTypeAttr); if (mediaType === 'video') { onCloseFancyboxWithVideo.call(this, o); } if (mediaType === "youtube") { onCloseFancyboxWithYoutube.call(inlineContentObj, this, o); } } }); } function onCloseFancyboxWithVideo(o) { var player = jwplayer(o.playerId); var state = player.getState(); if (state && state !== 'IDLE' && state !== 'PAUSED') { player.stop(); eval(this.element.attr(o.stopLogCallAttr)); } } function onCloseFancyboxWithYoutube(fancybox, o) { var player = this.players[o.playerId]; // this might happen if user closes the lightbox before youtube player had been initialized. if (!player) { return; } var playerState = player.getPlayerState(); if (playerState == YT.PlayerState.PLAYING || playerState == YT.PlayerState.BUFFERING) { player.stopVideo(); eval(fancybox.element.attr(o.stopLogCallAttr)); } player.destroy(); this.players[o.playerId] = null; } // #region Ribbon function initRibbon() { var ep = this.ep; var o = this.o.media; var $ribbon = ep.find(o.ribbon.rootElementSelector); if ($ribbon.length == 0) return; (function updateOnVisible() { if ($ribbon.is(":visible") && ensureStyles(ep, o)) { var ribbonInstance = new ribbonCtor($ribbon, o.ribbon); ccsJq(window).resize(function() { initRibbonState.call(ribbonInstance); handleNavVisibility.call(ribbonInstance); }); } else { setTimeout(updateOnVisible, 300); } })(); } function ensureStyles(ep, o) { var $ensureStyleLoaded = ep.find(o.ensureStyleLoaded); return parseInt($ensureStyleLoaded.height()) === 1; } function ribbonCtor($el, options) { var instance = $el.data("ccsMediaRibbon"); if (instance) return instance; this.o = options; this.ribbon = $el; this.viewport = $el.find(options.ribbonViewport); this.thumbsContainer = $el.find(options.thumbsContainer); this.navLeftArrow = $el.find(options.navLeftArrow); this.navRightArrow = $el.find(options.navRightArrow); initRibbonState.call(this); initRibbonNavigation.call(this); enableTouchScrolling.call(this); $el.data("ccsMediaRibbon", this); return this; } function initRibbonNavigation() { var instance = this; this.navLeftArrow.on("click", function(event) { slideRibbonLeft.call(instance, event); }); this.navRightArrow.on("click", function(event) { slideRibbonRight.call(instance, event); }); handleNavVisibility.call(this); } function handleNavVisibility() { if (this.leftHiddenPages == 0) { this.navLeftArrow.removeClass(this.o.navEnabledClass); } else { this.navLeftArrow.addClass(this.o.navEnabledClass); } if (this.rightHiddenPages == 0) { this.navRightArrow.removeClass(this.o.navEnabledClass); } else { this.navRightArrow.addClass(this.o.navEnabledClass); } } function initRibbonState() { var thumbWidth = this.thumbsContainer.children("li:visible").first().outerWidth(true); var viewportWidth = this.viewport.width(); var visibleThumbsCount = Math.floor(viewportWidth / thumbWidth); var lastThumbOverlapingValue = (viewportWidth % thumbWidth) / thumbWidth; if (lastThumbOverlapingValue > this.o.thumbOverlapingRatio) visibleThumbsCount += 1; this.pageWidth = visibleThumbsCount * thumbWidth; var thumbsCount = this.thumbsContainer.children("li:visible").length; var pagesCount = Math.ceil(thumbsCount / visibleThumbsCount); this.thumbsContainer.width(thumbsCount * thumbWidth); if (this.o.isRtl) { this.thumbsContainer.css("right", 0); this.leftHiddenPages = pagesCount - 1; this.rightHiddenPages = 0; } else { this.thumbsContainer.css("left", 0); this.leftHiddenPages = 0; this.rightHiddenPages = pagesCount - 1;; } } function slideRibbonLeft() { if (this.leftHiddenPages == 0 || this.thumbsContainer.is(":animated")) return; this.leftHiddenPages -= 1; this.rightHiddenPages += 1; var animation = {}; if (this.o.isRtl) { animation.right = "-=" + this.pageWidth + "px"; } else { animation.left = "+=" + this.pageWidth + "px"; } var ribbonInstance = this; this.thumbsContainer.animate(animation, this.o.animationSpeed, function() { handleNavVisibility.call(ribbonInstance); }); } function slideRibbonRight() { if (this.rightHiddenPages == 0 || this.thumbsContainer.is(":animated")) return; this.rightHiddenPages -= 1; this.leftHiddenPages += 1; var animation = {}; if (this.o.isRtl) { animation.right = "+=" + this.pageWidth + "px"; } else { animation.left = "-=" + this.pageWidth + "px"; } var ribbonInstance = this; this.thumbsContainer.animate(animation, this.o.animationSpeed, function() { handleNavVisibility.call(ribbonInstance); }); } function enableTouchScrolling() { if (!("ontouchstart" in window || "onmsgesturechange" in window)) { return; } var ribbonInstance = this; var startX = 0; var ribbonRootElement = this.ribbon.get(0); ribbonRootElement.addEventListener("touchstart", onTouchStart); ribbonRootElement.addEventListener("touchend", onTouchEnd); function onTouchStart(event) { var touchPoint = event.changedTouches[0]; startX = touchPoint.clientX; } function onTouchEnd(event) { var touchPoint = event.changedTouches[0]; var endX = touchPoint.clientX; var dx = startX - endX; if (Math.abs(dx) > ribbonInstance.o.minWipeLength) { if (dx < 0) { slideRibbonLeft.call(ribbonInstance); } else { slideRibbonRight.call(ribbonInstance); } } } } //#endregion //#region function setupSpritespin() { var o = this.o.spritespin; var width = o.width; var height = o.height; var source = o.source; var rootDivId = o.parentId; var toolboxId = o.toolbox.id; if (source.length == 0) return; var $rootDiv = ccsJq('#' + rootDivId); var $toolbox = ccsJq('#' + toolboxId); var $preloadContainer = $rootDiv.find(o.preloadContainer); var $playPauseBtn = $toolbox.find(o.toolbox.playPauseBtn); var defaultWidth = width; var defaultHeight = height; calculateImageDementions($preloadContainer, source[0], function (calculatedWidth, calculatedHeight) { if (defaultWidth > calculatedWidth) defaultWidth = calculatedWidth; defaultHeight = calculateContainerHeight(defaultWidth, calculatedWidth, calculatedHeight); ccsJq(window).resize(function() { onWindowResize.call(o, defaultWidth, defaultHeight, $rootDiv, $toolbox, $playPauseBtn); }); var api = onWindowResize.call(o, defaultWidth, defaultHeight, $rootDiv, $toolbox, $playPauseBtn); drawHelperTools.call(o, $toolbox, defaultWidth, $playPauseBtn, api); }); } function calculateImageDementions($preloadContainer, imgUrl, completeCallback) { var $imageContainer = ccsJq(""); $imageContainer.attr("src", imgUrl); $imageContainer.load(function() { var self = ccsJq(this); var calculatedWidth = self.width(); var calculatedHeight = self.height(); if (ccsJq.isFunction(completeCallback)) completeCallback(calculatedWidth, calculatedHeight); }); $preloadContainer.append($imageContainer); } function calculateContainerHeight(containerWidth, imageWidth, imageHeight) { return (containerWidth * imageHeight) / imageWidth; } function drawHelperTools($toolbox, width, $playPauseBtn, spriteSpinApi) { var settings = this; $toolbox.width(width); $playPauseBtn.click(function() { settings.animate = changePlayPauseState( $playPauseBtn, spriteSpinApi, settings.animate, settings.toolbox.css.pause); }); } function changePlayPauseState($playPauseBtn, api, isPlaying, cssSelector) { if (isPlaying) { $playPauseBtn.removeClass(cssSelector); api.stopAnimation(); } else { $playPauseBtn.addClass(cssSelector); api.startAnimation(); } return !isPlaying; } function resizeToolbox($toolbox, width) { $toolbox.width(width); } function initSpritespinControl(width, height, $toolbox, $playPauseBtn) { var settings = this; var id = settings.id; var source = settings.source; var animate = settings.animate; var fps = settings.fps; var rate = settings.rate; var $spritespinDiv = ccsJq('#' + id); var $spritespinContainer = $spritespinDiv.parent(); var $slider; var $preloadDiv = $spritespinContainer.find(settings.preloadLayer); $preloadDiv.width(width); $preloadDiv.height(height + settings.toolbox.defaultSliderHeight); var animated = animate; var api; var trigger = false; var rateFramesCount = fps * rate; var rateCounter = 0; var frameTime = 1000 / fps; $spritespinContainer.width(width); $spritespinDiv.spritespin({ animate: animated, source: source, frames: source.length, framesX: 1, frameTime: frameTime, renderer: 'image', width: width, height: height, reverse: false, onLoad: function() { $preloadDiv.remove(); api = $spritespinDiv.spritespin("api"); $slider = $toolbox.find(settings.toolbox.slider); if ($slider.length != 0) return; $slider = ccsJq("