var webSiteIndex = 0;
var webIndex = 1;
var imageIndex = 2;
var blogSiteIndex = 3;
var blogIndex = 4;
var dictIndex = 5;
var default_actions = new Array("http://www.yodao.com/search", "http://www.yodao.com/search", "http://image.yodao.com/search", "http://blog.yodao.com/search", "http://blog.yodao.com/search", "http://dict.yodao.com/search");
var names = new Array("站内网页", "全部网页", "图片搜索", "站内博客", "全部博客", "海量词典");

// show or hide advance options
function changeAdvanceStatus() {
	var form = document.getElementById("optionForm");
	var adv = document.getElementById("advanceOption");
	var iconBottom = document.getElementById("advanceIconBottom");
	var iconTop = document.getElementById("advanceIconTop");
	var tip = document.getElementById("advanceTip");
	if(adv.style.display == "none") {
		adv.style.display = "block";
		iconTop.style.display = "";
		iconBottom.style.display = "none";
		tip.innerHTML = "";
		form.advStatus.value = "block";
	} else {
		adv.style.display = "none";
		iconTop.style.display = "none";
		iconBottom.style.display = "";
		tip.innerHTML = "（点击后展开详细设置页面）";
		form.advStatus.value = "none";
	}
}

function resetToDefault() {
	var optionForm = document.getElementById("optionForm");
	for(i = 0; i < optionForm.product.length; i++) {
		var checkBox = optionForm.product[i];
		if(checkBox.value == "site" || checkBox.value == "web") {
			checkBox.checked = "true";
		} else {
			checkBox.checked = "";
		}
	}
	optionForm.defaultProduct[0].checked = "true";
	optionForm.style[0].checked = "true";
	optionForm.borderColor.value = "BBBBBB";
	optionForm.bkColor.value = "FFFFFF";
	optionForm.formWidth[0].checked = "checked";
	updatePreview(optionForm);
}

// clone form values
function submitOptionForm(form) {
	var optionForm = document.getElementById("optionForm");
	if(form.codestyle[0].checked) {
		optionForm.codeStyle.value = "iframe";
	} else {
		optionForm.codeStyle.value = "form";
	}
	if(getCheckedNum(optionForm.product) == 0) {
		alert("请至少选择一种产品");
	} else {
		optionForm.submit();
	}
}

// update preview
var lastDomain = "";
function updatePreview(form) {
	if(getCheckedNum(form.product) == 0) {
		return;
	}
	
	if(form.domain.value == "") {
		form.product[webSiteIndex].disabled = "disabled";
		form.product[webSiteIndex].checked = "";
		form.product[blogSiteIndex].disabled = "disabled";
		form.product[blogSiteIndex].checked = "";
	} else {
		form.product[webSiteIndex].disabled = "";
		form.product[blogSiteIndex].disabled = "";
		if(lastDomain == "") {
			if(form.product[webIndex].checked) {
				form.product[webSiteIndex].checked = "checked";
			}
			if(form.product[blogIndex].checked) {
				form.product[blogSiteIndex].checked = "checked";
			}
		}
	}
	
	var minWidth = new Array(220, 320, 220, 320, 220);
	var area = document.getElementById("customWidthArea");
	var adv = document.getElementById("minWidthDes");
	var widthMsg = document.getElementById("widthMsg");
	if(adv != null) {
		area.removeChild(adv);
	}
	var text = "（建议最小宽度：" + minWidth[getStyle(form)] + "px）";
	adv = document.createElement("span");
	adv.setAttribute("id", "minWidthDes");
	adv.appendChild(document.createTextNode(text));
	if(widthMsg == null) {
		area.appendChild(adv);
	} else {
		area.insertBefore(adv, widthMsg);
	}
	
	var index = getDefaultIndex(form);
	isFirst = true;
	for(i = 0; i < form.product.length; i++) {
		if(form.product[i].checked) {
			form.defaultProduct[i].disabled = "";
			if(index == i || isFirst) {
				form.defaultProduct[i].checked = "checked";
			}
			isFirst = false;
		} else {
			form.defaultProduct[i].disabled = "disabled";
		}
	}
	var colorBoard = document.getElementById("colorBoard");
	if(colorBoard != null) {
		colorBoard.style.display = "none"
	}
	var readme = document.getElementById("codestylereadme");
	if(readme != null) {
		document.getElementById("codestylereadme").style.display = "none";
	}
	
	var w = (document.body.offsetWidth - 149) * 0.85;
	w = w < 600 ? w : 600;
	var previewBorder = document.getElementById("previewBorder");
	var previewTable = document.getElementById("previewTable");
	var width = getTableWidthInput(form);
	if(!checkWidth(width)) {
		width = parseInt(minWidth[index]) + 20;
	} else {
		width = parseInt(width) + 20;
	}
	w = w > width ? w : width;
	previewBorder.style.width = w + "px";
	previewTable.style.width = w + "px";
	
	clearPreviewArea();
	var previewArea = document.getElementById("previewArea");
	var scriptNode = genScriptNode(form);
	if(scriptNode != null) {
		previewArea.appendChild(scriptNode);
	}
	var formNode = genForm(form);
	previewArea.appendChild(formNode);
	lastDomain = form.domain.value;
}


