/*
view.js
=======
Handles any additional functionality of
the dealer view page.

FLOW
====
1) INCLUDE REQUIRED FILES FOR MULTI-LANG
2) DECALRE VARIABLES
3) ON DOCUMENT READY
4) FUNCTIONS
*/


/*
FUNCTIONS
=========

	fShow_EnquiryForm() - Shows the enquire form
	fEmailEnquiry_Check() - Checks the contents of the form before submitting
	fFilterOrOrderChange() - Changes the order of the items loaded
	fOnWindowResize() - Called when window is rezied, makes order button look dope

*/


/*
2) DECALRE VARIABLES
====================
*/
	// Init a boolean that stores if the enquiry form is open or not
		var isEnquiryFormOpen = false;

	// 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 99ms
	// after the window has been resized. This is done under $(document).ready(function()
		var oResizeTimeout;


/*
3) ON DOCUMENT READY
====================
*/
	$(document).ready(function()
	{
		// Change the order on change
			$("#sOrder").on('change', function(event)
			{
				// Call the function that handles the order change
					fFilterOrOrderChange();
			});

		/*
		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.
		*/

			// If we are shrinked
				if( $(window).width() <= 767 )
				{
					// Append the sOrder selection onto this mobile order div
						$("#mobile-order").append( $("#sOrder") );

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

					// Hide the desktop order by column
						$("#orderByCol").hide();

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

					// Append the left category column onto the filter menu, so we can filter items
						$("#mobile-filter-menu #inner-wrapper").append( $("#leftCatCol") );
				}

		/*
		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 99ms to call fOnWindowResize using requestAnimationFrame to ensure we get the refresh
						oResizeTimeout = setTimeout( function()
						{
							// Request an animation frame to fOnWindowResize
								requestAnimationFrame( fOnWindowResize );

						}, 99);

				});
	});

/*
4) FUNCTIONS
============
*/

	/*
	fShow_EnquiryForm()
	===================
	This funciton is called whne we want to show the enquiry form.
	It also calls an AJAX request to log that someone has tried
	to enquire about the item.

		Param 1 : Nothing (Void)
		Returns : Nothing (Void)
	*/

		function fShow_EnquiryForm()
		{
			// If the enquiry form isn't open
				if( !isEnquiryFormOpen )
				{
					// Set the enquiry form to be open
						isEnquiryFormOpen = true;

					// Show the enquire div with an animation speed of 500ms
						$("#enquireDiv").show(500);

					// Scroll to the form so when users click it on mobile they can see it.
						$('html, body').animate ( { scrollTop: ( ($('#enquireDiv').first().offset().top - ($(window).height() / 5) ) ) }, 500 );

				}

		}


	/*
	fEmailEnquiry_Check()
	=====================
	Called when the user tries to submit an enquiry, this
	funciton makes sure that the form input values are valid,
	and then starts the google recaptcha.

		Param 1 : Nothing (Void)
		Returns : Nothing (Void)

	*/
		// Variable to store if we are on mobile or not.
			var bEmailSubmitting = false;
		
		function fEmailEnquiry_Check()
		{

			// If email is sumitting already
				if( bEmailSubmitting )
				{
					// Exit function
						return;
				}

			// Store that email is submitting
				bEmailSubmitting = true;
			
			// Set width fo button to be equal to curennt dom width if on mobile
				if( $(window).width() >= 768)
				{
					$("#enquiry-submit-button").width( $("#send-enquiry-to-seller-text").width() + "px");
				}
			// If we are on mobile, make sure that the width is correct
				else
				{
					// Remove width from button
						$("#enquiry-submit-button").width("");
				}
				
			// Hide the text
				$("#send-enquiry-to-seller-text").hide();

			// Show the spinner
				$("#send-enquiry-to-seller-spinner").css("display", "inline-block");
			
			// Store a variable to log any errors
				var sErr = "";


			// If the name input is empty
				if (document.fEmailEnquiry.sEmailEnquiry_Name.value=="")
				{
					// Log an error
						sErr += "\n - Name";
				}

			// If the email input is empty
				if (document.fEmailEnquiry.sEmailEnquiry_Email.value=="")
				{
					// Log an error
						sErr += "\n - Email";
				}

			// If the telephone input is empty
				if (document.fEmailEnquiry.sEmailEnquiry_Tel.value=="")
				{
					// Log an error
						sErr += "\n - Tel";
				}

			// If the email input is empty
				if (document.fEmailEnquiry.sEmailEnquiry_Enquiry.value=="")
				{
					// Log an error
						sErr += "\n - Enquiry";
				}


			/* If the terms & conditions aren't checked. */
				if (document.fEmailEnquiry.bEmailEnquiry_Terms.checked==false)
				{
					// Log an error
						sErr += "\n - You need to agree to the terms & conditions and privacy policy";
				}

			/* If the error field has something in it, meaning we have an error */
				if (sErr!="")
				{
					// Hide the spinner
						$("#send-enquiry-to-seller-spinner").hide();
						
					// Show the text
						$("#send-enquiry-to-seller-text").show(0, function()
						{
							// Remove width from button
								$("#enquiry-submit-button").width("");

							// Store we are not submitting email
								bEmailSubmitting = false;
						});

					// Allet the sErr variable
						alert("Please check the following:-\n" + sErr);

					// Reset google recaptcha
						grecaptcha.reset( $('#gCaptcha_Enquiry').attr('data-widget-id') );

				}
			// If there aren't any errors
				else
				{
					// Give google the OK
						grecaptcha.execute( $('#gCaptcha_Enquiry').attr('data-widget-id') );
				}

		}


	/*
	fEmailEnquiry_Submit()
	=====================
	Called when the user submits the enquiry, this function
	simply calls an AJAX request that logs the enquiry.

		Param 1 : Nothing (Void)
		Returns : Nothing (Void)

	*/

		function fEmailEnquiry_Submit()
		{

			/* send the form submission using AJAX */
				$.ajax
				({
					// The URL of the execution script
						url: 'ajax/dealers/dealer_enquire.php?nDealer_ID=4476',

					// The data type
						dataType: 'text',

					// The data to send
						data :
						{
							sEmailEnquiry_Name    : $("#sEmailEnquiry_Name").val(),
							sEmailEnquiry_Email   : $("#sEmailEnquiry_Email").val(),
							sEmailEnquiry_Tel     : $("#sEmailEnquiry_Tel").val(),
							sEmailEnquiry_Enquiry : $("#sEmailEnquiry_Enquiry").val(),
							bEmailEnquiry_RememberMe : $("#bEmailEnquiry_RememberMe").prop("checked") ? 1 : 0,
							bEmailEnquiry_MailingList : $("#bEmailEnquiry_MailingList").prop("checked") ? 1 : 0,
							gRecaptchaResponse    : grecaptcha.getResponse( $('#gCaptcha_Enquiry').attr('data-widget-id') )
						},

					// The request type
						type: 'post',

					// The function called when the AJAX Request has been called
						success: function( sResponse )
						{
							// Store the message
								var sMessage = "";

							// Switch the response
								switch( sResponse )
								{
									case 'missing-data' : sMessage = "We're sorry, your enquiry could not be sent because you haven't provided us with some required information.. Please ensure all information provided is correct and try again."; break;

									case 'telephone-failed' : sMessage = "We're sorry, your enquiry could not be sent because you haven't provided us with a valid telephone number. Please ensure all information provided is correct and try again."; break;

									case 'email-failed' : sMessage = "We're sorry, your enquiry could not be sent because you haven't provided us with a valid email address. Please ensure all information provided is correct and try again."; break;

									case 'contains-web-address' : sMessage = "Your enquiry could not be sent. We have detected a web address or URL in the message which we can not include in the enquiry. Please remove this from your message."; break;

									case 'contains-spam-trigger' : sMessage = "Your enquiry could not be sent. There are spam trigger words detected in the message."; break;

									case 'sent' :

										// If the dealer is away, the away message will attatch onto the google recaptcha under data-dealer-away
											var sDealerAwayMessage = $("#gCaptcha_Enquiry").attr("data-dealer-away");

										// Store the message
											sMessage = "Your enquiry has been sent. " + sDealerAwayMessage;

										// Set the enquiry form to not be open
											isEnquiryFormOpen = false;
		
										// Show the enquire div with an animation speed of 500ms
											$("#enquireDiv").hide(500);
			
										// Scroll to the form so it just looks like the enquiry is closing without page scrolling
											$('html, body').animate ( { scrollTop: ($('h1').offset().top) }, 500 );
												
										break;
								}

							// If the dealer is away, the away message will attatch onto the google recaptcha under data-dealer-away
								var sDealerAwayMessage = $("#gCaptcha_Enquiry").attr("data-dealer-away");

							// Simply show a message saying that our enquiry has been made!
								fShowPageMessage(sMessage);

							// Reset google recaptcha
								grecaptcha.reset( $('#gCaptcha_Enquiry').attr('data-widget-id') );

							// Hide the spinner
								$("#send-enquiry-to-seller-spinner").hide();

							// Show the text
								$("#send-enquiry-to-seller-text").show(0, function()
								{
									// Remove width from button
										$("#enquiry-submit-button").width("");
										
									// Store we are not submitting email
										bEmailSubmitting = false;
								});
						},

					// If there was an error
						error : function()
						{
							// Simply show a message saying that our enquiry has been made!
								fShowPageMessage("There was a problem sending your enquiry. Please try again.");

							// Reset google recaptcha
								grecaptcha.reset( $('#gCaptcha_Enquiry').attr('data-widget-id') );

							// Hide the spinner
								$("#send-enquiry-to-seller-spinner").hide();

							// Remove width from button
								$("#enquiry-submit-button").width("");
								
							// Show the text
								$("#send-enquiry-to-seller-text").show(0, function()
								{
									// Remove width from button
										$("#enquiry-submit-button").width("");
										
									// Store we are not submitting email
										bEmailSubmitting = false;
								});
						}
				});
		}


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

		function fFilterOrOrderChange()
		{

			/*
			store cookies
			=============
			*/
				/* order */
					var sOrder = $( "#sOrder option:selected" ).val();
					$.cookie("dealer_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);

				// 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") );

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

							// Hide the desktop order by column
								$("#orderByCol").hide();

							// Append the left category column onto the filter menu, so we can filter items
								$("#mobile-filter-menu #inner-wrapper").append( $("#leftCatCol") );

							// Make it so the order button has a hover effect (Cursor)
								$("#sOrder").addClass("hov");
						}
				}
				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
								$("#orderByCol").append( $("#sOrder") );

							// 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");

							// Show the mobiile order by column
								$("#orderByCol").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");
						}
				}
		}