$( function () {

	function initPanels() {
		
		var N = $('.graphic-panel').length;
		var fading = 1; 
		
		$('.graphic-panel').each( function (index, elt) {

			var $e = $(elt);
			var $svg = $e.find('.graphic-svg');
			var p = $e.data('panel');
			var $dash = $('.step-' + p.toString());
			var $title = $e.find('.mg-panel-header');
			var $body = $e.find('.mg-panel-body');

			var n = 1;

			if (p === 1) {

				$.Velocity.hook($title, 'translateX', '-50%');
				$.Velocity.hook($title, 'translateY', '-190%');
				$.Velocity.hook($title, 'opacity', '1');

				$.Velocity.hook($body, 'width', '250px');
				$.Velocity.hook($body, 'translateX', '-50%');
				$.Velocity.hook($body, 'translateY', '170%');
				$.Velocity.hook($body, 'opacity', '1');

				$.Velocity.hook($e, 'translateX', '0');
				$.Velocity.hook($e, 'translateY', '-50%');
				$.Velocity.hook($e, 'translateZ', '0');
				$.Velocity.hook($e, 'opacity', '1');
				$.Velocity.hook($e, 'z-index', '10');

			} else {

				$.Velocity.hook($title, 'translateX', '-50%');
				$.Velocity.hook($title, 'translateY', '-190%');
				$.Velocity.hook($title, 'opacity', '0');

				$.Velocity.hook($body, 'width', '250px');
				$.Velocity.hook($body, 'translateX', '-50%');
				$.Velocity.hook($body, 'translateY', '170%');
				$.Velocity.hook($body, 'opacity', '0');

				$.Velocity.hook($e, 'translateX', setPanelTranslateX(N, p, 100, n, 'vw'));
				$.Velocity.hook($e, 'translateY', '-50%');
				$.Velocity.hook($e, 'rotateY', '-45deg');
				$.Velocity.hook($e, 'opacity', (fading / (p - n + fading)).toString());
				$.Velocity.hook($e, 'z-index', (10 - Math.abs(p - n)).toString());

			} 
		});
	}

	initPanels();

	function setPanelTranslateX(N, p, w, n, units) {  

		var u = units.toString() || 'vw';
		var squeeze = 10;

		if (p === n) {

			return '0';

		} else if (p < n) {

			return ( -(w / 2) * Math.pow((N - p) * 1 / (N + 0), 1/3) + squeeze ).toString() + u;

		} else {

			return (  (w / 2) * Math.pow((p - 1) * 1 / (N + 0), 1/3) - squeeze ).toString() + u;

		}
	}

	function setActivePanel(n) { 

		var N = $('.graphic-panel').length; 
		var fading = 3; 
		
		$('.graphic-panel').each( function (index, elt) {

			var $e = $(elt);
			var $svg = $e.find('.graphic-svg');
			var p = $e.data('panel');
			var $dash = $('.step-' + p.toString());
			var $title = $e.find('.mg-panel-header');
			var $body = $e.find('.mg-panel-body');

			$e.velocity('stop');
			$svg.velocity('stop');
			$title.velocity('stop');
			$body.velocity('stop');

			if (p === n) {

				$e.addClass('mg-active');
				$svg.addClass('mg-active');
				$dash.removeClass('step-light').addClass('step-dark');

				$e.css('z-index', 10);

				$title.velocity(
					{
						translateX: '-50%', 
						translateY: '-190%',
						opacity: 1
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 300
					}
				);

				$body.velocity(
					{
						width: 250, 
						translateX: '-50%', 
						translateY: '170%', 
						opacity: 1
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 300
					}
				);

				$e.velocity(
					{
						translateX: 0, 
						translateY: '-50%', 
						translateZ: 0,
						rotateY: 0, 
						// blur: 0, 
						opacity: 1
					}, 
					{ 
						duration: 600, 
						easing: 'ease-out'
					}
				);

			} else if (p > n) {

				$e.removeClass('mg-left mg-active').addClass('mg-right');
				$svg.removeClass('mg-active');
				$dash.removeClass('step-dark').addClass('step-light');

				$e.css('z-index', 10 - Math.abs(p - n));

				$title.velocity(
					{
						translateY: '-400%',
						opacity: 0
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 0
					}
				);

				$body.velocity(
					{
						translateY: '200%',
						opacity: 0
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 0
					}
				);

				$e.velocity(
					{
						translateX: setPanelTranslateX(N, p, 100, n, 'vw'), 
						translateY: '-50%', 
						rotateY: -45, 
						opacity: fading / (p - n + fading)
					}, 
					{
						duration: 600, 
						easing: 'ease-out'
					}
				);

			} else {

				$e.removeClass('mg-right mg-active').addClass('mg-left');
				$svg.removeClass('mg-active');
				$dash.removeClass('step-dark').addClass('step-light');

				$e.css('z-index', 10 - Math.abs(p - n));

				$title.velocity(
					{
						translateY: '-400%',
						opacity: 0
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 0
					}
				);

				$body.velocity(
					{
						translateY: '200%',
						opacity: 0
					}, 
					{
						duration: 600,
						easing: 'ease-out', 
						delay: 0
					}
				);

				$e.velocity(
					{ 
						translateX: setPanelTranslateX(N, p, 100, n, 'vw'), 
						translateY: '-50%', 
						rotateY: 45, 
						opacity: fading / (n - p + fading)
					}, 
					{ 
						duration: 600, 
						easing: 'ease-out'
					}
				);

			}

		});
	}

	$('.graphic-panel').hover(
		function () {
			if (!($(this).hasClass('mg-active'))) {
				setActivePanel($(this).data('panel'));
			}
		}, 
		function () {
			
		}
	);

	$('#graphicContainer .step-dash').hover(
		function () {
			if (!($(this).hasClass('step-dark'))) {
				setActivePanel($(this).data('panel'));
			}
		}, 
		function () {

		}
	);

	function handlePanelSwipe(direction) {
		var p = $('#mainGraphic').find('.mg-active').data('panel');
		var N = $('.graphic-panel').length;

		if (direction === 'left') {

			setActivePanel(  (p % N) + 1  );
		
		} else if (direction === 'right') {

			setActivePanel(  ((p + N - 2) % N) + 1  );

		}
	}

	$('#graphicContainer').swipe({

		excludedElements:[],
	
		swipe: function (event, direction, distance, duration, fingers, fingerData) {
			handlePanelSwipe(direction);
		}, 

		tap: function (event, target) {
			handlePanelSwipe('left');
		}, 

		allowPageScroll: 'vertical',

		cancelThreshold: 50
	});

	 setActivePanel(12);

});