/* globals jQuery, sowb */

var sowb = window.sowb || {};

sowb.SiteOriginSlider = function( $ ) {
	return {
		playSlideVideo: function( el ) {
			$( el ).find( 'video' ).each( function() {
				if( typeof this.play !== 'undefined' ) {
					this.play();
				}
			} );
			var embed = $( el ).find( 'iframe' );

			if ( embed.length ) {
				// Vimeo
				embed[0].contentWindow.postMessage( '{"method":"play"}', "*" );
				// YouTube
				embed[0].contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' )
			}
		},

		pauseSlideVideo: function( el ) {
			$( el ).find( 'video' ).each( function() {
				if( typeof this.pause !== 'undefined' ) {
					this.pause();
				}
			} );
			var embed = $( el ).find( 'iframe' );

			if ( embed.length ) {
				// Vimeo
				embed[0].contentWindow.postMessage( '{"method":"pause"}', "*" );
				// YouTube
				embed[0].contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', '*' )
			}
		},

		enableBackground: function( el, background ) {
			el.css( 'background-image', background );
			el.removeAttr( 'data-background' );
		},

		setupActiveSlide: function( slider, newActive, speed ) {
			// Start by setting up the active sentinel
			var sentinel = $( slider ).find( '.cycle-sentinel' ),
				active = $( newActive ),
				video = active.find( 'video.sow-background-element' ),
				$unmuteButton = $( slider ).prev();

			// If this slide hasn't loaded its background, add it.
			var background = active.attr( 'data-background' );
			if ( background !== undefined ) {
				this.enableBackground( active, background );
			}

			// If the slider overlay hasn't loaded, set it up.
			var overlay = active.find( '.sow-slider-image-overlay' );
			if ( overlay ) {
				var overlayBackground = overlay.attr( 'data-background' );
				if ( overlayBackground !== undefined ) {
					this.enableBackground( overlay, overlayBackground );
				}
			}

			if ( speed === undefined ) {
				sentinel.css( 'height', active.outerHeight() + 'px' );
			} else {
				sentinel.animate( { height: active.outerHeight() }, speed );
			}

			// Hide the unmute button as needed.
			if ( $unmuteButton.length ) {
				// Mute all slide videos.
				$( slider ).find( '.sow-slider-image > video' ).prop( 'muted', true );
				var $activeSlideVideo;
				var $embed = $( slider ).find( '.sow-slide-video-oembed iframe' );
				if ( $embed.length ) {
					$activeSlideVideo = $embed;
				} else {
					$activeSlideVideo = active.find( '> video' );
				}

				if ( $activeSlideVideo.length ) {
					$unmuteButton.clearQueue().fadeIn( speed );

					var settings = $unmuteButton.siblings( '.sow-slider-images' ).data( 'settings' );
					// Unmute video if previously unmuted.
					if ( $activeSlideVideo.hasClass( 'sow-player-unmuted' ) ) {
						if ( ! $embed.length ) {
							$activeSlideVideo.prop( 'muted', false );
						} else {
							$embed.contentWindow.postMessage( '{"event":"command","func":"unMute","args":""}', '*' )
						}
						$unmuteButton.addClass( 'sow-player-unmuted' );
						// Let screen readers know how to handle this button.
						$unmuteButton.attr( 'aria-label', settings.muteLoc );
					} else {
						$unmuteButton.removeClass( 'sow-player-unmuted' );
						$unmuteButton.attr( 'aria-label', settings.unmuteLoc );
					}
				} else {
					$unmuteButton.clearQueue().fadeOut( speed );
				}
			}

			if ( video.length ) {

				// Resize the video so it fits in the current slide
				var
					slideRatio = active.outerWidth() / active.outerHeight(),
					videoRatio = video.outerWidth() / video.outerHeight();

				if ( slideRatio > videoRatio ) {
					video.css( {
						'width' : '100%',
						'height' : 'auto'
					} );
				} else {
					video.css( {
						'width' : 'auto',
						'height' : '100%'
					} );
				}

				video.css( {
					'margin-left' : -Math.ceil( video.width() / 2 ),
					'margin-top' : -Math.ceil( video.height() / 2 )
				} );
			}
		},
	};
};