// clear old preivew
function clearPreviewArea() {
	var c = document.getElementById("yodaoSearch");
	var s = document.getElementById("previewScript");
	var p = document.getElementById("previewArea");
	if(c != null)
		p.removeChild(c);
	if(s != null)
		p.removeChild(s);
}

// get selected product num
function getCheckedNum(checkBoxes) {
	var n = 0;
	for(i = 0; i < checkBoxes.length; i++) {
		if(checkBoxes[i].checked) {
			n++;
		}
	}
	return n;
}

// need script?
function isScriptNeeded(form) {
	var style = getStyle(form);
	if(style == "2" || style == "3") {
		return false;
	}
	var checkBoxes = form.product;
	if(getCheckedNum(checkBoxes) < 2) {
		return false;
	}
	if(getCheckedNum(checkBoxes) == 2 && ((checkBoxes[webSiteIndex].checked && checkBoxes[webIndex].checked) || (checkBoxes[blogSiteIndex].checked && checkBoxes[blogIndex].checked))) {
		return false;
	}
	return true;
}

// gen script node if necessary
function genScriptNode(form) {
	if(!isScriptNeeded(form)) {
		return null;
	}
	var checkBoxes = form.product;
	var isFirst = true;
	var s = "var actions = new Array(";
	for(i = 0; i < checkBoxes.length; i++) {
		if(checkBoxes[i].checked) {
			if(isFirst) {
				isFirst = false;
			} else {
				s = s + ",";
			}
			s = s + "'" + default_actions[i] + "'";
		}
	}
	s = s + ");";
	var sNode = document.createElement("script");
	sNode.setAttribute("id", "previewScript");
	sNode.text = s;
	return sNode;
}

function genForm(form) {
	var action;
	var index = getDefaultIndex(form);
	if(index == -1) {
		for(i = 0; i < form.product.length; i++) {
			if(form.product[i].checked) {
				action = default_actions[i];
				break;
			}
		}
	} else {
		action = default_actions[index];
	}
	var f = document.createElement("form");
	f.setAttribute("action", action);
	f.setAttribute("enctype", "utf-8");
	f.setAttribute("method", "get");
	f.setAttribute("target", "_blank");
	f.setAttribute("id", "yodaoSearch");
	
	var keyfrom = document.createElement("input");
	keyfrom.setAttribute("type", "hidden");
	keyfrom.setAttribute("name", "keyfrom");
	keyfrom.setAttribute("value", "tbl");
	f.appendChild(keyfrom);
	
	f.appendChild(genFormTable(form));
	return f;
}

function getStyle(form) {
	var style;
	for(i = 0; i < form.style.length; i++) {
		if(form.style[i].checked) {
			style = form.style[i].value;
			break;
		}
	}
	return style;
}

function genFormTable(form) {
	var style = getStyle(form);
	if(style == 0) {
		return genFormTable_0(form);
	} else if(style == 1) {
		return genFormTable_1(form);
	} else if(style == 2) {
		return genFormTable_2(form);
	} else if(style == 3) {
		return genFormTable_3(form);
	} else if(style == 4) {
		return genFormTable_4(form);
	} else {
		return genFormTable_0(form);
	}
}

