Code

/*
A pawn is described by an image. The alt-attribute describes the pawn
A square is a td. The square id is the td's id (a1..h8)
A move is a click and a new click
*/

// moving pawn
var selectedImage=null;
var moves=new Array();

// add an evenhandler (to a pawn)
function addEventSimple(obj,evt,fn) 
{
if (obj.addEventListener)
    obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
    obj.attachEvent('on'+evt,fn);
    //true:capture / false:bubble
}
function removeEventSimple(obj,evt,fn) 
{
if (obj.removeEventListener)
    obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
    obj.detachEvent('on'+evt,fn);
    //true:capture / false:bubble
}
// idenitify all pawns (className="movable")
// and give them a click-event handler
function init()
{
    var taglist=document.getElementsByTagName('*');
    for(ix=0;ix<taglist.length;ix++)
    {
         if(taglist[ix].className=='movable')
         {
            addEventSimple(taglist[ix],'click',identify);
         }
    }
    //addEventSimple(document,'click',release);
}

// identify the pawn(image) we have clicked
function identify(e)
{
    // an event 
    if (!e) 
        var e = window.event;
    
    // what
    var what=e.type;
    
    // where
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    if(selectedImage==null && targ.alt!='no')
    {
        selectedImage=targ;
        // will set homemade cursor
        document.getElementById('board').className="boardmove";
        // mark the pawn(image) selected
        selectedImage.className="moving";
    }
    else if(selectedImage!=null)
    {
        // this is a second click, place the pawn
        document.getElementById('board').className="normal";
        // unmark it
        selectedImage.className="movable";
        // move if it is legal, construct to be same as loaded moves
        // mover,pawn,from,to
        var theMove=new move(selectedImage.alt.charAt(0),
                             selectedImage.alt.substring(1),
                             selectedImage.parentNode.id,
                             targ.parentNode.id);
        if(canMove(theMove))
        {
            // note the move
            moves[moves.length]= theMove;
            // perform the move
            doMove(theMove);
            // dump last move
            document.getElementById('show').innerHTML=theMove.dumpLine();
            // write moves as a list
            writeMoves(moves,document.getElementById('moves'))                
        }
        
        selectedImage=null;
    }
    // dont pass this click on
    e.cancelBubble = true;
    if (e.stopPropagation) 
        e.stopPropagation();
}

// perform an actual move
function doMove(theMove)
{
    fromImage=theMove.fromIm;
    toImage=theMove.toIm;
    toHolder=toImage.parentNode;
    fromHolder=fromImage.parentNode;
    
    toHolder.removeChild(toImage);
    fromHolder.removeChild(fromImage);        
    
    toHolder.appendChild(fromImage);
    //always leave an empty clickable square
    // must be clickable so we can catch a second (place it here) click
    fromHolder.innerHTML='<img class="movable" src="no_piece.gif" alt="no">';
    addEventSimple(fromHolder.firstChild,'click',identify);
    // take off board if something was there
    if(toImage.alt.charAt(0)!='n')
        document.getElementById('removed').appendChild(toImage);
}