/**
 * Functionality for changing the colors of images
 */
prodSq = new ProductSquare();
prodSq.initialize();

function ProductSquare()
{
	var me = this;

	this.initialize = function()
	{
		$('.colorBlock').click(this.setActiveColor);
	}

	this.setActiveColor = function(e) 
	{
		var curColor = this.title;
		curColor = curColor.toLowerCase().replace(/ /, '');

		// Traverse and find my parent prodSquare.
		var pNode = $(this).closest('.prodSquare');
		var iNode = $('.prodImage', pNode);

		var imgSrc = iNode.attr('src');

		// replace imgSrc with new one.
		imgSrc = imgSrc.replace(/_\w*\./, '_' + curColor + '.');
		iNode.attr('src', imgSrc);

		// toggle color 
		$('.colorBlock', pNode).removeClass('colorBlockActive');
		$(this).addClass('colorBlockActive');

		e.stopPropagation();
	}
}