dream_carousel.vm

#set ($render_default = true)

#if ($target_user && ($target_user.getData() != ""))
	#parse("$journalTemplatesPath/43631786")

	#foreach ($targets in $target_user.siblings)
		#set ($article_id = $targets.article_id.data)

		#foreach ($target in $stringUtil.split($targets.data))
			#set ($portlet_embedded = false)

			#if (($target == $target_country) || ($target == $target_industry) || ($target == $target_persona) || (($target == "hubspot") && $hs_contact))
				#set ($portlet_embedded = true)

				#if ($article_id == "default")
					#break
				#end

				#set ($render_default = false)
				#set ($namespace = "${reserved-article-id}-${velocityCount}")

				#if ($article_id != "")
					#set ($namespace = $article_id)
				#end

				<div id="embedded-targeted-article-$namespace">
					<runtime-portlet name="56" instance="targeted_$namespace" queryString=""/>
				</div>

				#break
			#end
		#end

		#if ($portlet_embedded)
			#break
		#end
	#end
#end

#if ($render_default)
	<style>
		.carousel-content, .carousel-item {
			height: 100%;
			overflow: hidden;
			position: absolute;
			width: 100%;
		}

		.carousel-item {
			display: block;
			z-index: -1;
		}

		.carousel-item.active-item {
			z-index: 3;
		}

		.carousel-item.next-item, .carousel-item.previous-item {
			z-index: 1;
		}

		.carousel-item.previous-item {
			z-index: 2;
		}

		.carousel-wrapper.dots .carousel-navigation {
			bottom: 0;
			position: absolute;
			right: 0;
			z-index: 100;
		}

		.carousel-nav-item.next-arrow, .carousel-nav-item.prev-arrow {
			cursor: pointer;
			height: 50px;
			position: absolute;
			top: 50%;
			width: 20px;
			z-index: 10;
		}

		.carousel-nav-item.next-arrow {
			right: 0;
		}

		.carousel-nav-item.prev-arrow {
			left: 0;
		}

		.carousel-wrapper {
			position: relative;
		}

		.carousel-wrapper .carousel-item {
			transition: left #if($transition_length.data != "")$transition_length.data#else.75s#end;
			-webkit-transition: left #if($transition_length.data != "")$transition_length.data#else.75s#end;
		}

		.carousel-wrapper.slide .carousel-item.active-item {
			left: 0;
		}

		.carousel-wrapper.slide .carousel-item.former-item {
			left: -200%;
		}

		.carousel-wrapper.slide .carousel-item.latter-item {
			left: 200%;
		}

		.carousel-wrapper.slide .carousel-item.next-item {
			left: 100%;
		}

		.carousel-wrapper.slide .carousel-item.previous-item {
			left: -100%;
		}

		.carousel-wrapper.fade_in .carousel-item {
			opacity: 0;
			transition-property: opacity;
			-webkit-transition-property: opacity;
		}

		.carousel-wrapper.fade_in .carousel-item.active-item {
			opacity: 1;
		}

		$custom_css.data
	</style>
	#set($carousel_items = $portal.getClass().forName("java.util.TreeMap").newInstance())

	#foreach ($item in $item_attr.siblings)
		#set($carousel_item = $portal.getClass().forName("java.util.TreeMap").newInstance())

		#set ($void = $carousel_item.put("background_color", $item.background_color.data))
		#set ($void = $carousel_item.put("content", $item.content.data))
		#set ($void = $carousel_item.put("css_class", $item.css_class.data))
		#set ($void = $carousel_item.put("display_time", $item.display_time.data))
		#set ($void = $carousel_item.put("href", $item.href.data))
		#set ($void = $carousel_item.put("image", $item.image.data))
		#set ($void = $carousel_item.put("attr", $item.data))
		#set ($void = $carousel_item.put("image_horizontal_position", $item.image.horizontal_position.data))
		#set ($void = $carousel_item.put("image_vertical_position", $item.image.vertical_position.data))
		#set ($void = $carousel_item.put("priority", $item.priority.data))

		#set ($priority = $getterUtil.getInteger($item.priority.data))

		#if ($priority == 0)
			#set ($priority = 100)
		#end

		#set ($number = 1000 - $velocityCount - $priority)

		#set ($void = $carousel_items.put("carousel_item_${number}", $carousel_item))
	#end

	<div class="carousel-wrapper $navigation_type.data ${transition_type.data}" id="carousel${reserved-article-id.data}" style="padding-bottom: ${height.data};" >
		<div class="carousel-content">
			#foreach ($carousel_item in $carousel_items.descendingMap())
				#set ($item_css_class = "carousel-item carousel-item-${velocityCount} ${carousel_item.css_class}")

				#if ($velocityCount == 1)
					#set ($item_css_class = "${item_css_class} active-item")
				#elseif ($velocityCount == 2)
					#set ($item_css_class = "${item_css_class} latter-item next-item")
				#elseif($velocityCount == $carousel_items.size())
					#set ($item_css_class = "${item_css_class} former-item previous-item")
				#else
					#set ($item_css_class = "${item_css_class} latter-item")
				#end

				#set ($item_attrs = "class='${item_css_class}' ${carousel_item.attr} style='background: ${carousel_item.background_color} url(${carousel_item.image}) ${carousel_item.image_horizontal_position} ${carousel_item.image_vertical_position} no-repeat; background-size: cover;'")

				#if ($carousel_item.href != "")
					<a href="${carousel_item.href}" ${item_attrs}>
						${carousel_item.content}
					</a>
				#else
					<div ${item_attrs}>
						${carousel_item.content}
					</div>
				#end
			#end
		</div>

		<div class="carousel-navigation">
			#if ($navigation_type.data == "dots")
				#foreach($i in [1..$carousel_items.size()])
					<span class="carousel-nav-item carousel-nav-item-${i}" onclick="changeCarouselItem${reserved-article-id.data}(AUI().one('#carousel${reserved-article-id.data}').one('.carousel-item-${i}'));">o</span>
				#end
			#else
				<span class="carousel-nav-item prev-arrow" onclick="advanceCarouselItem${reserved-article-id.data}(true)"><</span>
				<span class="carousel-nav-item next-arrow" onclick="advanceCarouselItem${reserved-article-id.data}()">></span>
			#end

			#if ($auto_advance_time.data != "")
				<span class="carousel-nav-item play-item" onclick="toggleAutoAdvance${reserved-article-id.data}()">Play/Pause</span>
			#end
		</div>
	</div>
