AddEvent(window, "load", colorizerInit);

var sColorizerModelNumber = '';
var sColorizerChoiceLeather = 'Black';
var sColorizerChoiceWool = 'Black';

//====================
function colorizerInit()
//====================
{
//alert('colorizerInit()');

		if (!document.getElementById) return;
		
	// get jacket model number
	var oStyleNumber = document.getElementById('colorizer-banner-overlays');
		if (!oStyleNumber) alert('Cannot find colorizer-banner-overlays');
		
	sColorizerModelNumber = oStyleNumber.className;

	//var sTitle = document.head.title;
	//var sModelNumber = sTitle;
	
	var oOverlayLeather = document.getElementById('colorizer-banner-overlay-leather');
		if (!oOverlayLeather) alert('Cannot find colorizer-banner-overlay-leather');
		
	var oOverlayWool = document.getElementById('colorizer-banner-overlay-wool');
		if (!oOverlayWool) alert('Cannot find colorizer-banner-overlay-wool');
		
	var oPalettes = document.getElementById('colorizer-banner-palettes');
		if (!oPalettes) alert('Cannot find colorizer-banner-palettes');
		
	var aPaletteLinks = oPalettes.getElementsByTagName('a');
		if (aPaletteLinks.length == 0) alert('Cannot find anchors inside colorizer-banner-palettes');
	
	for (var iLink = 0; iLink < aPaletteLinks.length; iLink++)
	{
		aPaletteLinks[iLink].onclick = colorizerClick;
	}
	
	var sMsg = 'Images:\n';
	
	// preload all the image overlays
	var aPreloadImages = new Array();
	for (var iLink = 0; iLink < aPaletteLinks.length; iLink++)
	{
		var sImgName = colorizerGetImageName(aPaletteLinks[iLink], 'imageName');
		iPreloadIndex = aPreloadImages.length;
		aPreloadImages[iPreloadIndex] = new Image();
		aPreloadImages[iPreloadIndex].setAttribute('src', sImgName);
		sMsg += '\n' + sImgName;
	}
	//alert(sMsg);
}


//====================
function colorizerClick(evt)
//====================
{
//alert('function colorizerClick(evt)');

	// cancel event-bubbling
		if (evt) { event = evt; }
	event.cancelBubble = true;

	colorizerMoveSelector(this.parentNode);
	
	var aParentClassNodes = colorizerGetImageName(this, 'nodes');
	
		if (aParentClassNodes)
		{
			var oOverlay = document.getElementById('colorizer-banner-overlay-' + aParentClassNodes[0]);
				if (oOverlay)
				{
						if (aParentClassNodes[1] == 'black')
						{
							oOverlay.style.display = 'none';
						}
						else
						{
							oOverlay.style.display = 'block';
							var sImgName = colorizerGetImageName(this, 'imageName');
						}
				
					oOverlay.setAttribute('src', sImgName);
					//alert(sImgName);
				}
		}

		// W3C DOM method (hide from IE)
		if (event.preventDefault)
		{
			event.preventDefault();
		}
	return false;
}
	

//====================
function colorizerGetImageName(oLink, sRequest)
//====================
{
//alert('function colorizerGetImageName(oLink, ' + sRequest + ')');

	var sImgName = '';

	// get LI parent of A
	var oParent = oLink.parentNode;

	var sParentClass = oParent.className;	
	sParentClass = sParentClass.replace(/\s+selected/, '');
//alert('oParent.className = ' + oParent.className);
		if (sRequest == 'class') return sParentClass;
	
	var aParentClassNodes = sParentClass.split('-');
		if (sRequest == 'nodes') return aParentClassNodes;
	
		if (sParentClass && aParentClassNodes.length > 1)
		{
				if (aParentClassNodes[1] == 'black')
				{
					sImgName = 'base-black';
				}
				else
				{
					sImgName = sParentClass;
				}
			sImgName = '/images/cullinz-creek-jackets-' + sColorizerModelNumber.toLowerCase() + '-' + sImgName + '.png';
		}

	return sImgName;
}


//=========================
function AddEvent(oElement, sEventName, fnFunction)
//=========================
{
	if (oElement)
	{
		if (oElement.attachEvent)
		{
			oElement.attachEvent("on" + sEventName, fnFunction);
		}
		else
		{
			oElement.addEventListener(sEventName, fnFunction, true);
		}
	}
}


//=========================
function colorizerMoveSelector(oLI)
//=========================
{
//alert('function colorizerMoveSelector(oLI)');

	var oList = oLI.parentNode;
	var aItems = oList.getElementsByTagName('li');
	
	// regular expression to collect class names
	var rSelected = /\bselected\b/;

	// remove all the selected classes
	for (var iItem = 0; iItem < aItems.length; iItem++)
	{		
		var sClass = aItems[iItem].className;
		
			if (sClass && rSelected.test(sClass))
			{
				aItems[iItem].className = sClass.replace(/selected/, '');
			}
	}
	// make the current item selected
	oLI.className += ' selected';	
}