function initDesignBath(mainImage)
{
	buildImageSelectTable("wallColors", wallColors, 6, "setWallColor(xxx);previewImage();", 30, 30);
	buildImageSelectTable("bathColors", bathColors, 5, "setBathColor(xxx);previewImage();", 30, 30);
	buildImageSelectTable("tileTypes", tileTypes, 4, "setTileType(xxx);previewImage();", 30, 30);
	setWallColor(0);
	setBathColor(0);
	setTileType(2);
	setApronType(0);
	document.mainImage.src = baseUrl.replace("&show","");
}



function previewImage()
{
	var url = baseUrl;
	
	if (selBathType == "shower")
		url += "&obj=shower&show&color=" + bathColors[selBathColor][2];
	
	if (selBathType == "partial")
		url += "&obj=3_quarters/";
	else
		url += "&obj=Full/";
	
	url += selTileType;	
	url += "&show&src=";
	url += wallColors[selWallColor][0];
	
	if (selBathType == "shower")
		url += "&obj=shower/showerhardware&show&src=" + selFinish;
	else {
		url += "&obj=tubs/";
		url += selApronType;
		url += "&show&color=" + bathColors[selBathColor][2];
		url += "&obj=tubs/";
		url += selApronType;
		url += "/tubhardware&show&src=" + selFinish;
	}	
	
	if (grabBar) {
		url += "&obj=grab_bar&show&src=" + grabBarColor;
		if (grabBarColor == "stainless")
			url += "&res=37";
	}
	
	if (wainscot) {
		url += "&obj=Wainscoting/"
		if(wainscotTile == "999")
			url += selTileType;
		else
			url += wainscotTileTypes[wainscotTile][0];
		url += "&show&src=";
		if(wainscotColor == "0")
		  url += wallColors[selWallColor][0];
		else
		  url += wallColors[wainscotColor-1][0];
	}
		
	if (selBathType == "partial") {
		url += "&obj=colorwalls/3_quarter_walls&show&color="
		url += wallColors[selWallColor][2];	
		if (decoTrim) {
			url += "&obj=art_deco_tile/3_quarter_trim&show&src="
			if(decoTrimColor == "0")
			 	url += wallColors[selWallColor][0];
			else
				url += wallColors[decoTrimColor-1][0];			
			if (!wainscot)
				url += "&obj=art_deco_tile/3_quarter_trim/wainscoting_art_deco&hide";
		}
		if (cornerTower) {
			url += "&obj=colorwalls/3_quarter_walls/tower&show&src=";
			url += cornerTowerColors[cornerTowerColor][0];
		} else
			url += "&obj=colorwalls/3_quarter_walls/tower&hide";
		url += "&obj=colorwalls/top_wall&show&color="
		url += wallColors[selWallColor][2];	
		
	} else {
		url += "&obj=colorwalls/ceiling&show&src=";
		url += wallColors[selWallColor][0];
		url += "&obj=colorwalls/lf_wall&show&color=";
		url += wallColors[selWallColor][2];
		url += "&obj=colorwalls/rt_wall&show&color=";
		url += wallColors[selWallColor][2];
		url += "&obj=colorwalls/top_wall&show&color=";
		url += wallColors[selWallColor][2];
		url += "&obj=colorwalls/3_quarter_walls&hide";
		if (decoTrim) {
			url += "&obj=art_deco_tile&show&src=";
			if(decoTrimColor == "0")
				url += wallColors[selWallColor][0];
			else
				url += wallColors[decoTrimColor-1][0];
			if (wainscot)
				url += "&obj=art_deco_tile/3_quarter_trim&hide";
			else {			
				url += "&obj=art_deco_tile/3_quarter_trim&hide";
				url += "&obj=art_deco_tile/wainscoting_art_deco&hide";
			}				
		}
		if (cornerTower) {
			url += "&obj=colorwalls/tower&show&src=";
			url += cornerTowerColors[cornerTowerColor][0];
		} else
			url += "&obj=colorwalls/tower&hide";				
	}
	
	if (soapDish) {
		url += "&obj=colorwalls/soapdish&show&src=";
		url += soapDishColors[soapDishColor][0];
	} else
		url += "&obj=colorwalls/soapdish&hide";

	if (selBathType == "partial") {
		url += "&obj=colorwalls/ceiling_no_tile&show&color=";
		url += wallColors[selWallColor][2];
	}

	document.mainImage.src = url;
	document.mainImage.alt = url;
}