function getDefaultIndex(form) {
	var defaultValue;
	for(i = 0; i < form.defaultProduct.length; i++) {
		if(form.defaultProduct[i].checked) {
			defaultValue = form.defaultProduct[i].value;
			break;
		}
	}
	if(defaultValue == "site" && form.product[webSiteIndex].checked) {
		return webSiteIndex;
	} else if(defaultValue == "web" && form.product[webIndex].checked) {
		return webIndex;
	} else if(defaultValue == "blogsite" && form.product[blogSiteIndex].checked) {
		return blogSiteIndex;
	} else if(defaultValue == "blog" && form.product[blogIndex].checked) {
		return blogIndex;
	} else if(defaultValue == "dict" && form.product[dictIndex].checked) {
		return dictIndex;
	} else if(defaultValue == "image" && form.product[imageIndex].checked) {
		return imageIndex;
	}else {
		return -1;
	}
}

function checkColor(color) {
	return /^[a-fA-F0-9]{6}$/.test(color);
	
}

function checkWidth(width) {
	if(/^\d+$/.test(width)) {
		return true;
	}
	return false;
}

function getTableWidthInput(form) {
	var value;
	if(form.formWidth[form.formWidth.length - 1].checked) {
		document.getElementById('customWidthArea').style.display='block';
		return form.customWidth.value;
	}
	document.getElementById('customWidthArea').style.display='none';
	for(i = 0; i < form.formWidth.length - 1; i++) {
		if(form.formWidth[i].checked) {
			return form.formWidth[i].value;
		}
	}
	return form.customWidth.value;
}

function getTextFieldWidth(form, discrepancy, defaultValue) {
	var formWidth = getTableWidthInput(form);
	if(checkWidth(formWidth)) {
		return formWidth - discrepancy;
	} else {
		return defaultValue;
	}
}

function genTableStyle(form) {
	var defaultBorderColor = "BBBBBB";
	var defaultBkColor = "FFFFFF";
	var css = "border: solid 1px #";
	var color;
	if(checkColor(form.borderColor.value)) {
		css = css + form.borderColor.value;
		var sp = document.getElementById("borderMsg");
		if(sp != null) {
			document.getElementById("borderColorField").removeChild(sp);
		}
		color = form.borderColor.value;
	} else {
		css = css + defaultBorderColor;
		var sp = document.getElementById("borderMsg");
		if(sp == null) {
			var sp = document.createElement("span");
			sp.setAttribute("id", "borderMsg");
			sp.setAttribute("class", "error");
			sp.className = "error";
			sp.appendChild(document.createTextNode(" 颜色值格式错误，使用默认颜色值（BBBBBB）"));
			document.getElementById("borderColorField").appendChild(sp);
		}
		color = defaultBorderColor;
	}
	document.getElementById("borderColorPreview").style.cssText="BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #" + color;
	css = css + ";";
	if(checkColor(form.bkColor.value)) {
		css = css + "background-color:#" + form.bkColor.value;
		var sp = document.getElementById("bkMsg");
		if(sp != null) {
			document.getElementById("bkColorField").removeChild(sp);
		}
		color = form.bkColor.value;
	} else {
		css = css + "background-color:#" + defaultBkColor;
		var sp = document.getElementById("bkMsg");
		if(sp == null) {
			var sp = document.createElement("span");
			sp.setAttribute("id", "bkMsg");
			sp.setAttribute("class", "error");
			sp.className = "error";
			sp.appendChild(document.createTextNode(" 颜色值格式错误，使用默认颜色值（FFFFFF）"));
			document.getElementById("bkColorField").appendChild(sp);
		}
		color = defaultBkColor;
	}
	document.getElementById("bkColorPreview").style.cssText="BORDER-RIGHT: 1px; BORDER-TOP: 1px; BORDER-LEFT: 1px; BORDER-BOTTOM: 1px; BACKGROUND-COLOR: #" + color;
	var width = getTableWidthInput(form);
	var sp = document.getElementById("widthMsg");
	if(sp != null) {
		document.getElementById("customWidthArea").removeChild(sp);
	}
	if(checkWidth(width)) {
		css = css + ";width:" + width + "px";
	} else {
		var sp = document.createElement("span");
		sp.setAttribute("id", "widthMsg");
		sp.setAttribute("class", "error");
		sp.className = "error";
		if(width == null || width == "") {
			sp.appendChild(document.createTextNode("请输入宽度"));
		} else {
			sp.appendChild(document.createTextNode("宽度格式错误"));
		}
		document.getElementById("customWidthArea").appendChild(sp);
	}
	return css;
}

