// cfcrockdesignselect.js

var design = null, designImg = null, designSelect = null, selects = null,
		designDiv = null, orderDiv = null;

Utilities.attachEvent(window, "load", initDesign);

function changeDesign() {
	if (designSelect) {
		var designCode = designSelect[designSelect.selectedIndex].value;
		var tempImg = new Image();
		tempImg.tryCount = 0;
		tempImg.onerror = function() { tryGif(tempImg); };
		tempImg.onload = function() { designImg.src = tempImg.src; };
		tempImg.src = "/images/crocks/etched/designs/" + designSelect[designSelect.selectedIndex].value + ".jpg";
	}
}

function selectFromImg(e) {
	e = e || window.event;
	var target = e.target || e.srcElement;
	if (target.nodeName === "img" || target.nodeName === "IMG") {
		var src = target.parentNode.getElementsByTagName("h4")[0].innerHTML;
		var designName = target.parentNode.getElementsByTagName("h4")[0].innerHTML;
		var opts = designSelect.options;
		for (var i = 0; i < opts.length; i++) {
			if (opts[i].value === designName) {
				opts[i].selected = true;
				designSelect.focus();
				orderDiv.scrollIntoView();
				if (window.scrollBy) window.scrollBy(0, -50);
				changeDesign();
				break;
			}
		}
	}
}

function initDesign() {
	selects = document.getElementById("orderform").getElementsByTagName("select");
	designSelect = null;
	designImg = document.getElementById("designImg");
	for (var i = 0; i < selects.length; i++) {
		if (selects[i].name === 'AddOn1') {
			designSelect = selects[i];
			break;
		}
	}
	designDiv = document.getElementById("crocksetcheddesign");
	orderDiv = document.getElementById("orderform");
	Utilities.attachEvent(designDiv, "click", selectFromImg);
	
	if (designSelect && designImg) {
		changeDesign();
		Utilities.attachEvent(designSelect, "change", changeDesign);
		designImg.style.visibility = "visible";
	}
}

function tryGif(tempImg) {
	if (tempImg.tryCount++ == 1) return; 
	tempImg.src = "/images/crocks/etched/designs/" + designSelect[designSelect.selectedIndex].value + ".gif"
}