function isnumeric(sText)
{
ValidChars="0123456789"
IsNumber=true
 
for (i=0; i<sText.length && IsNumber==true; i++) 
{ 
Char=sText.charAt(i); 
if (ValidChars.indexOf(Char)==-1) 
IsNumber=false
}
return IsNumber;
}

function add_html(txt)
{
document.getElementById("everything").innerHTML=document.getElementById("everything").innerHTML+txt
}

function evtdis()
{
btn=document.getElementById("btn")
w=document.getElementById("w").value
h=document.getElementById("h").value
if (w=="" || h=="" || w=="0" || h=="0" || isnumeric(w)==false || isnumeric(h)==false)
btn.disabled='disabled'
else
btn.disabled=''
}

function mcheck(wid)
{
if (document.getElementById("clicked").innerHTML=="y")
document.getElementById(wid).style.backgroundColor="#ff00ff"
}

function load()
{

document.body.innerHTML=document.body.innerHTML+"<div id='evrthng' style='position:absolute; left:0;top:0;right:0;bottom:0' onmouseup='document.getElementById(\"clicked\").innerHTML=\"\"'><div id='everything' style='position:absolute; left:5px;top:5px;right:5px;bottom:5px'></div></div>"
add_html("<div id='clicked' style='display:none'></div><div style='font-family:arial; font-size:14px'><div style='font-size:40px'>SimpleDraw</div>Choose the size of the drawing box:<br />Width: <input type='text' maxlength='3' id='w' value='50' style='width:23px; height:14px' onkeyup='evtdis()' onblur='evtdis()' /> &nbsp;&nbsp; Height: <input type='text' maxlength='3' id='h' value='50' style='width:23px; height:14px' onkeyup='evtdis()' onblur='evtdis()' /> &nbsp;&nbsp; <button id='btn' type='button' onclick='loadbox()'>OK</button>")
}

function loadbox()
{
document.getElementById("btn").disabled='disabled'
w=document.getElementById("w").value
h=document.getElementById("h").value
add_html("<br /><div style='font-family:arial; font-size:14px'>Box size: "+w+"x"+h+"</div><br />")
document.getElementById("w").value=w
document.getElementById("h").value=h

add_html("<div id='drawingbox' style='font-family:arial; font-size:20px' onmousedown='document.getElementById(\"clicked\").innerHTML=\"y\"' onmouseup='document.getElementById(\"clicked\").innerHTML=\"\"'>Loading...</div>")
pxs=""
for (a=0; a<h*1; a++) 
{
for (b=0; b<w*1; b++) 
{
pxs=pxs+"<div style='float:left; width:1px; height:1px; background-color:#000000' id='"+a+"x"+b+"' onmouseover='mcheck(\""+a+"x"+b+"\")'></div>"
}
pxs=pxs+"<div style='width:0; height:1px'></div>"
}
document.getElementById("drawingbox").innerHTML=pxs
}