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

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 -> in the html 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;



	window.addEventListener("orientationchange", function() {
		setTimeout(function(){fCarouselHeightChecker();}, 1000);
	}, false);


//after the DOM is loaded
	$(window).load(function(){
		 // run the calculate initial width and height checker functions
			fCalculateInitialWidth();
			processHeightAdjust('carousel-product-name');
			fCarouselHeightChecker();
			fCategoryButtonColor(1);
			processHeightAdjust('category-box-text-positioning');
			fRecalcOnResize();
	});

//when the window is resized
	$(window).resize(function() {
		// only do this if they havent clicked in an input box
			if($(document.activeElement).attr('type') !== 'text') {
				//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');
			    }, 100);
			}
	});


//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 at least 6 of every option
		for (y = 1; y <= nNumberOfOptions; y++){
			if($(".carousel-item.carousel-option-"+(y)).length<6 && $(".carousel-item.carousel-option-"+(y)).length>0)
			{
				var nClonesNeeded = Math.ceil(6/$(".carousel-item.carousel-option-"+(y)).length)-1;
				var oClones = $(".carousel-item.carousel-option-"+(y));
				for(var i=0; i<nClonesNeeded; i++)
				{
					oClones.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

			if( aCarouselIDs.length > 6 )
			{
				nCalculatedWidth = (i * nCarouselItemDivWidth)-nCarouselItemDivWidth;
			}
			else
			{
				nCalculatedWidth = (i * 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");

		}
}

// handles clicking a categroy by running the hide selected with the new tab
//also changes the colors to indicate the changed tab using the fCategoryButtonColor function
function fCategoryButtonClicked(option){
		if(option == nCurrentlySelectedOption){
			return;
		}else {
			nCurrentlySelectedOption = option;
			fHideNonSelected();
		}

		fCategoryButtonColor(option);
}

//this changes the color of the button selected by removing the
//classes associated with the the active and none active states
function fCategoryButtonColor(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
		if($('#carousel-container').is(":visible"))
		{
				$(".inner-carousel-item").each(function(element){
						var nHeight = 0;
						$(this).children().each(function(element){
							if($(this).prop("tagName")=="A")
							{
								$(this).children().each(function(element){nHeight+=$(this).outerHeight(true);});
							}
							else
							{
								nHeight+=$(this).outerHeight(true);
							}
						});

						if(nHeight >= nCarouselItemHeight){
							nCarouselItemHeight = nHeight;
						}
				});
			//this then loops through the divs and sets all the heights of the inner containers
				$(".inner-carousel-item").each(function(element){
						$(this).height(nCarouselItemHeight+20);
				});
			//these all resize the other parts of the carousel to fit
				var nExcessSectionHeight = 30;
				if($("#first-shopprod-tab").length)
				{
					nExcessSectionHeight = 160;
				}
				$('#carousel-container').height(nCarouselItemHeight+45);
				$('#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);

			if( aCarouselIDs.length < nNumberOfProducts )
			{
				nNumberOfProducts = aCarouselIDs.length;
			}

			nMathmaticalPaddingRequired = ((nContainerWidth-(nDivActualWidth*nNumberOfProducts))/(nNumberOfProducts));
			nCarouselItemDivWidth = nDivActualWidth + nMathmaticalPaddingRequired;
			aCarouselIDs.unshift(aCarouselIDs.pop());
			for (i = 0; i <= aCarouselIDs.length-1; i++)
			{
				if( aCarouselIDs.length > nNumberOfProducts )
				{
					nCalculatedWidth = (i * nCarouselItemDivWidth)-nCarouselItemDivWidth;
				}
				else
				{
					nCalculatedWidth = (i * 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 =====>
		 //  ==================================================================================================================

		 processHeightAdjust('category-box-text-positioning');
	}


//bump the carousel to the left
	function fCarouselLeft(){
	//if the input isnt blocked
		if(bAcceptInput){
			//block input while the animation plays
				bAcceptInput = false;

				// Calculate the offset based on how many items there are
					var nOffset = aCarouselIDs.length > 6 ? aCarouselIDs.length-1 : aCarouselIDs.length;

			//calculates the amount the carousel needs to shift
				nCalculatedLeftShift = (((nOffset) * 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;

		// Calculate the offset based on how many items there are
			var nOffset = aCarouselIDs.length > 6 ? -2 : -1;

		//calculates how far to the left the far right item needs to be placed
			nCalculatedRightShift = ((nOffset * 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;
	  				});
			}
	}
}