function genImg() {
	var a = document.createElement("a");
	a.setAttribute("href", "http://www.yodao.com");
	a.setAttribute("target", "_blank");
	var img = document.createElement("img");
	img.setAttribute("src", "/resource/images/yodaologo[96,21].gif");
	img.setAttribute("border", "0");
	img.setAttribute("alt", "有道");
	img.setAttribute("align", "absmiddle");
        img.setAttribute("width", "70");
        img.setAttribute("height", "16");
	a.appendChild(img);
	return a;
}

function genSubmitButton(form) {
	var submit = document.createElement("input");
	submit.setAttribute("type", "submit");
	var value = "搜索";
	submit.setAttribute("value", value);
	submit.setAttribute("class", "buttoninput");
	submit.className = "buttoninput";
	return submit;
}

function genSelect(form, classname) {
	var select = document.createElement("select");
	select.setAttribute("name", "site");
	select.setAttribute("class", classname);
	select.className = classname;
	if(isScriptNeeded(form)) {
		select.onchange = function () {this.form.action=actions[this.selectedIndex];};
	}
	var defaultIndex = getDefaultIndex(form);
	var isFirst = true;
	for(i = 0; i < form.product.length; i++) {
		if(form.product[i].checked) {
			var option = document.createElement("option");
			var t = document.createTextNode(names[i]);
			if((i == webSiteIndex || i == blogSiteIndex) && form.domain.value != null) {
				var value = form.domain.value;
				if (value != "")
					option.setAttribute("value", value);
				else
					option.setAttribute("value", "");
			} else {
				option.setAttribute("value", "");
			}
			if(defaultIndex == i || (defaultIndex == -1 && isFirst)) {
				option.setAttribute("selected", "selected");
			}
			option.appendChild(t);
			select.appendChild(option);
			isFirst = false;
		}
	}
	return select;
}
// gen table with style 1
function genFormTable_0(form) {
	var table = document.createElement("table");
	table.setAttribute("border", 0);
	table.setAttribute("cellpadding", 0);
	table.setAttribute("cellspacing", 0);
	table.setAttribute("class", "toolsearchtemp");
	table.className = "toolsearchtemp";
	table.setAttribute("align", "center");
	var cssText = genTableStyle(form);
	table.setAttribute("style", cssText);
	table.style.cssText = cssText;
	
	var tbody = document.createElement("tbody");
	
	var tr_1 = document.createElement("tr");
	var td_1 = document.createElement("td");
	td_1.setAttribute("class", "templogo");
	td_1.className = "templogo";
	var img = genImg();
	td_1.appendChild(img);
	tr_1.appendChild(td_1);
	tbody.appendChild(tr_1);
	
	var tr_2 = document.createElement("tr");
	var td_2 = document.createElement("td");
	td_2.setAttribute("nowrap", "");
	td_2.setAttribute("align", "center");
	td_2.setAttribute("class", "allinput");
	td_2.className = "allinput";
	var input = document.createElement("input");
	input.setAttribute("type", "text");
	input.setAttribute("name", "q");
	input.setAttribute("class", "tempinput");
	input.className = "tempinput";
	var inputCssText; 
	if(getCheckedNum(form.product) > 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 140, 148);
	} else if(getCheckedNum(form.product) == 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 60, 228);
	}
	input.setAttribute("style", inputCssText);
	input.style.cssText = inputCssText;
	td_2.appendChild(input);
	if(getCheckedNum(form.product) > 1) {
		td_2.appendChild(document.createTextNode(" "));
		td_2.appendChild(genSelect(form, "tempselect"));
	} else if(form.product[webSiteIndex].checked || form.product[blogSiteIndex].checked) {
		var hidden = document.createElement("input");
		hidden.setAttribute("type", "hidden");
		hidden.setAttribute("name", "site");
		hidden.setAttribute("value", form.domain.value);
		td_2.appendChild(hidden);
	}
	var submit = genSubmitButton(form);
	td_2.appendChild(document.createTextNode(" "));
	td_2.appendChild(submit);
	tr_2.appendChild(td_2);
	tbody.appendChild(tr_2);
	
	table.appendChild(tbody);
	
	return table;
}