function buildImageSelectTable(pageElemId, images, rowSize, action, iw, ih)
{
	var nItems = images.length;
	var table = "<table><tr>";
	
	for (i = 0; i < nItems; i++){
	
		if (i % rowSize === 0 && i !== 0)
			table += "</tr><tr></tr><tr>";
		
		var imgDir = (pageElemId == "tileTypes") ? "tileTypes.small" : pageElemId;
		var image = "images/" + imgDir + "/" + images[i][0] + ".jpg";

		table += "<td width=30 height=30><a href='#' onclick='";
		table += action.replace(/xxx/g, i);
		table += "' title='";
		table += images[i][1];
		table += "'><img width=";
		table += iw;
		table +=" height=";
		table += ih;
		table += " src='";
		table += image;		 
		table += "'></a></td>";
	}

	table += "</tr></table>";
	
	var newdiv = document.createElement("div");
	newdiv.innerHTML = table;
	document.getElementById(pageElemId).appendChild(newdiv);
}



var selWallColor = 0;


function setWallColor(colorInd)
{
    selWallColor = colorInd;

    var table = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
    table += "<td><div align=\"center\">";
    table += "<img alt=\"wall swatch\" width=100 height=100 src=\"images/wallColors/";
    table +=  wallColors[colorInd][0];
    table += ".jpg\"></div></td></tr><tr><td height=\"10\"><tr>";
    table += wallColors[colorInd][1];
    table += "</tr></td></tr></table>";

    document.getElementById("wallColorSwatch").innerHTML = table;
    
    document.getElementById("wallcolor").innerHTML = wallColors[colorInd][1];	
}



var selBathColor = 0;
function setBathColor(colorInd)
{
    selBathColor = colorInd;

    var table = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
    table += "<td><div align=\"center\">";
    table += "<img alt=\"bath swatch\" width=100 height=100 src=\"images/bathColors/";
    table +=  bathColors[colorInd][0];
    table += ".jpg\"></div></td></tr><tr><td height=\"10\"><tr>";
    table += bathColors[colorInd][1];
    table += "</tr></td></tr></table>";

    document.getElementById("bathColorSwatch").innerHTML = table;
    
    document.getElementById("basecolors").innerHTML = bathColors[colorInd][1];
}



var selBathType = "full";
function setBathType(bathType)
{
	selBathType = bathType;
	previewImage();
}



var wainscot = false;
function setWainscot(form)
{
	wainscot = !wainscot;
	
	if (wainscot) {

		var cSel = "<tr><td><select onchange=\"setWainscotColor(this);\">";
		cSel += "<option value=0>Current Wall Color</option>";
		for (i = 0; i < wallColors.length; i++)
		  cSel += "<option value=\"" + wallColors[i][0] + "\">" + wallColors[i][1]+ "</option>";
		cSel += "</select></td></tr>";
		
		document.getElementById("wainscotColors").innerHTML = cSel;
		
		var cSel2 = "<tr><td><select onchange=\"setWainscotTile(this);\">";
		for (i = 0; i < wainscotTileTypes.length; i++)
		  cSel2 += "<option value=\"" + wainscotTileTypes[i][0] + "\">" + wainscotTileTypes[i][1]+ "</option>";
		cSel2 += "<option value=999>Current Tile Type</option>";
		cSel2 += "</select></td></tr>";
		
		document.getElementById("wainscotTiles").innerHTML = cSel2;
		
		wainscotColor = 0;
		wainscotTile = 0;
	
	} else {

		document.getElementById("wainscotColors").innerHTML = "";	
		document.getElementById("wainscotTiles").innerHTML = "";
		
	}	

	previewImage();
	
}

var wainscotColor = 0;
function setWainscotColor(selector)
{
	wainscotColor = selector.selectedIndex;
	previewImage();
}

var wainscotTile = 0;
function setWainscotTile(selector)
{
	if(selector.options[selector.selectedIndex].value == "999")
	  wainscotTile = 999;
	else
	  wainscotTile = selector.selectedIndex;
	previewImage();
}

var selTileType = "12X12";
var selTileTypeIndex = 2;
function setTileType(tileType)
{
	selTileTypeIndex = tileType;
    selTileType = tileTypes[tileType][0];
    saveTileType = tileTypes[tileType][0];	
    document.getElementById("designBath_SelNoTile").checked = false;

    var table = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
    table += "<td><div align=\"center\">";
    table += "<img alt=\"tiletype swatch\" width=100 height=100 src=\"images/tileTypes/";
    table +=  tileTypes[tileType][0];
    table += ".jpg\"></div></td></tr><tr><td height=\"10\"><tr>";
    table += tileTypes[tileType][1];
    table += "</tr></td></tr></table>";

    document.getElementById("tileTypeSwatch").innerHTML = table;
    
    document.getElementById("tiletype").innerHTML = tileTypes[tileType][1];	
}



