var spaceForHeader = $('#space-for-header');
var headerWrapper = $('#header-wrapper');
var headerContainerTop = $('#header-container-top');
var logoCenterSpacer = $(".centerSpacer");
var searchbarCol = 	$('#searchbar-col');
var searchBox = $('#searchBox');
var searchBoxInput = $('input[name="sSearchTerm"]');
var socialCol = $('#social-col');
var headerIconCol =	$('#header-icon-col');
var blogBox = $('.blog-box');
var headerSocialIconWrapper =	$('#header-social-icon-wrapper');
var headerIconCol =	$('#header-icon-col');
var socialPrependTest = $('#social-prepend-test');
var logoCol = $('#logo-col');
var navbarPrependWrapper = $('#navbar-prepend-wrapper');
var headerSocialIconWrapper = $('#header-social-icon-wrapper');
var listUnstyled =	$('.list-unstyled');
var isSearchEnabled = true;


$(document).ready(function(){
	fCheckIfSearchIsEnabled();
	fNavBarRearrange();
	// fPrependNav();
});


var width = $(window).width();
var height = $(window).height();

$(window).resize(function(){
	if($(window).width() != width)
	{
		fNavBarRearrange();
	}
});


function fNavBarRearrange(){
	socialCol.removeClass("preload");
	socialCol.height(logoCol.height());
	searchbarCol.removeClass("preload");
	searchbarCol.height(logoCol.outerHeight());
	//origionally used window width but this and the css media query didnt 'match', probably because of the scroll bar.
	//instead I checked for an attribute that changed
	if (socialCol.css('display') == 'none')
	{
		headerIconCol.removeClass('col-xs-3').removeClass('col-xs-12').addClass('col-xs-12');
		socialPrependTest.removeClass('col-xs-9').addClass('col-xs-12');
		logoCol.removeClass('col-xs-6').addClass('col-xs-8');
		headerSocialIconWrapper.prependTo('#social-prepend-test');
		if(searchbarCol.has("form").length != 1){
			headerSocialIconWrapper.addClass('col-xs-12').addClass('social-icons-only-row');
		} else {
			headerSocialIconWrapper.addClass('col-xs-6');
			//logoCol.removeClass('col-xs-10').addClass('col-xs-6');
		}
		searchbarCol.prependTo('#social-prepend-test');
		searchbarCol.removeClass('col-xs-4').addClass('col-xs-6');
		var nSearchBarHeight = headerSocialIconWrapper.outerHeight();
		if(searchBoxInput.outerHeight() > nSearchBarHeight) nSearchBarHeight = searchBoxInput.outerHeight();
		searchbarCol.height(nSearchBarHeight);

		navbarPrependWrapper.prependTo('#navbar-secret-container');

		if (socialPrependTest.css('display') == 'none'){
			headerIconCol.removeClass('col-xs-6').removeClass('col-xs-4').addClass('col-xs-12');
			blogBox.removeClass('col-xs-6').addClass('col-xs-12');
			listUnstyled.removeClass('col-xs-6').addClass('col-xs-12');
		}
	} else {
		headerIconCol.removeClass('col-xs-6').removeClass('col-xs-12').addClass('col-xs-3');
		if(headerIconCol.length) socialPrependTest.removeClass('col-xs-6').addClass('col-xs-9');
		else socialPrependTest.removeClass('col-xs-6').addClass('col-xs-12');
		fCheckIfSearchIsEnabled();

		if(searchbarCol.has("form").length != 1){
			//headerSocialIconWrapper.addClass('col-xs-12').addClass('social-icons-only-row');
		} else {
			//headerSocialIconWrapper.addClass('col-xs-6');
			if(logoCenterSpacer.length)
			{
				logoCenterSpacer.remove();
			}
			logoCol.removeClass('col-xs-8').addClass('col-xs-6');
		}

		navbarPrependWrapper.prependTo('#social-prepend-test');
		headerSocialIconWrapper.appendTo('#social-col');
		headerSocialIconWrapper.removeClass('col-xs-6').removeClass('col-xs-12');
		searchbarCol.appendTo('#header-top-row');
		searchbarCol.removeClass('col-xs-6').addClass('col-xs-4');
		listUnstyled.removeClass('col-xs-12').addClass('col-xs-6');
	}

	spaceForHeader.height(Math.ceil($("#header-wrapper").height()));
	if($("#space-for-header #header-wrapper").length)
	{
		$("#space-for-header #header-wrapper").addClass("floating");
	}
}

$(window).on("load", function(){
	spaceForHeader.height(Math.ceil($("#header-wrapper").height()));
});

