/* --------------------------------------------
   jQuery code for details page recommendations */
if ( (jQuery('#prodspecs').length > 0)  ) {
	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-shelf-renderer", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

// truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		var displayURL= rec_data.url.replace("http://www.autozone.com", "");
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}

		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + displayURL + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + displayURL + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;
	});
	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-shelf-renderer", function (slot_element){

		var headerText = "Other Customers Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-shelf-outer"><div class="recommendations-header"><h4>' + headerText + '</h4></div><div class="recommendations-inner"><div id="carousel-shelf" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {

	    	// NOTE: We want TWO records per 'li' element, so we need to only create a new 'li' element
	    	// for the first iteration, then every 2nd iteration of this loop.

	    	// If carousel index (i+1) is odd, create new 'li', reset innerHTML string.
	    	if ((i+1) % 2) {

	    		// Create a new 'li' element
	    		li = document.createElement('li');
	    		liInnerHTML = "";
}


	    	// Call the builder method
	    	liInnerHTML = liInnerHTML + ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-shelf-renderer");


	    	// If carousel index (i+1) is even, append the 'li'
	    	if ( !((i+1) % 2) ) {

	    		// Obtain a reference to the nested 'ul' element.
	        	ul = jQuery(slot_element).find("ul");

	    		// Insert the HTML into the 'li' element
	    		li.innerHTML = liInnerHTML;

	        	// Append the new 'li' element.
	        	ul.append(li);
	    	}

	    }

	    // 'ul' element should now be built and contain the necessary 'li' elements.  Convert to a jCarousel.
		jQuery('#carousel-shelf').jcarousel({
		});
	});
}


/* ---------------------------------------------
/* --------------------------------------------
   jQuery code for shelf page recommendations */
if ( (jQuery('#site-accessories-shelf').length > 0) || (jQuery('#site-parts-shelf').length > 0) || (jQuery('#recAlt').length > 0) || (jQuery('#category-landing').length > 0) || (jQuery('#site-oem-shelf').length > 0)) {

	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-shelf-renderer", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

		// truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		var displayURL =rec_data.url.replace("http://www.autozone.com", "");
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}
		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + displayURL + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + displayURL + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;
	});


	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-shelf-renderer", function (slot_element){

		var headerText = "Other Customers Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-shelf-outer"><div class="recommendations-header"><h4>' + headerText + '</h4></div><div class="recommendations-inner"><div id="carousel-shelf" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {

	    	// NOTE: We want TWO records per 'li' element, so we need to only create a new 'li' element
	    	// for the first iteration, then every 2nd iteration of this loop.

	    	// If carousel index (i+1) is odd, create new 'li', reset innerHTML string.
	    	if ((i+1) % 2) {

	    		// Create a new 'li' element
	    		li = document.createElement('li');
	    		liInnerHTML = "";
	    	}


	    	// Call the builder method
	    	liInnerHTML = liInnerHTML + ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-shelf-renderer");


	    	// If carousel index (i+1) is even, append the 'li'
	    	if ( !((i+1) % 2) ) {

	    		// Obtain a reference to the nested 'ul' element.
	        	ul = jQuery(slot_element).find("ul");

	    		// Insert the HTML into the 'li' element
	    		li.innerHTML = liInnerHTML;

	        	// Append the new 'li' element.
	        	ul.append(li);
	    	}

	    }

	    // 'ul' element should now be built and contain the necessary 'li' elements.  Convert to a jCarousel.
		jQuery('#carousel-shelf').jcarousel({
		});

		applyCorners('.recommendations-inner', 0, 0, 10, 10);
		applyCorners('.recommendations-header', 10, 10, 0, 0);
	});
}




/* --------------------------------------------
jQuery code for 2 Column page recommendations */
if ( (jQuery('#TwoColRecs').length > 0)  ) {

	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-shelf-renderer", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

//truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		var displayURL= rec_data.url.replace("http://www.autozone.com", "");
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}
		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + displayURL + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + displayURL + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;
	});

	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-shelf-renderer", function (slot_element){

		var headerText = "Other Customers Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-2Col-outer"><div class="recommendations-header"><h4>' + headerText + '</h4></div><div class="recommendations-inner"><div id="carousel-shelf" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {

	    	// NOTE: We want TWO records per 'li' element, so we need to only create a new 'li' element
	    	// for the first iteration, then every 2nd iteration of this loop.

	    	// If carousel index (i+1) is odd, create new 'li', reset innerHTML string.


	    		// Create a new 'li' element
	    		li = document.createElement('li');
	    		liInnerHTML = "";



	    	// Call the builder method
	    	liInnerHTML = liInnerHTML + ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-shelf-renderer");


	    	// If carousel index (i+1) is even, append the 'li'


	    		// Obtain a reference to the nested 'ul' element.
	        	ul = jQuery(slot_element).find("ul");

	    		// Insert the HTML into the 'li' element
	    		li.innerHTML = liInnerHTML;

	        	// Append the new 'li' element.
	        	ul.append(li);
	    }

	    // 'ul' element should now be built and contain the necessary 'li' elements.  Convert to a jCarousel.
		jQuery('#carousel-shelf').jcarousel();
	});
}

