define(['jquery', 'swiper', 'modules/push-state', 'color-thief', 'isInViewport', 'imagesloaded', 'magnificPopup'], function($, Swiper, PushState, ColorThief, isInViewport, imagesLoaded) {


	Portfolios = {

		// rollover effect
		projectThumbnails : function() {
			$(".project-thumb").each(function() {
				var $e = $(this),
					$container = $e.find('.swiper-container');

				var slider = new Swiper($container, {
					loop: true,
					effect: "fade",
					spaceBetween: 0,
					autoplay: 750
				});

				// catch if no slider exist
				try {
					slider.stopAutoplay();

					$e.on('mouseover', function(event) {
						slider.startAutoplay();
					});

					$e.on('mouseleave', function(event) {
						slider.stopAutoplay();
						slider.slideTo(1);
					});

				} catch(err) {
					return true;
				}

			});

			// $(".project-thumb figure").on('mousenter mousemove', function(event) {
			// 	var $images  = $(this).find("ul li"),
			// 		total    = $images.length,
			// 		offsetX  = event.offsetX,
			// 		width    = $(this).width(),
			// 		cellSize = width / total,
			// 		percent  = (offsetX / width) * 100,
			// 		position = Math.ceil((percent / 100) * total) - 1,
			// 		$current = $( $images.get(position) );

			// 	// console.log(total, percent, position, $current);
			// 	$current.show().siblings().hide();
			// });

			// $(".project-thumb figure").on('mouseleave', function(event) {
			// 	$(this).find("ul li:first").show().siblings().hide();
			// });
		},

		// on detail page
		projectDetails : function() {
			imagesLoaded( $('#project-details'), function( instance ) {
				jQuery(document).ready(function($) {
					Portfolios.projectHeader();
					Portfolios.zoomPhotos();
					Portfolios.projectWorkSpy(window.location.pathname);
				});
			});
		},

		projectHeader : function() {
			var colorThief = new ColorThief();

			$(".project-work-item").each(function() {
				var $img = $(this).find('img'),
					$caption = $(this).find('figcaption');

				// get palettes
				var palette = colorThief.getPalette( $img.get(0), 4);

				$caption.css('background-color', 'rgba(' + palette[0].toString() +',1)');
				$caption.find('h4').css('color', 'rgb(' + palette[1].toString() +')');
				$caption.find('p').css('color', 'rgb(' + palette[1].toString() +')');
				// $caption.parent().parent().find('nav > a').css('background-color', 'rgb(' + palette[1].toString() +')');
			});
		},

		zoomPhotos : function() {
			$('a.zoom-work').magnificPopup({
				type: 'image',
				preload: [1,5],
				gallery: {
					enabled: true,
					tCounter: '<span class="mfp-counter">%curr% / %total%</span>' // markup of counter
				},
				// Delay in milliseconds before popup is removed
				removalDelay: 300,

				// on small screen
				disableOn: 400,

				// Class that is added to popup wrapper and background
				// make it unique to apply your CSS animations just to this exact popup
				mainClass: 'mfp-fade',
				zoom: {
					enabled: true, // By default it's false, so don't forget to enable it

					duration: 300, // duration of the effect, in milliseconds
					easing: 'ease-in-out', // CSS transition easing function

					// The "opener" function should return the element from which popup will be zoomed in
					// and to which popup will be scaled down
					// By defailt it looks for an image tag:
					opener: function(openerElement) {
						// openerElement is the element on which popup was initialized, in this case its <a> tag
						// you don't need to add "opener" option if this code matches your needs, it's defailt one.
						return openerElement.is('img') ? openerElement : openerElement.find('img');
					}
				}
			});
		},

		projectWorkSpy: function(rootURL) {

			var findElement = function() {
				var e = $("[data-in-viewport]:in-viewport("+ $(window).height() / 2 +")").get(0);

				if (e) {
					var url = $(e).data('url');

					// push state
					PushState.changeState( $(e), url );

				} else {
					PushState.changeState( null, rootURL );
				}
			};

			$(window).on("resize scroll", function() {
				// findElement();
			});

		},

	};

	return Portfolios;

});