function displayOptions() {
	if ($('detailoptions')) {
		if (!Op.Options) {
			$('detailoptions').style.display = 'none';
		} else {
			preloadDetailImages();
			var l = document.createElement('ul');
			$H(Op.Options.each(function(option) {
				var nDiv = document.createElement('div');
				$('detailoptions').appendChild(nDiv);
				nDiv.className				= 'productOption';
				nDiv.style.backgroundColor 	= option.key1;
				if (option.key1 == Op.defaultkey1) activeOption(option,nDiv);
				nDiv.onmouseover			= function() {
					activeOption(option,nDiv);
				}
				var txt 	= document.createTextNode(option.key2);
				var li 		= document.createElement('li');
				li.appendChild(txt);
				l.appendChild(li);
			}));
			$('detailoptions').appendChild(l);
		}
	}
}

function activeOption(option,nDiv) {
	if ($('detailimg')) $('detailimg').setAttribute('src',option.key3);
	if ($('detailname')) $('detailname').innerHTML 	= option.key2;
	if ($('dynamiccolor')) $('dynamiccolor').value	= option.key1;
	var opDivs = document.getElementsByClassName('productOption');
	$H(opDivs.each(function(opdiv) {
		if (opdiv.id == 'currentOption') opdiv.id = null;
	}));
	nDiv.id = 'currentOption';
}

function displayGraphics() {
	if ($('detailimg') && $('detailimg').tagName.toLowerCase()=='img') {
		if ($('detailthumbs') && Op.Graphics) {
			if (Op.Graphics.length == 1) {
				$('detailthumbs').style.display = 'none';
			}
			$H(Op.Graphics.each(function(option) {
				var nImg = document.createElement('img');
				$('detailthumbs').appendChild(nImg);
				nImg.setAttribute('src',option.key1);
				if (option.key3 == 1) activeGraphic(option,nImg);
				nImg.onmouseover			= function() {
					activeGraphic(option,nImg);
				}
			}));
		}
	}
}

function activeGraphic(option,nImg) {
	if ($('detailimg')) $('detailimg').setAttribute('src',option.key2);
	var opImgs = $('detailthumbs').getElementsByTagName('img');
	for (var i=0; i<opImgs.length; i++) {
		if (opImgs[i].id == 'currentImage') opImgs[i].id = null;
	}
	nImg.id = 'currentImage';
}

function preloadDetailImages() {
	$H(Op.Options.each(function(option) {
		var nImg = document.createElement('img');
		nImg.setAttribute('src',option.key3);
	}));
	$H(Op.Graphics.each(function(option) {
		var nImg = document.createElement('img');
		nImg.setAttribute('src',option.key1);
		var nImg2 = document.createElement('img');
		nImg2.setAttribute('src',option.key2);
	}));
}

Event.observe(window, 'load', displayOptions);
Event.observe(window, 'load', displayGraphics);