var req;
var g_painted = "";
var g_timeout = 0;
var g_delay = 10 * 1000;
var g_canvas = new Array();
var g_busyPainting = false;

function init()
{
    clearCanvasArr();
    clearCanvas();
    handleUpdate();
}

function c(x, y) // click
{
    if (!g_busyPainting)
    {
        var elm = document.getElementById("p" + x + "_" + y);
        var newCol = (elm.style.backgroundColor == "black") ? "white" : "black";
    
        var newColNum = (newCol == "black") ? 0 : 1;
        var borderCol = (newCol == "black") ? "black" : "#eee";
        elm.style.backgroundColor = newCol;
        elm.style.borderColor = borderCol;
        g_canvas[y*100+x] = newColNum;
    
        if (g_painted != "") { g_painted += "|"; }
        g_painted += x + "_" + y + "_" + newColNum;
    }
}

function paintPixel(x, y, newCol)
{
    newCol = (newCol == 0 || newCol == "0") ? 0 : 1;

    var elm = document.getElementById("p" + x + "_" + y);
    g_canvas[y*100+x] = newCol;
    newCol = (newCol == 0) ? "black" : "white";
    var borderCol = (newCol == "black") ? "black" : "#eee";
    elm.style.backgroundColor = newCol;
    elm.style.borderColor = borderCol;
}

function handleUpdate()
{
    g_timeout = 0;
    var url = "process.php5?p=" + escape(g_painted) + getCachePrevent();
    g_painted = "";
    if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }
    else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }
    req.onreadystatechange = didHandleUpdate;
    req.open("GET", url, true);
    req.send(null);
}

function didHandleUpdate()
{
    g_busyPainting = true;

    if (req.readyState == 4)
    {
        if (req.status == 200)
        {
            var d = req.responseXML.getElementsByTagName("p");
            if (d.length > 0)
            {
                var x = 0;
                var y = 0;
                var canvasNew = new Array();

                for (y = 1; y <= 40; y++) {
                    for (x = 1; x <= 60; x++) {
                        canvasNew[y*100+x] = 1;
                    }
                }

                for (var n = 0; n < d.length; n++) {
                    x = d[n].getAttribute("x") * 1;
                    y = d[n].getAttribute("y") * 1;
                    canvasNew[y*100+x] = 0;
                }

                for (y = 1; y <= 40; y++) {
                    for (x = 1; x <= 60; x++) {

                        if (canvasNew[y*100+x] != g_canvas[y*100+x]) {
                            paintPixel(x, y, canvasNew[y*100+x]);
                        }
                    }
                }

                paintJustPainted();

                g_timeout = setTimeout( "handleUpdate()", g_delay );
            }
        }
    }
    g_busyPainting = false;
}

function paintJustPainted()
{
    if (g_painted != "")
    {
        var arrPainted = g_painted.split("|");
        var i;
        for (i = 0; i < arrPainted.length; i++)
        {
            var s;
            s = arrPainted[i];
            var arrXYCol = s.split("_");
            // alert("x=" + arrXYCol[0] + " y=" + arrXYCol[1] + " col=" + arrXYCol[2]);
            paintPixel(arrXYCol[0], arrXYCol[1], arrXYCol[2]);
        }
    }
}

function clearCanvas()
{
    for (y = 1; y <= 40; y++) {
        for (x = 1; x <= 60; x++) {
            paintPixel(x, y, 1);
        }
    }
}

function clearCanvasArr()
{
    for (y = 1; y <= 40; y++) {
        for (x = 1; x <= 60; x++) {
            g_canvas[y*100+x] = 1;
        }
    }
}

function getCachePrevent()
{
    return "&rand=" + escape( Math.round( Math.random() * 100000 ) );
}