Allow users to cycle through categories and products in a mix & match carousel to create an outfit

mixmatch.js

/*
* mix and match js
*/

$( document ).ready(function() {

	/*
	* these need to be accessible outside of the function
	*/

	var		topazzs = getazzs('#topOne .getAzzs'),
				bottomazzs = getazzs('#bottomOne .getAzzs');
				vUrl = 'http://url.com/';

	if(window.location.href.indexOf("url.uat.url") > -1) {
       vUrl = 'http://url.uat.url.com/';
   }
   if(window.location.href.indexOf("url.uat.url") > -1) {
       vUrl = 'http://url.uat.url.com/';
   }

  /*
  * grab azzs from cat block above and push to array
	*/
	function getazzs(selector) {

			var _topazzs = [];

			$(selector).each(function(index, obj)
			{
			  _topazzs.push($(this).text());
			});

			return _topazzs;
	}

	function generatelist(skus, imgC) {

		var 	skuslength = skus.length,
					stringsku = '';

		/*
		* for each sku create an li and grab the image - insert li within ul and add +1 for the slide number
		*/

		for (var i = 0; i < skuslength; i++) {  
			var liclass = (i === 0) ? 'active' : '';
			stringsku += '<li class="' + liclass + '"><img src="' + vUrl + 'url/images/mixmatch/' + skus[i] + imgC + '.jpg" data-mixsku="' + skus[i] + '" alt="slide ' + (i + 1) + '" /></li>';
		}

		return stringsku;

	}

	var starttc = $('#prod-1 .swa img').data('swac'),
	    startbc = $('#prod-2 .swa img').data('swac');

	$('.example-orbit-1').append(generatelist(topazzs, ''));
	$('.example-orbit-2').append(generatelist(bottomazzs, ''));

	function populateprod(element, current_sku) {
		var _deferred = $.Deferred();

		$.ajax ({
			url: vUrl + "invt/" + current_sku + "?temp=minimal_format&layout=noheaders",
			dataType: 'HTML',
			cache: false
		}).done(function(data) {
			console.log('ajax request' + element);
			$(element).html(data);
			removeFirst();
			
			_deferred.resolve();
		});

		return _deferred.promise();
	}

	var loadOne = populateprod('#prod-1', $('.example-orbit-1 li.active img').data('mixsku')),
		loadTwo = populateprod('#prod-2', $('.example-orbit-2 li.active img').data('mixsku'));
	
	$.when( loadOne, loadTwo ).done(function(){
		createSwatch('#prod-1 select', '#prod-1 select option', $('.example-orbit-1 li.active img').data('mixsku'), '#prod-1 .swa');
		createSwatch('#prod-2 select', '#prod-2 select option', $('.example-orbit-2 li.active img').data('mixsku'), '#prod-2 .swa');
	});


	function removeFirst() {
		var 	checkMEone = $('#prod-1 select option:first-child'),
			checkMetwo = $('#prod-2 select option:first-child');
		if ( checkMEone.text() == 'Please Select COLOUR') {
			checkMEone.remove();
		}
		if ( checkMetwo.text() == 'Please Select COLOUR') {
			checkMetwo.remove();
		} 
		/*
		* removes the select colour options
		*/
	}

	function createSwatch(parent, element, current_sku, target) {
		var arrf = [];
		    $(element).each  ( function() {
		       arrf.push ( $(this).val() );
		    });
		console.log ( arrf.join(',' ) );

		$(parent).hide();

		var n = arrf.length;

		for (i = 0; i < n; i++) {
            $(target).append($('<img src="' + vUrl + 'url/resources/images/mixmatch/' + current_sku + '_' + arrf[i] + '.jpg?v=2" data-swac="' + arrf[i] + '" data-sku="' + current_sku + '"/>' )); // CHANGE TO LIVE SWATCHES
        }

        $(target).append($('<div class="qbbtn"><a href="/invt/' + current_sku + '"' + 'class="js-quickBuyDetails" rel="nofollow" data-sku="' + current_sku + '">' + '<button>BUY NOW</button>' + '</a></div>"' ));

	     $('.qbbtn').click(function(event) {
			event.preventDefault();
			Venda.Widget.QuickBuy.addParam( current_sku );
		});
	}

		/* 
		* on click update image with colour
	  */

		$( '#prod-1' ).on( 'click', '.swa img', function() {
			var imgcol = $(this).data('swac'),
			    imgsku = $(this).data('sku'),
			    ipath = $('.example-orbit-1 .active img').attr('src');
			$('.example-orbit-1 .active img').attr('src', vUrl + 'url/resources/images/mixmatch/' + imgsku + imgcol + ".jpg" );
			console.log(imgcol);
		});

		$( '#prod-2' ).on( 'click', '.swa img', function() {
			var imgcol = $(this).data('swac'),
			    imgsku = $(this).data('sku'),
			    ipath = $('.example-orbit-2 .active img').attr('src');
			$('.example-orbit-2 .active img').attr('src', vUrl + 'url/resources/images/mixmatch/' + imgsku + imgcol + ".jpg" );
			console.log(imgcol);
		});

	$(".example-orbit-1").on("orbit:before-slide-change", function(event) {
	  console.log("Slider 1 changed");
	  populateprod('#prod-1', $('.example-orbit-1 li.active img').data('mixsku')).done( function(){
	  	 createSwatch('#prod-1 select', '#prod-1 select option', $('.example-orbit-1 li.active img').data('mixsku'), '#prod-1 .swa');
	  });
	});
	$(".example-orbit-2").on("orbit:before-slide-change", function(event) {
	  console.log("Slider 2 changed");
	  populateprod('#prod-2', $('.example-orbit-2 li.active img').data('mixsku')).done(function(){
	  	createSwatch('#prod-2 select', '#prod-2 select option', $('.example-orbit-2 li.active img').data('mixsku'), '#prod-2 .swa');
	  });
	});
	
});