/*
-------------------------------------------------------------------------------------------------
fairs.js
===============
This file is a copy of functions from fairs_index.js in the websitemanager
*/

/*
FUNCTIONS
=========
Here are a reference to all the functions inside of fairs.js,
if you modify anything in this file please add a timestamp, your name
and the change to the logs section.

	fToggleSearchButton()
	=====================
	Toggles the search box to be displayed and hidden
		- RETURNS : nothing (void)


	fInitSearchFunctionality()
	=========================
	Applies the On Key Up event to the search field. Not to be called
		Returns : Nothing! (void)


	fApplySearch()
	==============
	Handles all the logic of the search table toggling
		Returns : Nothing! (void)


	fOnSortHeaderClicked(nSortID)
	=============================
	Called when table header is clicked with the ID of the element that has clicked it
		Param 1 : The ID of the header item clicked to be sorted (string)
		Returns : Nothing! (void)


	fSortTable(nSortCellIndex)
	==========================
	Sorts table based upon the specific cell index inputted, use in conjunction with fIDToCellIndex to get the index!
		Param 1 : The cell index we want to order by (int)
		Returns : Nothing! (void)


	fIDToCellIndex(nSortID)
	=======================
	Transforms a string ID into a cell index to be inputted into Param 1 of fSortTable
		Param 1 : The  ID of the cell that the user has clicked to sort (string)
		Returns : The correct cell index or error code (int)


	fOnDateChanged()
	========================================
	Displays fairs depending on the date filters set!
		Param 1 : Nothing! (void)
		Returns : Nothing! (void)


	fResetDates()
	=============
	Displays fairs depending on the date filters set!
		Param 1 : Nothing! (void)
		Returns : Nothing! (void)
*/


/*

LOGS
=====
	08/10/2019 - Jed Merrington
		* File created and code copied from fairs_index.js!

	25/10/2019 - Jed Merrington
		* Implemented the PH9 Date Picker into the project
		* Fixed a bug with date selections where the date wouldn't select the range propperly (minor bug)

-------------------------------------------------------------------------------------------------
*/

// Add ready event to  document and call fInitSearchFunctionality when loaded, also calls function when date is changed!
	$(document).ready( function()
	{
		fInitSearchFunctionality();

		// When the filter dates change, run the fOnDateChanged function!
			$('#nDateFromFilter').change( function()
			{
				fOnDateChanged();
			});

			$('#nDateToFilter').change( function()
			{
				fOnDateChanged();
			});

		// Assign the date picker callback to this on date changed function!
			fOnDateChangedCallback = fOnDateChanged;
	});
	

/*
Decalre all variables used for the button toggling
	- bCanToggleSearch - True/False value of if we are allowed to toggle states (bool)
*/

	var bCanToggleSearch = true;


/*
fToggleSearchButton
===================
Function called when the search/close search button is pressed to toggle the
search button. This shouldn't be called by anything but the search button
in fairs_index.php!

	PARAMS
	======
		No input (void)

	RETURNS
	=======
		Doesn't return anything! (void)
*/

	function fToggleSearchButton()
	{
		// If we can't toggle the search state then exit
			if(!bCanToggleSearch)
				return;

		// Cache the IDs of the icons that we need to fade in and fade out
			var sToFadeOutIcon = $("#iSearchIcon").hasClass("hide-item") ? "#iCloseSearchIcon" : "#iSearchIcon";
			var sToFadeInIcon  = sToFadeOutIcon == "#iSearchIcon" ? "#iCloseSearchIcon" : "#iSearchIcon"       ;

		// Assign the toggle search state
			bCanToggleSearch = false;

		// Toggle the search bar classes so it displays or hides!
			$("#iSearchField").toggleClass("input-active");
			$("#iSearchField").toggleClass("input-not-active");

		// Make it so the search title hides when we search on mobile
			$("#sSearchTitle").toggleClass("input-search-title-active");
			$("#sSearchTitle").toggleClass("input-search-title-disabled");

		// Fade out the icon then fade in the other icon and carry on performing logic when the fade is finished
			$(sToFadeOutIcon).fadeTo( "slow", 0, function()
			{
				// Display/Hide the icons as required
					$(sToFadeOutIcon).toggleClass("hide-item");
					$(sToFadeInIcon).toggleClass("hide-item");

				// Fade the required icon in and carry on performing logic when the fade is finished!
					$(sToFadeInIcon).fadeTo( "fast", 1, function()
					{
						// Set the value of the search field to blank
							$("#iSearchField").val("");

						// Apply toggle search to reset table
							fApplySearch();

						// Let the user be able to toggle search again
							bCanToggleSearch = true;
					});
			});
	}

