var statuscode = '';
var code = new Array();
var brushid = 1;
var status_icon = '';
var item = '';

var iconcode = new Array();
iconcode[1] = "X(";
iconcode[2] = ":D";
iconcode[3] = ':">';
iconcode[4] = ":-/";
iconcode[5] = "B-)";
iconcode[6] = ">:)";
iconcode[7] = ":)";
iconcode[8] = ":-*";
iconcode[9] = ":))";
iconcode[10] = ":|";
iconcode[11] = ":(";
iconcode[12] = ":-&";
iconcode[13] = ":->";
iconcode[14] = ":-O";
iconcode[15] = ":-?";
iconcode[16] = ":P";
iconcode[17] = ":((";
iconcode[18] = ";)";
iconcode[19] = ":-S";
iconcode[20] = "(:|";
iconcode[21] = "...";
iconcode[22] = "__";
iconcode[23] = "**";
iconcode[24] = "#";

function writecode()
{
	statuscode = '';
	for (i=1; i<=95; i++)
	{
		statuscode += code[i];
	}
	document.getElementById('statuscode').value = statuscode;
	document.getElementById('nchar').innerHTML = statuscode.length;
}

function select_brush(iconid)
{
	brushid = iconid;
	preview = '';
	if (brushid > 20)
	{
		preview = iconcode[brushid];
	}
	else
	{
		preview = "<img src='sttemo/emo/"+brushid+".png' border='0' />";
	}
	document.getElementById('currentbrush').innerHTML = preview;
}

function changeicon(iconid,type)
{
	code[iconid] = iconcode[brushid];
	item = '';
	if (brushid > 20)
	{
		item = iconcode[brushid];
	}
	else
	{
		item = "<img src='sttemo/emo/"+brushid+".png' border='0' />";
	}
	document.getElementById('icon_'+iconid).innerHTML = item;
	writecode();
}

function writebg(iconid)
{
	status_icon = "<table border='0' cellpadding='0' cellspacing='1'><tr>";
	if (iconid > 20)
	{
		item = iconcode[iconid];
	}
	else
	{
		item = "<img src='sttemo/emo/"+iconid+".png' border='0'>";
	}
	
	for (i=1; i<=95; i++)
	{
		code[i] = iconcode[iconid];
		status_icon += "<td class='smallfont' onmouseover=\"this.style.background = 'orange';\" onmouseout=\"this.style.background = '';\" align='center' style='width: 12px; height: 12px; cursor: pointer;' id='icon_"+i+"' onclick='changeicon("+i+");'>"+item+"</td>";
		if (i % 19 == 0)
		{
			status_icon += "</tr><tr>";
		}
	}
	status_icon += "</tr></table>";
	document.getElementById('status').innerHTML = status_icon;
	writecode();
}

var brush_icon = "<table border='0' cellpadding='3' cellspacing='0'><tr>";
var background_icon = "<table border='0' cellpadding='3' cellspacing='0'><tr>";
for (i=1; i<=20; i++)
{
	brush_icon += "<td><img style='cursor: pointer;' onclick='select_brush("+i+");' src='sttemo/emo/"+i+".png' border='0' /></td>";
	background_icon += "<td><img style='cursor: pointer;' onclick='writebg("+i+");' src='sttemo/emo/"+i+".png' border='0' /></td>";
	if (i == 10)
	{
		brush_icon += "</tr><tr>";
		background_icon += "</tr><tr>";
	}
}
brush_icon += "</tr></table>";
background_icon += "</tr></table>";
document.getElementById('brush_icon').innerHTML = brush_icon;
document.getElementById('background_icon').innerHTML = background_icon;

writebg(7);
select_brush(brushid);