$( document ).ready(function() {
		fButton1Dimensions();
		fButton2Dimensions();
		fButton3Dimensions();
		fButton4Dimensions();
		fButton5Dimensions();
		fButton6Dimensions();
		fButton7Dimensions();
		fButton8Dimensions();
		fButton9Dimensions();
		fButton10Dimensions();
	});

	$(window).resize(function() {
		fButton1Dimensions();
		fButton2Dimensions();
		fButton3Dimensions();
		fButton4Dimensions();
		fButton5Dimensions();
		fButton6Dimensions();
		fButton7Dimensions();
		fButton8Dimensions();
		fButton9Dimensions();
		fButton10Dimensions();
	});

	function fButton1Dimensions(){
		$('#button-col-1').height($('#button-col-1').width());
		nButton1Height = $('#button-col-1').height();
		nButton1Width = $('#button-col-1').innerWidth();
		$('#button-col-1 > .button-background-container-1').height(nButton1Height);
	    $('#button-col-1 > .button-background-div-1').height(2*nButton1Height);
		$('#button-col-1 > .button-background-container-1').width(nButton1Width);
	    $('#button-col-1 > .button-background-div-1').width(nButton1Width);
	}

	function fButton2Dimensions(){
		$('#button-col-2').height((($('#button-col-1').width())/2)-15);
		nButton2Height = $('#button-col-2').height();
		nButton2Width = $('#button-col-2').innerWidth();
		$('#button-col-2 > .button-background-container-1').height(nButton2Height);
	    $('#button-col-2 > .button-background-div-1').height(2*nButton2Height);
		$('#button-col-2 > .button-background-container-1').width(nButton2Width);
	    $('#button-col-2 > .button-background-div-1').width(nButton2Width);
	}

	function fButton3Dimensions(){
		$('#button-col-3').height((($('#button-col-1').width())/2)-15);
		nButton3Height = $('#button-col-3').height();
		nButton3Width = $('#button-col-3').innerWidth();
		$('#button-col-3 > .button-background-container-1').height(nButton3Height);
	    $('#button-col-3 > .button-background-div-1').height(2*nButton3Height);
		$('#button-col-3 > .button-background-container-1').width(nButton3Width);
	    $('#button-col-3 > .button-background-div-1').width(nButton3Width);
	}

	function fButton4Dimensions(){
		$('#button-col-4').height($('#button-col-1').height());
		nButton4Height = $('#button-col-4').height();
		nButton4Width = $('#button-col-4').innerWidth();
		$('#button-col-4 > .button-background-container-1').height(nButton4Height);
	    $('#button-col-4 > .button-background-div-1').height(2*nButton4Height);
		$('#button-col-4 > .button-background-container-1').width(nButton4Width);
	    $('#button-col-4 > .button-background-div-1').width(nButton4Width);
	}

	function fButton5Dimensions(){
		var nButton1Selector = $("#button-col-1");
		if(nButton1Selector.length)
		{
			$('#button-col-5').height(nButton1Selector.height());
		}
		else
		{
			$('#button-col-5').height($('#button-col-5').width()*1.2);
		}
		nButton5Height = $('#button-col-5').height();
		nButton5Width = $('#button-col-5').innerWidth();
		$('#button-col-5 > .button-background-container-1').height(nButton5Height);
	    $('#button-col-5 > .button-background-div-1').height(2*nButton5Height);
		$('#button-col-5 > .button-background-container-1').width(nButton5Width);
	    $('#button-col-5 > .button-background-div-1').width(nButton5Width);
	}

	function fButton6Dimensions(){
		$('#button-col-6').height($('#button-col-5').height());
		nButton6Height = $('#button-col-6').height();
		nButton6Width = $('#button-col-6').innerWidth();
		$('#button-col-6 > .button-background-container-1').height(nButton6Height);
	    $('#button-col-6 > .button-background-div-1').height(2*nButton6Height);
		$('#button-col-6 > .button-background-container-1').width(nButton6Width);
	    $('#button-col-6 > .button-background-div-1').width(nButton6Width);
	}

	function fButton7Dimensions(){
		$('#button-col-7').height($('#button-col-5').height());
		nButton7Height = $('#button-col-7').height();
		nButton7Width = $('#button-col-7').innerWidth();
		$('#button-col-7 > .button-background-container-1').height(nButton7Height);
	    $('#button-col-7 > .button-background-div-1').height(2*nButton7Height);
		$('#button-col-7 > .button-background-container-1').width(nButton7Width);
	    $('#button-col-7 > .button-background-div-1').width(nButton7Width);
	}

	function fButton8Dimensions(){
		nButton8Height = $('#button-col-8').height();
		nButton8Width = $('#button-col-8').innerWidth();
		$('#button-background-container-8').height(nButton8Height);
	    $('#button8-background-div-1').height(nButton8Height);
		$('#button-background-container-8').width(nButton8Width);
	    $('#button8-background-div-1').width(nButton8Width);
	}

	function fButton9Dimensions(){
		nButton9Height = $('#button-col-9').height();
		nButton9Width = $('#button-col-9').innerWidth();
		$('#button-background-container-9').height(nButton9Height);
	    $('#button9-background-div-1').height(nButton9Height);
		$('#button-background-container-9').width(nButton9Width);
	    $('#button9-background-div-1').width(nButton9Width);
	}

	function fButton10Dimensions(){
		nButton10Height = $('#button-col-10').height();
		nButton10Width = $('#button-col-10').innerWidth();
		$('#button-background-container-10').height(nButton10Height);
	    $('#button10-background-div-1').height(nButton10Height);
		$('#button-background-container-10').width(nButton10Width);
	    $('#button10-background-div-1').width(nButton10Width);
	}




	$(window).on("load", function()
	{
									processHeightAdjust('under-products-text');

							processHeightAdjust('under-products-price');

									processHeightAdjust('blog-title-container');

							processHeightAdjust('blog-text-container');
	});

	$(window).on("resize", function()
	{
									processHeightAdjust('under-products-text');

							processHeightAdjust('under-products-price');

									processHeightAdjust('blog-title-container');

							processHeightAdjust('blog-text-container');
	});


	//declare the array
		var processHeightJsNodes = [];

	function processHeightAdjust()
	{
		// Checks that processHeightJsNodes array exists, if not create it
			var processHeightJsNodes = processHeightJsNodes || [];

		// Looks to see if the values have been cached if not, assigns them
		    if(! processHeightJsNodes[0])
		    {
			    for (i = 0; i < arguments.length; i++)
			    {
			    	// Takes the arguments, finds the nodes and pushes them to the procressHeightJSNodes array
						processHeightJsNodes.push(document.getElementsByClassName(arguments[i]));
				}
			}

	    // For each ccs class
		    for (i = 0; i < processHeightJsNodes.length; i++)
		    {
			    var max = 0;
			    var elements = [];

			    // Assign the notes to the elents array
			    	elements = processHeightJsNodes[i];

			    // Look through them, if the height is more than the max height make it the max height
				    for (x = 0; x < elements.length; x++)
				    {
				    	elements[x].removeAttribute("style");
				    	if(elements[x].clientHeight > max) max=Math.ceil(elements[x].clientHeight);
				    }

				    for (y = 0; y < elements.length; y++)
				    {
						// Loop through the elements and apply that max height to them all
							elements[y].setAttribute("style","height:"+max+"px");
					}
			}
	}



	var aCarouselIDs = [];
	var aCarouselHiddenIDs = [];
	var nCarouselItemDivWidth = 0;
	var nNumberOfCarouselItems = 0;

	var bAcceptInput= true;
	var bAcceptInput = true;

	var nDivActualWidth = 240;
	var nMathmaticalPaddingRequired = 0;

	var nCarouselItemHeight = 0;
	var nCurrentlySelectedOption = 1;
	//this is linked the the number of buttons you want to change the contents of your slider
	//the default for this is for, in the hmtml ensure that anything with the 'carousel-item'
	//class also has an 'carousel-option-x'

	//currently only works if they have at least 1 of of each option
	var nNumberOfOptions = 3;

	//after the DOM is loaded
		$(document).ready(function(){
			 		// run the calculate initial width and height checker functions
				fCalculateInitialWidth();
				fCarouselHeightChecker();
				fCartegoryButtonColor(1);
		});

	//when the window is resized
		$(window).resize(function() {
				//use a timeout the fires 'resize end' 500 ms after you have stopped resizing
			    if(this.resizeTO) clearTimeout(this.resizeTO);
			    this.resizeTO = setTimeout(function() {
			    	//fire resizeEnd
			        $(this).trigger('resizeEnd');
			    }, 500);
		});


	//creates new funtion that is fired on the trigger
		$(window).bind('resizeEnd', function() {
				//runs the recalculate on resize method
			   fRecalcOnResize();
		});



	  //This is used to calculate the simulated width of the carousel items

		function fCalculateInitialWidth(){
			//Gets the outer width of the carousel container
				nContainerWidth = $("#carousel-container").outerWidth();
			//this divides the width of the divs by the width of the container than rounds down
			//to show the maximum number of whole items that can be shown on the carousel at once
				nNumberOfProducts = Math.floor(nContainerWidth/nDivActualWidth);
			//this finds the sum of those divs then minuses it from the total width to show how many pixels
			//would be left over, i then divides bu the number of items being show to calculate the distribution
			//of left over pixels amongst the iteme
				nMathmaticalPaddingRequired = ((nContainerWidth-(nDivActualWidth*nNumberOfProducts))/(nNumberOfProducts));
			//it then adds that number the to width of the div so that the positional maths leaves enoughs space between them
				nCarouselItemDivWidth = nDivActualWidth + nMathmaticalPaddingRequired;
			//calls the function to handle the array that tracks the locations
			fRearrangeInitialArray();
		}

	function fRearrangeInitialArray(){

			//This resets an incremental id
			nIDToBEIncremented = 0;


			//ensures there are 6 of every option
			for (y = 0; y <= nNumberOfOptions; y++){
				$(".carousel-item.carousel-option-"+(y+1)).each(function(element){
					for (i = 0; i <= 6; i++){
						//if less than 6
						if($(this).length < 6){
							//copy paste the current element
							$(this).each(function(element){
								$(this).clone().appendTo('#carousel-item-controller');
							});
						}
					}
				});
			}

			fHideNonSelected();

			//assign everything an id
				$('.carousel-item').each(function(element){
					$(this).attr('id', 'carousel-item-'+nIDToBEIncremented);
					nIDToBEIncremented++;
				});

			fHideNonSelected();

	}

	function fHideNonSelected(){
			aCarouselIDs.length = 0;
			aCarouselHiddenIDs.length = 0;

			$('.carousel-item').each(function(element){
					if($(this).hasClass("carousel-option-"+nCurrentlySelectedOption)){
						aCarouselIDs.push($(this).attr("id"));

					} else {
						aCarouselHiddenIDs.push($(this).attr("id"));
					}
				});

				for (s = 0; s <= aCarouselIDs.length-1; s++){
					$(".carousel-item[id='"+aCarouselIDs[s]+"']").css("display","block");
				}

				for (s = 0; s <= aCarouselHiddenIDs.length-1; s++){
					$(".carousel-item[id='"+aCarouselHiddenIDs[s]+"']").css("display","none");
				}

			fCarouselHeightChecker();

			//redirects the to the function that sets the starting positions of the carousel items
				fAssignInitialPosition();
	}


	function fAssignInitialPosition(){
		//this takes the final nemeber of the id array and pushes it to the front
			aCarouselIDs.unshift(aCarouselIDs.pop());
		//this loops throught the carouselIDarray by index
			for (i = 0; i <= aCarouselIDs.length-1; i++){
			//this calculated how much 'left' positioning each member needs, as the final item has been pushed to the front it times the number by its position in the array
			//then minus's the width of one, this ensures that there is an item hidden off the left of the carousel ready for the first scroll
				nCalculatedWidth = (i * nCarouselItemDivWidth)-nCarouselItemDivWidth;
			//this then positions the items using the left positioning and adds half of the fake padding to center the carousel
				$(".carousel-item[id='"+aCarouselIDs[i]+"']").css("left",(nCalculatedWidth+(nMathmaticalPaddingRequired/2))+"px");
			}
	}


	function fCategoryButtonClicked(option){
		console.log('fired');
			if(option == nCurrentlySelectedOption){
				return;
			}else {
				nCurrentlySelectedOption = option;
				fHideNonSelected();
			}

			fCartegoryButtonColor(option);
	}


	function fCartegoryButtonColor(number){
		$(".carousel-tab").each(function(element){
			if($(this).is("#carousel-tab-"+number)){
				$(this).addClass("carousel-tab-active");
			} else {
				if($(this).hasClass("carousel-tab-active")){
					$(this).removeClass("carousel-tab-active");
				}
			}

		});
	}



	function fCarouselHeightChecker(){

		//this checks each item for its size, if it is the largest it overwrites the saved max size
			$(".inner-carousel-item").each(function(element){
					if($(this).outerHeight() >= nCarouselItemHeight){
						nCarouselItemHeight = $(this).outerHeight();
					}
			});
		//this then loops through the divs and sets all the heights of the inner containers
			$(".inner-carousel-item").each(function(element){
					$(this).height(nCarouselItemHeight);
			});
		//these all resize the other parts of the carousel to fit
			$('#carousel-section').height(nCarouselItemHeight+30);
			$('#carousel-container').height(nCarouselItemHeight+30);
			$('#carousel-left-button').height(nCarouselItemHeight+30);
			$('#carousel-right-button').height(nCarouselItemHeight+30);
		//this line hieght is a bit of a cheek to center the left and right arrow of the carousel
			$('.carousel-button-icon').each(function(element){
				$(this).css("line-height",((nCarouselItemHeight+30)+"px"));
			});

	}



	/*
	 * The purpose of this is to recalculate the emulated
	 *padding of the items with in the carousel on resize
	 */
		function fRecalcOnResize(){
			//finds the new conainer width
				nContainerWidth = $("#carousel-container").outerWidth();

			 //  ==================================================================================================================
			 // <====  Betweeen these two bracers see above, uses the same code as loaded on launch with a few steps added in =====>
				nNumberOfProducts = Math.floor(nContainerWidth/nDivActualWidth);
				nMathmaticalPaddingRequired = ((nContainerWidth-(nDivActualWidth*nNumberOfProducts))/(nNumberOfProducts));
				nCarouselItemDivWidth = nDivActualWidth + nMathmaticalPaddingRequired;
				aCarouselIDs.unshift(aCarouselIDs.pop());
				for (i = 0; i <= aCarouselIDs.length-1; i++){
					nCalculatedWidth = (i * nCarouselItemDivWidth)-nCarouselItemDivWidth;
					$(".carousel-item[id='"+aCarouselIDs[i]+"']").css("left",(nCalculatedWidth+(nMathmaticalPaddingRequired/2))+"px");
				}
			 // <====  Betweeen these two bracers see above, uses the same code as loaded on launch with a few steps added in =====>
			 //  ==================================================================================================================
		}


	//bump the carousel to the left
		function fCarouselLeft(){
		//if the input isnt blocked
			if(bAcceptInput){
				//block input while the animation plays
					bAcceptInput = false;
				//calculates the amount the carousel needs to shift
					nCalculatedLeftShift = (((aCarouselIDs.length-1) * nCarouselItemDivWidth)+(nMathmaticalPaddingRequired/2));
				//this rearranges the array and performs the transformation
					$(".carousel-item[id='"+aCarouselIDs[0]+"']").css("left",nCalculatedLeftShift+"px");
					aCarouselIDs.push(aCarouselIDs.shift());
					for (i = 0; i <= aCarouselIDs.length; i++){
						$(".carousel-item[id='"+aCarouselIDs[i]+"']").animate({
							left:"-="+ nCarouselItemDivWidth
							},500,function() {
								//after the animation has played it reenables input
				    			bAcceptInput = true;
				  			});
					}
			}
		}

	//bump the carousel to the left
	function fCarouselRight(){
		//if input isnt blocked
		if(bAcceptInput){
			//block input
				bAcceptInput = false;
			//calculates how far to the left the far right item needs to be placed
				nCalculatedRightShift = ((-2 * nCarouselItemDivWidth)+(nMathmaticalPaddingRequired/2));
			//rearrange the items in space based on the array
				$(".carousel-item[id='"+aCarouselIDs[aCarouselIDs.length-1]+"']").css("left",nCalculatedRightShift+"px");
			//changes the array based on the locations in the carousel
				aCarouselIDs.unshift(aCarouselIDs.pop());
			//performs the transition
				for (i = 0; i <= aCarouselIDs.length; i++){
					$(".carousel-item[id='"+aCarouselIDs[i]+"']").animate({
						left:"+="+ nCarouselItemDivWidth
						},500,function() {
							//allows input after the animation has finished
		   					 bAcceptInput = true;
		  				});
				}
		}
	}