/*
fToggleFilterSection
====================
*/

	function fToggleFilterSection( sTarget_ID, sTargetArrow_ID )
	{
		// If we are not on mobile, don't do anything
			if (window.innerWidth > 650) {
				return;
			}

		// Store the target section
			var oTargetSection = $("#" + sTarget_ID);

		// If the element is being shown, then we need to hide it
			if( oTargetSection.css("display") == 'block' )
			{
				// Show the element
					oTargetSection.removeClass("menu-is-active");

				// Show the arrow icon facing the correct way
					var oArrowIcon = $("#" + sTargetArrow_ID);
					oArrowIcon.removeClass("fa-chevron-up");
					oArrowIcon.addClass("fa-chevron-down");
			}
		// If the element is not being shown, then we need to display it
			else
			{
				// Show the element
					oTargetSection.addClass("menu-is-active");

				// Show the arrow icon facing the correct way
					var oArrowIcon = $("#" + sTargetArrow_ID);
					oArrowIcon.removeClass("fa-chevron-down");
					oArrowIcon.addClass("fa-chevron-up");
			}
	}

/*
fInitSearchFunctionality()
==========================
Applies the On Key Up event to the search field. Not to be called
by anything other than fairs_index.php

	PARAMS
	======
	Doesn't take any! (void)

	RETURNS
	=======
	Doesn't return anything! (void)
*/
		function fInitSearchFunctionality()
		{

			// Call fApplySearch when we get key input on search field
				$("#iSearchField").on("keyup", fApplySearch);
		}

/*
fApplySearch()
==============
Applys the search of the input field #iSearchField and toggles
the rows depending on if there is a match or not.

	PARAMS
	======
	Doesn't take any! (void)

	RETURNS
	=======
	Doesn't return anything! (void)
*/

		function fApplySearch()
		{
			// Store the search value inputted
				var sSearchValue = $("#iSearchField").val().toLowerCase().trim();

			// Toggle the row if the item on if the item contains the search value inputted
				$("#tFairsTable > tbody > tr").filter( function()
				{
					$(this).toggle($(this).text().toLowerCase().indexOf(sSearchValue) > -1)
				});
		}

/*
fOnSortHeaderClicked(nSortID)
=============================
Called as an event when a header item that can be ordered by
is clicked in the Fairs Table. This simply caches required
variables, and handles the UI Icon being moved around and
switched depending on the result. It then calls fSortTable
to actually handle the sorting of the table!

	* Down arrow represents Lowest to Highest match (EG :  A - B - C or 1 - 2 - 3)
	* Up arrow respresents Highest to Lowest Match (EG : C - B - A or 3 - 2 - 1)

	PARAMS
	======
	nSortID - The ID of the header element that has just been clicked

	RETURNS
	=======
	Doesn't return anything! (void)
*/

	/*
	Decalre all variables used for the header sorting
		- sCachedSortID - The header ID that was last clicked we assign name by default because that's what we order the database in on load (string)
	*/

		var sCachedSortID = "hDate";
		var sCurrentOrderMode = "down";
		var bCanSwitch = true;

	function fOnSortHeaderClicked(nSortID)
	{
		// If we can't switch then exit
			if(!bCanSwitch)
				return;

		// Set the can switch variable to false to indicate we are switching stuff around!
			bCanSwitch = false;

		// If the last clicked header has just been clicked again
			if(nSortID == sCachedSortID)
			{
				// Store the class names for the current arrow and the next arrow
					var sIconArrowCurrent = "fa fa-sort-" + sCurrentOrderMode                             ;
					var sIconArrowNext = "fa fa-sort-" + ( sCurrentOrderMode === "up" ? "down" : "up" );

				// Toggle the classes
					$("#iArrowIcon").toggleClass(sIconArrowCurrent + " " + sIconArrowNext);

				// Cache the order mode
					sCurrentOrderMode = sCurrentOrderMode === "up" ? "down" : "up";
			}
		// If the last clicked header is differnt from the currently clicked one
			else
			{
				// Remove the up arrow if there is one and add the down arrow if it's not there
					$("#iArrowIcon").removeClass("fa fa-sort-up");
					$("#iArrowIcon").addClass("fa fa-sort-down");

				// Append the arrow onto the clicked Header
					$("#iArrowIcon").appendTo("#" + nSortID);

				// Cache the order mode to it's default state
					sCurrentOrderMode = "down";
			}

		// Now all we need to do is actually sort the row!
			fSortTable( fIDToCellIndex(nSortID) );

		// Cache the Sort ID
			sCachedSortID = nSortID;
	}

