var finishstring = '';
var colorstring = '';
var templatestring = '';

var marblestatus = new Array();
var templatestatus = new Array();
var activefinish = 0;


// Base for referencing links and images

var linkref = '../';


// Preload the shapes

for (i = 0; i < finishes.length; i++) {
	var theimg = new Image();
	theimg.src = linkref + 'images/shapes/' + shape + '_' + size + '_' + i + '.gif';
}


// Build the finish options

function buildfinishes() {
	for (i = 0; i < finishes.length; i++) {
		finishstring += '<tr>';
		finishstring += '<td width="23"><a href="javascript:choosefinish(' + i + ')"><img src="' + linkref + 'images/shapes/finish' + i + '.gif" width="23" height="23" border="0" name="finishcolor' + i + '"></a></td>';
		finishstring += '<td width="112"><p class="colorselection"><a href="javascript:choosefinish(' + i + ')">' + finishes[i] + '</a></p></td>'; 			
		finishstring += '</tr>';
	}
}


// Build the color options

function buildcolors() {
	var thecolors = '';
	for (i = 0; i < colors.length; i++) {
		thecolors += '<tr>';
		if (i == chosencolor) {
			thecolors += '<td width="23"><a href="javascript:choosecolor(' + i + ')"><img src="' + linkref + 'images/marbles/marblecolors_' + i + '_on.gif" width="23" height="23" border="0" name="marblecolor' + i + '"></a></td>'; 			
		} else {
			thecolors += '<td width="23"><a href="javascript:choosecolor(' + i + ')"><img src="' + linkref + 'images/marbles/marblecolors_' + i + '_off.gif" width="23" height="23" border="0" name="marblecolor' + i + '"></a></td>'; 			
		}
		thecolors += '<td width="112"><p class="colorselection"><a href="javascript:choosecolor(' + i + ')">' + colors[i] + '</a></p></td>'; 			
		thecolors += '</tr>';
	}
	colorstring = thecolors;
}


// Preload the marbles

for (i = 0; i < colors.length; i++) {
	var theimg = new Image();
	if (shape != 'triangle') {
		theimg.src = linkref + 'images/marbles/' + shape + '_' + i + '.gif';
	} else {
		theimg.src = linkref + 'images/marbles/' + shape + '_' + i + '_up.gif';
		theimg.src = linkref + 'images/marbles/' + shape + '_' + i + '_down.gif';
	}
}

// Build the templates (template fixtures)

function buildtemplates() {
	if (template.length > 0) {
		templatestring += '<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr>';
		for (i = 0; i < template.length; i++) {
			templatestring += '<td width="5"><img src="' + linkref + 'images/common/spacer.gif" width="5" height="5"></td>';
			templatestring += '<td width="' + parseInt(100/template.length) + '%"><a href="javascript:choosetemplate(' + i + ');"><img src="' + linkref + 'images/templates/' + shape + '_' + size + '_' + i + '.gif" border="0"></a></td>';
			templatestatus[i] = template[i].split(',');
		}
		templatestring += '</tr></table>';
	}
}


// Set the active finish chosen by the user

function choosefinish(whichfinish) {
	var docref = '';
	if (ns4) {
		docref = 'document.divshape.';
	}
	eval(docref + 'document.images["shape"].src = "' + linkref + 'images/shapes/' + shape + '_' + size + '_' + whichfinish + '.gif"');
	activefinish = whichfinish;
}


// Change the marbles when user selects a template

function choosetemplate(whichtemplate) {
	choosefinish(templatefinish[whichtemplate]);
	for (i = 0; i < marblestatus.length; i++) {
		marblestatus[i] = templatestatus[whichtemplate][i];
		activecolor = marblestatus[i];
		changecolor(i);
	}
	activecolor = chosencolor;
}


// Set active color when chosen by user

function choosecolor(i) {
	eval('document.images["marblecolor' + activecolor + '"].src = "' + linkref + 'images/marbles/marblecolors_' + activecolor + '_off.gif"');
	eval('document.images["marblecolor' + i + '"].src = "' + linkref + 'images/marbles/marblecolors_' + i + '_on.gif"');
	chosencolor = i;
	activecolor = chosencolor;
}


// Reset the marbles to blank

function resetmarbles() {
	activecolor = 0;
	for (i = 0; i < marblestatus.length; i++) {
		changecolor(i);
	}
	activecolor = chosencolor;
}