#end

<script>
function advanceCarouselItem${reserved-article-id.data}(previous) {
	AUI().use(
		'aui-base',
		function(A) {
			var carouselContent = A.one('#carousel${reserved-article-id.data} .carousel-content');

			var activeItem = carouselContent.one('.active-item');

			if (previous) {
				var newActiveItem = activeItem.previous();

				if (!newActiveItem) {
					newActiveItem = carouselContent.get('children').slice(-1).item(0);
				}
			}
			else {
				var newActiveItem = activeItem.next();

				if (!newActiveItem) {
					newActiveItem = carouselContent.one('.carousel-item');
				}
			}

			changeCarouselItem${reserved-article-id.data}(newActiveItem);
		}
	);
}

function changeCarouselItem${reserved-article-id.data}(activeItem) {
	AUI().use(
		'aui-base',
		function(A) {
			var carouselContent = A.one('#carousel${reserved-article-id.data} .carousel-content');
			var firstChild = carouselContent.one('.carousel-item');
			var lastChild = carouselContent.get('children').slice(-1).item(0);

			carouselContent.one('.active-item').removeClass('active-item');
			carouselContent.one('.next-item').removeClass('next-item');
			carouselContent.one('.previous-item').removeClass('previous-item');

			carouselContent.all('.former-item').removeClass('former-item');
			carouselContent.all('.latter-item').removeClass('latter-item');

			activeItem.addClass('active-item');

			var checkNext = function(item, originalItem) {
				if((item == originalItem) && (item == lastChild)) {
					firstChild.addClass('latter-item');
					firstChild.addClass('next-item');
				}
				else if(item.next()) {
					if(item == originalItem) {
						item.next().addClass('next-item');
					}

					if((originalItem != firstChild) || (item != lastChild.previous())) {
						item.next().addClass('latter-item');
					}

					checkNext(item.next(), originalItem);
				}
			};

			checkNext(activeItem, activeItem);

			var checkPrevious = function(item, originalItem) {
				if((item == originalItem) && (item == firstChild)) {
					lastChild.addClass('former-item');
					lastChild.addClass('previous-item');
				}
				else if(item.previous()) {
					if(item == originalItem) {
						item.previous().addClass('previous-item');
					}

					if ((originalItem != lastChild) || (item != firstChild.next())) {
						item.previous().addClass('former-item');
					}

					checkPrevious(item.previous(), originalItem);
				}
			};

			checkPrevious(activeItem, activeItem);

			#if ($auto_advance_time.data != "")
				if (window.autoAdvanceActive) {
					startAutoAdvance${reserved-article-id.data}();
				}
			#end
		}
	);
}

#if ($auto_advance_time.data != "")
	window.scrollInterval${reserved-article-id.data};

	startAutoAdvance${reserved-article-id.data} = function(backwards) {
		clearInterval(window.scrollInterval);
		window.autoAdvanceActive = true;

		window.scrollInterval = setInterval(
			function() {
				advanceCarouselItem${reserved-article-id.data}(backwards);
			},
			$auto_advance_time.data
		);
	};

	stopAutoAdvance${reserved-article-id.data} = function() {
		window.autoAdvanceActive = false;

		clearInterval(window.scrollInterval);
	};

	toggleAutoAdvance${reserved-article-id.data} = function() {
		if (window.autoAdvanceActive) {
			stopAutoAdvance${reserved-article-id.data}();
		}
		else {
			startAutoAdvance${reserved-article-id.data}();
		}
	};

	startAutoAdvance${reserved-article-id.data}();
#end

AUI().ready(
	'aui-base',
	'event-move',
	function (A) {
		A.one('#carousel${reserved-article-id.data}').on(
			'gesturemovestart',
			function (e) {
				var item = e.currentTarget;
				var MIN_SWIPE = 100;

				item.setData('swipeStart', e.pageX);

				item.once(
					'gesturemoveend',
					function (e) {
						var swipeStart = item.getData('swipeStart');
						var swipeEnd = e.pageX;
						var isSwipeLeft = (swipeStart - swipeEnd) > MIN_SWIPE;
						var isSwipeRight = (swipeEnd - swipeStart) > MIN_SWIPE;

						if (isSwipeLeft) {
							changeCarouselItem${reserved-article-id.data}();
						}

						if (isSwipeRight) {
							changeCarouselItem${reserved-article-id.data}(true);
						}
					}
				)
			}
		);
	}
);
</script>