function desStep(q, o, os, s, ls, buttons, skipstep) {
	this.q = q;
	this.o = o;
	this.s = s;
	this.ls = ls;
	this.os = os;
	this.buttons = buttons;
	this.skipstep = skipstep;
}

function desOption(label, nextstep, id, longl) {
	this.label = label;
	this.nextstep = nextstep;
	this.id = id;
	if (longl) {
	this.longl = longl;
	}	
}

function navButton(label, func) {
	this.label = label;
	this.func = func;
}
	
stepArr = new Array();

var ringInt;
var ringsArr;

var stepArr0_opt = new Array(	new desOption('GOLD', 1, "gol"), new desOption('SILVER', 1, "sil"));

stepArr[0] = new desStep('Select a metal type for your ring', stepArr0_opt, "Lrg", 1, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next")));

var stepArr1_opt = new Array(new desOption('POLISHED', 2, "p"), new desOption('HAMMERED', 2, "h"));

stepArr[1] = new desStep('Select a metal finish for your ring', stepArr1_opt, "Lrg", 2, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next")));

var stepArr2_opt = new Array(new desOption('WAVE', 3, "wave"), new desOption('ZIGZAG', 3, "zigzag"), new desOption('SPIRAL', 3, "spiral"));

stepArr[2] = new desStep('Select a wire decoration for your ring', stepArr2_opt, "Sml", 3, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next"), new navButton("Skip", "skip")), 4);

var stepArr3_opt = new Array(new desOption('BLACK', 4, "e_black"), new desOption('WHITE', 4, "e_white"), new desOption('GREEN', 4, "e_green"), new desOption('BLUE', 4, "e_blue"), new desOption('PURPLE', 4, "e_purple"), new desOption('RED', 4, "e_red"));

stepArr[3] = new desStep('Select an enamel for your ring', stepArr3_opt, "Sml", 4, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next"), new navButton("Skip", "skip")), 4);

var stepArr4_opt = new Array(new desOption('GEMSTONE', 6, "gem"), new desOption('MOTIF', 5, "motif"));

stepArr[4] = new desStep('What would you like to place onto your ring?', stepArr4_opt, "Lrg", 5, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next"), new navButton("Skip & Finish", "skipfinish")), 10);

var stepArr5_opt = new Array(new desOption('HEART', 10, "heart"), new desOption('LOVE KNOT', 10, "loveknot"), new desOption('SKULL', 10, "skull"), new desOption('CROSS', 10, "cross"), new desOption('FLOWER', 10, "flower"), new desOption('CLASPED<br />HANDS', 10, "hands", true));

stepArr[5] = new desStep('Select a motif for your ring', stepArr5_opt, "Sml", 6, 6, new Array(new navButton("Back", "prev"), new navButton("Finish", "finish")));

var stepArr6_opt = new Array(new desOption('DIAMOND', 8, "dia"), new desOption('RUBY', 7, "rub"), new desOption('SAPPHIRE', 7, "sap"), new desOption('EMERALD', 9, "eme"), new desOption('AMETHYST', 7, "ame"), new desOption('CITRINE', 7, "cit"));

stepArr[6] = new desStep('Select a gemstone for your ring', stepArr6_opt, "Sml", 6, 7, new Array(new navButton("Back", "prev"), new navButton("Continue", "next")));

var stepArr7_opt = new Array(new desOption('ROUND CABOUCHON', 10, "rca", true), new desOption('OVAL CABOUCHON', 10, "oca", true), new desOption('TABLE CUT', 10, "tab"), new desOption('ROUND BRILLIANT CUT', 10, "bri", true), new desOption('HEART BRILLIANT CUT', 10, "hea", true), new desOption('BAGUETTE CUT', 10, "bag"));

stepArr[7] = new desStep('Select a gem cut for your ring', stepArr7_opt, "Sml", 7, 7, new Array(new navButton("Back", "prev"), new navButton("Finish", "finish")));

var stepArr8_opt = new Array(new desOption('TABLE CUT', 10, "tab"), new desOption('ROUND BRILLIANT CUT', 10, "bri", true), new desOption('HEART BRILLIANT CUT', 10, "hea", true));

stepArr[8] = new desStep('Select a gem cut for your ring', stepArr8_opt, "Sml", 7, 7, new Array(new navButton("Back", "prev"), new navButton("Finish", "finish")));

var stepArr9_opt = new Array(new desOption('ROUND CABOUCHON', 10, "rca", true), new desOption('OVAL CABOUCHON', 10, "oca", true), new desOption('TABLE CUT', 10, "tab"), new desOption('ROUND BRILLIANT CUT', 10, "bri", true), new desOption('HEART BRILLIANT CUT', 10, "hea", true), new desOption('EMERALD CUT', 10, "eme"));

stepArr[9] = new desStep('Select a gem cut for your ring', stepArr9_opt, "Sml", 7, 7, new Array(new navButton("Back", "prev"), new navButton("Finish", "finish")));
						
function setupStep(step) {

	if (step != undefined) {
	
		var op = "\t"+'<div class="stepBox">'+"\n";
		op += "\t\t"+'<p style="margin: 0;"><strong class="str_yellow">Step '+stepArr[step].s+' of '+stepArr[step].ls+':</strong><br />'+"\n";
		op += "\t\t"+stepArr[step].q+'</p>'+"\n";
		op += "\t"+'</div>'+"\n";
		op += "\t"+'<ul id="stepOptions">'+"\n";
		
		for (var i = 0; i < stepArr[step].o.length; i++) {
		
			op += createOption(step, i, (i == currOpt));
			
		}
			
		op += "\t"+'</ul>'+"\n";
		
		var node = document.getElementById('sideBox');
		node.innerHTML = op;
		
		var op = "";
		
		for (var i = 0; i < stepArr[step].buttons.length; i++) {
			
			op += "\t\t"+'<li><a href="javascript:doAction(\''+stepArr[step].buttons[i].func+'\')" class="navBtn">'+stepArr[step].buttons[i].label+'</a></li>'+"\n";
			
		}
			
		op += "\t"+'</ul>'+"\n";
		
		var node = document.getElementById('stepNav');
		node.innerHTML = op;
	}
	
	if (currOpt > -1) {
		createRing(""+ringID+(parseInt(currOpt)+1));
	} else {
		createRing(""+ringID, true);
	}
	
}

function getImage(step, id)
{

	switch (step)
	{
	
		case 0 :
		return "images/buttons/btn_p_"+stepArr[step].o[id].id+".jpg";
		break;
		case 1 :
		return "images/buttons/btn_"+stepArr[step].o[id].id+"_"+stepArr[0].o[ringArr[0]].id+".jpg";
		break;
		case 2 :
		return "images/buttons/btn_"+stepArr[1].o[ringArr[1]].id+"_"+stepArr[0].o[ringArr[0]].id+"_"+stepArr[step].o[id].id+".jpg";
		break;
		case 3 :
		return "images/buttons/btn_"+stepArr[step].o[id].id+".jpg";
		break;
		case 4 :
		return "images/buttons/btn_"+stepArr[step].o[id].id+"_"+stepArr[0].o[ringArr[0]].id+".jpg";
		break;
		case 5 :
		return "images/buttons/btn_motif_"+stepArr[step].o[id].id+"_"+stepArr[0].o[ringArr[0]].id+".jpg";
		break;
		case 6 :
		return "images/buttons/btn_"+stepArr[step].o[id].id+"_bri.jpg";
		break;
		case 7 :
		return "images/buttons/btn_"+stepArr[6].o[ringArr[5]].id+"_"+stepArr[step].o[id].id+".jpg";
		break;
		case 8 :
		return "images/buttons/btn_"+stepArr[6].o[ringArr[5]].id+"_"+stepArr[step].o[id].id+".jpg";
		break;
		case 9 :
		return "images/buttons/btn_"+stepArr[6].o[ringArr[5]].id+"_"+stepArr[step].o[id].id+".jpg";
		break;
	
	}

}

function selectOption(step, id)
{
	
	currOpt = id;
	
	var node = document.getElementById('stepOptions');
	
	op = '';
	
	for (var i = 0; i < stepArr[step].o.length; i++) {
		
		op += createOption(step, i, (i == id));
			
	}
	
	node.innerHTML = op;
	
	createRing(""+ringID+(parseInt(currOpt)+1));

}

function createOption(step, id, select) {

	var li_cap_num = (stepArr[step].os == "Lrg") ? 2 : 3;
	var li_cap = (((id+1)%li_cap_num) == 0) ? ' class="edge">' : '>';
	
	if (select) {

	op = "\t\t"+'<li id="optBtn_'+id+'"'+li_cap+'<span href="javascript:selectOption('+step+','+id+')" class="opt'+stepArr[step].os+'Btn"><strong'+((stepArr[step].o[id].longl) ? ' class="longl"' : '')+'>'+stepArr[step].o[id].label+'</strong><img src="'+va_root+getImage(step, id)+'" /></span></li>'+"\n";
	
	} else {
	
	op = "\t\t"+'<li id="optBtn_'+id+'"'+li_cap+'<a href="javascript:selectOption('+step+','+id+')" class="opt'+stepArr[step].os+'Btn"><strong'+((stepArr[step].o[id].longl) ? ' class="longl"' : '')+'>'+stepArr[step].o[id].label+'</strong><img src="'+va_root+getImage(step, id)+'" /></a></li>'+"\n";
	
	}
	
	return op;
}

function createRing(id, quick, slide) {
	var ringPreview = document.getElementById("ringPreview");
	var ringImgID = trimEndZeroes(id);
	ringPreview.innerHTML = '<img id="ringImg" src="'+va_root+'images/rings/290/'+ringImgID+'.jpg" width="290" height="290" />';
	if (!quick) {
		changeOpac(0, 'ringImg');
		clearInterval(ringInt);
		ringInt = setInterval('checkRingLoaded()', 10);
	} else if (slide) {
		changeOpac(0, 'ringImg');
		clearInterval(ringInt);
		ringInt = setInterval('checkSlideRingLoaded()', 10);
	}
}

function trimEndZeroes(txt) {

	var ringImgIDArr = new Array();
	
	var numYet = false;

	for (var i = txt.length-1; i>-1; i--) {

		var id = parseInt(txt.substr(i, 1));
		
		if (numYet == false) {
			if (id != 0) {
				numYet = true;
				ringImgIDArr.unshift(id);
			}
		} else {
			ringImgIDArr.unshift(id);
		}
		
	}
	
	ringImgID = ringImgIDArr.join("");
	
	return ringImgID;
}

function checkRingLoaded(id) {
	var img = document.getElementById('ringImg');
	if (img.complete != false) {
		clearInterval(ringInt);
		opacity('ringImg', 0, 100, 1000);
	}
}

function checkSlideRingLoaded(id) {
	var img = document.getElementById('ringImg');
	if (img.complete != false) {
		clearInterval(ringInt);
		opacity('ringImg', 0, 100, 1000)
		setTimeout("fadeSlideShow()", 6000);
	}
}

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }  
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function startSlideShow() {
	ring_i = 0;
	doSlideShow(ring_i);
}

function doSlideShow() {
	createRing(ringsArr[ring_i], 1, 1);
	if (ring_i == ringsArr.length) {
	ring_i = 0;
	} else {
	ring_i++;
	}
}

function fadeSlideShow() {
	opacity('ringImg', 100, 0, 1000);
	setTimeout("doSlideShow()", 1000);
}

function doAction(func) {

	switch (func) {
		
		case 'next' :
			
			if (currOpt != -1) {
			
				location.href = va_root+"build/"+stepArr[currStep].o[currOpt].nextstep+"/"+ringID+(currOpt+1)+"/";
				
			} else {
			
				alert("Please select an option before continuing.");
			}
			
		break;
		
		case 'prev' :
		
			var cut = ringID.length-1;
		
			for (var i = cut; i >= 0; i--) {
				
				if (ringID.substr(i, 1) != 0) {
				
					var copt = parseInt(ringID.substr(i, 1))-1;
					
					ringID = ringID.substr(0, i);
					
					break;
					
				}
				
			}
			
			location.href = va_root+"build/"+prevStep+"/"+ringID+"/?copt="+copt;
			
		break;
		
		case 'skip' :
			
			var hrefStr = va_root+"build/"+stepArr[currStep].skipstep+"/"+ringID;
			
			for (var i = 0; i < (stepArr[currStep].skipstep - currStep); i++) {
			
				hrefStr += "0";
			
			}
			
			hrefStr += "/";
			
			location.href = hrefStr;
			
		break;
		
		case 'skipfinish' :
			
			var hrefStr = va_root+"finish/"+ringID+"/";
			
			location.href = hrefStr;
			
		break;
		
		case 'finish' :
			
			var hrefStr = va_root+"finish/"+ringID+(currOpt+1)+"/";
			
			location.href = hrefStr;
			
		break;
		
	}
	
}