// gen table with style 2
function genFormTable_1(form) {
	var table = document.createElement("table");
	table.setAttribute("border", 0);
	table.setAttribute("cellpadding", 0);
	table.setAttribute("cellspacing", 0);
	table.setAttribute("class", "toolsearchtemp2");
	table.className = "toolsearchtemp2";
	table.setAttribute("align", "center");
	var cssText = genTableStyle(form);
	table.setAttribute("style", cssText);
	table.style.cssText = cssText;
	
	var tbody = document.createElement("tbody");
	
	var tr_1 = document.createElement("tr");
	var td_1 = document.createElement("td");
	td_1.setAttribute("nowrap", "");
	td_1.setAttribute("class", "allinput2");
	td_1.className = "allinput2";
	var img = genImg();
	td_1.appendChild(img);
	
	var input = document.createElement("input");
	input.setAttribute("type", "text");
	input.setAttribute("name", "q");
	input.setAttribute("class", "tempinput2");
	input.className = "tempinput2";
	var inputCssText;
	if(getCheckedNum(form.product) > 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 210, 148);
	} else if(getCheckedNum(form.product) == 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 130, 228);
	}
	input.setAttribute("style", inputCssText);
	input.style.cssText = inputCssText;
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(input);
	if(getCheckedNum(form.product) > 1) {
		td_1.appendChild(document.createTextNode(" "));
		td_1.appendChild(genSelect(form, "tempselect"));
	} else if(form.product[webSiteIndex].checked || form.product[blogSiteIndex].checked) {
		var hidden = document.createElement("input");
		hidden.setAttribute("type", "hidden");
		hidden.setAttribute("name", "site");
		hidden.setAttribute("value", form.domain.value);
		td_1.appendChild(hidden);
	}
	var submit = genSubmitButton(form);
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(submit);
	tr_1.appendChild(td_1);
	tbody.appendChild(tr_1);
	
	table.appendChild(tbody);
	
	return table;
}

function genRadio(form, classname) {
	var defaultIndex = getDefaultIndex(form);
	var isFirst = true;
	var tr = document.createElement("tr");
	var td = document.createElement("td");
	td.setAttribute("class", classname);
	td.className = classname;
	
	for(i = 0; i < form.product.length; i++) {
		if(form.product[i].checked) {
			var radio = null;
			try {
				if(defaultIndex == i || (defaultIndex == -1 && isFirst)) {
					radio = document.createElement("<input name=site checked=checked>");
				} else {
					radio = document.createElement("<input name=site>");
				}
				radio.setAttribute("type", "radio");
			} catch (f) {
				radio = document.createElement("input");
				radio.setAttribute("name", "site");
				radio.setAttribute("type", "radio");
				if(defaultIndex == i || (defaultIndex == -1 && isFirst)) {
					radio.setAttribute("checked", "checked");
				}
			}
			if((i == webSiteIndex || i == blogSiteIndex) && form.domain.value != null && form.domain.value != "") {
				radio.setAttribute("value", form.domain.value);
			} else {
				radio.setAttribute("value", "");
			}
			if(i == webSiteIndex || i == webIndex) {
				radio.onclick = function () {this.form.action="http://www.yodao.com/search";};
			} else if(i == blogSiteIndex || i == blogIndex) {
				radio.onclick = function () {this.form.action="http://blog.yodao.com/search";};
			} else if(i == dictIndex) {
				radio.onclick = function () {this.form.action="http://dict.yodao.com/search";};
			} else if(i == imageIndex) {
				radio.onclick = function () {this.form.action="http://image.yodao.com/search";};
			}
			
			var t = document.createTextNode(names[i]);
			td.appendChild(radio);
			td.appendChild(t);
			isFirst = false;
		}
	}
	tr.appendChild(td);
	return tr;
}
// gen table with style 3
function genFormTable_2(form) {
	var table = document.createElement("table");
	table.setAttribute("border", 0);
	table.setAttribute("cellpadding", 0);
	table.setAttribute("cellspacing", 0);
	table.setAttribute("class", "toolsearchtemp3");
	table.className = "toolsearchtemp3";
	table.setAttribute("align", "center");
	var cssText = genTableStyle(form);
	table.setAttribute("style", cssText);
	table.style.cssText = cssText;
	
	var tbody = document.createElement("tbody");
	
	var tr_1 = document.createElement("tr");
	var td_1 = document.createElement("td");
	td_1.setAttribute("class", "templogo");
	td_1.className = "templogo";
	var img = genImg();
	td_1.appendChild(img);
	tr_1.appendChild(td_1);
	tbody.appendChild(tr_1);
	
	var tr_2 = document.createElement("tr");
	var td_2 = document.createElement("td");
	td_2.setAttribute("nowrap", "");
	td_2.setAttribute("align", "center");
	td_2.setAttribute("class", "allinput3");
	td_2.className = "allinput3";
	var input = document.createElement("input");
	input.setAttribute("type", "text");
	input.setAttribute("name", "q");
	input.setAttribute("class", "tempinput3");
	input.className = "tempinput3";
	var inputCssText = "width:" + getTextFieldWidth(form, 65, 300);
	input.setAttribute("style", inputCssText);
	input.style.cssText = inputCssText;
	td_2.appendChild(input);
	td_2.appendChild(document.createTextNode(" "));
	var submit = genSubmitButton(form);
	td_2.appendChild(submit);
	tr_2.appendChild(td_2);
	tbody.appendChild(tr_2);
	
	if(getCheckedNum(form.product) > 1) {
		tbody.appendChild(genRadio(form, "temp3radio"));
	} else if(form.product[webSiteIndex].checked || form.product[blogSiteIndex]) {
		var hidden = document.createElement("input");
		hidden.setAttribute("type", "hidden");
		hidden.setAttribute("name", "site");
		hidden.setAttribute("value", form.domain.value);
		tbody.appendChild(hidden);
	}
	table.appendChild(tbody);
	return table;
}

