<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>test_js</title>
<script language="javascript">
var mouseDown = false;
var lastRequestId = 1;
var picWidth = 50;
var picHeight = 50;
var picSize = 5;
var colors = Array( "000000", "ffffff", "808080", "c0c0c0", "800000", "ff0000", "808000", "ffff00", "008000", "00ff00", "008080", "00ffff", "000080", "0000ff",
"800080", "ff00ff", "808040", "ffff80", "004040", "00ff80", "0080ff", "80ffff", "004080", "8080ff", "8000ff", "ff0080", "804000", "ff8040");
var curColor;
function MouseDown()
{
mouseDown = true;
}
function MouseUp()
{
mouseDown = false;
}
function ColorIt(x, y)
{
if(mouseDown == true)
{
var pixelObj = document.getElementById("c_" + x + "_" + y);
if(pixelObj.style.backgroundColor != "#" + curColor)
{
var requestObject = null;
try
{
requestObject = new XMLHttpRequest();
}
catch(w3c)
{
try
{
requestObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(msie)
{
try
{
requestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(notSupported)
{
alert("I am sorry, but sending data to the server will not be possible, as your browser does not support AJAX");
}
}
}
if(requestObject != null)
{
try
{
requestObject.open("GET", "/setcolor.html?sid=<!--#SID#-->&x=" + x + "&y=" + y + "&c=$" + curColor + "&w=" + picWidth + "&h=" + picHeight, true);
requestObject.send(null);
}
catch(a) {}
}
pixelObj.style.backgroundColor = "#" + curColor;
lastRequestId++;
}
}
}
function SetColorById(id)
{
SetColor(colors[id]);
document.getElementById("color_value").value = colors[id];
}
function SetColorByUserValue()
{
var inputVal = document.getElementById("color_value").value;
if(inputVal.length == 6)
SetColor(document.getElementById("color_value").value);
}
function SetColor(color)
{
curColor = color;
document.getElementById("current_color").style.backgroundColor = "#" + color;
}
function WriteCode()
{
for(var a = 0; a < colors.length; a++)
{
document.write("<span id=\"color_" + a + "\" style=\"border-style:solid; border-width:1px; border-color: black; position:absolute; left:" + (a%2 == 0 ? 5 : 30) + "px; top:" + (5 + Math.floor(a / 2) * 25) + "px; width:20px; height:20px; background-color:#" + colors[a] + ";\" onclick=\"SetColorById(" + a + ")\"></span>");
}
document.write("<span id=\"current_color\" style=\"border-style:solid; border-width:1px; border-color: black; position:absolute; left:5px; top:" + (5 + Math.ceil(colors.length / 2) * 25) + "px; width:45px; height:20px;\"></span>");
document.write("<span style=\"position:absolute; left:2px; top:" + (30 + Math.ceil(colors.length / 2) * 25) + "px;\"><b>#</b><input type=\"text\" id=\"color_value\" maxlength=\"6\" size=\"6\" onkeyup=\"SetColorByUserValue();\"/></span>");
document.write("<span style=\"border-style:solid; border-width:2px; border-color:black; position:absolute; left:55px; top:5px; width:" + (picWidth * picSize) + "px; height: " + (picHeight * picSize) + "px;\">");
for(var y = 0; y < picHeight; y++)
{
for(var x = 0; x < picWidth; x++)
{
document.write("<span id=\"c_" + x + "_" + y + "\" style=\"position:absolute; width:5px; height:5px; background-color:white; left:" + x * picSize + "px; top:" + y * picSize + "px;\" onmousemove=\"ColorIt(" + x + "," + y + ");\" onmousedown=\"MouseDown();ColorIt(" + x + "," + y + ");\" onmouseup=\"MouseUp();\" ></span>");
}
}
document.write("<span style=\"position:absolute; left:5px; top:" + (picHeight * 5 + 5) + "px;\"><strong>Download image as ..<br> <a href=\"/image.bmp?sid=<!--#SID#-->\">[BMP]</a> <a href=\"/image.jpg?sid=<!--#SID#-->\">[JPG]</a> <a href=\"/image.png?sid=<!--#SID#-->\">[PNG]</a></strong></span>");
SetColorById(0);
}
</script>
</head>
<body onmouseup="MouseUp();">
<script language="javascript">
WriteCode();
</script>
</span>
</body>
</html>