/**
 * productcolorscroll provides functionality to
 * add product color srcolling on products on the
 * product list page.
 *
 * @author Klaas Speller, Strawberries
 */

/**
 * Namspace
 */
var adds_p = {};

/**
 * Some vars we need
 */
adds_p.config = {
	maxProducts: 3,
	singleItemWidth: 35,
	pickerContainerSelector: 'div.productThumbsContainer',
	scrollNextClass: 'nextColorButton',
	scrollNextActiveClass: 'nextColorButtonActive',
	scrollPreviousClass: 'previousColorButton',
	scrollPreviousActiveClass: 'previousColorButtonActive'
};
adds_p.scrollRunloops = [];


/**
 * nextButton.click handler
 *
 * @param {Event} e
 */
adds_p.nextColorHander = function(e) {

	if(e.data.scrollTarget.scrollLeft < ( ($('span', e.data.scrollTarget).length-adds_p.config.maxProducts)  * adds_p.config.singleItemWidth )) {
		e.data.scrollTarget.scrollLeft += adds_p.config.singleItemWidth
	}
	if((($('span', e.data.scrollTarget).length-adds_p.config.maxProducts)*adds_p.config.singleItemWidth) <= e.data.scrollTarget.scrollLeft) {
		e.data.nextButton.removeClass(adds_p.config.scrollNextActiveClass);
	}
	if(e.data.scrollTarget.scrollLeft > 0) {
		e.data.prevButton.addClass(adds_p.config.scrollPreviousActiveClass);
	}
}

/**
 * previousButton.click handler
 *
 * @param {Event} e
 */
adds_p.previousColorHander = function(e) {
	if(e.data.scrollTarget.scrollLeft > 0 ) {
		e.data.scrollTarget.scrollLeft = Math.max(0, (e.data.scrollTarget.scrollLeft - adds_p.config.singleItemWidth));
	}
	if(e.data.scrollTarget.scrollLeft == 0) {
		e.data.prevButton.removeClass(adds_p.config.scrollPreviousActiveClass);
	}
	if((($('span', e.data.scrollTarget).length-adds_p.config.maxProducts)*adds_p.config.singleItemWidth) > e.data.scrollTarget.scrollLeft) {
		e.data.nextButton.addClass(adds_p.config.scrollNextActiveClass);
	}
	
}

/**
 * Creates the next button
 *
 * @param {Element}
 */
adds_p.addColorNavigationButtons = function(targetContainer) {	
	
	// Previous button
	var prevButton = $('<div>');
	prevButton.addClass(adds_p.config.scrollPreviousClass);
	prevButton.insertAfter(targetContainer);
		
	// Next button
	var nextButton = $('<div>');
	nextButton.addClass(adds_p.config.scrollNextClass);
	nextButton.addClass(adds_p.config.scrollNextActiveClass);
	nextButton.insertAfter(prevButton);

	// Activate
	nextButton.bind('click', {scrollTarget: targetContainer, nextButton: nextButton, prevButton:prevButton}, adds_p.nextColorHander);
	prevButton.bind('click', {scrollTarget: targetContainer, nextButton: nextButton, prevButton:prevButton}, adds_p.previousColorHander);
	
}

/**
 * Parses and if needed set's up the scroll behaviour
 *
 * @param {Number} i
 * @param {Element} pickerContainer
 */
adds_p.parseColorPicker = function(i, pickerContainer) {
	
	var colorPickers = $('span', pickerContainer);
	if(colorPickers.length > adds_p.config.maxProducts && $('div', pickerContainer).length == 0) {
		colorPickers.wrapAll('<div>');
		
		var newContainer = $('div:first', pickerContainer);
		newContainer.css('display', 'block');
		newContainer.css('width', ((adds_p.config.singleItemWidth*(colorPickers.length))));
		adds_p.addColorNavigationButtons(pickerContainer);

	}
	
}

/**
 * Call to setup the product color scrollers
 */
adds_p.scanForOverflowColors = function() {
	var thumbContainers = $(adds_p.config.pickerContainerSelector);
	jQuery.each(thumbContainers, adds_p.parseColorPicker);
}

/**
 * Inial setup
 */
$(document).ready(function() {
	adds_p.scanForOverflowColors();
});