function fCheckIfSearchIsEnabled(){
			if(searchbarCol.has("form").length != 1){
							searchbarCol.hide();

							logoCol.removeClass('col-xs-6').removeClass('col-xs-6').addClass('col-xs-10');
		}
}




$('#hamburger-menu-id').click(function(){
		document.getElementById('hamburger-menu-id').style.pointerEvents = 'none';
		$('#hamburger-span-container').toggleClass("span-container-rotate");
		$('#hmbg-line-3').toggleClass("hmbg-span-3-trans");
		$('#hmbg-line-2').toggleClass("hmbg-span-2-trans");
		$('#hmbg-line-1').toggleClass("hmbg-span-1-trans");

		setTimeout(function(){
       		document.getElementById('hamburger-menu-id').style.pointerEvents = 'auto';
    	}, 300);
});


function fValidateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}

$('#emailinput1').on('keyup', function() {
	if(fValidateEmail($('#emailinput1').val())){
		$(this).css('background-color','#c4e1ac');
	} else {
		$(this).css('background-color','#ffc0c2');
	}
});





/*
 * 9) Changing the Menu on Scroll
 * ==============================
 */

// Create variable to hold the last scroll position
	var lastScrollTop = 0;

$(window).scroll(function(event){
	// If the cookie bar exists, increase the headers top by the cookie bars height
		if ($('.cc-cookies').length > 0) {
			$('.cc-cookies').css('position', 'fixed');
			var cookieHeight = $('.cc-cookies').outerHeight(true);

			$('#header-wrapper').css('top', cookieHeight);
		}

	// Get the current scroll position
		var st = $(this).scrollTop();

	// variable for header top row
		var headerTopRow = $('#header-top-row');
		var headerBottomRow = $('#header-bottom-row');

	// variables
		var slideshowPosition = $('.main-page-container').offset().top;
		var yScrollPosition = window.pageYOffset;
		var scrollElementPosition = slideshowPosition;


	// If the current scroll position is greater than the last scroll position, we are scrolling down
		if(st > lastScrollTop+20) {
			// Scrolling down so hide the top menu in the nav if not already hidden
				if (yScrollPosition > scrollElementPosition) {
					if(!headerTopRow.hasClass('hide-header')){
						// If it has the show-header class, remove it
							headerTopRow.className = headerTopRow.removeClass('show-header');

						// Add the hide-header class
							headerTopRow.addClass("hide-header");
					}
				}

			// Store the current scroll position as our last scroll position
				lastScrollTop = st;
		} else if(st < lastScrollTop-20) {
			// Scrolling up so show the top menu in the nav if not already shown
				if(!headerTopRow.hasClass('show-header')){
					// If it has the hide-header class, remove it
						headerTopRow.className = headerTopRow.removeClass('hide-header');

					// Add the show-header class
						headerTopRow.addClass("show-header");
				}

			// Store the current scroll position as our last scroll position
				lastScrollTop = st;
		}

		// If the space for the header is smaller than the header, make it the same height
			var nHeaderHeight = Math.ceil($("#header-wrapper").height());
			if(nHeaderHeight > spaceForHeader.height())
			{
				if($(".cc-cookies").length) nHeaderHeight += $(".cc-cookies").height();
				spaceForHeader.height(nHeaderHeight);
			}

		// if the bar is not at the top then we want to give it a top of 0
			// if (yScrollPosition > scrollElementPosition) {
				// if (st != 0) {
					// $('#header-wrapper').css('top', '0');
				// } else {
					// $('#header-wrapper').removeAttr('style');
				// }
			// } else {
				// if (st != 0) {
					// $('#header-wrapper').css('top', '0');
				// } else {
					// $('#header-wrapper').removeAttr('style');
				// };
			// }
});