var saveTileType = selTileType;
function setStandardWall()
{
	if (selTileType == "blank") {
		selTileType = saveTileType;
		setTileType(selTileTypeIndex);
	} else {
		saveTileType = selTileType;
		selTileType = "blank";
		
		var table = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
    	table += "<td><div align=\"center\"></div></td></tr><tr><td height=\"10\">";
    	table += "</td></tr></table>";
    	document.getElementById("tileTypeSwatch").innerHTML = table;
	}
	
	previewImage();
}



var selApronType = "Biltmore";
function setApronType(apronType)
{
	selApronType = apronTypes[apronType][0];
	document.designBath_SelApron.src = "images/designBath_SelApron" + apronType + ".png";
	document.getElementById("apronstyle").innerHTML = apronTypes[apronType][1];
	previewImage();
}



var decoTrim = false;
function setDecoTileTrim()
{
	decoTrim = !decoTrim;
	
	if (decoTrim) {
	
		var cSel = "<tr><td><select onchange=\"setDecoTrimColor(this);\">";	
		cSel += "<option value=0>Current Wall Color</option>";
		for (i = 0; i < wallColors.length; i++)
			cSel += "<option value=\"" + wallColors[i][0] + "\">" + wallColors[i][1] + "</option>";
		cSel += "</select></td></tr>";
		
		document.getElementById("decoTrimColors").innerHTML = cSel;
		
		decoTrimColor = 0;
		
	} else
	
		document.getElementById("decoTrimColors").innerHTML = "";	
	
	previewImage();
}

var decoTrimColor = 0;
function setDecoTrimColor(selector)
{
	decoTrimColor = selector.selectedIndex;
	previewImage();
}



var grabBar = false;
function setGrabBar()
{
	grabBar = !grabBar;
	
	if (grabBar) {
	
		var cSel = "<tr><td><select onchange=\"setGrabBarColor(this);\">";	
		for (i = 0; i < grabBarColors.length; i++)
		  cSel += "<option value=\"" + grabBarColors[i][0] + "\">" + grabBarColors[i][1]+ "</option>";	
		cSel += "</select></td></tr>"
		
		document.getElementById("grabBarColors").innerHTML = cSel;
		
		grabBarColor = "almond";
		
	} else
	
		document.getElementById("grabBarColors").innerHTML = "";
			
	previewImage();
}


var grabBarColor = "almond";
function setGrabBarColor(selector)
{
	grabBarColor = selector.options[selector.selectedIndex].value;
	previewImage();
}



var soapDish = false;
function setSoapDish()
{
	soapDish = !soapDish;
	
	if (soapDish) {
	
		var cSel = "<tr><td><select onchange=\"setSoapDishColor(this);\">";
        for (i = 0; i < wallColors.length; i++)
          cSel += "<option value=\"" + wallColors[i][0] + "\">" + wallColors[i][1]+ "</option>";
		cSel += "</select></td></tr>"
		
		document.getElementById("soapDishColors").innerHTML = cSel;
		
		soapDishColor = 0;
		
	} else
	
		document.getElementById("soapDishColors").innerHTML = "";	
	
	previewImage();
}

var soapDishColor = 0;
function setSoapDishColor(selector)
{
	soapDishColor = selector.selectedIndex;
	previewImage();
}



var cornerTower = false;
function setCornerTower()
{
	cornerTower = !cornerTower;
	
	if (cornerTower) {
	
		var cSel = "<tr><td><select onchange=\"setCornerTowerColor(this);\">";
        for (i = 0; i < wallColors.length; i++)
          cSel += "<option value=\"" + wallColors[i][0] + "\">" + wallColors[i][1]+ "</option>";
		cSel += "</select></td></tr>"
		
		document.getElementById("cornerTowerColors").innerHTML = cSel;
		
		cornerTowerColor = 0;
		
	} else
	
		document.getElementById("cornerTowerColors").innerHTML = "";	
	
	previewImage();
}

var cornerTowerColor = 0;
function setCornerTowerColor(selector)
{
	cornerTowerColor = selector.selectedIndex;
	previewImage();
}



var selFinish = "chrome";
function setFinish(finish)
{
	selFinish = finish;
	previewImage();
}