var classAttributeName = 'class';
var browerEngine;
var optionCount = 0;
var selectedName= new Array();
var selectedValue= new Array();

function popupWindow(url) {
  //window.open(url+'&attributeSuffix='+selectedImageSuffix,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
	imageSuffix = '';
	for (var i=0; i < optionCount; i++) {
		if (selectedValue[i] != '') {
			if (imageSuffix!='') imageSuffix = imageSuffix+'-';
			imageSuffix = imageSuffix+selectedValue[i];
		}
	}
	window.open(url+'&attributeSuffix='+imageSuffix.replace(/ /g, '-'),'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}

function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}

// http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
function initBrowser() {
	classAttributeName = "class";
	if (window.navigator.appName == "Microsoft Internet Explorer")
	{
		// This is an IE browser. What mode is the engine in?
		var docMode = document.documentMode;
		if (!docMode|| docMode < 8) {  // IE 5-7
			classAttributeName = "className";
			browserEngine = 5; // Assume quirks mode unless proven otherwise
			if (document.compatMode)
			{
				if (document.compatMode == "CSS1Compat")
					browserEngine = 7; // standards mode
			}
		} else {
			browserEngine = docMode;
		}
	// the browserEngine variable now contains the document compatibility mode.
	}
}


function setImage(optionNumber, value) {
	productImageMiddle = '';
	for (var i=0; i < optionCount; i++) {
		if (i==optionNumber) {
			if (value!='') { productImageMiddle = productImageMiddle+'-'+value; }
		} else if (selectedValue[i] != '') {
			productImageMiddle = productImageMiddle+'-'+selectedValue[i];
		}
	}
	document.getElementById('productImage').src = productImageBegin+productImageMiddle.replace(/ /g, '-')+productImageEnd;
}


function init() {
	optionCountNode = document.getElementById('optionCount');
	if (optionCountNode != null) {
		optionCount = optionCountNode.value;
		var productImage = document.getElementById('productImage').src;
		productImageBegin = productImage.substring(0,productImage.lastIndexOf('.'));
		productImageEnd = productImage.substring(productImage.lastIndexOf('.'));
		for (var i=0; i < optionCount; i++) {
			selectedNode = document.getElementById('selectedName'+i);
			if (selectedNode!=null) {
				selectedName[i] = selectedNode.value;
				node = document.getElementById('selectedValue'+i);
				selectedValue[i] = document.getElementById('selectedValue'+i).value;  
				node = document.getElementById('option'+i);
				if (node) {
	  				node.firstChild.data =  selectedValue[i];
		  		}
				node = document.getElementById(selectedName[i]);
				if (node) {
					node.setAttribute(classAttributeName, 'attributeImageSelected');
		  		}
			} else {
				selectedValue[i] = '';
			}
		}
		setImage(-1,'');
		preloadImagesNode = document.getElementById('preloadOptionImages');
		if (preloadImagesNode!=null) {
			preloadImagesList = preloadImagesNode.value;
			var images = preloadImagesList.split(", ");
			for(j = 0; j < images.length; j++) {
				MM_preloadImages(images[j]);
			}
		}
	}
}

function attributeChange(valueSuffix, valueName, value, optionNumber, attributeNumber, radioButtonName, classElement) {
	if (selectedName[optionNumber]!=valueName) {
		setImage(optionNumber,  value);
		if (selectedName[optionNumber]!='') {
			node1 = document.getElementById(selectedName[optionNumber]);
			if (node1!=null) {
				node1.setAttribute(classAttributeName, 'attributeImage');
			}
		}	
		node2 = document.getElementById(classElement);
		node2.setAttribute(classAttributeName, 'attributeImageSelected');
		selectedName[optionNumber] = classElement;
		selectedValue[optionNumber] = value;
		node = document.getElementById('option'+optionNumber);
		if (node) {
			node.firstChild.data =  value;
		}
		document.getElementById('selected'+optionNumber).value =  attributeNumber;
	}
	if (radioButtonName!='') {
		radioButton = document.cart_quantity.elements[radioButtonName];
		if (radioButton != null) {
			for (var i = 0; i < radioButton.length; i++) {
				radioButton[i].checked = false;
				if (radioButton[i].value == attributeNumber) {
					radioButton[i].checked = true;
				}
			}
		}
	}
}

function attributeChangeCheckbox(valueName, value, optionNumber) {
	nodeX = document.getElementById(valueName);
	if (nodeX.type=='checkbox' && nodeX.checked) {
		setImage(optionNumber,  value);
		selectedValue[optionNumber] = value;
	} else {
		setImage(optionNumber,  '');
		selectedValue[optionNumber] = '';
	}
}

function attributeOver(valueSuffix, valueName, value, optionNumber, classElement) {
	if (selectedName[optionNumber]!=valueName) {
		setImage(optionNumber,  value);
		node4 = document.getElementById(classElement);
		node4.setAttribute(classAttributeName, 'attributeImageSelected');
		node = document.getElementById('option'+optionNumber);
		if (node) {
			node.firstChild.data =  value;
		}
	}
}

function attributeOut(valueSuffix, valueName, value, optionNumber, classElement) {
	if (selectedName[optionNumber]!=valueName) {
		setImage(optionNumber,  selectedValue[optionNumber]);
		node6 = document.getElementById(classElement);
		node6.setAttribute(classAttributeName, 'attributeImage');
		node = document.getElementById('option'+optionNumber);
		if (node) {
			node.firstChild.data =  selectedValue[optionNumber];
		}
	}
}

function initAttributes() {
	initBrowser(); 
	init();
}