/*

	HomeCarousel
	VERSION 0.1
	AUTHOR

	DEPENDENCIES:
	- jQuery

	TODO:
	-

*/

var HomeCarousel = function(target,options) {
	var self = this,
		nubbinHTML = '<a class="nubbin nubbin-on" data-index="0"></a>',
		i,
		ii;

	// ------------------------------------------------------------
	// DEFAULTS
	// ------------------------------------------------------------

	self.options = {
		itemsPerRow:4
	};

	if(typeof options == 'object') {
		$.extend(self.options, options);
	}

	// ------------------------------------------------------------
	// ELEMENT REFERENCES
	// ------------------------------------------------------------

	self.elWrapper = target;
	self.elSlider = target.find('ul.cards');
	self.elItems = target.find('ul.cards li');
	
	self.elControls = target.find('div.controls');
	self.elBack = $('<a class="btn btn-back"></a>');
	self.elNext = $('<a class="btn btn-next"></a>');
	self.elNubbins = undefined;

	// ------------------------------------------------------------
	// VARS
	// ------------------------------------------------------------

	self.rowWidth = self.elWrapper.find('div.cardsWrapper').width();
	self.visibleRow = 0;
	self.totalRows = Math.ceil(self.elItems.length / self.options.itemsPerRow);
	self.isSliding = false;

	// ------------------------------------------------------------
	// INITIAL SETUP
	// ------------------------------------------------------------
	
	if (self.totalRows === 1) {
		self.loadImages();
	} else if (self.totalRows > 1) {
		for (i = 1, ii = self.totalRows; i < ii; i++) {
			nubbinHTML += '<a class="nubbin" data-index="' + i + '"></a>';
		}
	
		self.elNubbins = $(nubbinHTML);
	
		self.setArrowStates();
		self.elControls.append(self.elBack).append(self.elNubbins).append(self.elNext);
	
		self.loadImages();
	} else {
		self.elWrapper.empty().append('<div class="no-recent-cards"><h4 class="nocufon">You have not unlocked any cards yet.</h4><p>Enter codes from specially marked Topps football cards to unlock and trade cards on this site.</p></div>');
	}

	// ------------------------------------------------------------
	// EVENT HANDLERS
	// ------------------------------------------------------------
	
	if (self.totalRows > 1) {
		self.elNext.click(function(event) {
			event.preventDefault();
		
			if (!self.isSliding && self.visibleRow < self.totalRows - 1) {
				self.loadRow(self.visibleRow + 1);
			}
		});
	
		self.elBack.click(function(event) {
			event.preventDefault();
		
			if (!self.isSliding && self.visibleRow) {
				self.loadRow(self.visibleRow - 1);
			}
		});
	
		self.elNubbins.click(function (event) {
			event.preventDefault();
		
			if (!self.isSliding) {
				self.loadRow(parseInt($(this).attr('data-index'), 10));
			}
		});
	}
};

HomeCarousel.prototype = {
	loadRow: function (index) {
		var self = this;

		self.elNubbins.filter('.nubbin-on').removeClass('nubbin-on');
		self.elNubbins.eq(index).addClass('nubbin-on');
		
		self.isSliding = true;
		self.visibleRow = index;
		self.setArrowStates();

		self.elSlider.animate({left: -1 * index * self.rowWidth}, 400, function() {
			self.isSliding = false;
		});
	},
	setArrowStates: function () {
		var self = this;

		if (self.visibleRow === 0) {
			self.elBack.css('visibility', 'hidden');
			self.elNext.css('visibility', 'visible');
		} else if (self.visibleRow === self.totalRows - 1) {
			self.elBack.css('visibility', 'visible');
			self.elNext.css('visibility', 'hidden');
		} else {
			self.elBack.css('visibility', 'visible');
			self.elNext.css('visibility', 'visible');
		}
	},
	loadImages: function () {
		var self = this,
			targetWidth = 150,
			targetHeight = 160;
		
		self.elItems.each(function(index) {
			var elImg = $(this).find('img');
			
			elImg.removeAttr('width');
			elImg.removeAttr('height');
			elImg.removeAttr('src');
			
			elImg.one('load', function(event) {
				var self = this;
				
				setTimeout(function() {
					var width = $(self).width(),
						height = $(self).height(),
						newWidth = undefined,
						newHeight = undefined;

					if (width > height) {
						newWidth = targetWidth;
						newHeight = Math.floor((newWidth / width) * height);
						$(self).css('margin-top', Math.floor((targetHeight - newHeight) / 2));
					} else if (height > width) {
						newHeight = targetHeight;
						newWidth = Math.floor((newHeight / height) * width);
					} else {
						newHeight = targetHeight;
						newWidth = targetWidth;
					}

					$(self).attr('width', newWidth);
					$(self).attr('height', newHeight);

					elImg.fadeTo(400, 1);
				}, 500);
			});
			
			elImg.attr('src', elImg.attr('data-src'));
		});
	}
};