// Initialize the HTML strings

var stylestring = '';
var shapestring = '';
var marblestring = '';

var activecolor = 0;
var chosencolor = 0;
var orientation = new Array();


// Build the objects on the page

function buildpage() {
	buildshape();
	buildmarbles();
	if (pagetype == 'configurator') {
		buildfinishes();
		buildcolors();
		buildtemplates();
	}
	buildcss();
}


// Build the div containing the fixture shape

function buildshape() {
	stylestring += '#divshape { position: absolute; left: ' + pageposx + 'px; top: ' + pageposy + 'px; visibility: visible; }\n';
	if (pagetype != 'admin') {
		shapestring = '<div id="divshape"><img src="' + linkref + 'images/shapes/' + shape + '_' + size + '_' + activefinish + '.gif" name="shape"></div>\n';
	} else {
		shapestring = '<div id="divshape"><img src="' + linkref + 'images/admin/shapes/' + shape + '_' + size + '.gif" name="shape"></div>\n';
	}
}


// Build the divs containing the marbles

function buildmarbles() {
	for (i = 0; i < marblecoords.length; i++) {
		var coord = marblecoords[i];
		var thiscoord = coord.split('|');
		var marblex = parseInt(thiscoord[0]);
		var marbley = parseInt(thiscoord[1]);
		if (shape == 'triangle') {
			orientation[i] = thiscoord[2];
		}
		if (pagetype == 'configurator') {
			marblestatus[i] = 0;
		}
		
		if (pagetype == 'admin') {
			var shapecenter = shapewidth / 2;
			var xdiff = Math.abs(shapecenter - marblex);
			
			if (shape == 'triangle') {
				if (orientation[i] == 'up') {
					marbley += 8;
				} 
			}
			if (marblex < shapecenter) {
				marblex = shapecenter + xdiff - marblewidth;
			} else {
				marblex = shapecenter - xdiff - marblewidth;
			}
			
			marblex *= adminscalex;
			marbley *= adminscaley;
		}

		stylestring += '#divmarble' + i + ' { position: absolute; left: ' + (pageposx + marblex) + 'px; top: ' + (pageposy + marbley) + 'px; visibility: visible; }\n';
		if (shape != 'triangle') {
			if (pagetype != 'admin') {
				marblestring += '<div id="divmarble' + i + '"><a href="javascript:changecolor(' + i + ')"><img src="' + linkref + 'images/marbles/' + shape + '_' + marblestatus[i] + '.gif" name="marble' + i + '" border="0"></a></div>';
			} else {
				marblestring += '<div id="divmarble' + i + '"><img src="' + linkref + 'images/admin/marbles/square_' + marblestatus[i] + '.gif" name="marble' + i + '" border="0"></div>';
			}
		} else {
			if (pagetype != 'admin') {
				marblestring += '<div id="divmarble' + i + '"><a href="javascript:changecolor(' + i + ')"><img src="' + linkref + 'images/marbles/' + shape + '_' + marblestatus[i] + '_' + orientation[i] + '.gif" name="marble' + i + '" border="0"></a></div>';
			} else {
				marblestring += '<div id="divmarble' + i + '"><img src="' + linkref + 'images/admin/marbles/square_' + marblestatus[i] + '.gif" name="marble' + i + '" border="0"></div>';
			}
		}
	}
}


// Build the stylesheet

function buildcss() {
	document.write('<style type="text/css">\n' + stylestring + '</style>\n');
}


// Change the color of a marble

function changecolor(marblenum) {
	if (pagetype == 'configurator') {
		var docref = '';
		if (ns4) {
			docref = 'document.divmarble' + marblenum + '.';
		}
		if (shape != 'triangle') {
			eval(docref + 'document.images["marble' + marblenum + '"].src = "' + linkref + 'images/marbles/' + shape + '_' + activecolor + '.gif"');
		} else {
			eval(docref + 'document.images["marble' + marblenum + '"].src = "' + linkref + 'images/marbles/' + shape + '_' + activecolor + '_' + orientation[marblenum] + '.gif"');
		}	
		marblestatus[marblenum] = activecolor;
	}
}


// Write the string for the templates (not used)

function writetemplate() {
	for (i = 0; i < marblestatus.length; i++) {
		document.write(marblestatus[i] + ',');
	}
}


function requestquote() {
	var marbles = '';
	var statustotal = 0;

	for (i = 0; i < marblestatus.length; i++) {
		marbles += marblestatus[i];
		statustotal += parseInt(marblestatus[i]);
		if (i != marblestatus.length - 1) {
			marbles += ',';
		}
	}
	
	if (statustotal > 0) {	
		document.forms.configurator.shape.value = shape;
		document.forms.configurator.size.value = size;
		document.forms.configurator.finish.value = activefinish;
		document.forms.configurator.marbles.value = marbles;
	
		document.forms.configurator.submit();
	} else {
		alert("You must place at least one marble to continue.");
	}
}


buildpage();