//gen table with style 4
function genFormTable_3(form) {
	var table = document.createElement("table");
	table.setAttribute("border", 0);
	table.setAttribute("cellpadding", 0);
	table.setAttribute("cellspacing", 0);
	table.setAttribute("class", "toolsearchtemp4");
	table.className = "toolsearchtemp4";
	table.setAttribute("align", "center");
	var cssText = genTableStyle(form);
	table.setAttribute("style", cssText);
	table.style.cssText = cssText;
	
	var tbody = document.createElement("tbody");
	
	var tr_1 = document.createElement("tr");
	var td_1 = document.createElement("td");
	td_1.setAttribute("nowrap", "");
	td_1.setAttribute("class", "allinput4");
	td_1.className = "allinput4";
	var img = genImg();
	td_1.appendChild(img);
	
	var input = document.createElement("input");
	input.setAttribute("type", "text");
	input.setAttribute("name", "q");
	input.setAttribute("class", "tempinput4");
	input.className = "tempinput4";
	var inputCssText = "width:" + getTextFieldWidth(form, 135, 300);
	input.setAttribute("style", inputCssText);
	input.style.cssText = inputCssText;
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(input);
	var submit = genSubmitButton(form);
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(submit);
	tr_1.appendChild(td_1);
	tbody.appendChild(tr_1);
	
	if(getCheckedNum(form.product) > 1) {
		tbody.appendChild(genRadio(form, "temp4radio"));
	} else if(form.product[webSiteIndex].checked || form.product[blogSiteIndex]) {
		var hidden = document.createElement("input");
		hidden.setAttribute("type", "hidden");
		hidden.setAttribute("name", "site");
		hidden.setAttribute("value", form.domain.value);
		tbody.appendChild(hidden);
	}
	table.appendChild(tbody);
	
	return table;
}

