// Initialize a Global Object for all parameters

var boardVars=new Object();
boardVars.boardHoriz=3;
boardVars.boardVert=3;
boardVars.boardSize=boardVars.boardHoriz*boardVars.boardVert;
boardVars.boardValues=new Array(boardVars.boardSize*boardVars.boardSize);
boardVars.editing = -1;
boardVars.el = null;

// Detect W3C DOM Level 1 Compliance
var W3CDOM = ( document.getElementsByTagName && document.createElement );

// keyboard handler
document.onkeypress = keyEdit;

function keyEdit(event) {
  var key;
  if ( window.event && window.event.keyCode ) // IE
    event = window.event;
//    key = window.event.keyCode; alert('IE');
//  else
  key = event.keyCode ? event.keyCode : event.charCode;

  // if a number is pressed and a square is being edited, perform the edit.
  if ( isNum(key) && boardVars.editing != -1 ) {
    var num = Number( String.fromCharCode(key) )
    if ( num==0 ) num=''; // zero is blank

    clickEdit( num, boardVars.editing );
    clickSelection( boardVars.el );
  }
}

// draw the board and initialize the data structure holding the board values
window.onload = function initialize() {
  if ( W3CDOM ) {
    var boardContainer = document.getElementById('board');
    initializeBoard();
    createBoard(boardContainer);
  } else {
    document.write('Never execute.');
  }
}

// from a charCode, determine if a number was pressed
function isNum(i) {
  var n = Number( String.fromCharCode(i) );
  if ( n>=0 && n<=9 )
    return 1;
  return 0;
}

// initialize the board with a game (random numbers at this time)
function initializeBoard() {
  for ( var y=0; y<boardVars.boardSize; ++y ) {
    for ( var x=0; x<boardVars.boardSize; ++x ) {
      var i = Math.round( 30*Math.random() + 0.5 );
      if ( i>8 ) i='';
      boardVars.boardValues[boardVars.boardSize*y+x] = i;
    }
  }
}

// creates the game board using div and span elements
function createBoard(baseTable) {
  var boardSize = boardVars.boardSize;

  for ( var y=0; y<boardSize; ++y ) {
    var row = document.createElement('div');
    //row.setAttribute('class','row');
    row.className = 'row';
    for ( var x=0; x<boardSize; ++x ) {
      var col = document.createElement('div');
      //col.setAttribute('class','cell');
      col.className = 'cell';
      index = boardSize*y+x;
      createSelection(col, index);
      createValue( col, boardVars.boardValues[index] );
      createBorder( col, x, y );
      col.childNodes[0].style.display='none';
      compatibleEventAdd( col.childNodes[0], 'onclick', 'clickSelection(this)' );
      compatibleEventAdd( col.childNodes[1], 'onclick', 'clickValue( this,' + x + ',' + y + ')' );
      row.appendChild(col);
    }
    baseTable.appendChild(row);
  }
}

function compatibleEventAdd(el, ev, fn ) {
  if ( el.attachEvent ) {
    el[ev] = Function(fn);
  } else if ( el.setAttribute ) {
    el.setAttribute( ev, fn );
  }
}

// create the edit-box for each cell.  either the value-box or edit-box is displayed.
function createSelection(el, index) {
  var boardVert = boardVars.boardVert;
  var boardHoriz = boardVars.boardHoriz;

  var k = 1;
  var t = document.createElement('div');
  //t.setAttribute('class','selection');
  t.className = 'selection';
  for (var i=0; i<boardVert; ++i ) {
    var r = document.createElement('div');
    for (var j=0; j<boardHoriz; ++j ) {
      var d = document.createElement('span');
      d.appendChild( document.createTextNode( k ) );
      func = 'clickEdit(' + k + ',' + index + ');'
      compatibleEventAdd( d, 'onclick', func );
      r.appendChild(d);
      k++;
    }

    if ( k==boardVars.boardSize+1 ) { // add a blank selection
      var d = document.createElement('span');
      d.appendChild( document.createTextNode( '_' ) );
      func = 'clickEdit(' + '\'\'' + ',' + index + ');'
      compatibleEventAdd( d, 'onclick', func );
      r.appendChild(d);
    }
    t.appendChild(r);
  }
  el.appendChild(t);
}

// create the value-box for each cell.  either the value-box or edit-box is displayed.
function createValue(el,n) {
  var d = document.createElement('div');
  //d.setAttribute('class','value');
  d.className = 'value';
  d.appendChild( document.createTextNode(n) );
  el.appendChild(d);
}

//event handler for clicking a edit-box
function clickSelection(el) {
  boardVars.editing=-1; // no longer editing
  boardVars.el=null;
  el.parentNode.childNodes[0].style.display='none';
  el.parentNode.childNodes[1].style.display='block';
}

//event handler for clicking a value-box
function clickValue(el,x,y) {
  if ( boardVars.editing == -1 ) {
    boardVars.el=el; // stores cell being edited
    boardVars.editing = y * boardVars.boardSize + x; // stores index of cell being edited
    el.parentNode.childNodes[1].style.display='none';
    el.parentNode.childNodes[0].style.display='block';
  }
}

function createBorder(el,x,y) {
  var left,right,top,bottom;

  if ( y == 0 )
    top = 'thick ';
  else
    top = 'thin ';

  if ( y % boardVars.boardVert == boardVars.boardVert-1 )
    bottom = 'thick '; 
  else
    bottom = 'thin ';

  if ( x == 0 )
    left = 'thick';
  else
    left = 'thin';
 
  if ( x % boardVars.boardHoriz == boardVars.boardHoriz-1 )
    right = 'thick ';
  else
    right = 'thin ';

  el.style.borderWidth = top + right + bottom + left;

}

function clickEdit( editVal, index ) {
  xindex = index % boardVars.boardSize;
  yindex = ( index - xindex ) / boardVars.boardSize;
  boardVars.boardValues[index]=editVal;
  document.getElementById('board').childNodes[yindex].childNodes[xindex].childNodes[1].childNodes[0].nodeValue = editVal;

 }