/*
catalogue_list.js
=================
Contains all javascript required for the cataloge list page


FUNCTIONS
=========

fFilterOrOrderChange() - Called when presses the FILTER button or changes the order
fOnWindowResize - Called when the window resizes, determins the position of the filters, (mobile / desktop)
fToggleFilterMenu_Mobile() - Toggles mobile filter menu, called when pressing the "Filter" div on mobile
fResetPriceFiler() - Resets the price filter cookie and redirects to target url
fResetPeriodsFiler() - Resets the period filter cookie and redirects to target url
*/


	// We store a variable that contains the resize timeout, so we don't have to fOnWindowResize every frame,
	// as this would cause useless bloat. So we throttle the window.resize to call this function every 100ms
	// after the window has been resized. This is done under $(document).ready(function()
		var oResizeTimeout;

	/*
	ON DOCUMENT READY
	=================
	Here we simply call required functions and get things
	setup as soon as the document has loaded
	*/

		$(document).ready(function()
		{
			/* Call the fFilterOrOrderChange function */
				$(".filterButton").on('click', function(event){
				    fFilterOrOrderChange();
				});

				$("#sOrder").on('change', function(event){
				    fFilterOrOrderChange();
				});

				$("#sOrder_Bottom").on('change', function(event)
				{
					// Update the original order value to the bottom value
						$("#sOrder").val( $("#sOrder_Bottom").val() );

					// Call the function to handle cookies etc
				    	fFilterOrOrderChange();
				});

			// When the filter selection is clicked, toggle the menu
				$(".filter-selection").on("click", function(event)
				{
					// If the menu is open (EG if we can find the open class in the filter section wrapper)
						if( $(this).parent().find('.open').length !== 0 )
						{
							// Toggle it off
								$(this).parent().find('.open').removeClass("open");
								$(this).parent().find('.dropdown-icon').removeClass('open');
						}
					// No we can't find it, so the menu must be closed, so toggle it on
						else
						{
							// Toggle it on
								$(this).parent().find('.filter-menu-options').addClass("open");
								$(this).parent().find('.dropdown-icon').addClass('open');
						}
				});

			// When the bottom currency select is changed update the cookie
				$("#currencyselector_nCurrency_ID_bottom").on('change', function(event)
				{
					// Update the original order value to the bottom value
						$("#currencyselector_nCurrency_ID").val( $("#currencyselector_nCurrency_ID_bottom").val() );

					// Call the function to handle cookies etc
						var nCurrency_ID = $( "#currencyselector_nCurrency_ID_bottom" ).val();

					// Update the cookie
						$.cookie("nCurrency_ID", nCurrency_ID, { path: '/', expires: 365 });

					// reload page
						 location.reload();
				});


			/*
			FADE IT IN
			==========
			As we are using append on load for the filters,
			it will display the listings on mobile for a split second,
			this makes it look junky, so we just hide it by fading the
			elements in.

			We also apply the fade in effect to the .grid element
			as lazyload initalises on load too!
			*/

				// Set the opacity of the filters
					$("#leftCatCol").css("opacity", 1);

				// Set the opacity of the items wrapper
					$(".itemsContainer").css("opacity", 1);

				// Set the opacity of the grid wrapper
					$(".grid").css("opacity", 1);

			/*
			ALLOW FILTERING ON MOBILE
			=========================
			So users can easily order and filter
			items when on a small screen, we have a
			button that simply opens a filter modal
			that essentially copys all the desktop
			code and appends it to mobile.

			We do that when the screen loads.
			*/

				fOnWindowResize();

				// Display the filter col filter (Prevents CLS on mobile )
					$("#leftCatColInner").css( "display", "block" );

					// If we are on desktop
						if( $(window).width() > 767 )
						{
							// Display the order by col (we do this only on desktop as the mobile view for the currency / sort by is already done in fOnWindowResize )
							// It is hidden by default so we can prevent CLS, as it shifts on mobile
								$("#orderByCol").css( "display", "block" );
						}
					

			/*
			CORRECTLY SIZE FILTERS
			======================
			We bother checking for this resize because otherwise if the user
			wants to display a browser with our website on side by side
			with another browser, then it will look trashy as the filters
			will have the desktop filters whilst being sized with the mobile
			width.

			It is important we do it this way and NOT in css, as otherwise
			we will have to do multiple PHP calls to grab all the filter
			options,and it would mean duplicate DOM elements which is something
			that we can't really afford. (Performance wise)
			*/

				// When the window is resized
					$(window).resize( function()
					{
						// If oResizeTimeout is assigned
							if( !!oResizeTimeout )
							{
								// Clear it
									clearTimeout(oResizeTimeout);
							}

						// Set timeout of 100ms to call fOnWindowResize using requestAnimationFrame to ensure we get the refresh
							oResizeTimeout = setTimeout( function()
							{
								// Request an animation frame to fOnWindowResize
									requestAnimationFrame( fOnWindowResize );

							}, 100);

					});
		});




	/*
	fFilterOrOrderChange
	=====================
	Called when presses the FILTER button or changes the order
	*/

		function fFilterOrOrderChange()
		{

			/*
			store cookies
			=============
			*/

				/* price range */

					// If the price range elemnt exists
						if( $("#priceRange_nFrom").length )
						{
							// Set the cookie
								$.cookie("catalogue_list_pricefilter_nFrom", document.getElementById('priceRange_nFrom').value, { path: '/', expires: 7 });

						}

					// If the price range element exists
						if( $("#priceRange_nTo").length )
						{
							// Set the cookie
								$.cookie("catalogue_list_pricefilter_nTo", document.getElementById('priceRange_nTo').value, { path: '/', expires: 7 });

						}

				/* periods */

					// If the period all elemnt exists
						if( $("#period_all").length )
						{
							/* is the ALL checkbox ticked? */
								if (document.getElementById('period_all').checked==true) {

									// yes
										var aShopProdPeriods = "ALL";

								} else {

									// no - find out which periods are checked

										/* Build array of periods by working out which checkboxes are checked */
											var aShopProdPeriods = [];

											$(".periodCheckbox").each(function()
											{

											    if($(this).is(':checked')) {

													var nShopProdPeriod_ID = $(this).val();
													aShopProdPeriods.push(nShopProdPeriod_ID);

											    }

											});

								}
						}

				/* save in cookie */
					var sOrder = $( "#sOrder option:selected" ).val();
					$.cookie("catalogue_list_periods", aShopProdPeriods, { path: '/', expires: 7 });


				/* order */
					var sOrder = $( "#sOrder option:selected" ).val();
					$.cookie("catalogue_list_order", sOrder, { path: '/', expires: 7 });



			/*
			reload page
			===========
			*/
				// get URL of current page
					var sThisPage = window.location.pathname;

				// make sure the reset querystring isn't in it (otherwise our cookies will be cleared when the page reloads)
					sThisPage = sThisPage.replace("?reset=true", "");
					sThisPage = sThisPage.replace("reset=true", "");

				// remove the first forward slash
					sThisPage = sThisPage.substr(1);

				// Remove the instance text of AntiquesBoutique so it works on local machine
					sThisPage = sThisPage.replace("AntiquesBoutique/", "");
					sThisPage = sThisPage.replace("MilitariaZone/", "");

				// redirect
					location.href=sThisPage;

		}


	/*
	fOnWindowResize
	===============
	This function is called when the window resizes, it
	detects if we are on mobile, and adjusts the filters
	to the correct positions accordingly
	*/

		function fOnWindowResize()
		{
			// If we are shrinked
				if( $(window).width() <= 767 )
				{
					// If the mobile order hasn't got sOrder
						if( !$("#mobile-order").has( $("#sOrder") ).length )
						{
							// Append the sOrder selection onto this mobile order div
								$("#mobile-order").append( $("#sOrder") );

							// Append the currency selection onto this mobile order div
								$("#mobile-currency").append( $("#currencyselector_nCurrency_ID") );

							// Append the sOrder selection onto this mobile order div (Bottom)
								$("#mobile-order-bottom").append( $("#sOrder_Bottom") );

							// Append the currency selection onto this mobile order div ( Bottom)
								$("#mobile-currency-bottom").append( $("#currencyselector_nCurrency_ID_bottom") );

							// Add the select class where the opacity is 0, this allows us to hide the select from view
								$("#sOrder").addClass("mobile-order-select");

							// Add the select class where the opacity is 0, this allows us to hide the select from view
								$("#currencyselector_nCurrency_ID").addClass("mobile-order-select");

							// Add the select class where the opacity is 0, this allows us to hide the select from view (Bottom)
								$("#sOrder_Bottom").addClass("mobile-order-select");

							// Add the select class where the opacity is 0, this allows us to hide the select from view (Bottom)
								$("#currencyselector_nCurrency_ID_bottom").addClass("mobile-order-select");

							// Hide the desktop order by column (Top and Bottom)
								$(".orderByCol").each( function()
								{
									// Hide each orderByCol
										$(this).hide();
								});

							// Make it so the order button has a hover effect (Cursor)
								$("#sOrder").addClass("hov");

							// Make it so the order button has a hover effect (Cursor)
								$("#currencyselector_nCurrency_ID").addClass("hov");

							// Make it so the order button has a hover effect (Cursor) (Bottom)
								$("#sOrder_Bottom").addClass("hov");

							// Make it so the order button has a hover effect (Cursor) (Bottom)
								$("#currencyselector_nCurrency_ID_bottom").addClass("hov");

							// Append the left category column onto the filter menu, so we can filter items
								$("#mobile-filter-menu #inner-wrapper").append( $("#leftCatCol") );
						}
				}
				else
			// If we are no longer shrinked
				{
					// If the mobile order has got the sOrder
						if( $("#mobile-order").has( $("#sOrder") ).length )
						{
							// Append the sOrder selection to it's original position
								$("#orderByColInner").append( $("#sOrder") );

							// Append the currency selection to it's original position
								$("#currencyInner").append( $("#currencyselector_nCurrency_ID") );

							// Append the sOrder selection to it's original position (Bottom)
								$("#currencyInnerBottom").append( $("#currencyselector_nCurrency_ID_bottom") );

							// Append the sOrder selection to it's original position (Bottom)
								$("#orderByColInnerBottom").append( $("#sOrder_Bottom") );

							// Remove the select class where the opacity is 0, that allows us to hide the select from view on mobile
								$("#sOrder").removeClass("mobile-order-select");

							// Remove the select class where the opacity is 0, that allows us to hide the select from view on mobile
								$("#currencyselector_nCurrency_ID").removeClass("mobile-order-select");

							// Remove the select class where the opacity is 0, that allows us to hide the select from view on mobile (Bottom)
								$("#sOrder_Bottom").removeClass("mobile-order-select");

							// Remove the select class where the opacity is 0, that allows us to hide the select from view on mobile (Bottom)
								$("#currencyselector_nCurrency_ID_bottom").removeClass("mobile-order-select");

							// Show the desktop order by column (Top and Bottom)
								$(".orderByCol").each( function()
								{
									// Show each orderByCol
										$(this).show();
								});

							// Append the left category column onto the filter menu, so we can filter items on desktop
								$("#leftCatColWrapper").prepend( $("#leftCatCol") );

							// Remove the hover class
								$("#sOrder").removeClass("hov");

							// Remove the hover class
								$("#currencyselector_nCurrency_ID").removeClass("hov");

							// Remove the hover class
								$("#sOrder_Bottom").removeClass("hov");

							// Remove the hover class
								$("#currencyselector_nCurrency_ID_bottom").removeClass("hov");
						}
				}
		}



	/*
	fToggleFilterMenu_Mobile()
	==========================
	This function simply toggles the filter
	menu on mobile. (Opens / Closes it)
	*/

		/*
		REQUIRED VARIABLES
		==================
		*/

			// Store the scroll position when we open the modal
				var nLastStoredTopPosition = 0;


		/*
		FUNCTION
		========
	 	*/

			function fToggleFilterMenu_Mobile()
			{
				// If the mobile filter menu is closed
					if( $("#mobile-filter-menu").css('top') != "0px" )
					{
						// Store the last known scroll position so we can scroll back to the position required when we close
							nLastStoredTopPosition = parseInt( $(window).scrollTop() );

						// Set the top position of the filter to 0
							$("#mobile-filter-menu").css('top', 0);

						// Show the modal
							$("#mobile-filter-menu").css("display", "block");

						// Set the body to position fixed to remove the scroller
							//$("body").css( "position", "fixed" );

						// Set the top position of the body
							//$("body").css( "top", nLastStoredTopPosition + "px" );

					}
				// If the moble filter menu is open
					else
					{
						// Set the top position of the box to be offscreen
							$("#mobile-filter-menu").css('top', parseInt( $(window).height() * 2 ) );

						// Hide the modal
							$("#moble-filter-menu").hide();

						// Reset the position css tag of the body
							//$("body").css( "position", "" );

						// Reset the top style of the body
							//$("body").css( "top", "" );

						// Scroll to the position we were before we opened the search box
							$('html, body').animate( { scrollTop: nLastStoredTopPosition }, 1);
					}
			}


	/*
	fResetPriceFiler()
	==================
	Resets price filter by removing cookies and refreshing page
	*/

		function fResetPriceFiler( sURL )
		{
			// Remove the cookies
				$.removeCookie('catalogue_list_pricefilter_nFrom', { path: '/' } );
				$.removeCookie('catalogue_list_pricefilter_nTo', { path: '/' } );


			// Redirect to target url
				location.href = sURL;
		}

	/*
	fResetPeriodsFiler()
	==================
	Resets periods filter by removing cookies and refreshing page
	*/

		function fResetPeriodsFiler( sURL )
		{
			// Remove the cookie
				$.removeCookie('catalogue_list_periods', { path: '/' } );

			// Redirect to target url
				location.href = sURL;
		}