/*
READ ME
READ ME
READ ME
READ ME
READ ME

PLEASE MINIFY AND UPDATE HOME.MIN.JS USING THE FOLLOWING TOOL -:
https://beautifytools.com/javascript-minifier.php

SORRY, THERE ISN'T AN AUTOMATED TOOL CURRENTLY FOR JS
*/


var carSelectButton = $('#car-select-button');
var regEnterCol = $('div.reg-enter-col');
var optionButton = $('.option-button');
var sliderContainer = $('div.slider-container');


$(document).ready(function(){
	carSelectButton.click();
	fTabbedFormResize();
});

$(window).resize(function(){
	fTabbedFormResize();
});

function fTabbedFormHandler(category,form){
	// the next part works based on the naming convention of the divs:

	// 		#[category]-covers-img                <- for the column holding the image. eg the car or the bike
	// 		#[category]-[form type]-input-col    <- for the input field required. eg the reg or the make/model drowdown

	// so the two arguments that are accepted are the category and the form type
	// all of the columns are cycles through and hidden if they dont match the naming convention and shown if they do.
	$catsuffix = '-covers-img';
	$inputsuffix = '-input-col';
	$btnsuffix = '-select-button';
	regEnterCol.each(function(element){
		if(this.id == category+$catsuffix || this.id == category+'-'+form+$inputsuffix) {
			$(this).show();
		} else{
			$(this).hide();
		}
	});
	//this part manages the button class ensuring the correct one is highlighted
	optionButton.each(function(element){
		if(this.id == category+$btnsuffix){
			$(this).addClass('option-button-hover');
		} else {
			$(this).removeClass('option-button-hover');
		}
	});
}

//this rearranges the form based on the collapse point
//of the toolbar into mobile so it is a smooth transition
function fTabbedFormResize(){
	//controlled by a window width of less that 768 px
	if($(window).width() < 768 ){
		//make full width by swapping the bootstrap class
		regEnterCol.each(function(element){
			$(this).removeClass('col-xs-6').addClass('col-xs-12');
		});

	//hide the slider
	sliderContainer.hide();

		//else is literally the opposite of above
	} else {

		regEnterCol.each(function(element){
			$(this).removeClass('col-xs-12').addClass('col-xs-6');
		});
	sliderContainer.show();
	}

}

/*
GET MODELS WHICH HAVE PRODUCTS IN THE SPECIFIED SHOP PROD CATEGORY (sRootID)
*/
function fVehicleModelDropdown(oElement, sRootID) {
	var $oElement = $(oElement);
	var val = $oElement.val();
	var nRootCat_ID = $("#"+sRootID).val();
	var oVehicleModelDropdown = $oElement.parent().find(".vehicle-model-dropdown").eq(0);
	$.ajax({
		type: "POST",
		url: "ajax/vehicle_get-models.php",
		data:{nVehicleMake_ID: val, nRootCat_ID: nRootCat_ID},
		success: function(data){
			oVehicleModelDropdown.html(data);
		}
	});
}

/*
GET MODELS WHICH ARE LINKED TO THE SPECIFIED PRODUCT (nShopProd_ID)
*/
function fVehicleModelDropdownShopProd(oElement, nShopProd_ID) {
	var $oElement = $(oElement);
	var val = $oElement.val();
	var oVehicleModelDropdown = $oElement.parent().find(".vehicle-model-dropdown").eq(0);
	$.ajax({
		type: "POST",
		url: "ajax/vehicle_get-models.php",
		data:{nVehicleMake_ID: val, nShopProd_ID: nShopProd_ID},
		success: function(data){
			oVehicleModelDropdown.html(data);
		}
	});
}

function fchkfrm($sFormName)
{
	// Has the make AND model been filled out?
		var nVehicleMake_ID = $("form[name='"+$sFormName+"'] select[name='nVehicleMake_ID']").eq(0).val();
		var nVehicleModel_ID = $("form[name='"+$sFormName+"'] select[name='nVehicleModel_ID']").eq(0).val();

	if(nVehicleMake_ID=="" || nVehicleMake_ID=="0" || nVehicleMake_ID==null)
	{
		alert("Please select a make.");
		return false;
	}

	if(nVehicleModel_ID=="" || nVehicleModel_ID=="0" || nVehicleModel_ID==null)
	{
		alert("Please select a model.");
		return false;
	}
}


