! function($, undefined)
{
	$(function()
	{

		// Image Loading Effects

			// The delay between the time each image is shown when the images are loaded
				var $delay = 150;

			//var $speed = 0;

			// For each image, set a timeout on the opacity so the images are shown with a delay
			// This makes the page look fancier than if all the images were loaded at once
				$('.instagram-container .image-container').each(function(i, e)
				{
					setTimeout(function()
					{
						$(e).css({opacity: 1});
					}, ($delay * i));
				});



		// When Clicking on an Image to Enlarge it
			$('.instagram-container').on('click', '.image-container', function()
			{
				// Get which image has been clicked on
					var $nIndex = $(this).index();

				// Empty the modal that will show the enlarged version of the image
					$('.modal-content').empty();

				// Add the image information, for the image that has been clicked on, to the modal
					$('.large-instagram-container .image-container').eq($nIndex).clone().appendTo('.modal-content');

				// Show the modal
					$('.modal-container').fadeIn('fast');

				// Hide overflow
					$('html').css({'overflow-y': 'hidden'});

			});



		// Stop close modal on inner element clicks
			$('.modal-content').on('click', '.image-container', function(e){
				e.stopPropagation();
				e.stopImmediatePropagation();
			});


		// Close modal
			$('.modal-container .modal-close, .modal-container, .modal-content').click(function(e)
			{
				// Fade out the modal
					$('.modal-container').fadeOut('fast');

				// Reset the overflow
					$('html').css({ 'overflow-y': 'auto'});

			});



		// Clicking on the Load More link
			$('.load-more').click(function()
			{
				$.ajax(
				{
					cache: false,
					type: 'get',
					url: window.location.href+'?next_url='+encodeURIComponent($(this).data('url')),
					success: function(response)
					{

						var $res = $(response);

						// hide all image-container classes found in the response and append them to our instagram container (so we can fade it in below)
							var $filter = $res.find(".instagram-container");

							$filter.find('.image-container').each(function(index)
							{
								$(this).addClass('hidden');
								$('.instagram-container').append($(this));
							});


						// fade it in
							$('.instagram-container .image-container.hidden').each(function(i, e)
							{
								setTimeout(function()
								{
									$(e).css({opacity: 1});
									$(e).removeClass("hidden");
								}, ($delay * i));
							});


						// append instagram image and information to the enlarged container
							var $largefilter = $res.find('.large-instagram-container');

							$largefilter.find('.image-container').each(function(index)
								{
									$('.large-instagram-container').append($(this));
								});


						// Only show Load More if there are more images to load
							if ( $res.find('.load-more').length )
							{
								$('.load-more').data('url', $res.find('.load-more').data('url'));
							}
							else
							{
								$('.load-more').remove();
							}
					}
				});
			});

	});

}(jQuery);