document.writeln("");
document.writeln("");
document.writeln("<style type=\"text/css\">");
document.writeln("TABLE.ndBelts { border: solid #efefef 4px; background: url(http://www.notdesigner.com/banners/belts/belts_bg.gif); background-repeat: repeat-none}");
document.writeln("TD.ndBling {padding-top:5px; padding-bottom:5px;}");
document.writeln("TD.ndSelection {color: #ffffff; font-size: 11px;font-family: Verdana; font-weight: bold; padding-left:5px; padding-right:5px;}");
document.writeln("</style>");
document.writeln("");

var style = "rhinestone";

function createTitle(title) {
	if (title.length > 7) {
		alert ("Please enter only up to 7 letters");
	} else {
		clearTitle();
		for(var i=0;i<title.length;i++) {
			var canvas = document.getElementById('CANVAS');
			var newLetter = document.createElement('img');
			var theChar = title.charAt(i);
			if (theChar == " ") {
				theChar = "space.gif";
			} else {
				theChar = theChar.toUpperCase()+'.jpg';
			}
			newLetter.setAttribute('src','http://www.notdesigner.com/images/buckle-previewer/'+style+'/'+theChar);
			canvas.appendChild(newLetter);
		}
	}
}

function clearTitle() {
	var canvas = document.getElementById('CANVAS');
	var letters = canvas.childNodes;
	while(true) {
		if (letters.length > 0) {
			if (letters.item(0).nodeType == 1) {
				canvas.removeChild(letters.item(0));
				i=-1;
			}
		} else {
			break;
		}
	}
}

function changeBuckle(newStyle) {
	var temp = newStyle.replace(/\s\(.*\)/,"");
	var path = temp.toLowerCase();
	document.getElementById('frame-left').src = "http://www.notdesigner.com/images/buckle-previewer/"+path+"/frame-left.jpg";
	document.getElementById('frame-right').src = "http://www.notdesigner.com/images/buckle-previewer/"+path+"/frame-right.jpg";
	document.getElementById('frame-top').style.backgroundImage = "url('http://www.notdesigner.com/images/buckle-previewer/"+path+"/frame-top.jpg')";
	document.getElementById('frame-bottom').style.backgroundImage = "url('http://www.notdesigner.com/images/buckle-previewer/"+path+"/frame-bottom.jpg')";
}

function changeLetters(newStyle) {
	var temp = newStyle.replace(/\s\(.*\)/,"");
	newStyle = temp.toLowerCase();
	var canvas = document.getElementById('CANVAS');
	var letters = canvas.childNodes;
	for(var i=0;i<letters.length;i++) {
		if (letters.item(i).nodeType == 1) {
			path = letters.item(i).src.replace(style,newStyle.toLowerCase());
			letters.item(i).src = path;
		}
	}
	style = newStyle.toLowerCase();
}

document.writeln("");
document.writeln("	<table width=\"500\" border=\"0\" cellpadding=\"5\" cellspacing=\"0\" bgcolor=\"#000000\" style=\"border: solid #efefef 4px;\">");
document.writeln("	  <tr>");
document.writeln("	    <td>");
document.writeln("			<table class=\"ndBelts\" width=\"500\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#000000\">");
document.writeln("				<tr>");
document.writeln("					<td rowspan=\"3\">&nbsp;&nbsp;</td>");
document.writeln("					<td class=\"ndBling\">");
document.writeln("						<table border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">");
document.writeln("							<tr>");
document.writeln("								<td rowspan=\"4\"><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/frame-left.jpg\" width=\"37\" height=\"137\" id=\"frame-left\"/></td>");
document.writeln("								<td height=\"25\" background=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/frame-top.jpg\" id=\"frame-top\">&nbsp;</td>");
document.writeln("								<td rowspan=\"4\"><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/frame-right.jpg\" width=\"37\" height=\"137\" id=\"frame-right\"/></td>");
document.writeln("							</tr>");
document.writeln("							<tr>");
document.writeln("								<td height=\"87\" id=\"CANVAS\"><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/B.jpg\" width=\"52\" height=\"87\" /><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/L.jpg\" width=\"56\" height=\"87\" /><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/I.jpg\" width=\"30\" height=\"87\" /><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/N.jpg\" width=\"52\" height=\"87\" /><img src=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/G.jpg\" width=\"59\" height=\"87\" /></td>");
document.writeln("							</tr>");
document.writeln("							<tr>");
document.writeln("								<td height=\"25\" background=\"http://www.notdesigner.com/images/buckle-previewer/rhinestone/frame-bottom.jpg\" id=\"frame-bottom\">&nbsp;</td>");
document.writeln("							</tr>");
document.writeln("						</table></td>");
document.writeln("				</tr>");
document.writeln("				<tr>");
document.writeln("					<td align=\"center\">");
document.writeln("					  <table border=\"0\">");
document.writeln("						<tr>");
document.writeln("						  <td class=\"ndSelection\">");
document.writeln("							Buckle Text:<br/><input id=\"title\" type=\"text\" name =\"id[txt_5]\" size=\"10\" maxlength=\"7\" value=\"\"  onKeyUp=\"createTitle(document.getElementById('title').value);\" ></td>");
document.writeln("						  <td class=\"ndSelection\">");
document.writeln("							Buckle Style:<br/><select name=\"id[6]\" onChange=\"changeBuckle(this.options[this.selectedIndex].text);\"><option value=\"65\">Rhinestone</option><option value=\"66\">Chrome</option></select></td>");
document.writeln("						  <td class=\"ndSelection\">");
document.writeln("							Letters Style:<br/><select name=\"id[7]\" onChange=\"changeLetters(this.options[this.selectedIndex].text);\"><option value=\"65\">Rhinestone</option><option value=\"66\">Chrome</option></select></td>");
document.writeln("						</tr>");
document.writeln("					  </table></td>");
document.writeln("				</tr>");
document.writeln("				<tr>");
document.writeln("					<td align=\"center\">");
document.writeln("<a href=\"http://www.paidonresults.net/c/2053/38/155/0/product_info.php?cPath=26&products_id=100\" target=\"_blank\"><img src=\"http://www.notdesigner.com/banners/belts/ndlogo.jpg\" border=\"0\" alt=\"Click here to get your customised bling belt at NotDesigner.com!\" onMouseOver=\"window.status='Order your unique bling belt at NotDesigner.com';return true\" OnMouseOut=\"window.status='Visit NotDesigner.com for unique fashion accessories';return true\"></a>");
document.writeln("					</td>");
document.writeln("				</tr>");
document.writeln("			</table>");
document.writeln("	    </td>");
document.writeln("	  </tr>");
document.writeln("	</table>");