jQuery( function( $ ) {
	sowb.setupSliders = sowb.setupSlider = function() {
		var siteoriginSlider = new sowb.SiteOriginSlider( $ );

		$( '.sow-slider-images' ).each( function() {
			var $$ = $( this );


			if ( $$.data( 'initialized' ) ) {
				return $$;
			}

			var $p = $$.siblings( '.sow-slider-pagination' );
			var $base = $$.closest( '.sow-slider-base' );
			var $n = $base.find( '.sow-slide-nav' );
			var $slides = $$.find( '.sow-slider-image' );
			var settings = $$.data( 'settings' );

			// Add mobile identifer to slider.
			if ( settings.breakpoint ) {
				$( window ).on( 'load resize', function() {
					if ( window.matchMedia( '(max-width: ' + settings.breakpoint + ')' ).matches ) {
						$base.addClass( 'sow-slider-is-mobile' );
					} else {
						$base.removeClass( 'sow-slider-is-mobile' );
					}
				} );
			}

			$slides.each(function( index, el) {
				var $slide = $( el );
				var urlData = $slide.data( 'url' );

				if ( urlData !== undefined && urlData.hasOwnProperty( 'url' ) ) {
					$slide.on( 'click', function( event ) {

						event.preventDefault();
						var sliderWindow = window.open(
							urlData.url,
							urlData.hasOwnProperty( 'new_window' ) && urlData.new_window ? '_blank' : '_self'
						);
						sliderWindow.opener = null;
					} );
					$slide.find( 'a' ).on( 'click', function( event ) {
						event.stopPropagation();
					} );
				}
			} );

			var setupSlider = function() {

				// If we're inside a fittext wrapper, wait for it to complete, before setting up the slider.
				var fitTextWrapper = $$.closest( '.so-widget-fittext-wrapper' );
				if ( fitTextWrapper.length > 0 && ! fitTextWrapper.data( 'fitTextDone' ) ) {
					fitTextWrapper.on('fitTextDone', function () {
						setupSlider();
					} );
					return;
				}

				var isLegacyParallax = $$.find( '.sow-slider-image-parallax[data-siteorigin-parallax]' ).length;
				var waitForParallax = false;
				if ( ! isLegacyParallax ) {
					var slidesWithModernParallax = $$.find( '.sow-slider-image-parallax:not([data-siteorigin-parallax])' );
					if (
						slidesWithModernParallax.length &&
						typeof parallaxStyles != 'undefined' &&
						(
							! parallaxStyles['disable-parallax-mobile'] ||
							! window.matchMedia( '(max-width: ' + parallaxStyles['mobile-breakpoint'] + ')' ).matches
						)
					) {
						waitForParallax = true;
						// Allow slider to be size itself while preventing visual "jump" in modern parallax.
						$base.css( 'opacity', 0 );
					}
				}

				// Show everything for this slider
				$base.show();

				var resizeFrames = function() {
					$$.find( '.sow-slider-image' ).each( function() {
						var $i = $( this );
						$i.css( 'height', $i.find( '.sow-slider-image-wrapper' ).outerHeight() + 'px' );
					} );
				};
				// Setup each of the slider frames
				$( window ).on('resize panelsStretchRows', resizeFrames ).trigger( 'resize' );
				$( sowb ).on('setup_widgets', resizeFrames );

				if ( ! isLegacyParallax && waitForParallax ) {
					// Wait for the parallax to finish setting up before
					// setting up the rest of the slider.
					if ( ! slidesWithModernParallax.find( '.simpleParallax' ).length ) {
						setTimeout( setupSlider, 50 );
						return;
					} else {
						// Trigger resize to allow for parallax to work after showing Slider.
						window.dispatchEvent( new Event( 'resize' ) );
						setTimeout( function() {
							$base.css( 'opacity', 1 );
						}, 425 );
					}
				}

				$$.trigger( 'slider_setup_before' );

				// Set up the Cycle with videos
				$$
					.on( {
						'cycle-after' : function( event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
							var $$ = $( this );
							siteoriginSlider.playSlideVideo( incomingSlideEl );
							siteoriginSlider.setupActiveSlide( $$, incomingSlideEl );
							$( incomingSlideEl ).trigger( 'sowSlideCycleAfter' );
						},

						'cycle-before' : function( event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
							var $$ = $(this);
							$p.find( '> li' ).removeClass( 'sow-active' ).eq( optionHash.slideNum - 1 ).addClass( 'sow-active' );
							siteoriginSlider.pauseSlideVideo( outgoingSlideEl );
							siteoriginSlider.setupActiveSlide( $$, incomingSlideEl, optionHash.speed );
							$( incomingSlideEl ).trigger( 'sowSlideCycleBefore' );
						},

						'cycle-initialized' : function( event, optionHash ) {
							siteoriginSlider.playSlideVideo( $( this ).find( '.cycle-slide-active' ) );
							siteoriginSlider.setupActiveSlide( $$, optionHash.slides[0] );

							$p.find( '>li' ).removeClass( 'sow-active' ).eq( 0 ).addClass( 'sow-active' );
							$( this ).find( '.cycle-slide-active' ).trigger( 'sowSlideInitial' );

							if ( optionHash.slideCount <= 1 ) {
								// Special case when there is only one slide
								$p.hide();
								$n.hide();
							}

							$( window ).trigger( 'resize' );

							setTimeout( function() {
								resizeFrames();
								siteoriginSlider.setupActiveSlide( $$, optionHash.slides[0] );
								// Ensure we keep auto-height functionality, but we don't want the duplicated content.
								$$.find( '.cycle-sentinel' ).empty();
							}, 200 );
						}
					} )
					.cycle( {
						'slides' : '> .sow-slider-image',
						'speed' : settings.speed,
						'timeout' : settings.timeout,
						'swipe' : settings.swipe,
						'paused' : settings.paused,
						'pauseOnHover' : settings.pause_on_hover,
						'swipe-fx' : 'scrollHorz',
						'log' : false,
					} )	;

				$$.find( 'video.sow-background-element' ).on( 'loadeddata', function() {
					siteoriginSlider.setupActiveSlide( $$, $$.find( '.cycle-slide-active' ) );
				} );

				// Set up showing and hiding navs
				$p.add( $n ).hide();
				if ( $slides.length > 1 ) {
					if ( ! $base.hasClass( 'sow-slider-is-mobile' ) ) {
						if ( settings.nav_always_show_desktop && window.matchMedia( '(min-width: ' + settings.breakpoint + ')' ).matches ) {
							$p.show();
							$n.show();
						} else {
							var toHide = false;
							$base
								.on( 'mouseenter', function() {
									$p.add( $n ).clearQueue().fadeIn( 150 );
									toHide = false;
								} )
								.on( 'mouseleave', function() {
									toHide = true;
									setTimeout( function() {
										if ( toHide ) {
											$p.add( $n ).clearQueue().fadeOut( 150 );
										}
										toHide = false;
									}, 750) ;
								} );
						}
					} else if (
						settings.nav_always_show_mobile &&
						window.matchMedia( '(max-width: ' + settings.breakpoint + ')' ).matches
					) {
						$p.show();
						$n.show();
					}
				}

				// Resize the sentinel when ever the window is resized, or when widgets are being set up.
				var setupActiveSlide = function() {
					siteoriginSlider.setupActiveSlide( $$, $$.find( '.cycle-slide-active' ) );
				};
				$( window ).on( 'resize', setupActiveSlide );
				$( sowb ).on( 'setup_widgets', setupActiveSlide );

				// Setup clicks on the pagination
				$p.find( '> li > a' ).on( 'click', function( e ) {
					e.preventDefault();
					$$.cycle( 'goto', $( this ).data( 'goto' ) );
				} );

				// Clicking on the next and previous navigation buttons
				$n.find( '> a' ).on( 'click', function( e ) {
					e.preventDefault();
					$$.cycle( $( this ).data( 'action' ) );
				} );

				$base.on( 'keyup', function( e ) {
					if ( e.key === 'ArrowLeft' ) {
						$$.cycle( 'prev' );
					} else if ( e.key === 'ArrowRight' ) {
						$$.cycle( 'next' );
					} else {
						return;
					}

					$base.trigger( 'focus' );
				} );

				if ( settings.unmute ) {
					$base.find( '.sow-player-controls-sound' ).on( 'click', function() {
						var $sc = $( this ),
							$activeSlideVideo,
							$embed = $sc.next().find( '.cycle-slide-active .sow-slide-video-oembed iframe' );

						if ( $embed.length ) {
							$activeSlideVideo = $embed;
						} else {
							$activeSlideVideo = $sc.next().find( '.cycle-slide-active > video' );
						}

						if ( $sc.hasClass( 'sow-player-unmuted' ) ) {
							$sc.removeClass( 'sow-player-unmuted' );
							$activeSlideVideo.removeClass( 'sow-player-muted' );
							$sc.attr( 'aria-label', settings.unmuteLoc );
							if ( $embed.length ) {
								$embed[0].contentWindow.postMessage( '{"event":"command","func":"mute","args":""}', '*' )
							} else {
								$activeSlideVideo.prop( 'muted', true );
							}
						} else {
							// Used for changing the text/icon of mute button.
							$sc.addClass( 'sow-player-unmuted' );
							// State tracking.
							$activeSlideVideo.addClass( 'sow-player-unmuted' );
							// Let screen readers know how to handle this button.
							$sc.attr( 'aria-label', settings.muteLoc );
							if ( $embed.length ) {
								$embed[0].contentWindow.postMessage( '{"event":"command","func":"unMute","args":""}', '*' )
							} else {
								$activeSlideVideo.prop( 'muted', false );
							}
						}
					} );
				}
			};

			$$.trigger( 'slider_setup_after' );

			setupSlider();

			if ( typeof $.fn.fitVids === 'function' ) {
				$$.find( '.sow-slide-video-oembed' ).fitVids();
			}

			$$.data( 'initialized', true );
		} );
	};
	sowb.setupSliders();

	$( sowb ).on( 'setup_widgets', sowb.setupSliders );
} );

window.sowb = sowb;