( function( $ ) {
	var WidgetElements_ModalWindowHandler = function( $scope, $ ) {
		var width = 0,
		height = 0,
		paddingL, paddingR;

		var elementSettings = dceGetElementSettings( $scope );

		$scope.find('.dce-modalwindow-section').on('click','[data-type="modal-trigger"]', function(){
			var actionBtn = $(this),
				scaleValue = retrieveScale(actionBtn.next('.cd-modal-bg'));
				width = $(this).outerWidth();
				height = $(this).outerHeight();
				paddingL = elementSettings.fmw_padding.left;
				paddingR = elementSettings.fmw_padding.right;

			$(this).parent().css('width',width);
			$(this).css('width',width);

			actionBtn.addClass('to-circle').velocity({width: height, paddingLeft: 0, paddingRight: 0},100);
			actionBtn.next('.cd-modal-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
			});

			//if browser doesn't support transitions...
			return false;
		});

		//trigger the animation - close modal window
		$scope.find('.dce-modalwindow-section .cd-modal-close').on('click', function(){
			closeModal();
			return false;
		});
		$(document).keyup(function(event){
			if(event.which == '27') closeModal();
		});

		$(window).on('resize', function(){
			//on window resize - update cover layer dimension and position
			if($scope.find('.dce-modalwindow-section.modal-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
		});

		function retrieveScale(btn) {
			var btnRadius = btn.width()/2,
				left = btn.offset().left + btnRadius,
				top = btn.offset().top + btnRadius - $(window).scrollTop(),
				scale = scaleValue(top, left, btnRadius, $(window).height()+100, $(window).width())+100;

			btn.css('position', 'fixed').velocity({
				top: top - btnRadius,
				left: left - btnRadius,
				translateX: 0,
			}, 0);

			return scale;
		}

		function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
			var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
				maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
			return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
		}

		function animateLayer(layer, scaleVal, bool) {
			layer.velocity({ scale: scaleVal }, 600, function(){
				$('body').toggleClass('overflow-hidden', bool);
				(bool)
					? layer.parents('.dce-modalwindow-section').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
					: layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle').velocity({width: width, paddingLeft: paddingL, paddingRight: paddingR}, { duration: 200, complete: function(e) { var btn = $(this); setTimeout(function(){ btn.removeAttr('style');btn.parent().removeAttr('style');},300); } });
			});
		}

		function updateLayer() {
			var layer = $scope.find('.dce-modalwindow-section.modal-is-visible').find('.cd-modal-bg'),
				layerRadius = layer.width()/2,
				layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
				layerLeft = layer.siblings('.btn').offset().left + layerRadius,
				scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());

			layer.velocity({
				top: layerTop - layerRadius,
				left: layerLeft - layerRadius,
				scale: scale,
			}, 0);
		}

		function closeModal() {
			// pause plyr videos inside modal.
			$scope.find('.dce-video-plyr').each(function() {
				$(this).data('dce-plyr').pause();
			});
			var section = $scope.find('.dce-modalwindow-section.modal-is-visible');
			section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

			});
			animateLayer(section.find('.cd-modal-bg'), 1, false);
			//if browser doesn't support transitions...
		}
	};

	
	$( window ).on( 'elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction( 'frontend/element_ready/dyncontel-modalwindow.default', WidgetElements_ModalWindowHandler );
	} );
} )( jQuery );
