InitCrossword();



function InitCrossword()
{

if (document.getElementById)
{
  WriteCSS();
  Render();
}

DrawImage();

}

function WriteCSS()
{
document.write('<style media="screen">',
'#grid { position: relative; height: ' + (sizeY*sizeA) + 'px; width: ' + (sizeX*sizeA) + 'px; float: ' + gridfloat + '; margin: ' + gridmargin + '; }',
'#grid .cw { position: absolute; width: ' + sizeA + 'px; height: ' + sizeA + 'px; background-color: ' + gridcolor + '; margin: 0px; padding: 0px; }',
'#grid .cw span { position: absolute; left: 1px; top: 1px; margin: 0px; border: 0px; padding: 0px; background-color: transparent; color: ' + cluecolor + '; font-family: Arial, sans-serif; font-size: ' + cluesize + '; z-index: 2; }',
'#grid .cw input { position: absolute; left: 1px; top: 1px; width: ' + (sizeA-1) + 'px; height: ' + (sizeA-1) + 'px; margin: 0px; border: 0px; padding: 0px; font-size: ' + pensize + '; font-family: Architect, \'Comic Sans MS\', Arial, sans-serif; line-height: ' + (sizeA-3) + 'px; color: ' + pencolor + '; background-color: ' + gridbgcolor + '; text-align: center; text-transform: uppercase; z-index: 1; }',
'.crosswordimage { visibility: hidden; height: 0px; width: 0px; )',
'</style>',
'<style media="print">',
'#grid { position: absolute; visibility: hidden; height: 0px; width: 0px;}',
'#grid .cw {position: absolute;  visibility: hidden; height: 0px; width: 0px; }',
'#grid .cw span { position: absolute; visibility: hidden; height: 0px; width: 0px; }',
'#grid .cw input { position: absolute; visibility: hidden; height: 0px; width: 0px; }',
'.gridimage { float: ' + gridfloat + '; }',
'</style>')
}


function Render()
{

posXroot = 0;
posYroot = 0;
posY = posYroot;
clue = 1;
document.write ('<div id="grid">');

for(y=0;y<(sizeY);y++)
 {
  posX = posXroot;
  for(x=0;x<(sizeX);x++) 
   {
  	cellid = y + '_' + x;
   	addin = "";
	if (x==(sizeX-1))
     {
	  addin = (addin + "width: " + (sizeA+1) + "px; ");
	 }
	if (y==(sizeY-1))
	 {
	  addin = (addin + "height: " + (sizeA+1) + "px; ");
	 }
	styler = ('style="top: ' + posY + 'px; left: ' + posX + 'px; ' + addin + '"');
    type=(row[y][x]);
    if (type==2) 
     {
      document.write ('<div class="cw" '+styler+'><span>'+clue+'</span><input name="' + cellid + '" id="' + cellid + '" type="text" onclick="this.value=\'\'" onkeyup="this.blur(); movenext('+x+','+y+');" maxlength="1" /></div>');
	  clue++;
     }
    else if (type==1) 
     {
      document.write ('<div class="cw" ' + styler + '><input name="' + cellid + '" id="' + cellid + '" type="text" onclick="this.value=\'\'" onkeyup="this.blur(); movenext('+x+','+y+');" maxlength="1" /></div>');
     }
    else
     {
	  document.write ('<div class="cw" ' + styler + '></div>');
     }
    posX=(posX+sizeA);
   }
  posY=(posY+sizeA);
 } 
document.write ('</div>');
}

function movenext(x,y)
{

testX = eval ("document.getElementById('" + (y + '_' + (x+1)) + "')");
testY = eval ("document.getElementById('" + ((y+1) + '_' + x) + "')");

if (testX)
 {
  testX.focus();
 }
else if (testY)
 {
  testY.focus();
 }

}

function DrawImage()

{
document.write('<img class="crosswordimage" src="' + gridimage + '" alt="Crossword Puzzle" style="float: ' + gridfloat + ';" />');
}