var Border = {

	/* CSS border generator class
		(c) CopySense.co.uk 2003 ~ Martin Latter */

	iBorderStyleIndex: 3,
	iBorderWidthIndex: 1,

	loader: function() {

		cbsElemTxt("title");
		document.getElementById("borderform").onsubmit = function() {return false;};

		document.getElementById("reset").onclick = Border.reset;
		document.getElementById("test").onclick = Border.border_change;

		document.getElementById("pixelchoice").onclick = function() {Border.widthIndex(1);};
		document.getElementById("emschoice").onclick = function() {Border.widthIndex(2);};
		document.getElementById("keychoice").onclick = function() {Border.widthIndex(3);};

		document.getElementById("dotted").onclick = function() {Border.styleIndex(1);};
		document.getElementById("dashed").onclick = function() {Border.styleIndex(2);};
		document.getElementById("solid").onclick = function() {Border.styleIndex(3);};
		document.getElementById("double").onclick = function() {Border.styleIndex(4);};
		document.getElementById("groove").onclick = function() {Border.styleIndex(5);};
		document.getElementById("ridge").onclick = function() {Border.styleIndex(6);};
		document.getElementById("inset").onclick = function() {Border.styleIndex(7);};
		document.getElementById("outset").onclick = function() {Border.styleIndex(8);};

		document.getElementById("highlight").onclick = Border.highlight;
	},

	widthIndex: function(n) {

		document.getElementById("wbg" + this.iBorderWidthIndex).style.background = "none";
		document.getElementById("wbg" + n).style.background = "#d4dbff";
		this.iBorderWidthIndex = n;
	},

	styleIndex: function(n) {

		document.getElementById("bbg" + this.iBorderStyleIndex).style.background = "none";
		document.getElementById("bbg" + n).style.background = "#d4dbff";
		this.iBorderStyleIndex = n;
	},

	border_change: function() {

		var rHex3 = /[0-9a-fA-F]{3}/;
		var rHex6 = /[0-9a-fA-F]{6}/;
		var sCode = "";
		var sOutputCode = "";
		var oPadding = document.getElementById("padding");
		var sPadding = oPadding.options[oPadding.selectedIndex].value + "px";
		var df = document.getElementsByName("feature");
		var bdv = document.getElementById("bd_col").value;
		var bgv = document.getElementById("bg_col").value;
		var box = document.getElementById("box");

		if (bdv.length == 3 || bgv.length == 3) {
			if (!rHex3.test(bgv) || !rHex3.test(bdv)) {
				alert("Input error in hex colour box:\nhex characters are 0-9 and A-F\n(at least 3 characters required).");
				return;
			}
		}
		else {
			if (!rHex6.test(bgv) || !rHex6.test(bdv)) {
				alert("Input error in hex colour box:\nhex characters are 0-9 and A-F\n(6 or 3 characters required).");
				return;
			}
		}

		var oSizeChoice = document.getElementsByName("sizechoice");
		var oSizePixels = document.getElementById("sizepixels");
		var oSizeEms = document.getElementById("sizeems");
		var oSizeKeyw = document.getElementById("sizekeyw");

		if (oSizeChoice[0].checked) {
			sCode =  oSizePixels.options[oSizePixels.selectedIndex].value + "px";
		}
		else if (oSizeChoice[1].checked) {
			sCode =  oSizeEms.options[oSizeEms.selectedIndex].value + "em";
		}
		else {
			sCode = oSizeKeyw.options[oSizeKeyw.selectedIndex].value;
		}

		if (df[0].checked) {sCode += " dotted";}
		if (df[1].checked) {sCode += " dashed";}
		if (df[2].checked) {sCode += " solid";}
		if (df[3].checked) {sCode += " double";}
		if (df[4].checked) {sCode += " groove";}
		if (df[5].checked) {sCode += " ridge";}
		if (df[6].checked) {sCode += " inset";}
		if (df[7].checked) {sCode += " outset";}

		sCode += " #" + document.getElementById("bd_col").value;
		box.style.padding = sPadding;
		box.style.border = sCode;
		box.style.backgroundColor = "#" + document.getElementById("bg_col").value;
		sOutputCode = "border:" + sCode + "; background-color:#" + document.getElementById("bg_col").value + "; padding:" + sPadding + ";";
		document.getElementById("results").value = sOutputCode;
	},

	reset: function() {

		var oBox = document.getElementById("box");
		oBox.style.border = "1px solid #ccc";
		oBox.style.padding = "5px";
		oBox.style.background = "#f0f8ff";
	},

	highlight: function() {

		var csscode = document.getElementById("results");
		csscode.focus();
		csscode.select();
	}
};


window.onload = Border.loader;
window.onunload = function() {Border = null;};