/*
fSortTable()
============
Performs a loop through all the table elements and
orders them depending on the nSortCellIndex, this
function is directly implemented to work with
the tFairsTable but could be used to scale with
other tables.

	PARAMS
	======
	nSortCellIndex - The index of the cell we are ordering by (int)


	RETURNS
	=======
	Doesn't return anything! (void)
*/
	function fSortTable(nSortCellIndex)
	{

		// If the cell index isn't a valid index then assign to 0
			if(nSortCellIndex < 0)
			{
				nSortCellIndex = 0;
			}

		// Store Table Rows
			var aTableRows = $("#tFairsTable > tbody > tr").get();

		// If there is less than 2 elements then don't even try!
			if( aTableRows.length < 2)
			{
				return;
			}

		// Sort the array based on the value of the sort cell index
			aTableRows.sort( function(oA, oB)
			{
				// Cache the cell value or the ID depending on the sort type
					var oCellAValue = nSortCellIndex == 2 ? $(oA.cells[nSortCellIndex] ).find("#fNameValue").html().toLowerCase() : $(oA.cells[nSortCellIndex] ).attr("id");
					var oCellBValue = nSortCellIndex == 2 ? $(oB.cells[nSortCellIndex] ).find("#fNameValue").html().toLowerCase() : $(oB.cells[nSortCellIndex] ).attr("id");

				// If the values are the same then return no change
					if( oCellAValue == oCellBValue)
						return 0;

				// Return the result!
					return oCellAValue < oCellBValue ? -1 : 1;
			});

		// If the order is up then all we do is reverse the table
			if(sCurrentOrderMode === "up")
			{
				aTableRows = aTableRows.reverse();
			}

		// Update the table with the results
			$.each(aTableRows, function(nIndex, oRow)
			{
				$("#tFairsTable > tbody").append(oRow);
			});

		// Allow user to switch again
			bCanSwitch = true;
	}

/*
fIDToCellIndex(nSortID)
================
Conerts an ID into a targeted cell index by performing
a switch on the input Sort ID and returning the cells
literal position based upon the input.

	PARAMS
	======
	nSortID - the  ID of the cell that the user has clicked to sort (string)


	RETURNS
	=======
	Cell index number of the fairs table required for the table sort. (int)
*/

	function fIDToCellIndex(nSortID)
	{
		// Switch statement through the input and return the cell index depending on the index
			switch (nSortID)
			{
				case "hDate"  : return 1;
				case "hName"  : return 2;

				default : return -1;
			}
	}


/*
fOnDateChanged(oDateObject, bIsDateFrom)
========================================
Used when a date is changed on the filters,
this allows users to directly search what
date they want by selecting the to and from
date inputs. All this function does is toggle
elements on or off depending on the date ranges
inputted by the user.

	PARAMS
	======
	Nothing! (void)

	RETURNS
	=======
	Nothing! (void)
*/
	function fOnDateChanged()
	{
		// Store the To and From filter date objects
			var oDateFromObject = $("#nDateFromFilter");
			var oDateToObject   = $("#nDateToFilter"  );

		// Store the values of the 2 data objects
			var nDateFrom = fInputValueToPH9Date( oDateFromObject.val() ).trim();
			var nDateTo   = fInputValueToPH9Date( oDateToObject.val()   ).trim();

		// Select all elements that have a data-to data tag!
			$("#tFairsTable > tbody > tr > [data-to]").filter( function()
			{
				// If the date from is empty
					if(nDateFrom == "")
					{
						// If the date to is also empty
							if(nDateTo == "")
							{
								// Activate everything!
									$(this).parent().toggle( $(this).data("from") == "" || $(this).data("from") != "" );
							}
						// Otherwise just toggle the date from
							else
							{
								$(this).parent().toggle( $(this).data("from") < nDateTo );
							}
					}
				// Else if the date from isn't empty and the date to is empty
					else
					if(nDateTo == "")
					{
						// Only show dates where the date from equal to or greater than the selected date from
							$(this).parent().toggle( $(this).data("from") >= nDateFrom );
					}
				// Otherwise we can just do a normal toggle!
					else
					{
						// Only show elements that are in the date range
							$(this).parent().toggle( $(this).data("to") >= nDateFrom && $(this).data("from") <= nDateTo );
					}
			});
	}

/*
fResetDates()
=============
Resets the date values of the date inputs, this
is simply done by calling the jquery val function
of the date from and the date to. The val function
has an empty string in it's params.

	PARAMS
	======
	Nothing! (void)

	RETURNS
	=======
	Nothing! (void)
*/
	function fResetDates()
	{
		// Reset the values of the filters!
			$("#nDateFromFilter").val("");
			$("#nDateToFilter"  ).val("");

		// Call the on date changed function
			fOnDateChanged();
	}