<html>
<head>
<style>
a.move {color: black; text-decoration: none;}
html {height: 100%;}
body {height: 100%; margin: 0px; padding: 0px;}
</style>
<script language="javascript" type="text/javascript">

//image data
var pieces = new Array("", "wp", "wn", "wb", "wr", "wq", "wk", "bp", "bn", "bb", "br", "bq", "bk");

ws = new Image();
ws.src = "<pieces/>/ws.png";
wpws = new Image();
wpws.src = "<pieces/>/wpws.png";
wnws = new Image();
wnws.src = "<pieces/>/wnws.png";
wbws = new Image();
wbws.src = "<pieces/>/wbws.png";
wrws = new Image();
wrws.src = "<pieces/>/wrws.png";
wqws = new Image();
wqws.src = "<pieces/>/wqws.png";
wkws = new Image();
wkws.src = "<pieces/>/wkws.png";
bpws = new Image();
bpws.src = "<pieces/>/bpws.png";
bnws = new Image();
bnws.src = "<pieces/>/bnws.png";
bbws = new Image();
bbws.src = "<pieces/>/bbws.png";
brws = new Image();
brws.src = "<pieces/>/brws.png";
bqws = new Image();
bqws.src = "<pieces/>/bqws.png";
bkws = new Image();
bkws.src = "<pieces/>/bkws.png";
bs = new Image();
bs.src = "<pieces/>/bs.png";
wpbs = new Image();
wpbs.src = "<pieces/>/wpbs.png";
wnbs = new Image();
wnbs.src = "<pieces/>/wnbs.png";
wbbs = new Image();
wbbs.src = "<pieces/>/wbbs.png";
wrbs = new Image();
wrbs.src = "<pieces/>/wrbs.png";
wqbs = new Image();
wqbs.src = "<pieces/>/wqbs.png";
wkbs = new Image();
wkbs.src = "<pieces/>/wkbs.png";
bpbs = new Image();
bpbs.src = "<pieces/>/bpbs.png";
bnbs = new Image();
bnbs.src = "<pieces/>/bnbs.png";
bbbs = new Image();
bbbs.src = "<pieces/>/bbbs.png";
brbs = new Image();
brbs.src = "<pieces/>/brbs.png";
bqbs = new Image();
bqbs.src = "<pieces/>/bqbs.png";
bkbs = new Image();
bkbs.src = "<pieces/>/bkbs.png";

//initial/current position
var variation = 0;
var move = 0;
var flipped = false;
var board = new Array(10,8,9,11,12,9,8,10,7,7,7,7,7,7,7,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,4,2,3,5,6,3,2,4);

//Start position, moves and variations
<initial/>
parents = new Array();
moves = new Array();
<moves/>

//initial timerID
var intervalID = -1;

function autoplay(interval)
{
  if(intervalID != -1)
  {
    clearInterval(intervalID);
  }

  if(interval != -1)
  {
    intervalID = setInterval("forward()", interval * 1000);
  }
}

function flip()
{
  var temp;
  for(square = 0; square < 32; square++)
  {
    temp = board[square];
    board[square] = board[63 - square];
    board[63 - square] = temp
  }
  flipped = ~flipped;
  update();  
}

function domove()
{
  var source = moves[variation][move * 4];
  var destination = moves[variation][move * 4 + 1];

  if(source < 0)
  {
    return;
  }

  if(flipped)
  {
    source = 63 - source;
    destination = 63 - destination;
  }

  board[destination] = board[source];
  board[source] = 0;

  if(moves[variation][move * 4 + 2] < -1)
  {
    board[destination] = - moves[variation][move * 4 + 2];
  }

  source = moves[variation][move * 4 + 2];
  destination = moves[variation][move * 4 + 3];

  if(flipped)
  {
    source = 63 - source;
    destination = 63 - destination;
  }

  if(source >= 0)
  {
    board[destination] = board[source];
    board[source] = 0;
  }

  move++;
}

function jumpto(target_variation, target_move)
{ 
  var route;
  unhighlight();
  reset();

  while(variation != target_variation)
  {
    route = target_variation;

    while(parents[route][0] != variation)
    {
      route = parents[route][0];
    }

    while(move != parents[route][1])
    {
      domove();
    }

    variation = route;
    move = 0;
  }

  while(move != target_move)
  {
    domove();
  }

  update();
}

function reset()
{
  variation = 0;
  move = 0;

  for(square = 0; square < 64; square++)
  {
    if(flipped)
    {
      board[square] = initial[63 - square];
    }
    else
    {
      board[square] = initial[square];
    }
  }
}

function unhighlight()
{
  if(move > 0)
  {
    document.getElementById("v" + variation + "m" + move).style.background = "white";
  }
}

function update()
{
  for(square = 0; square < 64; square++)
  {
    document.getElementById("s" + square).src = "<pieces/>/" + pieces[board[square]] + (((square % 8 + Math.floor(square / 8)) % 2) ? "bs" : "ws") + ".png";
  }

  if(move != 0)
  {
    document.getElementById("v" + variation + "m" + move).style.background = "silver";
  }
}

function first()
{
  unhighlight();
  reset();
  update();
}