/*
catousel.js
===========
*/

//current x translattion, defaults at -55% 
$sCurrentTX = -55;
// on load directly applies this transforms to center
	$(window).on("load", function(){		
		fSetXTranslate(-55);
	});



//this calculates the transformation value based an 
//interpolation betweem the current value and desired 
//final value
function fAnimationHandler($deltaX){
	
	// Animate the element's value from x to y:
	  	$translateTo = $sCurrentTX + $deltaX;
  	
  	//checks if the image wrapper is off the site and hides
  	//the button in that direction if that is the case
  	//also sets the max distance it can be translated to 
  	//the end of the wrapper
	  	if($translateTo < -75){		
			$translateTo = -75;
			$('#left-caret').hide();
			
		}  else if($translateTo > -25){
			
			$translateTo = -25;
			$('#right-caret').hide();
			
		} else {
			
			//if its on screen then it ensures both navigation 
			// buttons are visible
			$('#right-caret').show();
			$('#left-caret').show();
		}
  	
  	//this interpolates 'some value' between the current position and the desired
  	//position then applies this directly to the transform translate x
  	$({someValue: $sCurrentTX}).animate({someValue: $translateTo}, {
	      duration: 3000,
	      easing:'easeOutQuart', // can be anything
	      step: function() { // called on every step
	          // Update the element's text with rounded-up value:
	          fSetXTranslate(this.someValue);    
	      } ,
	      complete: function() {
	      	console.log("finish");
	      }
  	});
}




//manutally assigns the transform values to the css
function fSetXTranslate($value){
		
	//assigns the current transformation to the saved variavle
		$sCurrentTX = $value;	
	//individual applies the % translation using all of the vendor prfixes
		$('#carousel-icon-wrapper').css({
		    "webkitTransform":"translateX("+$value+"%)",
		    "MozTransform":"translateX("+$value+"%)",
		    "msTransform":"translateX("+$value+"%)",
		    "OTransform":"translateX("+$value+"%)",
		    "transform":"translateX("+$value+"%)"
		});	
	
}

function fArrow($val){
	//this is for the arrows, just feels the value into the 
	//animation handler.
	//thought it was more clear to modulate it this way
	fAnimationHandler($val);
}





/*
slideshow.js
============
*/

	var oSlideshowInterval = null;
	var nPointer = 0;
	var aSlideIDs = [];
	var bTransitioning = false;
	var nSeconds = 4;

	$(window).on("load", function(){
		$(".slide").each(function(element){
			aSlideIDs.push($(this).attr("id"));
		});
		nPointer = aSlideIDs.length-1;
		$('<div class="loading"></div>').appendTo(".slides-container");


		oSlideshowInterval = setInterval(function(){
			if(bTransitioning) return;
			bTransitioning = true;
			nPointer++;
			if(nPointer>(aSlideIDs.length-1)) nPointer = 0;
			fRenderSlides();
		},nSeconds*1000);

	});


	function fRenderSlides()
	{
		var $oLastImage = $(".slide[id='"+aSlideIDs[nPointer]+"']").last();
		$(".slide[id!='"+aSlideIDs[nPointer]+"']").each(function(){
			$(this).fadeOut(1000);
		});

		// If we have a data image (Lazyloading, then load the next slide's image)
			if( $oLastImage.attr("data-image") != null )
			{
				$oLastImage.css("background-image", "url(" + $oLastImage.attr("data-image") + ")");
				$oLastImage.removeAttr("data-image");
			}

		$oLastImage.fadeIn(1000);

		setTimeout(function(){
			bTransitioning = false;
		}, 1000);
	}

	function fLeft()
	{
		if(bTransitioning) return;
		bTransitioning = true;
		if(oSlideshowInterval!=null) clearInterval(oSlideshowInterval);
		nPointer++;
		if(nPointer>(aSlideIDs.length-1)) nPointer = 0;
		fRenderSlides();
	}

	function fRight()
	{
		if(bTransitioning) return;
		bTransitioning = true;
		if(oSlideshowInterval!=null) clearInterval(oSlideshowInterval);
		nPointer--;
		if(nPointer<0) nPointer = aSlideIDs.length-1;
		fRenderSlides();
	}