function genFormTable_4(form) {
	var table = document.createElement("table");
	table.setAttribute("border", 0);
	table.setAttribute("cellpadding", 0);
	table.setAttribute("cellspacing", 0);
	table.setAttribute("class", "toolsearchtemp5");
	table.className = "toolsearchtemp5";
	table.setAttribute("align", "center");
	var cssText = genTableStyle(form);
	table.setAttribute("style", cssText);
	table.style.cssText = cssText;
	
	var tbody = document.createElement("tbody");
	
	var tr_1 = document.createElement("tr");
	var td_1 = document.createElement("td");
	td_1.setAttribute("nowrap", "");
	td_1.setAttribute("class", "allinput5");
	td_1.className = "allinput5";
	
	var input = document.createElement("input");
	input.setAttribute("type", "text");
	input.setAttribute("name", "q");
	input.setAttribute("class", "tempinput5");
	input.className = "tempinput5";
	var inputCssText;
	if(getCheckedNum(form.product) > 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 145, 77);
	} else if(getCheckedNum(form.product) == 1) {
		inputCssText = "width:" + getTextFieldWidth(form, 65, 157);
	}
	input.setAttribute("style", inputCssText);
	input.style.cssText = inputCssText;
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(input);
	if(getCheckedNum(form.product) > 1) {
		td_1.appendChild(document.createTextNode(" "));
		td_1.appendChild(genSelect(form, "tempselect"));
	} else if(form.product[webSiteIndex].checked || form.product[blogSiteIndex].checked) {
		var hidden = document.createElement("input");
		hidden.setAttribute("type", "hidden");
		hidden.setAttribute("name", "site");
		hidden.setAttribute("value", form.domain.value);
		td_1.appendChild(hidden);
	}
	var submit = genSubmitButton(form);
	td_1.appendChild(document.createTextNode(" "));
	td_1.appendChild(submit);
	tr_1.appendChild(td_1);
	tbody.appendChild(tr_1);
	
	table.appendChild(tbody);
	
	return table;
}

function createColorBoard() {
var red = new Array("00", "33", "66", "99", "cc", "ff");
var green = new Array("00", "33", "66", "99", "cc", "ff");
var blue = new Array("00", "33", "66", "99", "cc", "ff");

var total = 0;

var table = document.createElement("table");
table.setAttribute("border", "0");

var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for(i = 0; i < red.length; i++) {
	for(j = 0; j < green.length; j++) {
		for(k = 0; k < blue.length; k++) {
			total++;
			var td = document.createElement("td");
			var div = document.createElement("div");
			var color = "" + red[i] + green[j] + blue[k];
			div.value = color;
			div.style.cssText = "background-color: #" + color + ";width:10px;height:10px;display:block";
			div.appendChild(document.createTextNode(" "));
			div.onclick = function () {
				var form = document.getElementById("optionForm");
				if(currentColorBoardFor == "borderColorPreview")
					form.borderColor.value = this.value;
				else {
					form.bkColor.value = this.value;
				}
				updatePreview(form);
				document.getElementById("colorBoard").style.display = "none";
			}
			div.onmouseover = function() {document.getElementById("colorText").innerHTML = "#" + this.value;}
			td.appendChild(div);
			tr.appendChild(td);
			if((total % 18) == 0) {
				tbody.appendChild(tr);
				tr = document.createElement("tr");
			}
		}
	}
}
table.appendChild(tbody);
document.getElementById("colorBoardPos").appendChild(table);
}

var currentColorBoardFor;
function showColorBoard(name) {
	var colorBoard = document.getElementById("colorBoard");
	currentColorBoardFor = name;
	var pos = getAbsolutePos(document.getElementById(name));
	colorBoard.style.cssText = "display:block;position:absolute;left:" + (pos.x + 8) + ";top:" + (pos.y + 8);
}

function showReadme() {
	var pos = getAbsolutePos(document.getElementById("readme"));
	var readme = document.getElementById("codestylereadme");
	readme.style.left = (pos.x + 40) + "px";
	readme.style.top = (pos.y + 5) + "px";
	readme.style.display = "block";
	
}

// get the absolute position of an element
function getAbsolutePos(e)
{
	var l=e.offsetLeft;
	var t=e.offsetTop;
	while(e=e.offsetParent)
	{
		l+=e.offsetLeft;
		t+=e.offsetTop;
	}
	var pos = new Object();
	pos.x=l;
	pos.y=t;
	return pos;
}

// copy to clipboard
function copyToCb() {
	var value;
	if(document.getElementById("iframeCodeStyle").checked) {
		value = document.getElementById('iframecodearea').value;
	} else {
		value = document.getElementById('formcodearea').value;
	}
	window.clipboardData.setData('Text',value);
	alert('复制成功');
}