(function ($) {
    "use strict";
    
    var getElementSettings = function ($element) {
		var elementSettings = {},
			modelCID        = $element.data('model-cid');

		if ( isEditMode && modelCID ) {
			var settings     = elementorFrontend.config.elements.data[ modelCID ],
				settingsKeys = elementorFrontend.config.elements.keys[ settings.attributes.widgetType || settings.attributes.elType ];

			jQuery.each( settings.getActiveControls(), function( controlKey ) {
				if ( -1 !== settingsKeys.indexOf( controlKey ) ) {
					elementSettings[ controlKey ] = settings.attributes[ controlKey ];
				}
			} );
		} else {
			elementSettings = $element.data('settings') || {};
		}

		return elementSettings;
	};

    var isEditMode = false;

	 var PPVideo = {

		/**
		 * Auto Play Video
		 */

		_play: function( $selector ) {

			var $iframe  = $( "<iframe/>" );
	        var $vid_src = $selector.data( 'src' );

	        if ( 0 == $selector.find( 'iframe' ).length ) {

				$iframe.attr( 'src', $vid_src );
				$iframe.attr( 'frameborder', '0' );
				$iframe.attr( 'allowfullscreen', '1' );
				$iframe.attr( 'allow', 'autoplay;encrypted-media;' );

				$selector.html( $iframe );
	        }
		}
	}
	
	var DeviceHandler = function ($scope, $) {
		var elementSettings      = getElementSettings( $scope ),
			$selector            = $scope.find( '.pp-video' ).eq(0),
			$video_obj           = $scope.find( '.pp-video-player-source' ),
			video                = $video_obj.get(0),
			$screen              = $scope.find( '.pp-device-screen' ),
			playbtn              = $scope.find( '.pp-player-controls-play' ),
			rewindbtn            = $scope.find( '.pp-player-controls-rewind'),
			controls             = $scope.find( '.pp-video-player-controls'),
			fs_control           = $scope.find( '.pp-player-controls-fs'),
			video_source         = elementSettings.video_source,
			restart_on_pause     = elementSettings.restart_on_pause,
			stop_others          = elementSettings.stop_others,
			auto_play            = elementSettings.autoplay,
			playback_speed       = elementSettings.playback_speed,
			end_at_last_frame    = elementSettings.end_at_last_frame,
			show_buttons         = elementSettings.video_show_buttons,
            settings             = $selector.data('settings'),
            $video_play          = $scope.find( '.pp-video-play' ),
            $orientation_control = $scope.find( '.pp-device-orientation .fas.fa-mobile' );
        
		$video_play.off( 'click' ).on( 'click', function( e ) {

			e.preventDefault();

			var $selector 	= $( this ).find( '.pp-video-player' );

			PPVideo._play( $selector );

		});

		if ( $video_play.data( 'autoplay' ) == '1' ) {

			PPVideo._play( $scope.find( '.pp-video-player' ) );

		};

		var screen_play = '';
		
		if ( 'show' !== show_buttons ) {
			screen_play = $scope.find( '.pp-device-screen' );
		}

		$orientation_control.click( function(e) {
			if ( $(this).hasClass( 'pp-mobile-icon-portrait' ) ){
				$scope.find( '.pp-device-container' ).removeClass( 'pp-device-orientation-portrait' );
				$scope.find( '.pp-device-container' ).addClass( 'pp-device-orientation-landscape' );
				$(this).removeClass( 'pp-mobile-icon-portrait' );
				$(this).addClass( 'pp-mobile-icon-landscape' );
			}
			else if ( $(this).hasClass( 'pp-mobile-icon-landscape' ) ){
				$scope.find( '.pp-device-container' ).removeClass( 'pp-device-orientation-landscape' );
				$scope.find( '.pp-device-container' ).addClass( 'pp-device-orientation-portrait' );
				$(this).addClass( 'pp-mobile-icon-portrait' );
				$(this).removeClass( 'pp-mobile-icon-landscape' );
			}
		});
		
		if ( 'yes' === restart_on_pause ) {
			restart_on_pause = true;
		}
		
		if ( 'yes' === stop_others ) {
			$("video").on("play", function() {
				$("video").not(this).each(function(index, video) {
					var plybtn = $(video).parent().find('.pp-player-controls-play');
					plybtn.removeClass('pp-pause');
					plybtn.addClass('pp-play');
					video.pause();
				});
			});
		}

		//get HTML5 video time duration
		$video_obj.on('loadedmetadata', function() {
			if ( 'yes' === auto_play ) {
				playbtn.first().trigger('click');
			}

			//playback speed.
			video.playbackRate = playback_speed.size;
			var date = new Date(null);
			date.setSeconds(video.duration); // specify value for SECONDS here
			var timeString = date.toISOString().substr(11, 8);
			$scope.find( '.pp-player-controls-duration' ).text(timeString);
		});

		//update HTML5 video current play time
		$video_obj.on('timeupdate', function() {
			var currentPos = video.currentTime; //Get currenttime
			var maxduration = video.duration; //Get video duration
			var percentage = 100 * currentPos / maxduration; //in %
			$scope.find( '.pp-player-control-progress-track.pp-player-control-progress-inner' ).css('width', percentage+'%');
			var date = new Date(null);
			date.setSeconds(video.currentTime); // specify value for SECONDS here
			var timeString = date.toISOString().substr(11, 8);
			$scope.find( '.pp-player-controls-time' ).text(timeString);
			
			if ( video.currentTime === video.duration ) {
				$screen.removeClass('pp-paused');
				$screen.removeClass('pp-playing');
				playbtn.removeClass('pp-pause');
				playbtn.addClass('pp-play');

				if ( playbtn.hasClass( 'pp-play' ) ) {
					playbtn.find( '.fa-play, .e-fas-fa-play' ).show();
					playbtn.find( '.fa-pause, .e-fas-fa-pause' ).hide();
				} else {
					playbtn.find( '.fa-pause, .e-fas-fa-pause' ).show();
					playbtn.find( '.fa-play, .e-fas-fa-play' ).hide();
				}

				$scope.find( '.pp-player-controls-time' ).text('00:00');
				$scope.find( '.pp-player-control-progress-track.pp-player-control-progress-inner' ).css('width', '0%');
				$scope.find( '.pp-video-overlay' ).css('opacity', '');
				is_playing = false;
			}
		});

		//on video play
		$video_obj.on('play', function() {
			$scope.find( '.pp-video-overlay' ).css('opacity', '0');
		});

		//on video pause
		$video_obj.on('pause', function() {
			$scope.find( '.pp-player-controls-rewind.pp-video-button' ).show();
			$scope.find( '.pp-video-overlay' ).css('opacity', '');
		});

		//mute
		$scope.find( '.pp-player-controls-volume-icon' ).click( function() {
			if( $(this).hasClass('fa-volume-up') ){
				$(this).removeClass('fa-volume-up');
				$(this).addClass('fa-volume-mute');
			}
			else if( $(this).hasClass('fa-volume-mute') ){
				$(this).removeClass('fa-volume-mute');
				$(this).addClass('fa-volume-up');
			}
			video.muted = !video.muted;
			return false;
		});

		//volume bar
		var volumeDrag = false;   /* Drag status */
		$scope.find( '.pp-player-controls-volume-bar' ).mousedown( function(e) {
			volumeDrag = true;
			updateVolumeBar(e.pageX);
		});
		$scope.find( '.pp-player-controls-volume-bar' ).mouseup( function(e) {
			if(volumeDrag) {
				volumeDrag = false;
				updateVolumeBar(e.pageX);
			}
		});
		$scope.find( '.pp-player-controls-volume-bar' ).mousemove( function(e) {
			if(volumeDrag) {
				updateVolumeBar(e.pageX);
			}
		});

		//Update Volume Bar control
		var updateVolumeBar = function(x) {
			var volumebar = $scope.find( '.pp-player-controls-volume-bar' );

			var position = x - volumebar.offset().left; //Click pos
			var volume = position / volumebar.width();
			var percentage = 100 * volume; //in %
			//Check within range
			if(volume > 1) {
				volume = 1;
				percentage = 100;
			}
			if(volume < 0) {
				volume = 0;
				percentage = 0;
			}

			//Update volume 
			video.volume = volume;
			$scope.find( '.pp-player-controls-volume-bar-amount.pp-player-control-progress-inner' ).css('width', percentage+'%');
		};


		//Rewind control
		rewindbtn.on('click', function() {
			video.currentTime = 0;
			return false;
		});

		//Full screen control
		fs_control.on('click', function() {
			if ( video.requestFullscreen ) {
			    video.requestFullscreen();
			} else if ( video.webkitRequestFullscreen ) {
			    video.webkitRequestFullscreen();
			} else if ( video.webkitEnterFullscreen ) {
				video.webkitEnterFullscreen();
			} else if ( video.mozRequestFullScreen ) {
			    video.mozRequestFullScreen();
			} else if ( video.msRequestFullscreen ) {
			    video.msRequestFullscreen();
			} else {
				alert('Your browser doesn\'t support fullscreen');
			}
		});

		var timeDrag = false;   /* Drag status */
		$scope.find( '.pp-player-controls-progress' ).mousedown( function(e) {
			timeDrag = true;
			updatebar(e.pageX);
		});

		$scope.find( '.pp-player-controls-progress' ).mouseup( function(e) {
			if(timeDrag) {
				timeDrag = false;
				updatebar(e.pageX);
			}
		});

		$scope.find( '.pp-player-controls-progress' ).mousemove( function(e) {
			if(timeDrag) {
				updatebar(e.pageX);
			}
		});

		//Update Progress Bar control
		var updatebar = function(x) {
			var progress = $scope.find( '.pp-player-controls-progress' );
			var maxduration = video.duration; //Video duraiton
			var position = x - progress.offset().left; //Click pos
			var percentage = 100 * position / progress.width();

			//Check within range
			if ( percentage > 100 ) {
				percentage = 100;
			}

			if ( percentage < 0 ) {
				percentage = 0;
			}

			//Update progress bar and video currenttime
			video.currentTime = maxduration * percentage / 100;
			$scope.find( '.pp-player-controls-progress-time.pp-player-control-progress-inner' ).css('width', percentage+'%');


			if ( 'yes' === end_at_last_frame && 'yes' !== loop ) {
				if ( 100 === percentage ){
					var plybtn = $scope.find( ' .pp-player-controls-play');
					plybtn.removeClass('pp-pause');
					plybtn.addClass('pp-play');
				}
			}
		};

		if ( 'hosted' == video_source ) {
			playbtn.on("click", function (e) {
				if ( $(this).hasClass('pp-play') ) {
					video.play();
					playbtn.removeClass('pp-play');
					playbtn.addClass('pp-pause');
					$screen.removeClass('pp-paused');
					$screen.addClass('pp-playing');
				}
				else if ( $(this).hasClass('pp-pause') ) {
					video.pause();
					playbtn.removeClass('pp-pause');
					playbtn.addClass('pp-play');
					$screen.removeClass('pp-playing');
					$screen.addClass('pp-paused');
					if ( restart_on_pause ) {
						video.currentTime = 0;
					}

				}

				if ( playbtn.hasClass( 'pp-play' ) ) {
					playbtn.find( '.fa-play, .e-fas-fa-play' ).show();
					playbtn.find( '.fa-pause, .e-fas-fa-pause' ).hide();
				} else {
					playbtn.find( '.fa-pause, .e-fas-fa-pause' ).show();
					playbtn.find( '.fa-play, .e-fas-fa-play' ).hide();
				}

				return false;
			});

			if ( 'show' !== show_buttons ) {
				var is_playing = false;
				screen_play.on("click", function (e) {
					if ( $(this).hasClass('pp-device-screen-video') ) {
						if ( !is_playing ) {
							video.play();
							$screen.removeClass('pp-paused');
							$screen.addClass('pp-playing');
							playbtn.removeClass('pp-play');
							playbtn.addClass('pp-pause');
							is_playing = true;
							return;
						}

						if ( is_playing ) {
							video.pause();
							$screen.removeClass('pp-playing');
							$screen.addClass('pp-paused');
							playbtn.removeClass('pp-pause');
							playbtn.addClass('pp-play');
							is_playing = false;
							return;
						}

						if ( playbtn.hasClass( 'pp-play' ) ) {
							playbtn.find( '.fa-play, .e-fas-fa-play' ).show();
							playbtn.find( '.fa-pause, .e-fas-fa-pause' ).hide();
						} else {
							playbtn.find( '.fa-pause, .e-fas-fa-pause' ).show();
							playbtn.find( '.fa-play, .e-fas-fa-play' ).hide();
						}
					}
				});
			}
		}
	};
    
    $(window).on('elementor/frontend/init', function () {
        if ( elementorFrontend.isEditMode() ) {
			isEditMode = true;
		}
        
        elementorFrontend.hooks.addAction('frontend/element_ready/pp-devices.default', DeviceHandler);
    });
    
}(jQuery));