function backward()
{
  if(move > 1)
  {
    jumpto(variation, move - 1);
  }
  else
  {
    if(parents[variation][0] == -1)
    {
      jumpto(0, 0);
    }
    else
    {
      jumpto(parents[variation][0], parents[variation][1]);
    }
  }
}

function forward()
{
  unhighlight();
  domove();
  update();
}

function last()
{
  unhighlight();
  while(moves[variation][move * 4] != -1)
  {
    domove();
  }
  update();
}

</script>
</head>
<body onLoad="reset(); update();">

<div style="float: left; height: 100%;">

<div style="padding: 8px; text-align: center;">

<gamelist/>

<p>
<div style="width: 256px;">

<img id="s0" src="<pieces/>/brws.png"><img id="s1" src="<pieces/>/bnbs.png"><img id="s2" src="<pieces/>/bbws.png"><img id="s3" src="<pieces/>/bqbs.png"><img id="s4" src="<pieces/>/bkws.png"><img id="s5" src="<pieces/>/bbbs.png"><img id="s6" src="<pieces/>/bnws.png"><img id="s7" src="<pieces/>/brbs.png"><br>

<img id="s8" src="<pieces/>/bpbs.png"><img id="s9" src="<pieces/>/bpws.png"><img id="s10" src="<pieces/>/bpbs.png"><img id="s11" src="<pieces/>/bpws.png"><img id="s12" src="<pieces/>/bpbs.png"><img id="s13" src="<pieces/>/bpws.png"><img id="s14" src="<pieces/>/bpbs.png"><img id="s15" src="<pieces/>/bpws.png"><br>

<img id="s16" src="<pieces/>/ws.png"><img id="s17" src="<pieces/>/bs.png"><img id="s18" src="<pieces/>/ws.png"><img id="s19" src="<pieces/>/bs.png"><img id="s20" src="<pieces/>/ws.png"><img id="s21" src="<pieces/>/bs.png"><img id="s22" src="<pieces/>/ws.png"><img id="s23" src="<pieces/>/bs.png"><br>

<img id="s24" src="<pieces/>/bs.png"><img id="s25" src="<pieces/>/ws.png"><img id="s26" src="<pieces/>/bs.png"><img id="s27" src="<pieces/>/ws.png"><img id="s28" src="<pieces/>/bs.png"><img id="s29" src="<pieces/>/ws.png"><img id="s30" src="<pieces/>/bs.png"><img id="s31" src="<pieces/>/ws.png"><br>

<img id="s32" src="<pieces/>/ws.png"><img id="s33" src="<pieces/>/bs.png"><img id="s34" src="<pieces/>/ws.png"><img id="s35" src="<pieces/>/bs.png"><img id="s36" src="<pieces/>/ws.png"><img id="s37" src="<pieces/>/bs.png"><img id="s38" src="<pieces/>/ws.png"><img id="s39" src="<pieces/>/bs.png"><br>

<img id="s40" src="<pieces/>/bs.png"><img id="s41" src="<pieces/>/ws.png"><img id="s42" src="<pieces/>/bs.png"><img id="s43" src="<pieces/>/ws.png"><img id="s44" src="<pieces/>/bs.png"><img id="s45" src="<pieces/>/ws.png"><img id="s46" src="<pieces/>/bs.png"><img id="s47" src="<pieces/>/ws.png"><br>

<img id="s48" src="<pieces/>/wpws.png"><img id="s49" src="<pieces/>/wpbs.png"><img id="s50" src="<pieces/>/wpws.png"><img id="s51" src="<pieces/>/wpbs.png"><img id="s52" src="<pieces/>/wpws.png"><img id="s53" src="<pieces/>/wpbs.png"><img id="s54" src="<pieces/>/wpws.png"><img id="s55" src="<pieces/>/wpbs.png"><br>

<img id="s56" src="<pieces/>/wrbs.png"><img id="s57" src="<pieces/>/wnws.png"><img id="s58" src="<pieces/>/wbbs.png"><img id="s59" src="<pieces/>/wqws.png"><img id="s60" src="<pieces/>/wkbs.png"><img id="s61" src="<pieces/>/wbws.png"><img id="s62" src="<pieces/>/wnbs.png"><img id="s63" src="<pieces/>/wrws.png"><br>

</div>

<p>
<input type="button" value=" |&lt; " onclick="first()">
<input type="button" value=" &lt; " onclick="backward()">
<input type="button" value=" &gt; " onclick="forward()">
<input type="button" value=" &gt;| " onclick="last()">

<p>Autoplay:
<select style="vertical-align: middle" name="autoplay" onchange="autoplay(this.value)">
<option value="-1">Off
<option value="1">1s
<option value="3">3s
<option value="5">5s
<option value="10">10s
<option value="30">30s
</select>
&nbsp;
<input style="vertical-align: middle" type="button" value="Flip board" onclick="flip()">

<p>
<small><credit/></small>

</div>

</div>

<div style="float right; height: 100%; overflow: auto;">

<div style="padding: 8px;"> 

<h2>
<white/>
-
<black/>
<date/>
</h2>
<h3>
<round/>
<event/>
<site/>
</h3>

<p>
<notation/>
<b>
<result/>
</b>

</div>

</div>

</body>
</html>