"use strict";
let wpmgApp = (function($){
	let that = {};
	let ajaxurl = wpmg.ajax;
    
    /*-----------------------------------------
    //Initialize ready script
    -----------------------------------------*/
    that.init = function () {
		_constructor()
		_initLighbox()
		_socialShare()
		_initMixItUp()
		fixYouTubeImgSize()
	}
	
	let _constructor = function () {
		const observer = lozad('.lozad', {
		    loaded: function(el) {
		        el.classList.add('loaded');
		        var img = new Image()
		        img.src = el.src
		        img.onload = function() {
				  	if( this.width < 150 ){
				  		el.classList.add('rr')
				  	}
				}
		    }
		})
		observer.observe();
	}

	that.loaded = function () {
		autoSelectDefaultFilter()
		switchNavigation()
	}

	that.resized = function () {
		switchNavigation()
	}

	let getHashtag  = function(hash){
		var url = location.href;
		hashtag = (url.indexOf(hash) !== -1) ? decodeURI(url.substring(url.indexOf(hash)+1,url.length)) : false;
		if(hashtag){  hashtag = hashtag.replace(/<|>/g,''); }
		return hashtag;
	}

	let setHashtag = function(hash){
		if(typeof hash == 'undefined') return;
		location.hash = hash;
	}

	let clearHashtag  = function(){
		if ( location.href.indexOf('#wpmg') !== -1 ) location.hash = "wpmg";
	}

	let getParam = function(name,url){
	    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	    var regexS = "[\\?&]"+name+"=([^&#]*)";
	    var regex = new RegExp( regexS );
	    var results = regex.exec( url );
	    return ( results == null ) ? "" : results[1];
	}

	let autoSelectDefaultFilter = function(){
		setTimeout(function(){
			let galleryHash = getHashtag('#wpmGallFilter=')
			if( galleryHash.length > 0 ){
	            var galleryHashArr = galleryHash.split('=')
	            if( galleryHashArr.length > 0 ){
	                jQuery('.wpmg-filter button[data-filter=".'+galleryHashArr[1]+'"]').click()
	            }
	        } else {
	        	jQuery('.wpmg-filter').each(function(i,e){
		        	jQuery(e).find('.default-tag').trigger('click')
		        })
	        }
		}, 1000)
		jQuery('.wpmg-wrap').removeClass('wpmg-loading')
	}

	let _socialShare = function(){
		jQuery('html').on('click', '.pp_social a', function(){
			var post = $('.pp_custom_actions').attr('data-post')
			post = ( post.length > 10) ? post : false;
			console.log('Hellowrold', post);
			if( jQuery(this).hasClass('facebook') ){
				var _href = decodeURI(jQuery(this).attr('href'))
				var _link 			= getParam('link', _href);
				var _picture 		= getParam('picture', _href);
				var _name 			= getParam('name', _href);
				var _caption 		= getParam('caption', _href);
				var _description 	= getParam('description', _href);
				var _display 		= getParam('display', _href);

				_href = `https://www.facebook.com/sharer/sharer.php?u=${post}`;
			} else {
				var _liinkedURL = `https://www.linkedin.com/shareArticle?mini=true&url=${post}&title=&summary=&source=`
				var _href = new URL(_liinkedURL);
			}

			if( post ){
				console.log({_liinkedURL, _href});
		        var newwindow = window.open(_href,'','height=800,width=800');
		        if (window.focus) {newwindow.focus()}
			}
	        return false;
	    });
	}

	let _initLighbox = function(){
		$('.wpmg-wrap .targets').each(function(e){
			var lightboxtype = $(this).attr('data-lightboxtype')
			
			$(this).find("a[rel^='pp']").prettyPhoto({
				theme: lightboxtype, /* light_rounded / dark_rounded / light_square / dark_square / facebook / pp_default*/
				// overlay_gallery: false,
				default_width: 500,
				default_height: 344,
				deeplinking:true,
				show_title: false,
				horizontal_padding: 10,
				markup: ' \
					<div class="pp_pic_holder"> \
					    <div class="ppt">&nbsp;</div> \
					    <div class="pp_top"> \
					        <div class="pp_left"></div> \
					        <div class="pp_middle"></div> \
					        <div class="pp_right"></div> \
					    </div> \
					    <div class="pp_content_container"> \
					        <div class="pp_left"> \
					            <div class="pp_right"> \
					                <div class="pp_content"> \
					                    <div class="pp_loaderIcon"></div> \
					                    <div class="pp_fade"> \
					                        <a href="#" class="pp_expand" title="Expand the image">Expand</a>  \
					                        <div class="pp_hoverContainer"> \
					                        	<a class="pp_next" href="#">next</a> \
					                        	<a class="pp_previous" href="#">previous</a> \
					                        </div> \
					                        <div id="pp_full_res"></div> \
					                        <div class="pp_details"> \
					                            <p class="pp_description"></p> \
					                            <div class="pp_social">{pp_social}</div> \
					                            <div class="pp_custom_actions"></div> \
					                        </div> \
					                        <a class="pp_close" href="#">Close</a>  \
					                    </div> \
					                </div> \
					            </div> \
					        </div> \
					    </div> \
					    <div class="pp_bottom"> \
					        <div class="pp_left"></div> \
					        <div class="pp_middle"></div> \
					        <div class="pp_right"></div> \
					    </div> \
					</div> \
					<div class="pp_overlay"></div> \
				',
				social_tools: ' \
					<a class="facebook" href="">\
						<i class="fc-facebook" aria-hidden="true"></i>\
		            </a>\
		            <a class="linkedin" href="">\
						<i class="fc-linkedin" aria-hidden="true"></i>\
		            </a>',
				changepicturecallback: function(event){
					console.log('callback');
					$('.pp_custom_actions').html('');
					var _id, _desc = $('.pp_description').html().split('-id-')
					if( _desc.length == 2 && parseInt(_desc[1]) > 0){

						$('.pp_description').html(_desc[0])

						_id = parseInt(_desc[1])
						var cta 	= $(`a[ref="ref-${_id}"]`).attr('data-cta-link').trim()
						var ctaTxt 	= $(`a[ref="ref-${_id}"]`).attr('data-cta-text').trim()
						var subs 	= parseInt($(`a[ref="ref-${_id}"]`).attr('data-subs'))
						var post	= $(`a[ref="ref-${_id}"]`).attr('data-post')

						$('.pp_custom_actions').attr('data-post', post);

						if( typeof wpmg.customButton != 'undefined' && wpmg.customButton != '' )
							$('.pp_custom_actions').append(wpmg.customButton)

						if( cta.length > 0 && ctaTxt.length > 0 )
							$('.pp_custom_actions').append(`<a class="wpmgcta" href="${cta}" target="_blank">${ctaTxt}</a>`)
						
						if( wpmg.youtubeChaneelId.length > 10 && subs )
							$('.pp_custom_actions').append(`<a class="wpmgcta ctaSubscribeYTV" href="https://www.youtube.com/channel/${wpmg.youtubeChaneelId}?sub_confirmation=1" target="_blank">Subscribe</a>`)
						
						if( (cta.length > 0 && ctaTxt.length > 0) || subs )
							setTimeout(() => { $('.pp_custom_actions').show() }, 3000)

						if( jQuery('.pp_content').height() < jQuery('.pp_fade').innerHeight() ){
							jQuery('.pp_content').height(jQuery('.pp_fade').innerHeight())
						}
					}
				}
			});
		})

	}

	let _initMixItUp = function(){
		// var containerEl = document.querySelector('.gcontainer');
		jQuery('.wpmfgmixer').each(function(i,e){
			var _id = jQuery(e).attr('data-id')
			var mixer = mixitup(e, {
				controls: {
			        scope: 'local',
			    },
			    animation: {
			        animateResizeContainer: true // required to prevent column algorithm bug
			    },
			    selectors: {
			        target: '.mix',
			        pageList : `.mixitup-page-list-${_id}`,
			        pageStats : `.mixitup-page-stats-${_id}`,
			    },
			    pagination: {
			        limit: 21,
			        maintainActivePage: true,
			        loop: true,
			        hidePageListIfSinglePage: true,
					hidePageStatsIfSinglePage: true,
			    },
			    callbacks: {
			        onMixEnd: function(state) {
			            var FilterItem = jQuery('.mixitup-control-active').attr('data-filter');
			            if( FilterItem.length > 0 ){
			                FilterItem = FilterItem.replace('.', '');
			                setHashtag('wpmGallFilter='+FilterItem);
			                // Change dropdown
			                jQuery('#wpmg-filter-dropdown').val(`.${FilterItem}`)
			            }
			        }
			    }
			});
		})

		jQuery('.masonry-template').each(function(i,e){
			var _id   = jQuery(e).attr('data-id')
			var _uid  = jQuery(e).attr('data-uid')
			var _wrapper = `.wpmg-uid-${_uid}`;
			var mixer = mixitup(e, {
				controls: {
			        scope: 'local',
			    },
			    animation: {
			        animateResizeContainer: true // required to prevent column algorithm bug
			    },
			    selectors: {
			        target: '.masonryItem',
			        pageList : `${_wrapper} .mixitup-page-list-${_id}`,
			        pageStats : `${_wrapper} .mixitup-page-stats-${_id}`,
			    },
			    pagination: {
			        limit: 20,
			        maintainActivePage: true,
			        loop: true,
			        hidePageListIfSinglePage: true,
					hidePageStatsIfSinglePage: true,
			    },
			    callbacks: {
			    	onMixStart: function(state) {
			            jQuery(`${_wrapper} .targets`).animate({opacity:0}, 200)
			        },
			        onMixEnd: function(state) {
			        	jQuery(`${_wrapper} .targets`).animate({opacity:1}, 200)
			            var FilterItem = jQuery(`${_wrapper} .mixitup-control-active`).attr('data-filter');
			            if( FilterItem.length > 0 ){
			                FilterItem = FilterItem.replace('.', '');
			                setHashtag('wpmGallFilter='+FilterItem);
			                // Change dropdown
			                jQuery(`${_wrapper} #wpmg-filter-dropdown`).val(`.${FilterItem}`)
			            }
			            
			        }
			    }
			});
		})
		

		$('.wfd').change(function () {
			var _id = $(this).attr('data-id');
            var selectedText = $(this).find("option:selected").text();
            var selectedValue = $(this).val();
            jQuery(`#${_id} button.control[data-filter="${selectedValue}"]`).click()
        });
	}

	let switchNavigation = function(){
		setTimeout(function(){
			let _nav = $('.wpmg-filter.controls')
			if( _nav.height() > 70 ){
				_nav.addClass('wpmg-filter-dropdown')
			} else {
				_nav.removeClass('wpmg-filter-dropdown')
			}
		}, 1000)
	}

	let fixYouTubeImgSize = function(){
		setInterval(function(){
			if( jQuery('img.lozad.loaded.rr').length < 1 ) return false
			jQuery('img.lozad.loaded.rr').each(function(i,e){
			    var src = jQuery(e).attr('src')
			    var tmpImg = new Image();
			    tmpImg.src=src;
			    if( tmpImg.width < 170 ){
			        var sdimg = src.replace('maxresdefault', 'hqdefault')
			        jQuery(e).attr('src', sdimg)
			    }
			}, 2000)
		})
	}

	return that;
})(jQuery);

jQuery(document).ready(function($) {
	wpmgApp.init();
});

jQuery(window).load(function($) {
	wpmgApp.loaded();
	setTimeout(function() {
        resizedw();
    }, 2000)
});

var doit;
function resizedw(){
    jQuery('.wpmg-filter.controls').each(function(index, el) {
    	let _nav = jQuery(el)
    	_nav.removeClass('wpmg-filter-dropdown')
    	let _height = _nav.height()
		if( _height > 70 ){
			_nav.addClass('wpmg-filter-dropdown')
		} else {
			_nav.removeClass('wpmg-filter-dropdown')
		}
		if( jQuery('.wpmg-wrap .targets').width() >= 1500 )
			jQuery('.wpmg-wrap .targets').attr('data-span', '4');
		else
			jQuery('.wpmg-wrap .targets').attr('data-span', '3');

	});
}
window.onresize = function() {
    clearTimeout(doit);
    doit = setTimeout(function() {
        resizedw();
    }, 2000);
};