/**
 * Metalier Home Carousel
 *
 */
(function($) {
	
	$.fn.carousel = function(customSettings) {
		
		// Settings _____________________________________________________________________
		
		// Default settings for entire component
		$.fn.carousel.defaultSettings = {};
		
		// Overwrite defaults with any user-defined settings, for this component set
		var settings = $.extend({}, $.fn.carousel.defaultSettings, customSettings);
		
		
		
		// Carousel Constructor _________________________________________________________
		this.each(function() {
			
			// Variables ________________________________________________________________
			// Objects
			var instance;
			// Properties
			var imageSets, currentSet, timerLimit, timerValue, timerInterval;
			
			
			// Methods __________________________________________________________________
			
			/* [init]
			 * Replace input fields with new markup, save references and properties
			 */
			function init() {
				// Set properties
				currentSet		= 0;
				timerLimit 		= 3000;		// 3 seconds
				timerValue		= 0;
				
				// Load the set data
				$.getJSON('/load/image-sets', function(payload) {
					imagePairs = payload;
					beginCarousel();
				});
			}
			
			
			/* [beginCarousel]
			 * Starts the carousel spinning...
			 */
			function beginCarousel() {
				// Preload
				preloadedImage = new Image();
				for(var i=0; i < imagePairs.length; i++) {
					preloadedImage.src = '/img/assets/finishes/' +imagePairs[i]['finishes']+ '-full.jpg';
					preloadedImage.src = '/img/assets/inspiration/' +imagePairs[i]['inspiration']+ '-full.jpg';
				}
				
				// Bind events
				instance.mouseenter(resetTimer);
				instance.mouseleave(startTimer);
				
				// Setup
				startTimer();
			}
			
			
			/* [swapImages]
			 * Switches the current feature set out for the new one
			 */
			function swapImages() {
				// Retrieve the new set data
				currentSet = (currentSet + 1) % imagePairs.length;
				
				// Show the new
				$('.inspiration .gallery', instance).append('<img src="/img/assets/inspiration/' +imagePairs[currentSet]['inspiration']+ '-full.jpg" alt="" />');
				$('.finishes .gallery', instance).append('<img src="/img/assets/finishes/' +imagePairs[currentSet]['finishes']+ '-full.jpg" alt="" />');
				
				// Hide the old
				$('.inspiration .current', instance).animate(
					{ opacity: 0 }, 1500, 'easeInOutQuint', function() { 
						$(this).next().addClass('current');
						$(this).remove(); 
					}
				);
				$('.finishes .current', instance).animate(
					{ opacity: 0 }, 1500, 'easeInOutQuint', function() { 
						$(this).next().addClass('current');
						$(this).remove(); 
					}
				);
			}
			
			
			/* [startTimer]
			 * Starts the image timer
			 * @param {Event} e - Event
			 */
			function startTimer(e) {
				timerInterval = setInterval(swapImages, timerLimit);
			}
			
			/* [resetTimer]
			 * Stops and resets the image timer
			 * @param {Event} e - Event
			 */
			function resetTimer(e) {
				clearInterval(timerInterval);
			}
			
			
			
			// Initial Setup ____________________________________________________________
			// Record the jQuery object
			instance = $(this);
			init();
			
		});
		
		return this;
	};
	
})(jQuery);
