var productImage,
	productColor = '',
	productOption = '',
	altImageLetter = '',
	namedImages = [],
	numOfAltImages = 0,
	setSelector;


function initPackageSwitcher( selector )
{
	bindEvent( document.forms[0][ selector ], 'change', function() { showSelectedPackage( selector ) } );
}

function showSelectedPackage( selector )
{
	var x, packageSelector = document.forms[0][ selector ];
	for ( var x=0; x < packageSelector.length; x++ )
	{
		Hide( packageSelector[x].value.split(":")[0].replace(/ /gi, '_') );
	}
	Show( packageSelector[packageSelector.selectedIndex].value.split(":")[0].replace(/ /gi, '_') );
}
	

function initOptionSwitcher()
{
	productImage = [ d("imagepane").getElementsByTagName("img")[0].src ];
 	var x, optionSwitcher = document.forms["malse"]['Option'];
	for ( var x=1; x < optionSwitcher.length; x++ )
	{
		var newImage = new Image();
		newImage.src = productImage[0].replace(/.jpg/, '-' + optionSwitcher[ x ].value.split(":")[0].toLowerCase() + '.jpg' )
		newImage.style.display = "none";
		productImage.push( newImage.src );
	}
	bindEvent( document.forms[0]['Option'], 'change', showSelectedOption );
}

function showSelectedOption()
{
	var optionMenu = document.forms['malse']['Option'];

	// the top option in the menu is default and not reflected in the image filename
	productOption = ( optionMenu.selectedIndex > 0 )
		? '-' + optionMenu[ optionMenu.selectedIndex ].value.replace(/:/, '').replace(/\(.*\)|\d*/g, '').toLowerCase()
		: '';
	d("productLink1").href = d("productLink2").href = d("productImage").src = '/prodgfx/' + urlValueOf['prod'] + altImageLetter + productOption + productColor + '.jpg';
	if ( numOfAltImages > 0 )
		addAltImages();
}

function initColorSwitcher()
{
	productImage = [ d("imagepane").getElementsByTagName("img")[0].src ];
 	var x, colorSwitcher = document.forms["malse"]['Color'];
	for ( var x=1; x < colorSwitcher.length; x++ )
	{
		var newImage = new Image();
		newImage.src = productImage[0].replace(/.jpg/, '-' + colorSwitcher[ x ].value.split(":")[0].toLowerCase() + '.jpg' )
		newImage.style.display = "none";
		productImage.push( newImage.src );
	}
	bindEvent( document.forms[0]['Color'], 'change', showSelectedColor );
}

function showSelectedColor()
{
	var colorMenu = document.forms['malse']['Color'];

	// the top color in the menu is default and not reflected in the image filename
	productColor = ( colorMenu.selectedIndex > 0 )
		? '-' + colorMenu[ colorMenu.selectedIndex ].value.replace(/:/, '').toLowerCase()
		: '';
	d("productLink1").href = d("productLink2").href = d("productImage").src = '/prodgfx/' + urlValueOf['prod'] + altImageLetter + productOption + productColor + '.jpg';
	if ( numOfAltImages > 0 )
		addAltImages();
}

var altImageLetters = [ 'b', 'c', 'd', 'e', 'f' ];
function addAltImages( thisNumOfAltImages, thisNamedImages )
{
	if ( thisNumOfAltImages )
		numOfAltImages = thisNumOfAltImages;

	if ( thisNamedImages )
		namedImages = thisNamedImages;
	Show("altThumbs");
	d("altThumbs").innerHTML = '\n<a href="javascript:showAltImage()" class="altThumb" style="background-image: url(\'/prodgfx/tn_' + urlValueOf['prod'] + productOption + productColor + '.jpg\');"></a>';
	for ( var x=0; x < numOfAltImages; x++ )
	{
		if ( namedImages[ x ] )
			d("altThumbs").innerHTML += '\n<a href="javascript:showNamedAltImage(\'' + namedImages[x] + '\')" class="altThumb" style="background-image: url(\'/prodgfx/tn_' + namedImages[x] + '\');"></a>'
		else
			d("altThumbs").innerHTML += '\n<a href="javascript:showAltImage(\'' + altImageLetters[x] + '\')" class="altThumb" style="background-image: url(\'/prodgfx/tn_' + urlValueOf['prod'] + altImageLetters[x] + productOption + productColor + '.jpg\');"></a>'
	}
}

function showAltImage( newLetter )
{
	altImageLetter = ( newLetter ) ? newLetter : '';
	d("productLink1").href = d("productLink2").href = d("productImage").src = '/prodgfx/' + urlValueOf['prod'] + altImageLetter + productOption + productColor + '.jpg';
}

function showNamedAltImage( imageSrc )
{
	d("productLink1").href = d("productLink2").href = d("productImage").src = '/prodgfx/' + imageSrc;
}

function calculatePrice()
{
	var itemHasOptions = false,
		valueOfOptions = 0,
		valueOfThisOption,
		malseForm = document.forms.malse;
	malseForm["product[]"].value = productTitle + ": ";

	for ( var x=4; x < malseForm.length; x++ )
	{
		if ( malseForm[x].type.indexOf("select") > -1 )
		{
			//	the value isNaN if a selection isn't made or if it's on a free option, hence if it's NaN I set it to 0
			valueOfThisOption = ( isNaN( parseFloat( malseForm[x][ malseForm[x].selectedIndex].value.split(":")[1] ) ) ) ? 0 : parseFloat( malseForm[x][ malseForm[x].selectedIndex].value.split(":")[1] )
			valueOfOptions += valueOfThisOption;

			malseForm["product[]"].value += malseForm[x][ malseForm[x].selectedIndex].innerHTML.replace(/--/, '') + ( ( malseForm[x][ malseForm[x].selectedIndex].value.indexOf("--") > -1 ) ? '' : ', ' );
		}
	}
	malseForm["product[]"].value = malseForm["product[]"].value.replace( /, $/, '' );
	malseForm.price.value = valueOfOptions + parseFloat( initialPrice.replace(/,/g, '') );
	d("totalPrice").innerHTML = "$" + malseForm.price.value;
}

bindEvent( window, 'load', function()
	{
		if ( document.all && document.getElementById )
		{
			navRoot = document.getElementById("navcontainer").document.getElementsByTagName("div");
			for (var i=0; i < navRoot.length; i++)
			{
				var node = navRoot[i];
				if (node.className == "topMenu")
				{
					node.onmouseover = function() { this.className += ' hover' };
					node.onmouseout  = function() { this.className = 'topMenu' };
				}
			}
		}
	}
)