/* --------------------------------------------
jQuery code for 1 Column page recommendations */
if ( (jQuery('#ColRecs1').length > 0)  ) {

	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-shelf-renderer", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

//truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		var displayURL= rec_data.url.replace("http://www.autozone.com", "");
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}
		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + displayURL + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + displayURL + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;
	});

	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-shelf-renderer", function (slot_element){

		var headerText = "Other Customers Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-1Col-outer"><div class="recommendations-header"><h4>' + headerText + '</h4></div><div class="recommendations-inner"><div id="carousel-shelf" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {

	    	// NOTE: We want TWO records per 'li' element, so we need to only create a new 'li' element
	    	// for the first iteration, then every 2nd iteration of this loop.

	    	// If carousel index (i+1) is odd, create new 'li', reset innerHTML string.


	    		// Create a new 'li' element
	    		li = document.createElement('li');
	    		liInnerHTML = "";



	    	// Call the builder method
	    	liInnerHTML = liInnerHTML + ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-shelf-renderer");


	    	// If carousel index (i+1) is even, append the 'li'


	    		// Obtain a reference to the nested 'ul' element.
	        	ul = jQuery(slot_element).find("ul");

	    		// Insert the HTML into the 'li' element
	    		li.innerHTML = liInnerHTML;

	        	// Append the new 'li' element.
	        	ul.append(li);


	    }


	    // 'ul' element should now be built and contain the necessary 'li' elements.  Convert to a jCarousel.
		jQuery('#carousel-shelf').jcarousel({

		});



	});

}




/* ---------------------------------------------

/* ---------------------------------------------
   jQuery code for shopping cart recommendations */

