/*
	ON DOCUMENT LOAD
	================
	*/

		$( document ).ready(function()
		{
			// Call the lazyloader
				fInitLazyLoad();
		});

	/*
	fInitLazyLoad()
	===============
	Handles the lazy load

		IN/OUT
		======
		PARAM 1 - NOTHING(VOID)
		RETURNS - NOTHING(VOID)

		FLOW
		====
		1) CREATE CONFIG
		2) CREATE OBSERVER
		3) INITIALISE OBSERVER
	*/

		function fInitLazyLoad()
		{
			/*
			1) CREATE CONFIG
			================
			*/

				// Set the inital margin value for the lazy load
					var nMargin = $(window).height() / 1.25;

				// If the user is on mobile, or the screen width is a certain width (In mobile range)
					if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || $(window).width() <= 760 )
					{
						// Set the margin as a bigger ratio than inital, to ensure images load in time for the image to reach viewport
							nMargin = $(window).height() * 1.5;
					}

				// Set the default config for IntersectionObserver
					var oConfig =
					{
						// Set the root to null so the viewport is used instead of a DOM element
							root : null,

						// Set the root margin, so we can start loading ahead of time
							rootMargin : nMargin + 'px 0px',

						// Set the threshold
							threshold  : 0.01
					};

			/*
			2) CREATE OBSERVER
			==================
			This is where we actually do the image loading
			*/

				// Create an instance of IntersectionObserver
					var oObserver = new IntersectionObserver( function(aEntries, oSelf)
					{
						// Loop through all elements we are observing
							for( var nIndex = 0; nIndex < aEntries.length; nIndex++ )
							{
								// Store this instance of the entry
									var oEntry = aEntries[nIndex];

								// If the entry is intersecting
									if( oEntry.intersectionRatio > 0)
									{
										// Store a jquery instance of this image
											var oImage = $(oEntry.target);

										// If the image is a lazy image
											if( oImage.hasClass("lazy-img") )
											{
												// Store the image source that we want to laod
													var sImageSource = oImage.data("src");

												// Set the image src to the data-src
													oImage.attr('src', sImageSource);

												// Antiques Boutique only, when the image has loaded
													oImage.on( "load", function()
													{
														// Call the on image load function
															fOnImageLoad( $(this) );
													});

												// Remove the lazy-image class
													oImage.removeClass("lazy-img");

											}
											else
										// If the image is a lazy image background
											if( oImage.hasClass("lazy-img-bg") )
											{
												// Store the image source that we want to laod
													var sImageSource = oImage.data("src");

												// Set the image src to the data-src
													oImage.css('background-image', "url('" + oImage.data("src") + "')" );

												// Remove the lazy-image class
													oImage.removeClass("lazy-img-bg");
											}

										// Stop observing this image
											oSelf.unobserve(oEntry.target);
									}
							};

					}, oConfig);

			/*
			3) INITIALISE OBSERVER
			======================
			*/

				// Grab all the images with a class of lazy-img
					var aImages = document.querySelectorAll('.lazy-img');

				// Grab all background images
					var aBackgroundImages = document.querySelectorAll('.lazy-img-bg');

				// Itterate over all images
					for( var nIndex = 0; nIndex < aImages.length; nIndex++ )
					{
						// If the IntersectionObserver isn't supported then just load the image
							if( !('IntersectionObserver' in window) )
							{
								// Store a jquery instance of this image
									var oImage = $( aImages[nIndex] );

								// Set the image src to the data-src
									oImage.attr('src', oImage.data("src") );

								// Remove the lazy-image class
									oImage.removeClass("lazy-img");

								// Remove the filter blur if it has it
									oImage.removeClass("blur-image");
							}
						// If the IntersectionObserver is supported
							else
							{
								// Call the observer to observe
									oObserver.observe( aImages[nIndex] );
							}
					}

				// Itterate over all background images
					for( var nIndex = 0; nIndex < aBackgroundImages.length; nIndex++ )
					{
						// If the IntersectionObserver isn't supported then just load the background image
							if( !('IntersectionObserver' in window) )
							{
								// Store a jquery instance of this background image
									var oImage = $( aBackgroundImages[nIndex] );

								// Set the background image src to the data-src
									oImage.css('background-image', 'url(' + oImage.data("src") + ')' );

								// Remove the lazy-image class
									oImage.removeClass("lazy-img-bg");

								// Remove the filter blur if it has it
									oImage.removeClass("blur-image");

							}
						// If the IntersectionObserver is supported
							else
							{
								// Call the observer to observe
									oObserver.observe( aBackgroundImages[nIndex] );
							}
					}
		}

	/*
	fOnImageLoad()
	==============

		IN/OUT
		======
		PARAM 1 : Jquery image DOM object (JQuery Image DOM)
		RETURNS : Nothing! (Void)
	*/

		function fOnImageLoad( oImage )
		{
			
		}