// Make sure downdown sub-menu's are never bigger than the screen
	$('.navbar .dropdown').on('shown.bs.dropdown', function()
	{
		var oMenu = $(this).find(".dropdown-menu");
		var aLis = oMenu.find("li");

		var outerWidth = oMenu.outerWidth();
		var outerHeight = oMenu.outerHeight();

		oMenu.css("max-width",window.innerWidth - oMenu.offset().left - 20+"px");
		oMenu.css("max-height",window.innerHeight - oMenu.offset().top - 20+"px");


		/*
		NAVIGATION DROPDOWN TEXT WIDTH - UPDATED ON 14/01/2019 - START
		==============================================================
		Before this update, sub menu's on the navigation tab wrapped at a very small px,
		clients were complaining

			Result before update;            Result after update;

			---------         				 ----------
			|DROPDOWN|                       |DROPDOWN|
			------------------ 			     ------------------------------------------------------
			|This is my inner |              |This is my inner category, the sub menu for dropdown|
			|category, the sub| 			 ------------------------------------------------------
			|menu for dropdown| 			 |This is another category                            |
			-------------------              ------------------------------------------------------
			|This is another  |
			|category         |
			-------------------

		We have to do this fix in JS otherwise it would reworking the navigation system for this theme
		or wouldn't support IE11, so we just simply apply this small fix. It's a bit hacky but it works.
		*/

			// Store the menu's text links
				var oLinkElement = oMenu.find(".navigation-dropdown-item");

			// Store the max width of the text
				var nMenuText_MaxWidth = window.innerWidth / 2;

			// Store the current width of the text, this also stops the navigation text going off screen
				var nMenuTextWidth_Current = window.innerWidth - oMenu.offset().left - 40;

			// Add the no-wrap class to the element, this stops text being able to go on a new line
				oLinkElement.addClass("no-wrap");

			// Loop through each link in the menu
				oLinkElement.each( function()
				{
					// Store the link locally
						oLink = $( this );

					// If the calculated current width is greater than the max-width
						if( nMenuTextWidth_Current > nMenuText_MaxWidth )
						{
							// Set the text current width to the max width
								nMenuTextWidth_Current = nMenuText_MaxWidth;
						}

					// If the text link (a tag)'s width is greater than the calculated width
						if( parseInt(oLink.css("width").replace("px", "") ) > nMenuTextWidth_Current )
						{
							// Remove the no-wrap class so text can be wrapped onto a new line
								oLink.removeClass("no-wrap");

							// Set the width of the navigation to the calculted width
								oLink.css("width", nMenuTextWidth_Current + "px");

							// Set the a link to the new calculated length
								oLink.find("a").css("width", nMenuTextWidth_Current + "px");
						}
				});


		/*
		MULTIPLE NAVIGATION COLUMNS
		===========================
		To ensure that sub menus with tons of content
		in don't look bad, we need to support multi column
		layouts.

			Result before update;           Result after update;

			---------						---------
			|DROPDOWN|						|DROPDOWN|
			------------------     			------------------------------------
			|My Dropdown 1   |				|My Dropdown 1   | My Dropdown 4   |
			------------------				------------------------------------
			|My Dropdown 2   |				|My Dropdown 2   | My Dropdown 5   |
			------------------				------------------------------------
			|My Dropdown 3   |				|My Dropdown 3   | My Dropdown 6   |
			------------------				------------------------------------
			|My Dropdown 4   |
			------------------
			|My Dropdown 5   |
			------------------
			|My Dropdown 6   |
			------------------

		It's important to note though, that when the dropdown box is too big
		(as in all the categories wont fit on the screen) it simply overflows,
		or if on mobile it also overflows, this means that all categories can be
		seen but in a scrollable menu instead. This must be dont to cater for clients
		that might have a stupid amount of sub menu items.
		*/

			// If we are on mobile
				if(window.innerWidth <= 768)
				{
					// Just remove max height
						oMenu.css("overflow-y", "scroll");

					// Remove the max height
						oMenu.css("max-height" , window.innerHeight - oMenu.offset().top);

					// Loop through every list item
						aLis.each( function()
						{
							// Remove any padding left
								$(this).css("paddingLeft", "");
						});
				}
			// If the menu isn't on mobile
				else
				{
					// If there isn't a nav-column
						if( !oMenu.find(".nav-column").length )
						{
							// Store teh amount of menu items
								var nNavMenuCount = aLis.length;

							// Store the max amount of menu items
								var nAmountPerColumn = 15;

							// The amount of padding to the left of the element we have
								var nLeftPadding = 20;

							// Store the number
								var nNumberOfColumns = Math.ceil(nNavMenuCount / nAmountPerColumn);

							// If the number of columns isn't 1
								if( nNumberOfColumns != 1 )
								{
									// Store if it the sub categories will fit
										var bWillItFit = 1;

									// Store the current itteration of the LIs
										var nLIIndex = 0;

									/*
									WIDTH
									=====
									*/

										// Store the max menu width
											var nMaxMenuWidth = 0;

										// Store the total menu width
											var nMenuWidth = 0;

										// Loop through every list item
											aLis.each( function()
											{
												// Increment the LI index
													nLIIndex++;

												// If this list item is the biggest in the column
													if( $(this).width() > nMaxMenuWidth )
													{
														// Set the max width
															nMaxMenuWidth = $(this).width();
													}

												// If we have reached the maximum amount of items in a column
													if ( nLIIndex == nAmountPerColumn )
													{
														// Increment the width by the max width
															nMenuWidth += nMaxMenuWidth;

														// Set the menu width (reset it)
															nMaxMenuWidth = 0;

														// Reset the index
															nLIIndex = 0;
													}
											});

										// If we haven't added the last max menu width
											if( nLIIndex != 0 )
											{
												// Add it
													nMenuWidth += nMaxMenuWidth;
											}

										// If there is more than 1 column
											if( nNumberOfColumns > 1 )
											{
												// Then we need to take the padding into account for every column after the first 1
													nMenuWidth += (nNumberOfColumns - 1) * nLeftPadding;
											}


										// If the menu width is in range
											if( oMenu.offset().left + nMenuWidth >  window.innerWidth )
											{
												bWillItFit = 0;
											}

									/*
									HEIGHT
									======
									*/

										// If the width is fine, then calculate the height
										if( bWillItFit )
										{
											// Store the current column height
												var nColumnHeight = 0;

											// Store the biggest column height
												var nGreatestColumnHeight = 0;

											// Loop through all list items
												for ( var i = 0; i <= aLis.length; i++ )
												{
													// Incrmeent the column height by the list item's height
														nColumnHeight += aLis.eq(i-1).outerHeight();

													// If we have reaced the max amount of items per column
														if(i % nAmountPerColumn === 0)
														{
															// If the column height is greater than the max height
																if(nColumnHeight > nGreatestColumnHeight)
																{
																	// Store the max column height for later
																		nGreatestColumnHeight = nColumnHeight
																}

															// Reset the column height
																nColumnHeight = 0;
														}
												}
										}




										// If the column wont fit
											if( ( ( (oMenu.offset().top - $(window).scrollTop() ) - 20 ) + (nGreatestColumnHeight) ) > window.innerHeight )
											{
												// Set that it wont fit
													bWillItFit = 0;
											}

									/*
									MULTI COLUMN FIX
									================
									*/

										// If it won't fit, just make it scrollable..
											if(!bWillItFit)
											{

												// Just make the element scrollable
													oMenu.css("overflow-y", "scroll");
											}
										// If the colum wrap will fit on the screen
											else
											{

												// Store the left position of the columns
													var nLeft = 0;

												// Loop through all the columns (that we can make)
													for(var i = 1; i<= nNumberOfColumns; i++)
													{
														// Add the navigation column to the menu
															oMenu.append('<div id="nav-col-' + i + '" class="nav-column-wrapped navigation-dropdown nav-column nav-column-'+i+'"></div>');
													}

												// Loop through all the LI items
													for(var i = 1; i <= nNavMenuCount; i++)
													{

														// Work out what column number we are on
															var nColumnNumber = Math.ceil( i / nAmountPerColumn );

														// If this isn't the first column, add some padding
															if( nColumnNumber > 1 )
															{
																// Set the padding of this LI item
																	aLis.eq( i - 1).css("paddingLeft", nLeftPadding);
															}

														// Add the LI item to the correct column
															oMenu.find(".nav-column-"+nColumnNumber).append(aLis.eq(i-1));
													}

												// Loop through all the columns
													for(var i = 1; i<= nNumberOfColumns; i++)
													{
														// Set the correct left position for the column
															$("#nav-col-" + i).css("left", nLeft);

														// Set the correct height for the column
															$("#nav-col-" + i).css("height", nGreatestColumnHeight);

														// Incremnet the left position by the width of this column
															nLeft += $("#nav-col-" + i).width();
													}

											}
								}

						}
				}
	});

	$('.dropdown').on('hidden.bs.dropdown', function()
	{
		var oMenu = $(this).find(".dropdown-menu");
		var aLis = oMenu.find("li");
		var outerHeight = oMenu.outerHeight();
		oMenu.css("max-height", "");
		oMenu.css("overflow-y", "");
		oMenu.css("left", "");

		// Revert any Multi-Columning
			if(oMenu.find(".nav-column").length)
			{
				for(var i=0; i<aLis.length;i++)
				{
					oMenu.find("ul").append(aLis.eq(i));
				}
				oMenu.find(".nav-column").remove();
				oMenu.css("width", "");
			}

		// Store the menus
			var oLinkElement = oMenu.find(".navigation-dropdown-item");

		// Set the menus css width to empty
			oLinkElement.css("width", "");

		// Set the a link to the new\\\\ width of empty
			oLinkElement.find("a").css("width", "");

		// Set the max-width for the dropdown menu
			oMenu.css("max-width", "");

		// Set the max-height for the dropdown menu
			oMenu.css("max-height", "");
	});