if (jQuery('#site-shopping-cart').length > 0) {




	//make the parts tab disappear early
	jQuery('#tab-content-parts').css({display: 'none'});




	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-cart-renderer-accessories", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

        // truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		var displayURL = rec_data.url.replace("http://www.autozone.com", "");
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}
		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + displayURL + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + displayURL + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;

	});



	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-cart-renderer-accessories", function (slot_element){

		var headerText = "Other Customers Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-cart-outer"><div class="recommendations-header"><h4>' + headerText + '</h4></div><div class="recommendations-inner"><div id="carousel-cart-accessories" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {


	    	// Create a new 'li' element
	    	li = jQuery(document.createElement('li'));

	    	// Call the builder method
	    	li.html( ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-cart-renderer-accessories") );

    		// Obtain a reference to the nested 'ul' element.
        	ul = jQuery(slot_element).find("ul");

        	// Append the new 'li' element.
        	ul.append(li);
	    }


		// create cart carousel (accessories)
		jQuery('#carousel-cart-accessories').jcarousel({
		});

	});







	// Builder method - creates the HTML for each recommendation record
	ATGSvcs.rec_builder("atg-recommendations-cart-renderer-parts", function (slot_name, rec_data){

		// Generate the recommendation element ID
		elementId = ATGSvcs.rec_id(slot_name, rec_data.productId);

        // truncate description to reasonable length

		var displayDesc = rec_data.name;
		if (displayDesc.length > 45){
			var displayDesc = rec_data.name.substr(0,45) + '...';
		};
		if (location.protocol === 'https:') {
			var imageURL= rec_data.image.replace("http://", "https://");
		} else {
			var imageURL= rec_data.image
		}
		// Build the necessary HTML for the carousel
		html = '<div id=' + elementId + ' class="rec-item-container cs-rec">' +
		'<div class="rec-image">' +
			'<a href="' + rec_data.url.replace("http://www.autozone.com", "") + '&intcmp=rec"><img width="86" height="82" src="' + imageURL + '" alt="" /></a>' +
		'</div>' +
		'<a href="' + rec_data.url.replace("http://www.autozone.com", "") + '&intcmp=rec">' + displayDesc + '</a>' +
		'<!--<div class="rec-price">' +
			'Price: <span>' + rec_data.price + '</span>' +
		'</div>-->' +
		'</div>';

		return html;
	});



	// Renderer method - initializes a renderer for ATG recommendations
	ATGSvcs.renderer("atg-recommendations-cart-renderer-parts", function (slot_element){



		vehicleSelectHTML = jQuery('#v').html();



		var headerText = "Customers with this vehicle Also Viewed...";

		// Insert the html for the jQuery carousel
		slot_element.innerHTML = '<div class="recommendations-common recommendations-cart-outer"><div class="recommendations-header"><h4>' + headerText + '</h4><form><select id="v2">' + vehicleSelectHTML + '</select></form></div><div class="recommendations-inner"><div ></div><div id="carousel-cart-parts" class="jcarousel-skin-recommendations"><ul></ul></div></div></div>';

		// Loop through the recommendation records.
	    for (var i=0; i < this.recs.length; i++) {


	    	// Create a new 'li' element
	    	li = jQuery(document.createElement('li'));

	    	// Call the builder method
	    	li.html( ATGSvcs.build_rec(slot_element.id, this.recs[i], "atg-recommendations-cart-renderer-parts") );

    		// Obtain a reference to the nested 'ul' element.
        	ul = jQuery(slot_element).find("ul");

        	// Append the new 'li' element.
        	ul.append(li);
	    }


		// create cart carousel (parts)
		jQuery('#carousel-cart-parts').jcarousel({
			initCallback: recommendations.tabs.hidePartsContent

		});


		// attach event for vehicle selection on renderer
		jQuery('#v2').change( function() {
			jQuery('#v').val(jQuery('#v2').val());
			jQuery('#v').change();
		});

	});



	/*  =============================
	 *  Handler object for tabs.
	 */
	// create recommendations namespace object
	recommendations = {};
	recommendations.tabs = function() {

		// private (closures)
		var activeTab = "tab-accessories";

		// public interface
		return {
			mouseOver: function(tab) {

				// If the tab that is moused-over is not active, change the bg image
				if (jQuery(tab).attr('id') != activeTab) {

					if (jQuery(tab).attr('id') == "tab-accessories") {
						jQuery(tab).css({backgroundPosition: '-330px'});
						jQuery('#tabs-middle').css({backgroundPosition: '-45px'});
					}
					else if (jQuery(tab).attr('id') == "tab-parts") {
						jQuery(tab).css({backgroundPosition: '-330px'});
						jQuery('#tabs-middle').css({backgroundPosition: '-15px'});
					}
				}

			},

			mouseOut: function(tab) {

				// Change the bg image back to the non-selected state
				if (jQuery(tab).attr('id') != activeTab) {

					if (jQuery(tab).attr('id') == "tab-accessories") {
						jQuery(tab).css({backgroundPosition: '-165px'});
						jQuery('#tabs-middle').css({backgroundPosition: '-30px'});
					}
					else if (jQuery(tab).attr('id') == "tab-parts") {
						jQuery(tab).css({backgroundPosition: '-165px'});
						jQuery('#tabs-middle').css({backgroundPosition: '0px'});
					}
				}
			},

			click: function(tab) {

				// If the click event was not for the currently active tab
				if (jQuery(tab).attr('id') != activeTab) {

					// Accessories tab was clicked
					if (jQuery(tab).attr('id') == "tab-accessories") {
						jQuery('#tab-accessories').css({backgroundPosition: '0px'});
						jQuery('#tab-parts').css({backgroundPosition: '-165px'});
						jQuery('#tabs-middle').css({backgroundPosition: '0px'});
						activeTab = jQuery(tab).attr('id');

						jQuery('#tab-content-accessories').css({display: 'block'});
						jQuery('#tab-content-parts').css({display: 'none'});
						jQuery('#carousel-cart-accessories').jcarousel({
						});

					}

					// Parts tab was clicked
					else if (jQuery(tab).attr('id') == "tab-parts" ) {

						jQuery('#tab-accessories').css({backgroundPosition: '-165px'});
						jQuery('#tab-parts').css({backgroundPosition: '0px'});
						jQuery('#tabs-middle').css({backgroundPosition: '-30px'});
						activeTab = jQuery(tab).attr('id');

						jQuery('#tab-content-accessories').css({display: 'none'});
						jQuery('#tab-content-parts').css({display: 'block'});
						jQuery('#carousel-cart-parts').jcarousel({
						});
					}

				}
			},

			/* method to hide the parts tab after the carousel has initialized */
			hidePartsContent: function() {
				// Allow the parts carousel to fully initialize, altering size and visibility of divs so
				// page content doesn't shift about too much.

				jQuery('#rec-container-cart-load').css({display: 'none'});
				jQuery('#rec-container-cart').css({height: 'auto'});
				jQuery('#rec-container-cart').css({overflow: 'auto'});
				jQuery('#rec-container-cart').css({width: 'auto'});
				jQuery('#rec-container-cart').css({visibility: 'visible'});
				jQuery('#tab-content-parts').css({height: 'auto'});
				jQuery('#tab-content-accessories').css({height: 'auto'});


			}
		};
	}(); // js self-invoking function
	/*
	 *  End handler object for tabs
	 *  ==============================
	 */


	// attach events for tabs
	jQuery('#tab-accessories').mouseover(function() { recommendations.tabs.mouseOver(this); });
	jQuery('#tab-accessories').mouseout(function() { recommendations.tabs.mouseOut(this); });
	jQuery('#tab-accessories').click(function() { recommendations.tabs.click(this); });

	jQuery('#tab-parts').mouseover(function() { recommendations.tabs.mouseOver(this); });
	jQuery('#tab-parts').mouseout(function() { recommendations.tabs.mouseOut(this); });
	jQuery('#tab-parts').click(function() { recommendations.tabs.click(this); });

}